Comment ajouter des ombres de boîte unilatérales aux éléments de conception dans Divi

L'ajout d'ombres de boîte unilatérales à divers éléments de conception dans Divi est un moyen subtil d'ajouter une touche créative sans détourner l'attention du contenu. Dans ce tutoriel, je vais vous montrer comment ajouter des ombres de boîte unilatérales à la mise en page de la FAQ sur la thérapie de Divi. En prime, je vais également vous montrer comment combiner des icônes de présentation en tant que graphique centré verticalement. En apprenant ces techniques de conception Divi, vous pouvez ajouter des ombres de boîte unilatérales à tous les modules ou colonnes de votre choix.

Commençons.

Aperçu

Voici un aperçu de la conception de la mise en page FAQ que nous allons construire en utilisant des ombres de boîte unilatérales.

Commencer

Pour commencer, vous devrez créer une nouvelle page. Depuis votre tableau de bord WordPress, accédez à Pages > Ajouter un nouveau. Donnez ensuite un titre à votre page et déployez le constructeur visuel. Sélectionnez l'option « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle Charger à partir de la bibliothèque, recherchez et sélectionnez le pack de mise en page du thérapeute. Sélectionnez ensuite la présentation de la page FAQ du thérapeute et cliquez sur « Utiliser cette présentation ».

Vous êtes maintenant prêt à commencer à concevoir.

Partie 1 : Organisation de la mise en page

Dans cette mise en page prédéfinie, nous concentrerons notre attention sur la deuxième section contenant les questions fictives à l'intérieur de plusieurs modules à bascule. Pour commencer, modifions la disposition des colonnes de la ligne en trois colonnes (1/3 1/3 1/3).

Ensuite, déplacez tous les modules de la colonne 2 vers la colonne 3 à l'aide de la fonction Multiselect de Divi. Pour ce faire, maintenez la touche Commande (ou Contrôle) enfoncée et cliquez sur chaque module dans la colonne 2 jusqu'à ce que tous soient sélectionnés. Ensuite, faites-les glisser vers la colonne 3.

Maintenant, nous devons donner un peu plus d'espace à notre rangée. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur: 80%
Largeur de gouttière : 2
Égaliser les hauteurs de colonne : OUI

Partie 2 : Conception des modules à bascule

Pour personnaliser la conception de tous les modules à bascule de cette section à la fois, utilisez la fonction Multiselect pour sélectionner chacun des modules à bascule. Une fois que tous sont sélectionnés, ouvrez les paramètres de l'un des modules à bascule.

Ensuite, mettez à jour les éléments suivants :

Couleur du texte à bascule ouverte : #ffffff
Couleur d'arrière-plan de la bascule ouverte : rgba(0,0,0,0)
Couleur du texte à bascule fermée : #ffffff
Couleur d'arrière-plan à bascule fermée : rgba(0,0,0,0)

Couleur du corps du texte : #ffffff

Rembourrage personnalisé : 3vw en haut, 3vw en bas, 2vw à gauche, 2vw à droite

Nous pouvons maintenant ajouter une ombre de boîte sur le côté gauche de notre module à bascule en mettant à jour les options d'ombre de boîte comme suit :

Position horizontale de l'ombre de la boîte : -30 px
Position verticale de l'ombre de la boîte : 0px
Force du flou d'ombre de la boîte: 40px
Force de propagation de l'ombre de la boîte : -35px
Couleur de l'ombre : rgba(0,0,0,0.4)

L'astuce pour positionner correctement l'ombre de la boîte consiste à déplacer l'ombre vers la gauche en définissant la position horizontale sur -30px. Après cela, vous devez trouver le bon équilibre entre la force du flou et la force de propagation afin de garder l'ombre de la boîte visible sur la gauche sans qu'elle ne déborde sur le haut et le bas du module.

Enregistrer les paramètres.

Maintenant, tous vos modules à bascule ont été mis à jour avec le nouveau design.

Cependant, nous voulons que l'ombre de la boîte des modules à bascule dans la colonne de droite soit positionnée sur le côté droit (pas sur la gauche). Pour changer cela, utilisez Multiselect pour sélectionner tous les modules à bascule dans la colonne de droite et ouvrez les paramètres des éléments. Modifiez ensuite la position horizontale de -30px à 30px comme suit :

Position horizontale de l'ombre de la boîte : 30 px

Ensuite, enregistrez les paramètres.

Cela prend en charge nos modules à bascule avec leurs ombres de boîte unilatérales uniques. Nous devons maintenant ajouter des ombres de boîte unilatérales similaires à nos colonnes.

