Comment utiliser de manière créative les ombres de Row Box avec Divi

L'une des mises à jour les plus récentes de Divi était attendue depuis longtemps ; l'intégration de box shadows dans des sections, des rangées et des modules. Dans cet article, nous nous concentrerons sur la façon dont les ombres de zone de ligne peuvent améliorer l'apparence générale de votre site Web.

Pour illustrer la profondeur que les ombres de boîte peuvent apporter à votre site Web, nous avons créé un exemple que nous allons vous montrer comment recréer étape par étape.

Résultat

Bureau

La mise en page que nous allons vous montrer comment recréer ressemble à ceci sur le bureau :

Mobile

Et comme ça sur mobile :

Comment utiliser de manière créative les ombres de Row Box avec Divi

Abonnez-vous à notre chaîne Youtube

Format d'en-tête

La première chose à faire est de choisir le bon format d'en-tête. Accédez à votre tableau de bord WordPress > Personnaliser > En-tête et navigation > Format d'en-tête > Et choisissez « Centré » comme style d'en-tête .

Barre de menus principale

Revenez à En-tête et navigation > Barre de menus principale > Et effectuez les ajustements suivants :

• Masquer l'image du logo : Activer
• Hauteur du menu : 211
• Hauteur maximale du logo : 30
• Taille du texte : 16
• Espacement des lettres : 2
• Police : Lato Light
• Style de police : majuscule
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan du menu déroulant : rgba(255,255,255,0)

Première section

Une fois que vous avez apporté les modifications dans le personnalisateur de thème, il est temps de commencer avec la mise en page. Créez une nouvelle page, activez le Divi Builder et basculez vers Visual Builder. Ensuite, ajoutez une première section standard à la page.

Fond dégradé de section

Cette section aura besoin du fond dégradé suivant :

• Première couleur : #ea2e7d
• Deuxième couleur : #edd900
• Type de dégradé : Linéaire
• Direction du gradient: 110deg
• Position de départ : 0%
• Position finale : 100 %

Espacement

Passez à l'onglet Conception. Dans la sous-catégorie Espacement, utilisez '100px' pour le rembourrage supérieur et '200px' pour le rembourrage inférieur.

Ligne à une colonne

Fond de dégradé de ligne

Continuez en ajoutant une ligne à une colonne à la section et utilisez l'arrière-plan dégradé suivant :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : #ea2e7d
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 56 %
• Position finale : 100 %

Fond dégradé de colonne

Faites défiler vers le bas et utilisez l'arrière-plan dégradé suivant pour la colonne de cette ligne :

• Première couleur : rgba (237,217,0,0,77)
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé de colonne : Linéaire
• Direction du gradient de la colonne : 180 deg
• Position de départ de la colonne : 0
• Position de fin de colonne : 100

Dimensionnement

Accédez à l'onglet Conception et appliquez les modifications suivantes à la sous-catégorie Dimensionnement :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 27 %

Espacement

Ensuite, utilisez « 20px » pour le rembourrage personnalisé en haut, à droite, en bas et à gauche de la ligne.

Module de texte

Une fois que vous avez terminé avec les paramètres de ligne, ajoutez un module de texte et utilisez les paramètres suivants pour la sous-catégorie de texte :

• Police du texte : Arvo
• Taille de la police du texte : 98 px
• Couleur du texte : #FFFFFF
• Espacement des lettres du texte : 32 px
• Hauteur de la ligne de texte : 1.4em
• Orientation du texte : Centre

Deuxième partie

Ajoutez une autre section juste en dessous de la première section. Cette section contiendra toutes les autres lignes présentes dans la mise en page.

Fond dégradé de section

Tout d'abord, utilisez l'arrière-plan dégradé suivant pour cette section :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : #592851
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 80 %
• Position finale : 80 %

Espacement

Ensuite, allez dans l'onglet Design et ajoutez « 100px » au rembourrage inférieur.

Première ligne à deux colonnes

Couleur d'arrière-plan de la ligne

Ajoutez la première ligne à deux colonnes à cette nouvelle section et utilisez '#dddddd' comme couleur d'arrière-plan.

Colonne 1 Fond dégradé

La première colonne aura besoin du fond dégradé suivant :

• Première couleur : #6ac922
• Deuxième couleur : #b6c1b2
• Type de dégradé de la colonne 1 : linéaire
• Direction du gradient de la colonne 1 : 136 deg
• Position de départ de la colonne 1 : 23 %
• Position finale de la colonne 1 : 100 %

Couleur d'arrière-plan de la colonne 2

Faites défiler vers le bas et utilisez '#dddddd' comme couleur d'arrière-plan de la colonne 2.

Dimensionnement

Passez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie Dimensionnement :

• Utiliser la largeur personnalisée : Activer
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

