Comment ajouter facilement une ombre portée dans WordPress (4 méthodes)

Une ombre portée est l'un des moyens les plus simples d'ajouter de la profondeur et de l'emphase aux éléments de votre site WordPress. Nous pouvons créer cet effet avec seulement quelques lignes de CSS.

Cela dit, même si c'est simple, certains lecteurs de WPBeginner ont demandé des conseils sur la façon de le mettre en œuvre efficacement, surtout s'ils ne sont pas à l'aise avec le codage.

Dans cet article, nous vous montrerons plusieurs façons d'ajouter facilement des ombres portées dans WordPress, étape par étape. 

Pourquoi ajouter des ombres portées dans WordPress ?

Une ombre portée, parfois aussi appelée ombre de chute, est un effet visuel qui donne l'impression que quelque chose à l'écran projette une ombre.

Nous avons tendance à accorder plus d'attention aux objets qui semblent plus proches de nous. Dans cette optique, de nombreux propriétaires de sites Web ajoutent des ombres portées à leur contenu le plus important pour qu'il semble flotter au-dessus de la page.

Par exemple, si vous ajoutez une grande ombre à un bouton d'appel à l'action, il semblera physiquement plus proche du visiteur, ce qui attirera son attention.

Cela dit, voyons comment vous pouvez ajouter des ombres portées à votre blog WordPress ou à votre site Web. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser.

• Méthode 1. Ajouter une ombre portée à l'aide de code (plus de contrôle)
• Méthode 2. Ajouter une ombre portée à l'aide d'un plugin gratuit
• Méthode 3. Ajouter une ombre portée à l'aide d'un constructeur de pages (facile)
• Méthode 4. Ajouter une ombre portée à l'aide de CSS Hero (avancé)
• Apprenez d'autres façons d'ajouter des designs uniques à votre site WordPress

Méthode 1. Ajouter une ombre portée à l'aide de code (plus de contrôle)

Si vous ajoutez un effet d'ombre à chaque bloc WordPress, cela peut rendre votre site désordonné et confus. Dans cet esprit, vous ne devriez ajouter une ombre portée qu'aux éléments les plus importants de la page.

Vous devez également maintenir la cohérence des ombres portées sur l'ensemble de votre site. La meilleure façon d'y parvenir est de définir le style en CSS à l'aide de WPCode.

WPCode est le meilleur plugin de snippets de code utilisé par plus d'un million de sites Web WordPress. Il est facile d'ajouter du code personnalisé dans WordPress sans avoir à modifier le fichier functions.php.

Avec WPCode, même les débutants peuvent modifier le code de leur site Web sans risquer des erreurs et des fautes de frappe qui peuvent causer de nombreuses erreurs WordPress courantes.

La première chose à faire est d'installer et d'activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, allez dans Extraits de code » Ajouter un extrait.

Ici, vous verrez tous les extraits WPCode prêts à l'emploi que vous pouvez ajouter à votre site. Ceux-ci incluent un extrait qui vous permet de désactiver complètement les commentaires, de téléverser des types de fichiers que WordPress ne prend généralement pas en charge, désactiver les pages de pièces jointes, et bien plus encore.

Survolez simplement votre souris sur ‘Ajouter votre code personnalisé (Nouvel extrait)’ puis cliquez sur ‘+ Ajouter un extrait personnalisé’ lorsqu'il apparaît.

Ensuite, vous devez choisir le type de code dans la liste d'options qui apparaît à l'écran.

Pour ce tutoriel, vous devrez ajouter du CSS personnalisé à WordPress, alors sélectionnez ‘Extrait CSS’ comme type de code.

Maintenant, vous serez dirigé vers la page Créer un extrait personnalisé.

Pour commencer, tapez un titre pour l'extrait de code personnalisé. Cela peut être n'importe quoi qui vous aide à identifier l'extrait dans le tableau de bord WordPress.

Ensuite, dans la boîte ‘Aperçu du code’, copiez et collez l'extrait de code suivant :

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

Dans l'extrait ci-dessus, vous devrez peut-être remplacer les valeurs px en fonction du type d'ombre que vous souhaitez créer.

Pour vous aider, voici ce que signifient les différentes valeurs px, de gauche à droite :

