Utiliser des contours de colonnes pour mettre en valeur votre grille de conception Divi

La structure d'éléments intégrée de Divi peut être utilisée de manière traditionnelle pour définir et styliser différentes sections, lignes, colonnes et modules. Mais, ils peuvent également être utilisés de manière créative pour améliorer les structures de conception de votre page. Dans ce tutoriel, nous allons vous montrer comment utiliser les contours de colonnes pour mettre en valeur votre grille de conception Divi. Nous consacrerons une ligne en position absolue pour créer les magnifiques contours de la colonne d'arrière-plan et la fusionnerons avec d'autres lignes de notre section. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

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

Téléchargez GRATUITEMENT la mise en page des contours des colonnes

Pour mettre la main sur la mise en page gratuite des contours des colonnes, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Ajouter une nouvelle section

Débordements

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et définissez les débordements sur masqués. Cela aidera à garantir que rien ne dépasse le conteneur de section, en particulier les contours de colonne que nous ajouterons plus tard dans le didacticiel.

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %
• Alignement des lignes : à droite

Espacement

Ensuite, nous allons pousser la ligne vers le côté droit de la page sur le bureau à l'aide de certains paramètres de dimensionnement personnalisés.

• Marge supérieure : 200px
• Rembourrage gauche : 47 % (ordinateur de bureau), 6 % (tablette), 10 % (téléphone)
• Rembourrage droit : 6 % (tablette), 10 % (téléphone)

Frontière

Nous allons compléter les paramètres généraux des lignes en ajoutant une bordure supérieure et inférieure.

• Largeur de la bordure supérieure et inférieure : 4px
• Couleur de la bordure supérieure et inférieure : #bdffed

Paramètres de la colonne 1

Espacement

Une fois que vous avez terminé les paramètres de ligne généraux, ouvrez les paramètres de la première colonne et ajoutez des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 12 %
• Rembourrage inférieur : 12 %
• Rembourrage gauche : 3%
• Rembourrage droit : 3%

Paramètres de la colonne 2

Espacement

Ouvrez ensuite les paramètres de la deuxième colonne et utilisez les paramètres d'espacement suivants :

• Rembourrage supérieur : 12 %
• Rembourrage inférieur : 12 %
• Rembourrage gauche : 5 % (ordinateur de bureau), 20 % (tablette), 15 % (téléphone)
• Rembourrage droit : 5 % (ordinateur de bureau), 20 % (tablette), 15 % (téléphone)

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un module de texte contenant du contenu H2 dans la colonne 1.

Paramètres de texte H2

Passez à l'onglet de conception du module et modifiez les paramètres de texte H2 en conséquence :

• Police de l'en-tête 2 : Source Code Pro
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Couleur du texte : rgba (35,38,211,0,46)
• Titre 2 Taille du texte : 4vw (ordinateur de bureau), 60 px (tablette), 50 px (téléphone)
• Espacement des lettres de l'en-tête 2 : 5px

• Titre 2 Ombre de texte Longueur horizontale : 0,05 em
• Titre 2 Ombre de texte Longueur verticale : 0,07 em
• Titre 2 Couleur de l'ombre du texte : #bdffed

Mouvement vertical

Nous allons également ajouter un mouvement vertical.

• Activer le mouvement vertical : Oui
• Décalage de départ : 2
• Décalage moyen : 0
• Décalage de fin : -2
• Déclencheur d'effet de mouvement : milieu de l'élément

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous du précédent et insérez le contenu de description de votre choix.

Paramètres de texte

Passez à l'onglet conception du module et modifiez les paramètres de texte en conséquence :

• Police de texte : Source Code Pro
• Couleur du texte : rgba (35,38,211,0,76)
• Taille du texte : 15 pixels
• Hauteur de la ligne de texte : 2 em

Mouvement vertical

Nous utiliserons également un mouvement vertical pour ce module.

• Activer le mouvement vertical : Oui
• Décalage de départ : 2
• Décalage moyen : 0
• Décalage de fin : -2
• Déclencheur d'effet de mouvement : milieu de l'élément

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le dernier module dont nous avons besoin dans la colonne 1 est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Passez à l'onglet de conception du module et stylisez le bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Couleur du texte du bouton : #2326d3
• Rayon de la bordure du bouton : 0px

• Police des boutons : Source Code Pro
• Afficher l'icône du bouton : Oui
• Emplacement de l'icône du bouton : à gauche
• Afficher uniquement l'icône au survol pour le bouton : non

Espacement

Ensuite, ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Mouvement vertical

Et complétez les réglages du module en ajoutant un mouvement vertical.

• Activer le mouvement vertical : Oui
• Décalage de départ : 2
• Décalage moyen : 0
• Décalage de fin : -2
• Déclencheur d'effet de mouvement : milieu de l'élément

Ajouter un module d'image à la colonne 2

Télécharger une image au rapport 1:1

Dans la colonne 2, le seul module dont nous avons besoin d'un module Image. Téléchargez une image avec un ratio de 1:1.

