Comment ajouter une ombre de boîte dans WordPress : 4 façons simples 

Lorsqu'une page semble plate, c'est généralement parce qu'il manque des ombres. Ajouter une ombre portée à vos fiches de présentation ou à vos boutons d'appel à l'action est l'une des modifications de mise en page les plus rapides que vous puissiez effectuer dans WordPress.

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 portée crée une subtile illusion de profondeur en imitant l'ombre qu'un objet projetterait, donnant ainsi l'impression qu'il est légèrement en relief par rapport à l'arrière-plan. Cet effet d'ombre CSS peut radicalement changer 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 portée dans WordPress à l'aide de SeedProd (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 outil de création de sites WordPress, avec plus d'un million d'utilisateurs. Grâce à son éditeur visuel par glisser-déposer, vous pouvez créer des pages d'accueil et des sites web à fort taux de conversion, et personnaliser chaque détail de votre design sans avoir à écrire une seule ligne 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.

Note : La version gratuite de SeedProd contient tout ce dont vous avez besoin pour ajouter des ombres dans WordPress. Cependant, je vais utiliser la version premium pour ce guide parce qu'elle a des modèles plus avancés.

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 :

Pour ajouter une ombre portée à 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 indiqués ci-dessus.

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 :cela indique au navigateur que nous sommes sur le point de définir une propriété CSS « box-shadow ».
• 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. Plus la valeur est élevée, plus l'ombre est douce et floue. Plus la valeur est faible, plus l'ombre reste nette.
• 0px (rayon de diffusion) :il s'agit du rayon de diffusion. Une valeur positive élargit l'ombre vers l'extérieur ; 0px la maintient compacte. Indiquez-la entre la valeur de flou et la couleur rgba si vous souhaitez l'utiliser.
• rgba(0, 0, 0, 0,2) :cela définit la couleur de l'ombre. Nous utilisons ici un noir semi-transparent. Le dernier chiffre (alpha) détermine le degré de transparence : 0 correspond à une transparence totale, et 1 à une opacité totale.

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 l'ombre portée de votre élément ne s'affiche pas, voici trois points à vérifier :

• Il se peut que le sélecteur CSS ne cible pas le bon élément. Utilisez les outils de développement du navigateur pour vérifier à quel élément la classe est appliquée.
• Il se peut qu'une autre feuille de style prenne le pas sur votre ombre. En dernier recours, ajoutez « !important » si vous ne parvenez pas à résoudre le conflit.
• Un conteneur parent sur lequel la propriété `overflow:hidden` est définie masquera l'ombre. Supprimez cette propriété ou redimensionnez le conteneur.

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".

Maintenant, remontez en haut de la page et basculez le bouton « Inactif » sur « Actif ». Ensuite, cliquez 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 d'autres effets, tels que les bords arrondis et l'effet « Perspective ». Pour les prévisualiser, ouvrez le menu déroulant « Effet » et sélectionnez-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.

Questions fréquemment posées

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

Dans WordPress, une ombre portée est un effet d'ombre CSS appliqué à un élément — tel qu'une image, un bouton ou un bloc de contenu — afin de lui donner de la profondeur. Elle donne l'impression que l'élément est légèrement en relief 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 avoir à 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, rédigez un extrait de code CSS personnalisé. Ajoutez une règle « box-shadow » via Apparence > Personnaliser > CSS supplémentaire, ou utilisez WPCode pour gérer cet extrait de code. 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 un « box shadow » et un « drop shadow » ?

Une ombre de cadre suit le cadre de sélection rectangulaire d'un élément, produisant toujours une ombre rectangulaire quelle que soit la forme de l'élément. Une ombre portée utilise la propriété CSS `filter` et suit le contour réel de l'élément, y compris les zones transparentes. Pour la plupart des cas d'utilisation sous WordPress (cartes, boutons, images), une ombre de cadre convient parfaitement. Utilisez une ombre portée lorsque l'ombre doit épouser 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 le CSS, appliquez une règle « box-shadow » ciblant l'élément img ou une classe CSS personnalisée. Le plugin Drop Shadow Boxes permet également d'ajouter une ombre aux blocs d'image à l'aide de l'éditeur natif de WordPress.

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 obtenir un rendu soigné et professionnel.
• Comment ajouter du texte sur une image dans WordPress — Créez des visuels percutants et des appels à l'action directement sur vos images.
• Comment créer des arrière-plans animés avec Particle.js dans WordPress — Apportez une touche de dynamisme grâce à des arrière-plans animés qui attirent le regard.
• Comment créer une page en pleine largeur dans WordPress — Libérez-vous des barres latérales et créez des mises en page immersives en pleine largeur.
• Comment atténuer une image d'arrière-plan dans WordPress — Améliorez la lisibilité de votre texte et créez une impression de profondeur grâce à une image d'arrière-plan atténuée.
• Comment créer des animations de texte dans WordPress — Captez l'attention de vos visiteurs grâce à des effets d'animation de texte accrocheurs.
• Comment créer des séparateurs de section originaux pour WordPress — Séparez visuellement votre contenu à l'aide de séparateurs aux formes élégantes.

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 à approfondir vos compétences en WordPress ? Lancez-vous avec SeedProd et créez des pages d'accueil et des sites web à fort taux de conversion sans avoir à coder.

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.