• Décalage horizontal. Lorsque vous définissez une valeur positive, l'ombre est repoussée vers la gauche. Si vous tapez une valeur négative comme -5px, l'ombre sera repoussée vers la droite. Si vous ne souhaitez pas ajouter de décalage horizontal, vous pouvez utiliser 0px à la place.
• Décalage vertical. Si vous utilisez une valeur positive, l'ombre sera repoussée vers le bas. Si vous tapez une valeur négative, l'ombre sera repoussée vers le haut. Si vous ne souhaitez pas décaler l'ombre verticalement, tapez simplement 0px.
• Rayon de flou. Cela floute l'ombre afin qu'elle n'ait pas de bords nets. Plus la valeur est élevée, plus l'effet de flou est important. Si vous préférez utiliser des bords nets, tapez 0px.
• Rayon d'étalement. Plus la valeur est élevée, plus l'ombre s'étale. Cette valeur est facultative, alors sautez-la si vous ne souhaitez pas afficher d'étalement.
• Couleur. Bien que le gris soit la couleur la plus courante pour les ombres, vous pouvez utiliser la couleur de votre choix en tapant un code hexadécimal. Si vous n'êtes pas sûr du code à utiliser, vous pouvez explorer différentes couleurs à l'aide d'une ressource telle que HTML Color Codes.

Lorsque vous êtes satisfait de l'extrait, faites défiler jusqu'à la section « Insertion ». WPCode peut ajouter votre code à différents emplacements, tels qu'après chaque publication, uniquement sur le frontend ou uniquement sur l'administration.

Pour utiliser le code CSS personnalisé sur l'ensemble de votre site Web WordPress, cliquez sur « Insertion automatique » s'il n'est pas déjà sélectionné. Ensuite, ouvrez le menu déroulant « Emplacement » et choisissez « En-tête du site ».

Après cela, vous êtes prêt à faire défiler jusqu'en haut de l'écran et à cliquer sur le bouton « Inactif », de sorte qu'il devienne « Actif ».

Enfin, cliquez sur « Enregistrer l'extrait » pour rendre l'extrait CSS actif.

Vous pouvez maintenant ajouter la classe CSS personnalisée à n'importe quel bloc.

Dans l'éditeur de blocs de WordPress, sélectionnez simplement le bloc auquel vous souhaitez ajouter une ombre portée. Ensuite, dans le menu de droite, cliquez pour développer la section « Avancé ».

Ici, vous verrez des champs où vous pouvez ajouter différentes classes.

Dans « Classe(s) CSS supplémentaire(s) », tapez shadow-effect.

Lorsque vous êtes prêt à publier l'ombre portée, cliquez simplement sur le bouton « Publier » ou « Mettre à jour ».

Maintenant, si vous visitez votre site Web, vous verrez l'ombre portée en direct.

En plus d'ajouter une ombre portée, vous pouvez également utiliser WPCode pour changer la couleur du texte ou même personnaliser le style des citations de votre thème WordPress avec du CSS.

Méthode 2. Ajouter une ombre portée à l'aide d'un plugin gratuit

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

Tout d'abord, vous devrez installer et activer le plugin. Si vous avez besoin d'aide, consultez notre guide sur comment installer un plugin WordPress.

Il n'y a aucun réglage à configurer, vous pouvez donc commencer à utiliser ce plugin immédiatement.

Pour ajouter une ombre portée, cliquez simplement sur l'icône « + » et commencez à taper « Drop Shadow Box ». Lorsque le bon bloc apparaît, cliquez dessus pour l'ajouter à la page ou à l'article.

Cela ajoute l'ombre portée comme une boîte vide, donc la prochaine étape consiste à ajouter du contenu.

Pour ce faire, cliquez sur le « + » à l'intérieur du bloc Drop Shadow Box.

Ensuite, ajoutez simplement le bloc que vous souhaitez utiliser et configurez-le normalement.

Par exemple, dans l'image suivante, nous avons ajouté un bloc Image et sélectionné une image de la médiathèque WordPress.

Une fois cela fait, cliquez pour sélectionner le bloc Drop Shadow Box. Dans le menu de droite, vous verrez tous les paramètres que vous pouvez utiliser pour styliser ce bloc.

WordPress définit automatiquement la largeur de l'ombre, mais vous pouvez la modifier en ouvrant le menu déroulant « Largeur » puis en choisissant « Pixels » ou « % ».

Vous pouvez ensuite le redimensionner à l'aide des paramètres qui apparaissent.

Le plugin Drop Box Shadow est livré avec quelques effets différents tels que des bords arrondis et un effet « Perspective » accrocheur.

Pour prévisualiser les différents effets, ouvrez simplement le menu déroulant « Effet » et choisissez dans la liste. L'aperçu se mettra à jour automatiquement afin que vous puissiez essayer différents styles pour voir ce que vous préférez.

Vous pouvez également modifier si le plugin affiche l'ombre à l'intérieur de la boîte, à l'extérieur de la boîte, ou les deux en utilisant les bascules « Ombre intérieure » et « Ombre extérieure ».

