Comment transformer des séparateurs horizontaux en séparateurs verticaux avec Divi

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment transformer le module de séparation horizontal standard que nous connaissons tous en un module vertical en utilisant le pack de mise en page de l'entreprise de déménagement de Divi comme exemple. Cette approche sera particulièrement utile si vous essayez de créer des chronologies sur vos pages. Il est également très utile pour les sections « comment ça marche », et bien plus encore. Après avoir configuré le séparateur vertical, nous ajouterons des modules Blurb par-dessus pour créer l'effet de chronologie. Ce tutoriel ne nécessite aucun code CSS et est basé uniquement sur les options intégrées de Divi.

Allons-y !

Aperçu

Avant de plonger dans le tutoriel, regardons le résultat sur différentes tailles d'écran.

Commençons à créer : ajoutez une nouvelle page et téléchargez la page de destination du pack de mise en page de l'entreprise de déménagement

Ajouter une nouvelle page et basculer vers Visual Builder

Commençons par ajouter une nouvelle page, ajouter un titre et passer à Visual Builder.

Choisissez une mise en page prédéfinie

Une fois cela fait, vous aurez la possibilité de créer à partir de zéro, de choisir une mise en page prédéfinie ou de cloner une page existante. Nous allons utiliser la page de destination du Moving Company Layout Pack pour créer le résultat final, alors allez-y et parcourez les mises en page prédéfinies.

Sélectionnez la page de destination du pack de mise en page de l'entreprise de déménagement

Faites défiler les mises en page prédéfinies jusqu'à ce que vous tombiez sur le pack de mise en page de l'entreprise de déménagement et téléchargez la page de destination sur votre page.

Commencez à créer la chronologie du diviseur vertical

Trouver la section Chronologie

Nous sommes maintenant prêts à commencer à transformer les diviseurs horizontaux en diviseurs verticaux et à utiliser ce diviseur pour créer une chronologie. Allez-y et localisez la section suivante sur votre page de destination :

Ajouter une nouvelle section standard ci-dessous

Juste en dessous de cette section, ajoutez une section standard.

Placez la ligne « Comment ça marche » dans une nouvelle section

Continuez en faisant glisser la ligne « Comment ça marche » de la section précédente vers votre nouvelle section.

Ajouter une nouvelle ligne

Structure des colonnes

Juste en dessous de la ligne que vous venez de placer dans votre section, ajoutez-en une autre avec la structure de colonnes suivante :

Espacement

Avant d'ajouter des modules, ouvrez vos paramètres de ligne et ajoutez « 60px » à la marge supérieure.

Ajouter un module diviseur à la colonne 1

Masquer le diviseur

Nous pouvons maintenant commencer à ajouter des modules ! Nous commencerons par la première colonne et une fois que nous aurons terminé, nous passerons à la seconde. La première chose dont nous aurons besoin dans la première colonne est un module diviseur. Comme mentionné précédemment, nous allons le transformer en vertical. La première étape pour atteindre le résultat souhaité consiste à désactiver l'option Afficher le diviseur.

Fond dégradé

Au lieu d'utiliser le diviseur réel, nous allons créer un diviseur en utilisant l'arrière-plan du module Divider. Nous utilisons le fond dégradé suivant :

• Couleur 1 : #e0aa25
• Couleur 2: #c11000

Dimensionnement

Maintenant, nous nous sommes déjà assurés que le diviseur n'est pas visible. La prochaine étape cruciale vers la création d'un diviseur vertical consiste à réduire considérablement la largeur de notre diviseur. Nous utilisons '2%' mais vous pouvez le faire apparaître aussi épais que vous le souhaitez. Nous activons également l'alignement du module central.

Espacement

Pour étirer le module diviseur verticalement, nous allons ajouter « 480px » au rembourrage personnalisé supérieur et inférieur de notre module diviseur. Et voila, nous avons notre diviseur vertical !

Ajouter les modules Blurb de la section précédente à la colonne 1

La prochaine chose que nous allons faire est de créer une chronologie à l'aide de ce diviseur vertical. Dans la section précédente, vous trouverez trois modules Blurb. Allez-y et placez chacun d'eux dans la première colonne de la ligne sur laquelle vous travaillez, juste en dessous du module diviseur.

Modifier le module de présentation n° 1

Ajouter une couleur d'arrière-plan

Nous allons utiliser l'une des fonctionnalités d'efficacité de Divi pour accélérer le processus lors de l'édition de nos modules Blurb. Nous appliquerons toutes les modifications au premier module Blurb et ensuite, nous copierons simplement les styles de module et les ajouterons aux autres modules Blurb en un clic. Ouvrez votre premier module Blurb et ajoutez 'rgba(255,255,255,0.73)' comme couleur d'arrière-plan.

Modifier la taille de la police des icônes

La prochaine chose que vous devrez faire est de changer la taille de la police de l'icône en « 65px ».

Supprimer l'espacement

Nous supprimerons également toute la marge dans les paramètres d'espacement. Plus tard, nous ajouterons la marge à chaque module Blurb individuellement car les valeurs diffèrent.

Copiez le style du module Blurb et ajoutez-le aux modules Blurb restants

Copier les styles de module de présentation

Nous avons terminé de modifier le premier module Blurb. Faites un clic droit dessus et sélectionnez "Copier les styles de module". Cela copiera toutes les modifications que nous venons de faire.

Coller les styles de module sur les modules Blurb restants

Et collez les styles de module sur les deux modules Blurb restants. Vous remarquerez que cela ne modifie pas le contenu, cela ne modifie que les paramètres de conception, ce qui vous fait gagner beaucoup de temps.

Espacement des modules de présentation

Module de présentation n° 1

Comme mentionné précédemment, l'espacement des modules Blurb diffère. Le second n'en a pas mais le premier utilise '-900px' pour la marge supérieure. Une fois que vous avez ajouté cette marge négative, vous remarquerez que les modules Blurb font partie de la chronologie. Dans Visual Builder, il semble que le module Divider soit au-dessus des modules Blurb. Mais une fois que vous aurez quitté Visual Builder, vous verrez tout se mettre en place, alors ne vous inquiétez pas.

Module de présentation n° 3

Ouvrez ensuite votre dernier module Blurb et ajoutez « 150px » dans la marge inférieure.

Déposez le module Image dans la colonne 2

Localiser l'image

Nous pouvons maintenant passer à la colonne 2 ! Le seul module dont nous aurons besoin est un module Image. Nous en réutilisons un qui est déjà sur notre page, alors allez-y et localisez-le :

Déposer l'image dans la colonne 2

Déposez-le et faites-le glisser vers votre deuxième colonne ensuite.

Changer l'espacement

Pour le centrer verticalement, nous allons lui ajouter de la marge :

• Marge supérieure : 300 pixels (ordinateur de bureau), 30 pixels (tablette et téléphone)
• Marge inférieure : 50px (tablette et téléphone)

Supprimer la section précédente et suivante

Nous avons fini de créer notre section ! La dernière chose à faire est de supprimer les sections excessives.

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.

Dernières pensées

Dans cet article de blog de cas d'utilisation, nous vous avons montré comment transformer des séparateurs verticaux en séparateurs verticaux à l'aide du pack de mise en page de l'entreprise de déménagement de Divi. Cette approche est idéale si vous souhaitez créer des chronologies sur votre page sans avoir à utiliser de code supplémentaire. Il est uniquement basé sur les options intégrées de Divi. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!