Comment étendre les modules pour créer des dispositions de colonnes uniques dans Divi

Chaque nouvelle page que vous concevez avec Divi Builder est structurée à l'aide d'un certain nombre de dispositions de colonnes différentes. Divi inclut des dispositions de colonnes intégrées pour chaque ligne allant d'une colonne à six colonnes. Mais, parfois, vous pouvez ressentir le besoin d'ajuster ces colonnes pour des mises en page encore plus uniques. Aujourd'hui, je vais vous montrer une façon créative de faire exactement cela.

Dans ce tutoriel, je vais vous montrer une technique de conception simple qui vous permet d'étendre des modules en utilisant des marges négatives pour occuper plus d'une colonne. Cette technique vous permettra de concevoir des mises en page personnalisées uniques que vous n'auriez peut-être pas considérées comme possibles.

Commençons.

Aperçu

Pour mieux comprendre ce que nous allons construire, voici une version avant et après de la conception utilisant cette technique.

Avant

Il s'agit de la conception de la mise en page sans utiliser de marges personnalisées pour étendre les modules à d'autres colonnes.

Après

Il s'agit de la mise en page après extension des deux modules d'image et des trois modules de texte étiquetés avec les numéros "01", "03" et "05".

Le changement est subtil mais vous devriez pouvoir voir que les modules se sont étendus pour occuper la colonne adjacente. Et la seule chose nécessaire pour accomplir cela est un simple paramètre de marge de -100%.

Et le résultat sur tablette est encore plus excitant.

Comprendre le concept

Par défaut, chaque module Divi a une largeur de 100%, ce qui signifie que chaque module que vous placez dans une colonne couvrira toute la largeur de la colonne dans laquelle il se trouve. La largeur de la gouttière est ce que Divi utilise pour déterminer la quantité d'espace entre chaque colonne. Donc, pour ce tutoriel, il est important de définir la largeur de votre gouttière sur 1 afin de vous débarrasser de cet espace.

Voici une illustration de la façon dont chaque module s'étend sur toute la largeur d'une colonne dans une rangée avec une largeur de gouttière définie sur 1.

Maintenant, si vous ajoutez une marge négative (gauche ou droite) à un module, vous pouvez facilement étendre ce module pour occuper plus d'une colonne. Cela vous permet de créer des dispositions de colonnes personnalisées pour votre page que vous n'avez peut-être pas envisagées.

Dans cette illustration, vous pouvez voir qu'en ajoutant une marge gauche de -100 % au module dans la colonne 5, cela étend le module vers la gauche pour occuper à la fois la colonne 5 et la colonne 4.

Et l'un des avantages de l'utilisation de la disposition à six colonnes est que le design est bien conservé sur la tablette.

De plus, en raison de la façon dont les colonnes sont ordonnées de gauche à droite, les modules doivent généralement être étendus vers la gauche afin que le contenu ne soit pas caché derrière la colonne. Cela est particulièrement vrai si vous avez un jeu de couleurs d'arrière-plan. Donc, si vous rencontrez le problème du contenu du module caché derrière une colonne, vous étendez probablement le module dans la mauvaise direction.

Pourquoi utiliser une mise en page à six colonnes ?

Il y a trois raisons principales d'utiliser une disposition à six colonnes pour cette technique de conception. La première raison est que cela vous donne plus de colonnes avec lesquelles travailler. La deuxième raison est que les mises en page à six colonnes se convertissent en une mise en page à trois colonnes sur tablette, ce qui préservera très bien les éléments de conception. La troisième raison est que les colonnes conserveront leur ordre sur le mobile, de sorte que les couleurs d'arrière-plan des colonnes resteront les mêmes. Ceci est utile pour les dispositions de grille.

Cette conception fonctionne également avec la disposition des colonnes 1/2 1/6 1/6 1/6 et la disposition des colonnes 1/6 1/6 1/6 1/2 car elles conserveront toutes les deux les trois colonnes sur la tablette également.

Mise en œuvre de la conception

Pour montrer comment fonctionne cette technique de conception, je vais vous expliquer le processus de création d'une grille simple pour présenter les produits. Ensuite, je vais vous montrer comment étendre des modules dans d'autres colonnes pour créer une conception de mise en page personnalisée.

Configurer votre section et vos rangées

Pour commencer, créez une nouvelle page et déployez le générateur visuel. Ensuite, choisissez "Construire à partir de zéro". Ensuite, allez-y et ajoutez une disposition de colonnes 1/2 1/6 1/6 1/6 à votre première section.

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

Couleur d'arrière-plan : #222831
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI
Marge personnalisée : 0 pixels en haut, 0 pixels en bas
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

Enregistrer les paramètres.

Étant donné que les trois lignes de cette conception partageront ces paramètres de ligne. Allez-y, dupliquez la ligne pour créer une deuxième ligne. Modifiez ensuite la deuxième ligne pour avoir une disposition à six colonnes.

Pour créer la troisième ligne, dupliquez simplement la deuxième ligne.

Ajout de modules à la ligne 1

Dans la première colonne de la première ligne supérieure, ajoutez un module de texte avec les paramètres suivants :

Couleur du texte : clair
Taille du texte du texte : 16px
Rembourrage personnalisé : 2vw en haut, 2vw en bas, 2vw à gauche, 2vw à droite

Dans la deuxième colonne de la première ligne, ajoutez un module de présentation avec les paramètres suivants :