Après cela, vous pouvez changer la couleur de la boîte et de la bordure en utilisant les paramètres sous l'en-tête « Couleurs ».

Sachez simplement que « Arrière-plan » fait référence à l'intérieur de la boîte d'ombre portée, tandis que « Bordure » apparaît à l'extérieur du bloc.

Si vous souhaitez créer une boîte d'ombre plus douce et arrondie, vous pouvez activer le bouton « Coins arrondis ». Enfin, vous pouvez modifier l'alignement et le remplissage, de la même manière que vous personnalisez d'autres blocs dans WordPress.

Pour créer plus d'ombres de boîte, suivez simplement le même processus décrit ci-dessus.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez simplement sur « Mettre à jour » ou « Publier » pour rendre toutes vos nouvelles ombres de boîte visibles.

Méthode 3. Ajouter une ombre de boîte à l'aide d'un constructeur de pages (facile)

Si vous souhaitez ajouter des ombres de boîte aux pages de destination, aux pages d'accueil personnalisées ou à toute partie de votre thème WordPress, nous vous recommandons d'utiliser un plugin de constructeur de pages.

SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer. Il vous permet de concevoir des pages de destination personnalisées et même de créer un thème WordPress personnalisé sans avoir à écrire une seule ligne de code.

Il vous permet également d'ajouter des ombres de boîte à n'importe quel bloc à l'aide de son éditeur avancé par glisser-déposer.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, allez dans SeedProd » Pages de destination dans votre tableau de bord WordPress.

SeedProd propose plus de 300 modèles professionnels regroupés par catégories. En haut, vous verrez des catégories qui vous permettent de créer de belles pages « bientôt disponible », d'activer le mode maintenance, de créer une page de connexion personnalisée pour WordPress, et plus encore.

Tous les modèles de SeedProd sont faciles à personnaliser, vous pouvez donc utiliser le design que vous souhaitez.

Lorsque vous trouvez un modèle que vous souhaitez utiliser, placez simplement votre souris dessus et cliquez sur l'icône de coche.

Vous pouvez maintenant taper un nom pour votre page de destination dans le champ « Nom de la page ». SeedProd créera automatiquement une « URL de la page » en utilisant le nom de la page.

Il est judicieux d'inclure des mots-clés pertinents dans votre URL autant que possible, car cela aide les moteurs de recherche à comprendre de quoi traite la page. Cela améliorera souvent votre SEO WordPress.

Pour modifier l'URL générée automatiquement de la page, tapez simplement dans le champ « URL de la page ».

Lorsque vous êtes satisfait des informations que vous avez saisies, cliquez sur « Enregistrer et commencer à modifier la page ». Cela chargera l'interface du constructeur de pages SeedProd.

Ce simple constructeur par glisser-déposer affiche un aperçu en direct de la conception de votre page à droite. À gauche se trouve un menu montrant tous les différents blocs et sections que vous pouvez ajouter à la page.

Lorsque vous trouvez un bloc que vous souhaitez ajouter, faites-le simplement glisser et déposez-le sur votre modèle.

Pour personnaliser un bloc, cliquez dessus pour le sélectionner dans l'éditeur SeedProd. Le menu de gauche affichera désormais tous les paramètres que vous pouvez utiliser pour personnaliser le bloc.

Par exemple, si vous cliquez sur un bloc Titre, vous pouvez alors taper votre propre texte, ou changer la couleur du texte et la taille de la police.

Pendant que vous construisez la page, vous pouvez déplacer les blocs dans votre mise en page en les faisant glisser et déposer. Pour des instructions plus détaillées, veuillez consulter notre guide sur comment créer une page de destination avec WordPress.

Pour créer une ombre portée, cliquez pour sélectionner n'importe quel bloc dans l'éditeur de page SeedProd. Les paramètres du menu de gauche peuvent varier entre les blocs, mais vous devrez généralement cliquer sur un onglet 'Avancé'.

Ici, recherchez un menu déroulant 'Ombre' sous la section 'Styles'. Ouvrez simplement ce menu déroulant et choisissez un style d'ombre tel que Fin, Moyen ou 2X Large.

L'aperçu se mettra à jour automatiquement, vous pouvez donc essayer différents styles pour voir ce qui convient le mieux à la conception de votre page.

Si vous ne souhaitez pas utiliser l'un des styles prêts à l'emploi, cliquez sur 'Personnalisé'.

Cela ajoute de nouveaux paramètres où vous pouvez modifier la couleur, le flou, l'étalement et la position de l'ombre personnalisée.

