Vous voulez faire ressortir les éléments de votre site web et attirer l'attention de vos visiteurs ? L'ajout d'une simple ombre peut améliorer instantanément votre conception, en faisant ressortir les images, les boutons ou les sections de contenu.
Dans ce guide, je partagerai avec vous 4 façons simples d'ajouter une ombre dans WordPress afin que vous puissiez mettre en valeur le contenu qui compte le plus.
Pourquoi ajouter une ombre de boîte dans WordPress ?
Une ombre en boîte crée une subtile illusion de profondeur en imitant l'ombre que projette un objet, le faisant apparaître légèrement surélevé par rapport à l'arrière-plan. Ce simple effet peut changer radicalement la façon dont les visiteurs perçoivent votre contenu.
Notre cerveau est naturellement attiré par le contraste et la séparation, principes ancrés dans la psychologie de la Gestalt. L'ajout d'une ombre 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 à être plus performant :
- Stimulez les conversions : Mettez en évidence les appels à l'action tels que les boutons ou les formulaires pour encourager les clics et les conversions.
- Mettre en valeur les images : Faites ressortir les images de l'arrière-plan, en attirant l'attention et en renforçant leur impact.
- Améliorer l'expérience de l'utilisateur : Créez une mise en page plus attrayante et mieux organisée, rendant votre site web plus facile et plus agréable à naviguer.
Vous trouverez ci-dessous 4 façons simples d'ajouter ces effets à votre site WordPress.
- Méthode 1 : Ajouter une ombre de boîte dans WordPress en utilisant un constructeur de page (la plus simple)
- Méthode 2 : Ajouter une ombre de boîte dans WordPress avec du code CSS (plus de contrôle)
- Méthode 3 : Ajouter une ombre de boîte à l'aide d'un plugin gratuit (alternative rapide)
- Méthode 4 : ajouter une ombre de boîte à l'aide de CSS Hero (avancé)
Méthode 1 : Ajouter une ombre de boîte dans WordPress en utilisant un constructeur de page (la plus simple)
Maintenant que vous comprenez la puissance des ombres de boîte, créons-en une. Cette méthode est parfaite pour les apprenants visuels et tous ceux qui veulent une solution sans code. J'utiliserai SeedProd pour ajouter une ombre de boîte élégante en quelques clics.
SeedProd est le meilleur constructeur de site WordPress, avec plus d'un million d'utilisateurs. Avec son constructeur de pages par glisser-déposer, vous pouvez créer des pages d'atterrissage et des sites web à fort taux de conversion et personnaliser chaque centimètre de votre design sans écrire de code.
Vous pouvez également ajouter des ombres à n'importe quel élément de conception en pointant et en cliquant.
Pour commencer, installez et activez SeedProd sur votre site WordPress. Pour plus de détails, consultez notre guide sur l 'installation de SeedProd.
Après avoir activé le plugin, naviguez vers SeedProd " Landing Pages depuis votre tableau de bord WordPress. Ensuite, cliquez sur le bouton Ajouter une nouvelle page d'atterrissage.
Ici, vous pouvez choisir un modèle préétabli et entièrement personnalisable pour votre page. Les modèles de SeedProd vous permettent de trouver facilement un look qui correspond à votre marque, et vous pouvez modifier chaque détail pour vous l'approprier.
Cliquez sur les filtres en haut pour naviguer, puis survolez un modèle et cliquez sur l'icône de la coche pour le sélectionner.
Maintenant, vous pouvez entrer un nom pour votre page, et SeedProd définira automatiquement l'URL. C'est une bonne idée d'inclure des mots-clés pertinents pour la page dans l'URL, car cela peut améliorer l'optimisation de WordPress pour les moteurs de recherche.
Si vous ne souhaitez pas conserver l'URL générée, cliquez dans le champ "URL de la page" et saisissez votre propre URL.
Vous pouvez maintenant cliquer sur le bouton Enregistrer et commencer à modifier la page pour lancer votre conception 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 dessus, faites-le glisser et déposez-le dans l'aperçu en direct. Vous pouvez ensuite sélectionner le bloc pour personnaliser son apparence et ses paramètres.
Par exemple, en cliquant sur le bloc Titre, vous pouvez saisir votre propre texte et modifier la taille, la couleur et l'alignement de la police.
Vous pouvez également déplacer les blocs sur la page en les faisant glisser et en les déposant. Pour des instructions détaillées, veuillez consulter notre guide sur la création d'une page d'atterrissage dans WordPress.
Si vous souhaitez ajouter une ombre à un bloc, vous devez cliquer sur l'onglet Avancé dans les paramètres de ce bloc.
Dans cet exemple, je souhaite ajouter une ombre à chaque boîte de caractéristiques. 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, comme Hairline, Small, Medium, Large, X Large, etc.
Lorsque vous choisissez une ombre, l'aperçu se met à jour automatiquement. Vous pouvez expérimenter différents styles jusqu'à ce que vous trouviez celui qui vous convient.
Si les styles prédéfinis ne vous conviennent pas, choisissez l'option "Personnalisé". Cette option ouvre de nouvelles possibilités de personnalisation permettant de modifier le flou, l'étalement, la couleur, la position de l'ombre, etc.
Finalement, j'ai choisi l'option 2X Large et j'ai répété le processus pour chaque bloc de la grille.
Après avoir ajouté l'ombre de la boîte, vous pouvez continuer à personnaliser votre page en ajoutant d'autres blocs et ombres.
Lorsque vous êtes satisfait de l'aspect de votre page, cliquez sur Enregistrer dans le coin supérieur droit et sélectionnez Publier pour mettre votre page en ligne.
Voici un exemple de l'aspect de ma page finale, avec les nouvelles ombres de la boîte :
Méthode 2 : Ajouter une ombre de boîte dans WordPress avec du code CSS (plus de contrôle)
L'ajout d'une ombre à chaque élément de votre site web peut donner l'impression qu'il est encombré. Il est préférable de les utiliser pour mettre en évidence le contenu important et pour assurer la cohérence de la conception.
La façon la plus simple de le faire est de définir le style de l'ombre de la boîte avec CSS, et j'utiliserai WPCode pour rendre les choses très simples.
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 d'organiser les choses et d'éviter les erreurs accidentelles.
La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour une description complète, consultez ce guide sur l 'installation d'un plugin WordPress.
Après avoir activé le plugin, allez dans Code Snippets " +Add Snippets depuis votre administration WordPress.
Sur cette page, vous trouverez des extraits de code personnalisés prédéfinis à ajouter à votre site web. Pour ajouter les vôtres, passez votre curseur sur l'option "Ajouter votre code personnalisé" et cliquez sur Ajouter un extrait de code personnalisé.
Une fois la page chargée, tapez un nom pour votre extrait afin de pouvoir l'identifier. Sélectionnez ensuite l'option "Extrait CSS" dans le menu déroulant "Type de code".
Ajoutez maintenant l'extrait 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 l'extrait pour personnaliser l'ombre que vous souhaitez créer.
Décortiquons ces chiffres pour que vous sachiez exactement ce qui se passe :
- .custom-box-shadow : Il s'agit du nom de la classe CSS que nous créons. Nous l'utiliserons pour appliquer l'ombre de la boîte à des éléments spécifiques.
- Box-shadow : indique au navigateur que nous sommes sur le point de définir une ombre de boîte.
- 5px 5px : Ces deux premières valeurs représentent 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 ces valeurs pour ajuster la position de l'ombre.
- 10px : Il s'agit du rayon de flou. Les valeurs élevées créent une ombre plus douce et plus floue. Des valeurs plus faibles la rendent plus nette.
- rgba(0, 0, 0, 0.2) : Ceci définit la couleur de l'ombre. Nous utilisons ici un noir semi-transparent. Le dernier chiffre (alpha) contrôle la transparence : 0 est complètement transparent et 1 est complètement opaque.
Une fois que vous êtes satisfait du snippet, descendez jusqu'à la section Insertion pour définir l'endroit où WPCode doit l'ajouter. Pour l'utiliser sur l'ensemble de votre site web, choisissez l'option "Insertion automatique" et définissez l'emplacement comme " Site Wide Header".
Revenez en haut de la page et mettez le bouton "Inactif" en position "Actif". Cliquez ensuite sur le bouton Enregistrer l'extrait .
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 de 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 du message, vous pouvez cliquer sur "Mettre à jour" ou "Publier". Vous pourrez alors visiter l'article et voir votre ombre en action.
Méthode 3 : Ajouter une ombre de boîte à l'aide d'un plugin gratuit (alternative rapide)
Si vous n'êtes pas à l'aise avec les extraits 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 à n'importe quel bloc en utilisant l'éditeur de bloc intégré de WordPress.
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 "ombre portée".
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 image et choisi une image dans la médiathèque de WordPress.
Ensuite, cliquez sur le bloc pour afficher les paramètres de l'ombre de la boîte dans la barre latérale de gauche.
La largeur de l'ombre est définie automatiquement par WordPress, mais vous pouvez la modifier en choisissant "pixels" ou "%" dans la liste déroulante "Largeur". Vous pouvez ensuite utiliser le curseur pour l'ajuster.
Vous remarquerez également des effets de loutre tels que des bords incurvés et un effet de "perspective". Pour les prévisualiser, ouvrez le menu déroulant "Effet" et choisissez-en un dans la liste.
Parmi les autres options que vous pouvez expérimenter, citons les ombres intérieures et extérieures, les couleurs des bordures, les pixels des bordures et les coins arrondis.
Lorsque vous êtes satisfait de l'ombre de la boîte, répétez ces étapes pour d'autres blocs ou cliquez sur "Mettre à jour" ou "Publier" pour mettre en œuvre vos modifications.
Voici à quoi ressemblent mes ombres en boîte en utilisant cette méthode :
Méthode 4 : ajouter une ombre de boîte à l'aide de CSS Hero (avancé)
Si vous n'êtes pas à l'aise avec le code mais que vous souhaitez tout de même créer des ombres de boîtes avancées, CSS Hero est une excellente option.
Ce plugin premium vous permet de peaufiner 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 est 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 relier votre compte CSS Hero à votre site WordPress.
Cliquez ensuite sur l'option "Personnaliser avec CSS Hero" dans votre barre d'outils d'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 dans lequel vous pouvez modifier chaque élément de votre conception web.
Si vous n'êtes pas sur la page où vous souhaitez ajouter l'ombre, utilisez les icônes en haut de l'écran pour passer du mode "Sélectionner" au mode "Naviguer".
Vous pouvez maintenant accéder à la page souhaitée et repasser en mode sélection.
Ensuite, cliquez sur n'importe quel élément de l'aperçu où vous souhaitez ajouter une ombre, comme une image, un bouton, un paragraphe ou un autre contenu.
Une fois cette étape franchie, cliquez sur "Extra" dans le panneau de gauche.
Par défaut, l'option d'ombrage de la boîte est "Aucun". Cliquez donc sur le bouton Faire de l'ombre.
Commencez par modifier l'endroit où l'ombre apparaît. Dans les paramètres de position de l'ombre, vous pouvez choisir "Intérieur" ou "Extérieur".
Travaillez ensuite sur l'angle de l'ombre dans la section Orientation. Il suffit de faire glisser le cercle jusqu'à ce que l'angle de l'ombre de la boîte soit dans la position souhaitée.
Enfin, modifiez la couleur de l'ombre à l'aide de la pipette et utilisez les curseurs pour contrôler le flou et l'étendue de l'ombre.
Procédez de la même manière pour ajouter une ombre à d'autres parties de votre site web. Lorsque vous êtes satisfait de l'aspect de votre site, cliquez sur le bouton Enregistrer et publier.
Maintenant, visitez vos modifications pour voir comment elles se présentent sur votre site web.
Plus de possibilités de personnaliser votre site web WordPress
Les méthodes décrites dans ce guide sont idéales pour ajouter des effets d'ombre dans WordPress. Mais si vous souhaitez ajouter des effets plus créatifs, les guides suivants vous seront utiles :
- Comment modifier les marges dans WordPress - Personnalisez l'espacement autour de votre contenu pour un aspect professionnel et soigné.
- Comment ajouter du texte sur une image dans WordPress - Créez des graphiques percutants et des appels à l'action directement sur vos images.
- Comment créer des arrière-plans animés 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 immersives et pleine largeur.
- Comment atténuer une image de fond dans WordPress - Facilitez la lecture de votre texte et créez une impression de profondeur avec une image de fond atténuée.
- Comment créer des animations de texte dans WordPress - Attirez l'attention de vos visiteurs avec des effets de texte animés accrocheurs.
- Comment créer des séparateurs de section fantaisistes pour WordPress - Séparez visuellement votre contenu avec des séparateurs de forme élégante.
J'espère que ce guide vous a aidé à apprendre comment ajouter une ombre de boîte dans WordPress. Vous pouvez désormais améliorer instantanément le design de votre site web et mettre en valeur vos contenus les plus importants.
Prêt à aller plus loin avec WordPress ? Commencez avec SeedProd et créez des pages d'atterrissage et des sites web époustouflants et à fort taux de conversion sans avoir à coder.
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