La sous-catégorie Espacement aura besoin du remplissage et de la marge suivants :

• Remplissage en haut, à droite, en bas et à gauche : 0px
• Marge supérieure : -150px
• Remplissage supérieur de la colonne 1 : 235 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage inférieur de la colonne 1 : 235 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage supérieur de la colonne 2: 150px
• Remplissage inférieur de la colonne 2 : 150px

Boîte ombre

Ouvrez la sous-catégorie Box Shadow et utilisez les paramètres suivants :

• Position horizontale de l'ombre de la boîte : -3px
• Position verticale de l'ombre de la boîte : -18 px
• Force du flou de l'ombre de la boîte: 77px
• Force de propagation de l'ombre de la boîte: 23px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Premier module de texte

Ensuite, ajoutez le premier module de texte à la deuxième colonne et utilisez les paramètres suivants pour la sous-catégorie de texte :

• Police du texte : Arvo
• Taille de la police du texte : 34 px
• Couleur du texte : #7a7a7a
• Orientation du texte : Centre

Deuxième module de texte

Ajoutez un autre module de texte mais utilisez plutôt les paramètres suivants :

• Police du texte : Lato Light
• Orientation du texte : Centre

Ouvrez la sous-catégorie Dimensionnement, utilisez une largeur de « 75 % » et sélectionnez l'alignement du module central.

Enfin, ajoutez une marge supérieure de « 50px ».

Deuxième rangée à deux colonnes

Couleur d'arrière-plan de la ligne

Ajoutez une autre ligne à deux colonnes à la section et choisissez '#b99bc1' comme couleur d'arrière-plan.

Colonne 1 Couleur d'arrière-plan

Faites défiler vers le bas et choisissez '#dddddd' pour la couleur d'arrière-plan de la colonne 1.

Dimensionnement

Passez à l'onglet Conception et appliquez les paramètres suivants à la sous-catégorie Dimensionnement :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ensuite, utilisez le remplissage suivant :

• Remplissage en haut, à droite, en bas et à gauche : 0px
• Remplissage supérieur de la colonne 1 : 150 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage inférieur de la colonne 1 : 50 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage supérieur de la colonne 2: 150px
• Remplissage inférieur de la colonne 2 : 150px

Boîte ombre

Ouvrez la sous-catégorie Box Shadow et utilisez les paramètres suivants :

• Position horizontale de l'ombre de la boîte : -4px
• Position verticale de l'ombre de la boîte : 24 px
• Force du flou de l'ombre de la boîte: 77px
• Force de propagation de l'ombre de la boîte: 23px
• Couleur de l'ombre : rgba(0,0,0,0.3)
• Position de l'ombre de la boîte : ombre extérieure

Premier module d'image dans la première colonne

Continuez en ajoutant un module image à la première colonne. Après avoir téléchargé l'image, appliquez les paramètres suivants à la sous-catégorie Espacement :

• Afficher l'espace sous l'image : Oui
• Marge supérieure : -500 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Marge de droite : -50px (ordinateur de bureau), 0px (tablette et téléphone)
• Marge de gauche : 200 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Ouvrez la sous-catégorie Box Shadow et utilisez l'ombre de boîte suivante :

• Position horizontale de l'ombre de la boîte : 2px
• Position verticale de l'ombre de la boîte : 2px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte: 30px
• Couleur de l'ombre : rgba(255,255,255,0.68)
• Position de l'ombre de la boîte : ombre extérieure

Deuxième colonne d'image dans la première colonne

Ajoutez un autre module Image à la même colonne et utilisez la marge suivante :

• Marge supérieure : -50px (ordinateur de bureau), 0px (tablette et téléphone)
• Marge de droite : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Marge inférieure : 30px
• Marge de gauche : 100 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Ensuite, faites défiler vers le bas et utilisez l'ombre de la boîte suivante :

• Position horizontale de l'ombre de la boîte : 2px
• Position verticale de l'ombre de la boîte : 2px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte: 30px
• Couleur de l'ombre : rgba(255,255,255,0.68)
• Position de l'ombre de la boîte : ombre extérieure

Cloner des modules de texte et les placer dans la deuxième colonne

Enfin, clonez les deux modules de texte de la ligne précédente et placez-les dans la deuxième colonne de cette ligne. Il n'y a qu'une chose que vous devrez changer ; la couleur du texte. Ouvrez les paramètres de chaque module de texte et changez la couleur du texte en « #FFFFFF ».

Résultat

Bureau

Toutes les étapes de cet article conduiront au résultat suivant sur le bureau :

Mobile

Et le résultat suivant sur mobile :

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser de manière créative les ombres de boîte sur les lignes. Nous avons créé un exemple coloré où vous pouvez clairement remarquer les ombres de la boîte de profondeur donnent à une mise en page. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par Dmitry Guzhanin / shutterstock.com