Comment créer des colonnes qui se chevauchent avec les options de colonne et de transformation de Divi

Dans l'une des dernières mises à jour de Divi, nous avons ajouté des commandes assez étonnantes aux colonnes du constructeur. Il est maintenant plus facile que jamais de créer des chevauchements de colonnes. Dans ce tutoriel, nous allons vous montrer comment créer une section de témoignage avec trois colonnes qui se chevauchent à l'aide des paramètres de colonne et de transformation de Divi.

Pour cette conception, nous utiliserons trois couleurs, un orange riche #ff8300, un jaune chaud #ffd400 et un dégradé bleu remarquable #0c99c1. Vous pouvez appliquer cette conception de colonnes superposées à un projet de site Web en un rien de temps.

Commençons.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

1. Créer une nouvelle section régulière + une ligne à trois colonnes

La première chose que vous devez faire est de créer une section régulière avec une ligne à trois colonnes.

Ajuster l'espacement de la section

Augmentez le rembourrage supérieur et inférieur de la section.

• Rembourrage supérieur : 4vw
• Rembourrage inférieur : 16vw

Ajuster la taille et l'espacement de la ligne

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

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

Après cela, modifiez les paramètres d'espacement :

• Rembourrage inférieur : 0px
• Rembourrage gauche : 11vw
• Rembourrage droit : 8vw

Ajouter un arrière-plan dégradé

Ajoutez ensuite un arrière-plan dégradé :

• Style d'arrière-plan : Dégradé
• Première couleur : blanc #ffffff
• Deuxième couleur : Orange # ff8300
• Type de dégradé : Linéaire
• Direction du gradient : 180 degrés
• Position de départ : 35 %
• Position finale : 35 %

2. Styler les colonnes

Avant d'ajouter des modules aux colonnes, nous allons modifier les paramètres de style, d'espacement et de transformation de chaque colonne individuellement.

Colonne 1

Les premières étapes du style de colonne sont les coins arrondis et l'ombre de la boîte :

• Bordure : 20px sur tous les coins arrondis
• Box Shadow : première option d'ombre de boîte
• Position verticale de l'ombre de la boîte : 0px
• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)
• Position de l'ombre de la boîte : extérieur

* Avant d'ajouter des paramètres de transformation, nous allons copier et coller ces styles d'élément dans les colonnes deux et trois.

Ouvrez à nouveau les paramètres de la colonne 1 et accédez à l'onglet Conception. Nous utiliserons les paramètres de transformation pour que la première colonne chevauche la seconde. Juste au cas où vous l'auriez oublié, l'axe des x est horizontal et l'axe des y est vertical.

• Transformer Traduire :
  • Bureau : axe x = 3vw. axe y = 14.2vw
  • Tablette et téléphone : axe x = -14vw. axe y = 16vw
• Visibilité : indice Z 10

Colonne 2

Passons à la deuxième colonne ! Accédez à l'ombre de la boîte (que vous avez ajoutée à l'une des étapes précédentes) et augmentez la force du flou de l'ombre de la boîte.

• Force de flou d'ombre de boîte : 50px

Continuez en ajoutant des valeurs d'espacement personnalisées à la colonne 2.

• Rembourrage supérieur :
  • Bureau = 3vw
  • Tablette + Téléphone = 5vw
• Rembourrage inférieur :
  • Bureau = 5vw
  • Tablette + Téléphone = 7vw
• Rembourrage gauche :
  • Bureau = 2vw
  • Tablette + Téléphone = 4vw
• Rembourrage droit :
  • Bureau = 2vw
  • Tablette + Téléphone = 4vw

Il est temps de transformer la deuxième colonne ! La deuxième colonne reste à sa place pour le bureau, mais nous devons appliquer des paramètres de transformation personnalisés sur des écrans plus petits. Allez-y et ajustez l'onglet de traduction de transformation. De plus, nous augmenterons l'indice Z à 9.

• Transformer Traduire :
  • Tablette et téléphone : axe x = 9vw. axe y = 13vw
• Visibilité : indice Z 9

Colonne 3

Passons à la troisième colonne ! Augmentez la force du flou de l'ombre de la boîte de l'ombre de la boîte déjà existante.

• Force de flou d'ombre de boîte : 50px

Ouvrez ensuite les paramètres d'arrière-plan et ajoutez un arrière-plan dégradé bleu.

• Arrière-plan : Dégradé
• Dégradé de couleur un : #0c99c1
• Dégradé de couleur deux : rgba(5,0,78,0,72)
• Type de dégradé : Linéaire
• Direction du gradient : 220 degrés
• Position de départ : 0%
• Position finale : 100 %

Ajoutons maintenant l'espacement.

• Rembourrage supérieur :
  • Bureau = 3vw
  • Tablette + Téléphone = 10vw
• Rembourrage inférieur :
  • Bureau = 3vw
  • Tablette + Téléphone = 7vw
• Rembourrage gauche :
  • Bureau = 1.5vw
  • Tablette + Téléphone = 10vw
