Comment concevoir des sections de héros multi-colonnes uniques avec la section spécialisée de Divi

Dans toutes les tendances de conception, la façon dont vous concevez vos sections de héros reste extrêmement importante. Avec Divi, vous pouvez adopter différentes approches et créer une section héros qui se démarque et encourage les gens à prolonger leur séjour sur votre site Web. Pour vous aider à vous inspirer pour vos prochains projets Divi, nous allons vous montrer comment concevoir des sections de héros multi-colonnes uniques en utilisant uniquement les options intégrées de Divi. Non seulement les sections de héros multi-colonnes sont superbes, mais elles vous aident également à placer stratégiquement plus de contenu dans la section de héros sans submerger vos visiteurs.

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.

Téléchargez GRATUITEMENT la disposition de la section Multi-Column Hero

Pour mettre la main sur la disposition de la section héros multi-colonnes, vous devrez d'abord la télécharger en utilisant le 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 spécialisée

Structure des colonnes

Pour créer une section héros multi-colonnes transparente, nous allons utiliser l'une des sections spécialisées Divi auxquelles vous avez accès dans Visual Builder. Opter pour une section spécialisée vous permet d'avoir une meilleure adhérence sur la structure de grille que vous recherchez lorsque vous concevez une section de héros à plusieurs colonnes. Pour cet exemple particulier, nous sélectionnons la structure de colonne suivante :

Couleur de l'arrière plan

Ouvrez les paramètres de la section et ajoutez une couleur de fond blanc.

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

Dimensionnement

Nous nous assurons qu'il n'y a pas d'espace entre les colonnes de section en modifiant les paramètres de dimensionnement.

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

Espacement

Nous supprimons également tous les remplissages par défaut en haut et en bas de la ligne et des colonnes.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage supérieur de la colonne 1 : 0px
• Remplissage inférieur de la colonne 1 : 0px
• Remplissage supérieur de la colonne 2 : 0px
• Remplissage inférieur de la colonne 2 : 0px
• Remplissage supérieur de la colonne 3 : 0px
• Remplissage inférieur de la colonne 3 : 0px

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la première colonne de section en utilisant la structure de colonne suivante :

Espacement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter un module de texte à la colonne

Ajouter un paragraphe et du contenu H1

Il est temps de commencer à ajouter des modules ! Ajoutez un nouveau module de texte avec du paragraphe et du contenu H1 de votre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres du texte.

• Police de texte : Open Sans
• Taille du texte : 0.9vw (ordinateur de bureau), 1.6vw (tablette), 2.2vw (téléphone)

Paramètres de texte H1

Modifiez également les paramètres de texte H1.

• Police de titre : Open Sans
• Poids de la police d'en-tête : semi-gras
• Style de police d'en-tête : majuscule
• Couleur du texte de l'en-tête : #000000
• Taille du texte de l'en-tête : 4vw
• Hauteur de la ligne de cap : 1,1 em

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 10.8vw
• Rembourrage gauche : 4vw
• Rembourrage droit : 4vw

Ajouter la ligne n° 2

Structure des colonnes

La deuxième ligne dont nous avons besoin dans la première colonne de section utilise la structure de colonne suivante :

Espacement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les valeurs de remplissage.

• Rembourrage supérieur : 3vw
• Rembourrage gauche : 4vw
• Rembourrage droit : 4vw

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

Ajouter du contenu H3

Une fois que vous avez terminé avec les paramètres de ligne, vous pouvez continuer et ajouter un nouveau module de texte à la première colonne. Saisissez du contenu H3 de votre choix.

Paramètres de texte H3

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

• Police de l'en-tête 3 : Open Sans
• En-tête 3 Poids de la police : semi-gras
• Titre 3 Style de police : majuscule
• Titre 3 Couleur du texte : #000000
• Titre 3 Taille du texte : 1.5vw (ordinateur de bureau), 2vw (tablette), 2.5vw (téléphone)

Espacement

Continuez en ajoutant une marge supérieure sur le téléphone.

• Marge supérieure : 2vw (téléphone uniquement)

Ajouter un module diviseur à la colonne 1

Visibilité

Le deuxième module dont nous avons besoin dans la première colonne est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Changez ensuite la couleur de la ligne.

• Couleur de la ligne : #000000

Espacement

Ajoutez des valeurs de marge personnalisées pour créer de l'espace autour du séparateur.

• Marge supérieure : 2vw
• Marge inférieure : 2vw
• Marge droite : 2vw

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

Ajouter du contenu

Le prochain et dernier module dont nous avons besoin dans cette colonne est un autre module de texte. Entrez le contenu du paragraphe de votre choix.

Paramètres de texte

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

• Police de texte : Open Sans
• Taille du texte : 0.6vw (ordinateur de bureau), 1.1vw (tablette), 2vw (téléphone)
• Hauteur de la ligne de texte : 2 em

Espacement

Ajoutez également un rembourrage inférieur et droit.

• Marge inférieure : 5vw (téléphone uniquement)
• Marge droite : 2vw

Cloner tous les modules de la colonne 1 deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé tous les modules de la colonne 1, vous pouvez continuer et cloner chacun d'eux deux fois. Placez les doublons dans les deux colonnes restantes de la ligne.

Modifier le contenu

Assurez-vous de modifier tout le contenu des modules de texte.

Ajouter la ligne n° 3

Structure des colonnes

La ligne suivante et dernière dont nous avons besoin dans la première colonne de section utilise la structure de colonne suivante :

Espacement

Ouvrez les paramètres de ligne et modifiez les valeurs d'espacement.

• Marge supérieure : 2vw
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Continuez en ajoutant un module de texte à la première colonne avec une copie CTA de votre choix.

Ajouter un lien

