Guides/Styles/Réglages de bordure et d’ombre

Réglages de bordure et d’ombre

De nombreux blocs de l’éditeur WordPress disposent de réglages de bordure pour ajouter une ligne de bordure autour de votre contenu. Ce guide vous montrera comment utiliser ces réglages de bordure.

Accéder aux réglages de bordure et d’ombre

Les réglages de bordure et d’ombre peuvent être appliqués à l’ensemble du site, à des éléments spécifiques de celui-ci ou à un bloc de contenu spécifique. L’option d’application de bordures et d’ombres n’apparaît que pour les blocs compatibles.

Pour modifier les réglages de style de l’ensemble de votre site, procédez comme suit :

  1. Consultez le tableau de bord de votre site.
  2. Accédez à Apparence → Éditeur.
  3. Sélectionnez Styles dans le menu de gauche.

En savoir plus sur la modification des styles de votre site.

Pour modifier les réglages de style d’un seul bloc, procédez comme suit :

  1. Consultez le tableau de bord de votre site.
  2. Accédez à la page, à l’article ou au modèle à modifier.
  3. Sélectionnez le bloc auquel appliquer le style.
  4. Localisez la colonne latérale des réglages du bloc.

Dans la plupart des cas, les réglages de style apparaîtront dans la colonne latérale des réglages du bloc principal. Il arrive que vous puissiez voir un onglet séparé pour les styles, représenté par un cercle noir et blanc.

Une flèche pointe vers l’option Styles dans la colonne latérale des réglages du bloc.
Une flèche pointant de l’icône « Styles » dans les réglages du bloc vers la section « Bordure et ombre ».
Exemple de réglages de bordure et d’ombre dans le bloc Image

Voir tous les réglages

Ajustez l’apparence du texte du bloc avec les réglages suivants.

Si le réglage n’est pas visible, cliquez sur les trois points à droite de Bordure et ombre (comme illustré à droite). Vous pouvez alors choisir l’option à laquelle vous souhaitez accéder :

  • Bordure
  • Rayon
  • Ombre
Une flèche pointant du menu « Bordure et ombre » aux réglages Bordure et ombre.

Ajouter une bordure

Le réglage Bordure vous permet d’ajouter une ligne qui englobe un bloc. Vous pouvez choisir son épaisseur, sa couleur et son rayon.

Pour ajouter une bordure à un bloc :

  1. Sélectionnez le bloc souhaité et ouvrez la colonne latérale Réglages du bloc.
  2. Localisez la section Bordure et ombre dans la colonne latérale.
  3. Saisissez une valeur précise ou faites glisser le curseur pour dessiner la bordure.
  4. Facultatif : modifiez la couleur de la bordure en cliquant sur le cercle à gauche du champ de taille. Sélectionnez une couleur de thème, une couleur par défaut, ou définissez la vôtre à l’aide du sélecteur de couleur.

Par défaut, les valeurs de la bordure sont calculées en pixels. Cliquez sur le « px » à côté du champ pour changer d’unité (%, em, rem, vw et vh). En savoir plus sur les différentes unités de réglage de dimension.

Video showing how to add a border to an image block.

Ajuster le rayon de la bordure

Le réglage Rayon donne une apparence arrondie aux bordures de votre bloc. Définir le rayon sur 0 signifie que le bloc a des arêtes vives, tandis que le rayon de 100 signifie que les arêtes sont arrondies comme suit :

Un bloc Image avec une bordure arrondie.
Un bloc Image avec des bordures arrondies

Réglages avancés des bordures

Vous pouvez faire preuve de créativité avec vos réglages Bordure et Rayon. En utilisant l’option « Dissocier les côtés », vous pouvez définir la bordure et le rayon de chaque côté du bloc.

Un encadré est dessiné autour de l’icône permettant de dissocier les côtés, avec l’info-bulle « Dissocier les côtés ».

Pour définir une bordure ou un rayon personnalisé pour chaque côté :

  1. Cliquez sur l’icône Dissocier les côtés à droite de la bordure ou du rayon.
  2. Définissez des dimensions personnalisées pour chaque côté.

Vous pouvez également définir différentes couleurs et différents styles pour la bordure en cliquant sur le sélecteur de couleur et de style de bordure.

Réglages de bordure et de rayon
Exemple de bordure et de rayon personnalisés pour créer un effet unique.

Ajouter une ombre

Disponible sur certains blocs (notamment Bouton, Image et Colonnes), l’option Ombre donne à votre bloc une ombre portée.

La section Ombre est ouverte avec une flèche pointant vers les différentes options d’ombre portée.
Exemple de bouton dans un bloc Boutons auquel une ombre portée est appliquée.

Choisissez l’un des effets d’ombre suivants pour votre élément :

  • Naturel
  • Profond
  • Pointu
  • Contouré
  • Précis

Personnaliser les réglages de l’ombre

Vous pouvez personnaliser les effets d’ombre par défaut ou créer les vôtres via l’éditeur de styles.

  1. Consultez le tableau de bord de votre site.
  2. Accédez à Apparence → Éditeur.
  3. Sélectionnez « Styles » dans le menu de gauche.
    • Dans l’éditeur, vous pouvez également sélectionner l’icône Styles dans le coin supérieur droit. Le bouton ressemble à un cercle noir et blanc.
  4. Cliquez sur l’option « Ombres ».
  5. Cliquez sur le nom de l’ombre à personnaliser. Pour créer une nouvelle ombre personnalisée, cliquez sur l’icône plus en regard du titre « Personnalisé », puis cliquez sur le nom de la nouvelle ombre personnalisée.
  6. Dans les réglages d’ombre, vous verrez un aperçu de l’apparence de l’ombre et le nom de l’ombre en dessous. Cliquez sur le nom de l’ombre pour ajuster les réglages suivants :
    • Couleur : à l’aide du sélecteur de couleur, choisissez la couleur de l’ombre.
    • Externe ou Interne : choisissez si l’ombre doit apparaître à l’extérieur ou à l’intérieur de l’élément.
    • Position X et position Y : ajustez la distance à laquelle l’ombre doit s’afficher.
    • Flou : degré de netteté de l’ombre.
    • Diffusion : taille de l’ombre.
  7. Lorsque vous avez terminé, cliquez sur le bouton « Enregistrer » pour enregistrer vos modifications.

Réinitialiser la bordure et l’ombre

Vous pouvez réinitialiser les personnalisations apportées aux bordures et aux ombres du bloc et recommencer. Pour réinitialiser les styles :

  1. Cliquez sur les options Bordure et ombre (les trois points verticaux à droite de l’en-tête de section).
  2. Décochez un réglage individuel pour réinitialiser ce réglage spécifique, ou cliquez sur « Réinitialiser tout » pour réinitialiser tous les réglages.

S’il n’y a pas d’option permettant de réinitialiser, c’est qu’il n’y a pas de personnalisations à supprimer.

Une flèche de l’icône des réglages de bordure vers des encadrés dessinés autour des réglages individuels et de l’option « Tout réinitialiser ».
Copied to clipboard!