Titre : [entrez le titre]
Contenu : [supprimer]
Icône : [choisir l'icône]
Couleur de l'icône : #eeeeee
Taille de la police de l'icône : 50px
Couleur du texte : clair
Orientation du texte : Centre
Rembourrage personnalisé : haut 3vw, bas 2vw

Enregistrer les paramètres

Dans la troisième colonne, ajoutez une image.

Dans la dernière colonne, nous voulons la laisser vide afin que nous puissions étendre le module image pour remplir également cette colonne. Mais nous ne voulons pas le laisser complètement vide pour que la colonne soit active lors de l'empilement sur mobile. Ainsi, la chose la plus simple à faire est d'ajouter un module diviseur et de choisir de ne pas afficher le diviseur. Ensuite, nous pouvons masquer le diviseur pour smartphone.

Mettez à jour les paramètres du diviseur comme suit :

Afficher le diviseur : NON
Désactiver sur : Téléphone

Ajout de modules aux rangées 2 et 3

Passons maintenant à la ligne 2. Dans la première colonne, copiez et collez le module de présentation que vous avez créé dans la deuxième colonne de la première ligne. Changez ensuite l'icône et le texte du titre en noir.

Ajoutez ensuite un module de texte à la deuxième colonne avec les éléments suivants :

Teneur:

<h2>Product</h2>
01

Texte Couleur du texte : #ffffff
Taille du texte du texte : 50px
Hauteur de la ligne de texte : 1 em
Orientation du texte : à droite
En-tête 2 Alignement du texte : à gauche
Titre 2 Couleur du texte : #ffffff
Titre 2 Hauteur de ligne : 3 em
Rembourrage personnalisé : 2vw en haut, 2vw en bas, 2vw à gauche, 2vw à droite

Suivant Copiez le module de texte que vous venez de créer et collez-le dans les colonnes 4 et 6.

Vous pouvez également coller le même module de texte dans la colonne 3, la colonne 5 et la colonne 6 de la ligne 3. Après cela, vous pouvez utiliser l'éditeur en ligne pour modifier les numéros de chacun des modules de texte afin de voir comment ces modules s'empilent sur mobile plus tard.

Dans la colonne 2 de la ligne 3, ajoutez une autre image.

Après cela, remplissez toutes les colonnes vides de votre section avec un diviseur en copiant et en collant le diviseur que vous avez créé dans la ligne 1.

Voici à quoi devrait ressembler votre mise en page à ce stade (les carrés vides représentent un module diviseur) :

Ajout d'une marge négative pour étendre les modules à d'autres colonnes

À ce stade, nous pouvons commencer à étendre nos modules en utilisant une marge négative. Ce processus est extrêmement simple à faire.

Ouvrez les paramètres du module d'image pour l'image de la première ligne. Puisque nous voulons étendre l'image vers la droite, nous allons ajouter une marge de -100% à droite.

Ensuite, ajoutez une marge gauche de -100 % au module de texte dans la ligne 2, colonne 3.

Copiez maintenant les styles de module et collez-les dans les modules de texte de la ligne 2, colonne 6 et également dans le module de texte de la ligne 3, colonne 5.

Il ne reste plus qu'à étendre l'image de la ligne 3, colonne 2. Mettez à jour le module d'image avec une marge personnalisée de -100 % à gauche.

Ajouter des couleurs d'arrière-plan à vos colonnes

La dernière phase de la conception consiste à ajouter des couleurs de fond à vos colonnes. Pour la première ligne (supérieure), ajoutez ce qui suit :

Colonne 1 Couleur d'arrière-plan : #393e46

Pour la deuxième ligne, ajoutez les éléments suivants :

Couleur de fond de la colonne 1 : #eeeeee
Couleur d'arrière-plan de la colonne 4: #7971ea
Couleur de fond de la colonne 5 : #393e46
Couleur d'arrière-plan de la colonne 6 : #393e46

Et pour la dernière ligne, ajoutez ce qui suit :

Couleur d'arrière-plan de la colonne 3: #7971ea
Couleur d'arrière-plan de la colonne 6 : #7971ea

C'est tout pour la conception du bureau. Maintenant, assurons-nous que les choses se passent bien sur mobile.

Réglage de la disposition pour l'affichage du smartphone

À l'heure actuelle, la mise en page actuelle aura fière allure sur les ordinateurs de bureau et les tablettes, mais les marges négatives que nous avons ajoutées devront être ajustées sur les smartphones.

Normalement, si je voulais corriger la marge négative sur le smartphone, je définirais simplement la marge de gauche sur 0% dans les paramètres du module pour les smartphones. Cependant, un ajustement sera toujours nécessaire pour les tailles d'écran comprises entre 479px et 767px de large. Pour cette raison, la meilleure façon de corriger la marge négative sur smartphone est de le faire avec un extrait de CSS personnalisé.

Accédez aux paramètres de la page et ajoutez le CSS personnalisé suivant sous l'onglet Avancé :

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

Ce que fait cet extrait CSS est de définir les marges droite et gauche de tous les modules sur 0% chaque fois que la taille de l'écran est égale ou inférieure à 479px de large. Cela résout bien le problème !

Voyons maintenant la conception finale.

Dernières pensées

L'utilisation d'une marge négative pour étendre les modules peut être un moyen pratique d'obtenir des conceptions de mise en page uniques sur le bureau et la tablette sans avoir à recourir à un tas de CSS pour modifier les dispositions de colonnes par défaut de Divi. Et l'une de mes choses préférées à propos de cette technique de conception est la beauté de la mise en page sur tablette. Espérons que cela vous sera utile pour votre prochain projet. Si quoi que ce soit, cela aide toujours à mieux comprendre Divi.

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

À votre santé!