• Rembourrage droit :
  • Bureau = 1.5vw
  • Tablette + Téléphone = 10vw

Enfin, nous allons faire en sorte que la troisième colonne chevauche la seconde en modifiant les paramètres de traduction de transformation.

• Transformer Traduire :
  • Bureau : axe x = -10vw. axe y = 14.2vw
  • Tablette : axe x = -14vw. axe y = 9vw
  • Téléphone : axe x = -14vw. axe y = 11vw
• Visibilité : indice Z 9

Voici un aperçu de nos colonnes avant d'ajouter les modules.

3. Ajoutez des modules aux colonnes et stylisez-les

Maintenant, ajoutons les modules à chaque colonne !

Colonne 1

Dans la première colonne, nous allons insérer un module image et un module texte. Ajoutez d'abord le module d'image.

1. Ajouter le module d'image

Insérez une photo de votre client et stylisez-la comme suit :

• Alignement : à gauche
• Forcer la pleine largeur : Oui

Ajoutez également une bordure inférieure à l'image.

• Couleur de la bordure inférieure : jaune #ffd400
• Largeur de la bordure inférieure : 9px
• Style de bordure : solide

2. Ajouter le module de texte

Ajoutez un nouveau module de texte juste en dessous du module d'image et insérez le nom et la position du client.

• Nom : Titre 4
• Position : paragraphe

Après avoir ajouté le contenu, nous allons styliser les paramètres de texte :

• Police du texte : Nunito Sans
• Poids de la police de texte : régulier
• Alignement du texte : Centre
• Couleur du texte : Noir # 000000
• Taille du texte:
  • Bureau = 0.8vw
  • Tablette = 1.8vw
  • Téléphone = 2.8vw

Passez aux paramètres de texte d'en-tête et appliquez les modifications suivantes :

• Texte du titre : H4
• Police de la rubrique 4 : Poppins
• Titre 4 Poids de la police : gras
• Titre 4 Couleur du texte : Noir #000000
• Titre 4 Taille du texte :
  • Bureau = 1vw
  • Tablette = 3vw
  • Téléphone = 4vw

Nous allons également modifier les paramètres d'espacement :

• Marge supérieure:
  • Bureau = 1.5vw
  • Tablette = 3vw
  • Téléphone = 7vw
• Marge inférieure :
  • Bureau = 1.5vw
  • Tablette = 3vw
  • Téléphone = 7vw

Votre colonne devrait ressembler à ceci une fois que vous avez terminé les deux modules :

Colonne 2

Dans la colonne 2, nous avons besoin d'un texte, d'un texte de présentation et d'un module de séparation. Le premier module de texte est celui qui ressemble à une bannière inclinée dans le coin supérieur droit de la colonne. Nous utiliserons les options de transformation pour obtenir cet effet.

1. Ajouter un module de texte.

Ajoutez un nouveau module de texte et ajoutez le mot « Témoignage » dans la zone de contenu.

Ajoutez un fond jaune au module.

• Couleur d'arrière-plan : jaune #ffd400

Passez à l'onglet Conception et modifiez les paramètres de texte et d'espacement en conséquence :

• Police de texte : Poppins
• Poids de la police de texte : gras
• Alignement du texte : Centre
• Couleur du texte : Blanc #ffffff
• Taille du texte : 23 pixels
• Marge de droite : -50px
• Marge de gauche : -50px
• Rembourrage supérieur : 15px
• Rembourrage inférieur : 15px

Enfin, nous allons ajuster les paramètres de transformation comme suit :

• Transformer Traduire :
  • Bureau = 17vw sur l'axe des x
  • Tablette = 24vw sur l'axe des x, 1vw sur l'axe des y
  • Téléphone = 20vw sur l'axe des x, 1vw sur l'axe des y
• Transformation Rotation : 32 degrés sur le premier axe

2. Ajoutez le module Blurb.

Une fois que vous avez terminé le premier module, il est temps d'ajouter un module de présentation.

Le module de présentation est l'endroit où le témoignage du client est affiché. Tout d'abord, cliquez sur l'icône + pour ajouter un module et sélectionnez le texte de présentation.

Ensuite, insérez le contenu, sélectionnez une icône et stylisez l'icône comme suit :

• Utiliser l'icône : Oui, une étoile
• Couleur de l'icône : jaune #ffd400
• Placement de l'icône : à gauche
• Utiliser la taille de la police de l'icône : Oui, 48 px

Continuez en stylisant le texte du titre au niveau H4

• Texte du titre : H4
• Police du titre : Poppins
• Poids de la police du titre : gras
• Couleur de la police du titre : noir #ffffff

• Taille du texte du titre :
  • Bureau = 1.2vw
  • Tablette = 2.3vw
  • Téléphone = 3.3vw
• Hauteur de la ligne de titre :
  • Bureau = 2vw
  • Tablette = 3.4vw
  • Téléphone = 4.6vw