Dimensionnement

Passez à l'onglet conception du module et forcez la pleine largeur sur l'image.

• Forcer la pleine largeur : Oui

Frontière

Nous allons transformer l'image en cercle en ajoutant ensuite des coins arrondis.

• Tous les coins : 50vw

Boîte ombre

Ensuite, nous ajouterons une ombre de boîte.

• Position horizontale de l'ombre de la boîte : 30 px
• Position verticale de l'ombre de la boîte : 30 px
• Couleur de l'ombre : rgba (38 255 197 0,3)

Mouvement vertical

Et nous allons compléter les paramètres du module en ajoutant un mouvement vertical.

• Activer le mouvement vertical : Oui
• Décalage de départ : -2
• Décalage moyen : 0
• Décalage de fin : 2
• Déclencheur d'effet de mouvement : milieu de l'élément

Cloner la ligne entière deux fois

Une fois que vous avez terminé la première ligne, vous pouvez la cloner deux fois.

Modifier tout le contenu et les images

Assurez-vous de modifier tous les contenus et images en double.

Ajouter la marge inférieure à la dernière ligne

Et ouvrez les paramètres de la dernière ligne, accédez aux paramètres d'espacement et ajoutez une marge inférieure.

• Marge inférieure : 200px

Dédier une nouvelle ligne (en haut de la section) aux contours des colonnes

Structure des colonnes

Maintenant que les lignes générales sont en place, il est temps d'ajouter les contours des colonnes. Pour ce faire, nous allons ajouter une nouvelle ligne en haut de notre section en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne, accédez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur: 90%
• Largeur maximale : 100 %

Espacement

Nous supprimons également tous les rembourrages supérieurs et inférieurs par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Position

Ensuite, passez à l'onglet avancé et repositionnez toute la ligne. En définissant la position sur absolue, nous supprimerons l'espace de conteneur occupé par la ligne à l'intérieur de la page.

• Position : Absolu
• Emplacement : Centre supérieur

Largeur CSS de l'élément principal de toutes les colonnes

Une fois que les paramètres généraux des lignes sont en place, il est temps de commencer à styliser les colonnes. Tout d'abord, ajoutez une largeur personnalisée à chaque colonne en utilisant une ligne de code CSS à l'intérieur de l'élément principal de la ligne. Cela nous aidera à conserver la structure des colonnes sur des écrans de plus petite taille.

width: 20% !important;

Paramètres de la colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et modifiez les valeurs de remplissage sur différentes tailles d'écran.

• Rembourrage supérieur : 150 vh (ordinateur de bureau), 250 vh (tablette et téléphone)
• Rembourrage inférieur : 150 vh (ordinateur de bureau), 250 vh (tablette et téléphone)

Frontière

Ajoutez également une bordure gauche.

• Largeur de la bordure gauche : 5 px
• Couleur de la bordure gauche : #bdffed
• Style de bordure gauche : en pointillé

Paramètres de la colonne 2

Couleur de l'arrière plan

Ensuite, nous allons ouvrir les paramètres de la colonne 2 et ajouter une couleur d'arrière-plan.

• Couleur d'arrière-plan : #b5fff1

Frontière

Nous utiliserons également une bordure droite.

• Largeur de la bordure droite : 4px
• Couleur de la bordure droite : #bdffed
• Style de bordure droite : solide

Paramètres de la colonne 3

Frontière

Dans la troisième colonne, nous utiliserons une bordure droite avec les paramètres suivants :

• Largeur de la bordure droite : 4px
• Couleur de la bordure droite : rgba (35,38,211,0.12)
• Style de bordure droite : en pointillé

Colonne 4 Paramètres

Frontière

Ensuite, nous allons ouvrir les paramètres de la colonne 4 et modifier les paramètres de bordure en conséquence :

• Largeur de la bordure droite : 4px
• Couleur de la bordure droite : #bdffed
• Style de bordure droite : solide

Colonne 5 Paramètres

Frontière

Nous allons compléter les paramètres de la colonne en ajoutant également une bordure droite à la colonne 5.

• Largeur de la bordure droite : 4px
• Couleur de la bordure droite : rgba (35,38,211,0.12)
• Style de bordure droite : en pointillé

Ajouter un module diviseur aux colonnes 1 et 2

Visibilité

Dans l'aperçu mobile au début de cet article, vous avez pu remarquer un résultat légèrement différent de celui sur ordinateur. Nous autorisons uniquement les contours des colonnes 1 et 2 à s'afficher en ajoutant un module de séparation à ces colonnes spécifiques. Assurez-vous de masquer les deux séparateurs dans les paramètres de visibilité et le tour est joué !

• Afficher le diviseur : Non

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

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les colonnes intégrées de Divi. Plus précisément, nous vous avons montré comment utiliser les contours de colonnes pour mettre en valeur votre grille de conception Divi. Cette approche permet de créer un design unique sans avoir besoin d'un logiciel de retouche d'image supplémentaire. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.