Comment ajouter une ombre portée dans WordPress : 4 méthodes faciles

Lorsqu'une page semble plate, ce sont généralement les ombres qui manquent. Ajouter une ombre portée à vos cartes de fonctionnalités ou à vos boutons d'appel à l'action est l'une des corrections de conception les plus rapides que vous puissiez apporter dans WordPress.

Dans ce guide, je partagerai 4 méthodes faciles pour ajouter une ombre portée dans WordPress afin que vous puissiez mettre en évidence le contenu le plus important.

Pourquoi ajouter une ombre portée dans WordPress ?

Une ombre portée crée une subtile illusion de profondeur en imitant l'ombre qu'un objet projetterait, le faisant apparaître légèrement surélevé par rapport à l'arrière-plan. Cet effet d'ombre CSS peut changer radicalement la façon dont les visiteurs perçoivent votre contenu.

Nos cerveaux sont naturellement attirés par le contraste et la séparation, des principes ancrés dans la psychologie de la Gestalt. L'ajout d'une ombre portée crée une séparation visuelle entre les éléments, guidant instantanément les yeux de vos visiteurs vers les zones les plus importantes de votre site Web.

Cela signifie que les ombres portées peuvent réellement aider votre site Web à mieux fonctionner :

• Augmenter les conversions : Mettez en évidence les appels à l'action comme les boutons ou les formulaires pour encourager les clics et les conversions.
• Mettre l'accent sur les images : Faites ressortir les images de l'arrière-plan, attirant l'attention et améliorant leur impact.
• Améliorer l'expérience utilisateur : Créez une mise en page plus attrayante et organisée, rendant votre site Web plus facile et plus agréable à naviguer.

Ci-dessous, vous trouverez 4 méthodes faciles pour ajouter ces effets à votre site WordPress.

Méthode 1 : Ajouter une ombre portée dans WordPress à l'aide de SeedProd (le plus facile)

Maintenant que vous comprenez la puissance des ombres portées, créons-en une. Cette méthode est parfaite pour les apprenants visuels et tous ceux qui souhaitent une solution sans code. J'utiliserai SeedProd pour ajouter une ombre portée élégante en quelques clics.

SeedProd est le meilleur constructeur de sites Web WordPress, avec plus d'un million d'utilisateurs. Avec son constructeur visuel par glisser-déposer, vous pouvez créer des pages de destination et des sites Web à forte conversion et personnaliser chaque centimètre de votre conception sans écrire de code.

Vous pouvez également ajouter des ombres portées à n'importe quel élément de conception en cliquant et en pointant.

Pour commencer, installez et activez SeedProd sur votre site Web WordPress. Pour plus de détails, consultez notre guide sur comment installer SeedProd.

Remarque: La version gratuite de SeedProd a tout ce dont vous avez besoin pour ajouter des ombres portées dans WordPress. Cependant, j'utiliserai la version premium pour ce guide car elle dispose de modèles plus avancés.

Après avoir activé le plugin, accédez à SeedProd » Landing Pages depuis votre tableau de bord WordPress. Ensuite, cliquez sur le bouton Ajouter une nouvelle page de destination.

Ici, choisissez un design pré-fait et entièrement personnalisable pour votre page. Les modèles de SeedProd facilitent la recherche d'un look qui correspond à votre marque, et vous pouvez modifier chaque détail pour vous l'approprier.

Cliquez sur les filtres en haut pour parcourir, puis survolez un modèle et cliquez sur l'icône de coche pour le sélectionner.

Maintenant, vous pouvez entrer un nom pour votre page, et SeedProd définira automatiquement l'URL. Inclure des mots-clés pertinents pour la page dans l'URL est une bonne idée, car cela peut améliorer votre optimisation pour les moteurs de recherche WordPress.

Si vous ne souhaitez pas conserver l'URL générée, cliquez dans le champ « URL de la page » et tapez la vôtre.