Une fois cela fait, vous pouvez continuer à travailler sur la page en ajoutant d'autres blocs et ombres portées.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez sur le bouton 'Enregistrer', puis choisissez 'Publier' pour la rendre visible.

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, vous pouvez essayer CSS Hero. Ce plugin premium vous permet d'affiner chaque partie de votre thème WordPress sans avoir à écrire une seule ligne de code.

CSS Hero vous permet de créer une ombre unique pour chaque bloc, c'est donc également un excellent choix si vous souhaitez créer de nombreux effets d'ombre différents. Vous pouvez en savoir plus sur le plugin dans notre avis sur CSS Hero.

Tout d'abord, vous devez installer et activer le plugin CSS Hero. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous verrez un bouton « Continuer vers l'activation du produit » en haut de l'écran. Cliquez sur ce bouton.

Cela vous mènera au site Web de CSS Hero où vous pourrez vous connecter à votre compte et obtenir une clé de licence. Suivez simplement les instructions à l'écran, et vous serez redirigé vers votre site en quelques clics.

Ensuite, cliquez sur le texte « CSS Hero » dans la barre d'administration de WordPress.

Cela ouvrira l'éditeur CSS Hero.

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

Si vous constatez que vous n'êtes pas sur la page où vous souhaitez ajouter l'ombre portée, vous pouvez passer du mode « Modifier » au mode « Naviguer ».

Cela vous permet d'interagir avec les menus de navigation, les liens et d'autres contenus comme d'habitude.

Vous pouvez maintenant naviguer vers la page ou l'article où vous souhaitez ajouter l'ombre.

Dès que vous atteignez cette page, passez à nouveau en mode « Modifier ».

Une fois cela fait, cliquez sur le paragraphe, l'image, le bouton ou tout autre contenu auquel vous souhaitez ajouter une ombre portée.

Dans le panneau de gauche, cliquez sur « Extra ».

Vous pouvez maintenant cliquer sur « Créer une ombre ».

Cela affichera tous les paramètres que vous pouvez utiliser pour créer une ombre portée.

Pour commencer, vous pouvez modifier si l'ombre apparaît à l'intérieur ou à l'extérieur du bloc en utilisant les paramètres « Position de l'ombre ».

Ici, nous avons sélectionné « Extérieur » pour que l’ombre apparaisse en dehors de l’image elle-même.

Après avoir pris cette décision, vous pouvez affiner l’orientation de l’ombre à l’aide du petit point dans la boîte « Orientation ».

Faites simplement glisser le point dans une nouvelle position pour le voir se déplacer dans l’aperçu en direct.

Lorsque vous êtes satisfait de la position de l’ombre, vous pouvez modifier sa couleur, son flou et son étalement.

CSS Hero affichera ces modifications immédiatement, vous pouvez donc essayer différents réglages pour voir ce qui convient le mieux.

Pour ajouter une ombre portée à d'autres blocs, suivez le même processus décrit ci-dessus.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez sur « Enregistrer » pour rendre les modifications publiques.

Apprenez d'autres façons d'ajouter des designs uniques à votre site WordPress

Les méthodes ci-dessus fournissent une excellente base pour ajouter des ombres portées dans WordPress. Mais que faire si vous souhaitez obtenir des effets encore plus uniques et créatifs ?

Dans les articles suivants, vous trouverez des guides utiles sur l'ajout de divers éléments de conception à votre site Web :

• Comment ajouter des effets de survol d'image dans WordPress – Ce guide explore différents effets de survol que vous pouvez créer pour vos images, rendant votre site Web plus attrayant et interactif pour les visiteurs.
• Comment ajouter facilement des animations CSS dans WordPress – Les animations, ainsi que les ombres portées, peuvent créer une expérience utilisateur dynamique et visuellement attrayante, captant l'attention de vos visiteurs et les maintenant engagés.
• Comment ajouter un effet de parallaxe à n'importe quel thème WordPress – En intégrant des effets de parallaxe, vous pouvez améliorer l'illusion de profondeur et créer un site Web plus immersif.
• Comment créer un séparateur de forme personnalisé dans WordPress – Cet article vous montre comment créer des formes uniques pour séparer visuellement les sections de votre contenu.
• Comment créer facilement un curseur réactif dans WordPress – Ce guide vous apprend à créer des curseurs pour présenter votre contenu de manière attrayante et peu encombrante.
• Comment ajouter un arrière-plan animé dans WordPress – L'ajout d'arrière-plans animés peut créer une expérience utilisateur unique et visuellement intéressante.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter une ombre portée dans WordPress. Vous pourriez également vouloir apprendre comment supprimer le CSS inutilisé dans WordPress et comment optimiser la livraison du CSS WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.