Partie 3 : Ajout d'ombres de boîte unilatérales aux colonnes

Pour ajouter des ombres de boîte unilatérales aux colonnes, nous devrons ajouter quelques extraits de CSS sous l'onglet avancé des paramètres de ligne.

Ouvrez les paramètres de ligne et cliquez sur l'onglet avancé. À l'intérieur de l'élément principal de la colonne 1, ajoutez le CSS suivant :

box-shadow: 30px 0px 70px -45px rgba(0,0,0,0.4)

Si vous n'êtes pas familier avec CSS, vous devriez être en mesure de reconnaître la similitude du code avec les paramètres du module box shadow disponibles dans le constructeur Divi. Dans le code ci-dessus…

30px est la valeur pour la position horizontale
0px est la valeur pour la position verticale
70px est la valeur de la force du flou
-45px est la valeur de la force de propagation
rgba(0,0,0,0.4) est la couleur de l'ombre

J'ai donné à l'ombre de la boîte de colonne une force de flou plus grande que les modules à bascule pour créer une profondeur légèrement plus grande.

Afin d'ajouter une ombre de boîte de gauche à la colonne 3, vous devrez ajouter le CSS suivant à l'élément principal de la colonne 3:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Encore une fois, la seule différence entre ce CSS et celui utilisé pour la colonne 1 est la position horizontale négative.

Partie 4 : Ajout d'icônes de présentation à la colonne 2

Maintenant que nos ombres de boîte unilatérales sont terminées, nous avons une colonne centrale vide où nous pouvons combiner quelques icônes de module de présentation pour créer une conception graphique simple. Pour ce faire, ajoutez d'abord un module de présentation et supprimez le titre et le contenu. Cliquez ensuite pour utiliser une icône et sélectionnez l'icône de discussion suivante.

Mettez ensuite à jour les paramètres de conception comme suit :

Couleur de l'icône : rgba(203 241 252 0,37)
Taille de la police de l'icône : 20vw
Marge personnalisée : 0px en bas

Ensuite, dupliquez le module de présentation pour en créer un supplémentaire en dessous.

Ensuite, mettez à jour le texte de présentation supérieur avec une icône de point d'interrogation et mettez à jour les paramètres de conception suivants :

Taille de la police de l'icône : 9vw
Largeur : 40 %
Alignement du module : à droite
Marge personnalisée : -2vw

Enfin, copiez le module de présentation de point d'interrogation que vous venez de concevoir et collez-le sous le module de présentation de grande icône de chat. Mettez ensuite à jour les paramètres de conception de ce module de présentation comme suit :

Partie 5 : Centrage vertical des modules dans la colonne 2

Pour terminer la conception, nous devons centrer verticalement les icônes de présentation dans la colonne 2 afin qu'elles restent un élément de conception centré pour notre mise en page. Pour ce faire nous allons capitaliser sur l'utilisation du flex par Divi. Parce que nous avons choisi d'égaliser les hauteurs de colonne pour notre ligne, nous pouvons utiliser un simple extrait de CSS pour centrer tous les modules dans la colonne 2. Vous pouvez toujours en savoir plus sur la façon d'aligner verticalement le contenu dans Divi à votre convenance. Mais pour l'instant, ouvrez les paramètres de ligne et cliquez sur l'onglet avancé. Ensuite, entrez le css suivant dans l'élément principal de la colonne 2:

margin: auto

Maintenant, tous les modules de présentation seront centrés verticalement dans la colonne 2.

Pour rendre les choses plus faciles pour les yeux, centrez le texte sur chacun des modules de texte situés en haut de la colonne 1 et de la colonne 2. Ajoutez ensuite un dégradé d'arrière-plan à la section comme suit :

Dégradé de fond à gauche : #616ce1
Dégradé d'arrière-plan à droite : #3846e0

C'est ça. Maintenant, la conception est terminée.

Découvrez le résultat final.

Et, remarquez comment l'ombre de la boîte s'agrandit et se contracte lors de l'ouverture et de la fermeture des bascules.

Dernières pensées

L'ajout d'ombres de boîte unilatérales aux modules et aux colonnes peut donner de la profondeur à votre contenu de manière créative. L'astuce est de savoir comment ajuster efficacement les paramètres de conception de l'ombre de la boîte de Divi. Cette mise en page de la FAQ n'est qu'un des nombreux exemples que vous pouvez incorporer à cette conception. Mais le processus global est assez simple et devrait être une technique intéressante que vous pouvez conserver dans votre boîte à outils de conception pour de futurs projets.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!