Stylisez les paramètres du corps du texte en conséquence :

• Police du corps du texte : Nunito Sans
• Poids du corps du texte : demi-gras
• Couleur du corps du texte : noir #000000
• Taille du corps du texte :
  • Bureau = 0.7vw
  • Tablette = 1.6vw
  • Téléphone = 2.4vw
• Hauteur de la ligne du corps :
  • Bureau = 1.6vw
  • Tablette = 4vw
  • Téléphone = 5vw

Nous voulons que le texte de présentation soit moins large que sa colonne, pour ce faire, nous ajusterons la largeur, les marges et les valeurs de remplissage.

Tout d'abord, nous allons ajuster la largeur du texte de présentation :

• Largeur du contenu : 100 %
• Largeur:
  • Ordinateur de bureau = 58,4 %
  • Tablette + Téléphone = 90%

Et puis, les paramètres d'espacement :

• Marge supérieure : 3vw
• Marge inférieure : 3vw
• Marge droite : -24vw
• Remplissage gauche : 0px
• Rembourrage droit : 4px

3. Ajouter un diviseur

Le dernier module dont nous avons besoin dans cette colonne est un module diviseur. Appliquez les modifications suivantes au diviseur :

• Voir diviseur : Oui
• Couleur du diviseur : Noir #oooooo
• Poids du diviseur : 1px

Nous y sommes presque! Voici à quoi ressemble notre résultat jusqu'à présent :

Colonne 3

Passons à la troisième et dernière colonne ! Nous utilisons cette colonne pour afficher un appel à l'action. Nous utilisons trois modules ; un module texte, un module diviseur et un module bouton.

1. Ajouter un module de texte

La première chose que nous ajouterons à cette colonne est le module de texte.

Nous allons ajouter un titre en H3 et un peu de texte de paragraphe dans la zone de contenu.

Allez-y et stylisez les paramètres de texte en conséquence :

• Police du texte : Nunito Sans
• Poids de la police de texte : régulier
• Couleur de la police du texte : blanc #ffffff
• Taille de la police du texte :
  • Bureau = 0.8vw
  • Tablette = - 2vw
  • Téléphone = 2.6vw
• Hauteur de la ligne de texte :
  • Bureau = 1.5vw
  • Tablette = 4vw
  • Téléphone = 5vw

Complétez le module de texte en stylisant les paramètres de texte de l'en-tête.

• Texte du titre : H3
• Police de la rubrique 3 : Poppins
• Titre 3 Poids de la police : gras
• Titre 3 Couleur du texte : Blanc #ffffff
• Titre 3 Taille du texte :
  • Bureau = 1.1vw
  • Tablette = 3vw
  • Téléphone = 4vw
• En-tête 3 Hauteur de ligne :
  • Bureau = 1.5vw
  • Tablette = 3vw
  • Téléphone = 4.5vw

2. Ajouter un module diviseur

Continuez en ajoutant un module diviseur à la colonne 3. Pour styliser le diviseur, nous allons copier et coller les styles de diviseur à partir de celui que vous pouvez trouver dans la colonne 2.

Ouvrez les paramètres du diviseur et changez la couleur du noir au blanc. Ajoutez également un rembourrage supérieur et inférieur.

• Couleur du diviseur: Blanc #ffffff
• Rembourrage supérieur : 40 px
• Rembourrage inférieur : 20px

3. Ajouter un module de boutons

Passons au dernier module, qui est un module de boutons. Ajoutez une copie de votre choix.

Passez à l'onglet Conception et stylisez le bouton comme suit :

• Utiliser un style personnalisé pour le bouton : Oui
• Taille du texte du bouton :
  • Bureau = 0.8vw
  • Tablette = 2.4vw
  • Téléphone = 3vw
• Couleur du texte du bouton : blanc #ffffff

• Couleur d'arrière-plan du bouton : Dégradé
• Dégradé de couleur un : jaune #ffd400
• Dégradé de couleur deux : orange # ff8300
• Type de dégradé : Linéaire
• Direction du gradient : 202 deg.

• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 1px
• Police des boutons : Nunito Sans
• Poids de la police du bouton : lourd
• Style de police des boutons : TT

Pour que le bouton apparaisse bien sur toutes les tailles d'écran, nous allons ajuster le remplissage du bouton comme suit :

Bureau

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw
• Rembourrage droit : 3vw
• Rembourrage gauche : 3vw

Tablette

• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 2vw
• Rembourrage droit : 6vw
• Rembourrage gauche : 6vw

Téléphone

• Rembourrage supérieur : 3vw
• Rembourrage inférieur : 3vw
• Rembourrage droit : 8vw
• Rembourrage gauche : 8vw

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Emballer

Cette construction à trois colonnes qui se chevauchent a fière allure comme témoignage, mais nous sommes sûrs que vous pouvez la mettre en œuvre pour d'autres choses étonnantes. Nous espérons que cela vous incitera à utiliser la transformation de colonne et les options de chevauchement pour de futurs projets. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!