Ajoutez également un lien vers l'ensemble du module.

Couleur de l'arrière plan

Nous modifions également la couleur d'arrière-plan du module de texte.

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

Paramètres de texte

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

• Police de texte : Open Sans
• Poids de la police de texte : ultra gras
• Style de police de texte : majuscule
• Alignement du texte : Centre
• Couleur du texte : #ffffff
• Taille du texte : 1vw (ordinateur de bureau), 1.7vw (tablette), 2.5vw (téléphone)

Espacement

Et créez de l'espace autour du module en utilisant des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 4vw (ordinateur de bureau), 11vw (tablette), 0vw (téléphone)
• Rembourrage supérieur : 4vw
• Rembourrage inférieur : 4vw

Cloner le module de texte et placer le doublon dans la colonne 2

Une fois que vous avez terminé le module de texte dans la colonne 1, vous pouvez le cloner et placer le doublon dans la deuxième colonne.

Modifier le contenu

Assurez-vous de modifier le contenu et le lien.

Changer la couleur d'arrière-plan

Ainsi que la couleur de fond.

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

Changer la couleur du texte

Ensuite, passez à l'onglet Conception et modifiez la couleur du texte.

• Couleur du texte : #000000

Changer l'espacement

Enfin, assurez-vous que les paramètres d'espacement ne contiennent que les valeurs suivantes :

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

Ajouter un module d'image à la colonne de section 2

Télécharger une image

Passons à la colonne de section suivante ! Ici, le premier module dont nous aurons besoin est un module Image. Téléchargez une image de votre choix ou utilisez-en une que vous pouvez trouver dans le dossier zippé qui a été partagé au début de cet article.

Dimensionnement

Accédez aux paramètres de dimensionnement et assurez-vous que l'option « Forcer la pleine largeur » est activée. Cela garantira que l'image conservera sa taille sur toutes les tailles d'écran.

• Forcer la pleine largeur : Oui

Filtres

Modifiez ensuite les paramètres des filtres.

• Saturation : 0%
• Luminosité : 50%

Ajouter un module de texte à la colonne de section 2

Ajouter un paragraphe et du contenu H3

Le deuxième module dont nous avons besoin dans cette colonne est un module de texte. Entrez un paragraphe et le contenu H3 de votre choix.

Couleur de l'arrière plan

Ajoutez une couleur d'arrière-plan au module.

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

Paramètres de texte

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

• Police de texte : Open Sans
• Couleur du texte : #ffffff
• Taille du texte : 0.9vw (ordinateur de bureau), 1.6vw (tablette), 2.2vw (téléphone)

Paramètres de texte H3

Modifiez également les paramètres de texte H3.

• Police de l'en-tête 3 : Open Sans
• En-tête 3 Poids de la police : semi-gras
• Titre 3 Style de police : majuscule
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 1.5vw (ordinateur de bureau), 2.5vw (tablette), 3vw (téléphone)

Espacement

Et ajoutez des valeurs de remplissage personnalisées dans les paramètres d'espacement.

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

Cloner les deux modules et placer les doublons dans la colonne 3 de la section (ordre inversé)

Une fois que vous avez terminé les deux modules, vous pouvez continuer et les cloner. Placez les doublons dans la colonne de section restante dans l'ordre inverse.

Modifier le module de texte

Changer la couleur d'arrière-plan

Ouvrez le module de texte en double dans la troisième colonne de section et modifiez la couleur d'arrière-plan.

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

Changer la couleur du texte

Modifiez ensuite la couleur du texte.

• Couleur du texte : #000000

Changer la couleur du texte H3

Avec la couleur du texte H3.

• Titre 3 Couleur du texte : #000000

Changer le module d'image

Changer l'image

Téléchargez ensuite une autre image dans le module Image en double.

Changer les filtres

Et modifiez les paramètres des filtres.

• Saturation : 0%
• Luminosité : 147%

Ajouter un module de séparation à la colonne de section 2

Position

Nous ajoutons également des séparateurs transformés pour ajouter des détails à notre conception. Placez le premier module diviseur ici :

Visibilité

Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Ajoutez ensuite une couleur de ligne.

• Couleur de la ligne : #ffffff

Transformer Rotation

Et transformez le diviseur horizontal en un diviseur vertical en modifiant la valeur de rotation de transformation gauche.

• Gauche : 270 degrés

Transformer Traduire

Repositionnez le module de séparation en utilisant l'unité de largeur de la fenêtre dans les paramètres de conversion de transformation.

• À droite : -19vw (ordinateur de bureau)
• En bas : -11vw (ordinateur de bureau), -24vw (tablette)

Visibilité

Et masquez tout le module sur le téléphone.

Ajouter un module diviseur à la colonne de section 3

Position

Le prochain et dernier module de division doit être ajouté ici :

Visibilité

Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Passez à l'onglet Conception et modifiez la couleur de la ligne.

• Couleur de la ligne : #000000

Transformer Rotation

Transformez ensuite le diviseur horizontal en un diviseur vertical.

• Gauche : 270 degrés

Transformer Traduire

Et repositionnez le diviseur à l'aide des paramètres de traduction de transformation.

• À droite : 2vw
• En bas : -11vw (ordinateur de bureau), -24vw (tablette)

Visibilité

Pour nous assurer que le séparateur apparaît au-dessus du module Image en dessous, nous allons augmenter l'index Z dans les paramètres de visibilité. Nous allons également masquer l'intégralité du module sur le téléphone.

• Indice Z : 2

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, nous vous avons montré comment créer de belles et uniques sections de héros multi-colonnes avec les options intégrées de Divi uniquement. C'est une excellente technique qui peut être utilisée pour différents types de sites Web. Si vous avez des questions ou des suggestions, assurez-vous de 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.