Vous pouvez maintenant cliquer sur le bouton Enregistrer et commencer à modifier la page pour lancer votre design dans l'interface du constructeur de pages.

Le constructeur par glisser-déposer de SeedProd affiche un aperçu en direct de votre design sur la droite. Sur le côté gauche, il y a un panneau avec des blocs que vous pouvez faire glisser sur la page.

Lorsque vous trouvez un bloc que vous souhaitez ajouter, cliquez, faites-le glisser et déposez-le sur l'aperçu en direct. Ensuite, vous pouvez sélectionner le bloc pour personnaliser son apparence et ses paramètres.

Par exemple, cliquer sur le bloc Titre vous permet d'entrer votre propre texte et de modifier la taille de la police, la couleur et l'alignement.

Vous pouvez également déplacer des blocs sur la page en les faisant glisser. Pour des instructions détaillées, veuillez consulter notre guide sur comment créer une page de destination dans WordPress.

Si vous souhaitez ajouter une ombre portée à un bloc, vous devrez cliquer sur l'onglet Avancé dans les paramètres de ce bloc.

Dans cet exemple, je veux ajouter une ombre portée à chaque boîte de fonctionnalité. Je vais donc cliquer sur les paramètres de la colonne et sélectionner l'onglet Avancé.

Ensuite, cliquez sur le menu déroulant « Ombre » et sélectionnez une option, telle que Cheveu, Petit, Moyen, Grand, Très grand, etc.

Après avoir choisi une ombre, l'aperçu se mettra à jour automatiquement. Vous pouvez expérimenter différents styles jusqu'à ce que vous trouviez celui qui convient.

Si les styles pré-faits ne vous conviennent pas, choisissez l'option « Personnalisé ». Cette option ouvre de nouvelles personnalisations pour modifier le flou, l'étalement, la couleur, la position de l'ombre, et plus encore.

Au final, j'ai choisi l'option 2X Large et répété le processus pour chaque bloc de la grille.

Après avoir ajouté l'ombre portée, vous pouvez continuer à personnaliser votre page en ajoutant d'autres blocs et ombres.

Lorsque vous êtes satisfait de l'apparence de tout, cliquez sur Enregistrer dans le coin supérieur droit et sélectionnez Publier pour mettre votre page en ligne.

Voici un exemple de l'apparence de ma page finale, avec les nouvelles ombres de boîte :

Pour ajouter une ombre de boîte à un bouton WordPress, sélectionnez votre bloc de bouton dans SeedProd, ouvrez l'onglet Avancé et appliquez les mêmes paramètres d'ombre que ceux montrés ci-dessus.

Méthode 2 : Ajouter une ombre portée dans WordPress avec du code CSS (plus de contrôle)

L'ajout d'une ombre de boîte à chaque élément de votre site Web peut le rendre encombré. Il est préférable de les utiliser pour mettre en évidence le contenu important et de maintenir la cohérence de votre conception.

La façon la plus simple de le faire est de définir votre style d'ombre de boîte avec CSS, et j'utiliserai WPCode pour que ce soit très simple.

WPCode est un plugin populaire d'extraits de code qui vous permet d'ajouter du code personnalisé à votre site WordPress sans modifier directement les fichiers de votre thème. Cela permet de garder les choses organisées et vous aide à éviter les erreurs accidentelles.

La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour un guide complet, consultez ce guide sur comment installer un plugin WordPress.

Après avoir activé le plugin, allez à Extraits de code » +Ajouter des extraits depuis votre administration WordPress.

Sur cette page, vous verrez des extraits de code personnalisés pré-faits à ajouter à votre site Web. Pour ajouter le vôtre, survolez l'option « Ajouter votre code personnalisé » avec votre curseur et cliquez sur Ajouter un extrait personnalisé.

Une fois la page chargée, tapez un nom pour votre extrait afin de vous aider à l'identifier. Ensuite, sélectionnez l'option « Extrait CSS » dans le menu déroulant « Type de code ».

Ajoutez maintenant le fragment de code suivant dans l'éditeur de code :

.custom-box-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

Vous pouvez remplacer les valeurs px dans le fragment pour personnaliser l'ombre que vous souhaitez créer.

Décomposons ces chiffres pour que vous sachiez exactement ce qui se passe :

• .custom-box-shadow : C'est le nom de la classe CSS que nous créons. Nous l'utiliserons pour appliquer l'ombre de boîte à des éléments spécifiques.
• Box-shadow : Cela indique au navigateur que nous sommes sur le point de définir une propriété CSS d'ombre de boîte.
• 5px 5px : Ces deux premières valeurs sont le décalage horizontal et vertical de l'ombre. La première valeur la déplace vers la droite, la seconde vers le bas. Jouez avec celles-ci pour ajuster la position de l'ombre.
• 10px : C'est le rayon de flou. Des nombres plus élevés créent une ombre plus douce et plus floue. Des nombres plus bas la gardent nette.
• 0px (rayon d'étalement) : C'est le rayon d'étalement. Une valeur positive étend l'ombre vers l'extérieur ; 0px la maintient serrée. Ajoutez-la entre la valeur de flou et la couleur rgba si vous souhaitez l'utiliser.
• rgba(0, 0, 0, 0.2) : Définit la couleur de l'ombre. Nous utilisons ici un noir semi-transparent. Le dernier nombre (alpha) contrôle la transparence : 0 est complètement transparent et 1 est complètement opaque.

Vous pouvez également ajouter « inset » comme première valeur pour créer une ombre à l'intérieur de l'élément plutôt qu'à l'extérieur.

Si votre ombre de boîte ne s'affiche pas, voici trois points à vérifier :

• Le sélecteur CSS peut ne pas cibler le bon élément. Utilisez les outils de développement du navigateur pour confirmer à quel élément la classe est appliquée.
• Une autre feuille de style peut remplacer votre ombre. Ajoutez !important en dernier recours si vous ne parvenez pas à résoudre le conflit.
• Un conteneur parent avec overflow:hidden masquera l'ombre. Supprimez cette propriété ou ajustez le conteneur.

Une fois que vous êtes satisfait du snippet, faites défiler vers le bas jusqu'à la section Insertion pour définir où WPCode doit l'ajouter. Pour l'utiliser sur l'ensemble de votre site web, choisissez l'option « Insérer automatiquement » et définissez l'emplacement comme En-tête de site entier.

Maintenant, faites défiler vers le haut de la page et basculez le bouton « Inactif » sur la position « Actif ». Ensuite, cliquez sur le bouton Enregistrer le snippet.

L'étape suivante consiste à ajouter la classe CSS personnalisée à n'importe quel bloc WordPress. Pour ce faire, sélectionnez n'importe quel bloc dans l'éditeur de blocs WordPress et cliquez sur « Avancé » dans le menu de gauche.

Dans le champ « Classes CSS supplémentaires », tapez « custom-box-shadow ».

Ensuite, lorsque vous êtes satisfait de l'article, vous pouvez cliquer sur « Mettre à jour » ou « Publier ». Vous pouvez ensuite visiter l'article et voir votre ombre portée en action.

Méthode 3 : Ajouter une ombre portée à l'aide d'un plugin gratuit (alternative rapide)

Si vous n'êtes pas à l'aise avec les snippets de code, vous préférerez peut-être créer des ombres à l'aide de Drop Shadow Boxes. Ce plugin WordPress gratuit vous permet d'ajouter des ombres portées à n'importe quel bloc en utilisant l'éditeur de blocs WordPress intégré.

Tout d'abord, installez et activez le plugin sur votre site web. Comme il n'y a pas de paramètres configurables, vous pouvez utiliser le plugin immédiatement.

Ensuite, créez ou modifiez un article ou une page WordPress. Dans l'éditeur, cliquez sur l'icône plus (+) pour ajouter un nouveau bloc et recherchez « drop shadow ».

Lorsqu'il apparaît, cliquez dessus pour l'ajouter à votre page. Vous verrez une ombre portée sur un bloc vide, alors ajoutons du contenu.

Dans le bloc d'ombre portée, cliquez sur l'icône plus, ajoutez un bloc et configurez-le comme d'habitude. Par exemple, j'ai ajouté un bloc d'image et choisi une image dans la médiathèque WordPress.

Ensuite, cliquez sur le bloc pour voir les paramètres de l'ombre portée dans la barre latérale gauche.

La largeur de l'ombre est définie automatiquement par WordPress, mais vous pouvez la modifier en choisissant « pixels » ou « % » dans la boîte déroulante « Largeur ». Ensuite, vous pouvez utiliser le curseur pour l'ajuster.

Vous remarquerez également d'autres effets comme des bords arrondis et un effet de « Perspective ». Pour les prévisualiser, ouvrez le menu déroulant « Effet » et choisissez-en un dans la liste.

D'autres options que vous pouvez expérimenter incluent les ombres intérieures et extérieures, les couleurs de bordure, les pixels de bordure et les coins arrondis.

Une fois que vous êtes satisfait de l'ombre portée, répétez ces étapes pour d'autres blocs, ou cliquez sur « Mettre à jour » ou « Publier » pour rendre vos modifications visibles.

Voici à quoi ressemblent mes ombres portées en utilisant cette méthode :

Méthode 4 : Ajouter une ombre portée à l'aide de CSS Hero (avancé)

Si vous n'êtes pas à l'aise avec le code mais que vous souhaitez toujours créer des ombres portées avancées, alors CSS Hero est une excellente option.

Ce plugin premium vous permet d'affiner chaque partie de votre thème WordPress sans écrire une seule ligne de code. Vous pouvez également créer des ombres uniques pour chaque bloc, ce qui le rend idéal pour expérimenter différents effets d'ombre sur votre site.

Pour commencer, installez et activez le plugin CSS Hero. Ensuite, suivez les instructions d'activation du produit pour lier votre compte CSS Hero à votre site WordPress.

Maintenant, cliquez sur l'option « Personnaliser avec CSS Hero » dans la barre d'outils de votre administration pour ouvrir l'éditeur CSS Hero.

Par défaut, l'éditeur CSS Hero affiche un aperçu en direct de votre site Web et un panneau où vous pouvez modifier chaque élément de votre conception Web.

Si vous n'êtes pas sur la page où vous souhaitez ajouter l'ombre portée, utilisez les icônes en haut de l'écran pour passer du mode « Sélectionner » au mode « Naviguer ».

Maintenant, vous pouvez aller sur la page que vous souhaitez et revenir en mode Sélectionner.

Ensuite, cliquez sur n'importe quel élément de l'aperçu où vous souhaitez ajouter une ombre portée, comme une image, un bouton, un paragraphe ou tout autre contenu.

Une fois que vous avez fait cela, cliquez sur « Extra » dans le panneau de gauche.

Par défaut, l'option d'ombre portée affiche « Aucune », alors cliquez sur le bouton Créer une ombre.

Tout d'abord, modifiez l'emplacement de l'ombre. Dans les paramètres de position de l'ombre, vous pouvez choisir « Intérieur » ou « Extérieur ».

Ensuite, travaillez sur l'angle de l'ombre dans la section Orientation. Faites simplement glisser le cercle jusqu'à ce que l'angle de l'ombre portée soit à la position souhaitée.

Enfin, changez la couleur de l'ombre à l'aide de l'outil pipette et utilisez les curseurs pour contrôler le flou et l'étalement de l'ombre.

Utilisez la même approche pour ajouter une ombre portée à d'autres zones de votre site Web. Ensuite, lorsque vous êtes satisfait de l'apparence de tout, cliquez sur le bouton Enregistrer et publier.

Maintenant, visitez vos modifications pour voir à quoi elles ressemblent en direct sur votre site Web.

Questions fréquemment posées

Qu'est-ce qu'une ombre portée dans WordPress ?

Une ombre portée dans WordPress est un effet d'ombre CSS appliqué à un élément — tel qu'une image, un bouton ou un bloc de contenu — pour lui donner de la profondeur. Elle donne l'impression que l'élément est légèrement surélevé par rapport à l'arrière-plan de la page. Vous pouvez en ajouter une à l'aide d'un constructeur de pages visuel, d'un extrait de code CSS ou d'un plugin dédié, sans modifier les fichiers du thème.

Comment ajouter une ombre portée dans WordPress sans plugin ?

Pour ajouter une ombre portée dans WordPress sans plugin, écrivez un extrait de code CSS personnalisé. Ajoutez une règle box-shadow via Apparence > Personnaliser > CSS additionnel, ou utilisez WPCode pour gérer l'extrait. Appliquez ensuite le nom de la classe CSS à n'importe quel bloc via son panneau de paramètres Avancés dans l'éditeur de blocs.

Quelle est la différence entre une ombre portée et une ombre projetée ?

Une ombre portée suit la boîte englobante rectangulaire d'un élément, produisant toujours une ombre rectangulaire quelle que soit la forme de l'élément. Une ombre projetée utilise la propriété de filtre CSS et suit le contour réel de l'élément, y compris les zones transparentes. Pour la plupart des cas d'utilisation de WordPress — cartes, boutons, images — une ombre portée fonctionne bien. Utilisez une ombre projetée lorsque l'ombre doit suivre une forme irrégulière ou découpée.

Puis-je ajouter une ombre portée aux images dans WordPress ?

Oui. Avec SeedProd, sélectionnez un bloc d'image, ouvrez l'onglet Avancé et choisissez un préréglage dans le menu déroulant Ombre. Avec CSS, appliquez une règle box-shadow ciblant l'élément img ou une classe CSS personnalisée. Le plugin Drop Shadow Boxes encapsule également les blocs d'images avec une ombre en utilisant l'éditeur natif de WordPress.

Autres façons de personnaliser votre site Web WordPress

Les méthodes que j'ai abordées dans ce guide sont idéales pour ajouter des effets d'ombre portée dans WordPress. Mais si vous souhaitez ajouter des effets plus créatifs, vous trouverez les guides suivants utiles :

• Comment modifier les marges dans WordPress — Personnalisez l'espacement autour de votre contenu pour un aspect soigné et professionnel.
• Comment ajouter du texte sur une image dans WordPress — Créez des graphiques saisissants et des appels à l'action directement sur vos images.
• Comment créer des arrière-plans animés avec Particle.js dans WordPress — Ajoutez une touche de dynamisme avec des arrière-plans animés accrocheurs.
• Comment rendre une page pleine largeur dans WordPress — Libérez-vous des barres latérales et créez des mises en page pleine largeur immersives.
• Comment assombrir une image d'arrière-plan dans WordPress — Rendez votre texte plus facile à lire et créez un sentiment de profondeur avec une image d'arrière-plan assombrie.
• Comment créer des animations de texte dans WordPress — Captez l'attention de vos visiteurs avec des effets de texte animés accrocheurs.
• Comment créer des séparateurs de section fantaisie pour WordPress — Séparez visuellement votre contenu avec des séparateurs de forme élégants.

J'espère que ce guide vous a aidé à apprendre comment ajouter une ombre portée dans WordPress. Vous pouvez maintenant améliorer instantanément le design de votre site Web et mettre en évidence votre contenu le plus important.

Prêt à approfondir vos compétences WordPress ? Commencez avec SeedProd et créez des pages de destination et des sites Web à forte conversion sans codage.

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.