Téléchargez une conception de section de héros de balayage de colonne CTA GRATUITE pour Divi

La section héros de votre page mérite toute l'attention qu'elle peut recevoir. Il existe d'innombrables façons de styliser votre section héros, en fonction de l'objet de votre site Web et du comportement de votre public cible. Pour certains sites Web, il peut être utile de placer des cartes CTA à plusieurs colonnes sans créer une expérience écrasante. Une excellente façon de l'aborder est de créer des cartes CTA à balayage de colonne. Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment créer un superbe design à partir de zéro qui aborde cette technique. 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 les sections des héros GRATUITEMENT

Pour mettre la main sur les sections héros gratuites, vous devrez d'abord les 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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer !

Ajouter une nouvelle section

Fond dégradé

Ajoutez une nouvelle section à la page sur laquelle vous travaillez, ouvrez les paramètres de la section et insérez un arrière-plan dégradé.

• Couleur 1 : #ffffff
• Couleur 2: #f5ede5
• Direction du gradient : 90 degrés
• Position de départ : 17 %
• Position finale : 17 %

Espacement

Passez à l'onglet Conception et ajoutez des rembourrages haut et bas personnalisés sur différentes tailles d'écran.

• Rembourrage supérieur : 5vw (ordinateur de bureau), 10vw (tablette), 13vw (téléphone)
• Rembourrage inférieur : 5vw (ordinateur de bureau), 10vw (tablette), 13vw (téléphone)

Ajouter la ligne n° 1

Structure des colonnes

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

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez la couleur d'arrière-plan.

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

Dimensionnement

Passez à l'onglet Conception et modifiez également les paramètres de dimensionnement de la ligne.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 60 vw (ordinateur de bureau), 100 % (tablette et téléphone)
• Largeur maximale : 100 %
• Alignement des lignes : à droite

Espacement

Nous ajoutons également des valeurs de remplissage personnalisées aux paramètres d'espacement.

• Rembourrage supérieur : 6vw
• Rembourrage inférieur : 6vw
• Rembourrage gauche : 5.5vw
• Rembourrage droit : 24vw

Frontière

Accédez ensuite aux paramètres de bordure et ajoutez une bordure gauche à l'aide des paramètres suivants :

• Largeur de la bordure gauche : 6 px
• Couleur de la bordure gauche : #FFFFFF

Boîte ombre

Ajoutez une ombre de boîte subtile pour créer de la profondeur dans la section des héros.

• Force de flou d'ombre de boîte : 100px
• Couleur de l'ombre : rgba(0,0,0,0.22)

Classe CSS

Et utilisez une classe CSS dans l'onglet avancé. Plus tard dans cet article, nous utiliserons cette classe CSS pour masquer la barre de défilement.

• Classe CSS : barre de défilement

Élément principal

Pour créer un défilement/balayage horizontal, nous devrons placer les colonnes horizontalement. Nous le ferons en ajoutant du code CSS personnalisé dans l'élément principal de la ligne.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Débordements

Passez aux paramètres de visibilité et modifiez les débordements de la ligne.

• Débordement horizontal : défilement
• Débordement vertical : caché

Paramètres de colonne

Une fois que vous avez terminé les paramètres de ligne, vous pouvez ouvrir les paramètres de la première colonne.

Fond dégradé

Ajoutez un fond dégradé.

• Couleur 1 : rgba (245 237 229 0,91)
• Couleur 2: rgba (219,34,65,0,84)
• Position de départ : 35 %
• Position finale : 81 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Image de fond

Avec une image de fond.

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition

Espacement

Passez à l'onglet Conception et ajoutez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 4vw (ordinateur de bureau), 10vw (tablette), 12vw (téléphone)
• Rembourrage inférieur : 4vw (ordinateur de bureau), 10vw (tablette), 12vw (téléphone)
• Rembourrage gauche : 2vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Rembourrage droit : 2vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Frontière

Continuez en ajoutant un rayon de bordure « 20px » à chacun des coins dans les paramètres de bordure.

Élément principal

Une autre partie importante pour faire ce travail consiste à ajouter une seule ligne de code CSS à l'élément principal de la colonne.

width: 100% !important;

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

Ajouter du contenu H3

Il est temps de commencer à ajouter des modules ! Vous pouvez ajouter autant de modules que vous le souhaitez et les personnaliser selon vos préférences. Si vous souhaitez toutefois recréer exactement le même exemple qui a été partagé dans l'aperçu de cet article, commencez par un module de texte et insérez du contenu H3.

Paramètres de texte H3

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

• Police de la rubrique 3 : Poppins
• Titre 3 Poids de la police : Léger
• Titre 3 Couleur du texte : #e92640
• Titre 3 Taille du texte : 1.5vw (ordinateur de bureau), 3.5vw (tablette), 4.5vw (téléphone)

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

Ajouter du contenu

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

Paramètres de texte

Accédez ensuite aux paramètres de texte et apportez quelques modifications.

• Police de texte : Poppins
• Poids de la police de texte : léger
• Couleur du texte : #e92640
• Taille du texte : 0.8vw (ordinateur de bureau), 1.9vw (tablette), 2.8vw (téléphone)

Espacement

Nous ajoutons également une marge inférieure pour créer de l'espace dans notre carte de balayage de colonne.

• Marge inférieure : 18vw (ordinateur de bureau), 30vw (tablette), 42vw (téléphone)

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Passons au module suivant, qui est un module de bouton. Entrez une copie de votre choix.

Paramètres des boutons

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

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0,8 vw (ordinateur de bureau), 1,8 vw (tablette), 2,5 vw (téléphone)
• Couleur du texte du bouton : #f5ede5
• Largeur de la bordure du bouton : 1px
• Couleur de la bordure du bouton : #f5ede5
• Rayon de bordure de bouton : 5px
• Police des boutons : Poppins

Espacement

Augmentez la taille du bouton en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Ajouter un module diviseur à la colonne 1

Visibilité

Le prochain module dont nous avons besoin est un module diviseur. 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 : #f5ede5

Ajouter le module de texte n° 3 à 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 : Poppins
• Poids de la police de texte : léger
• Couleur du texte : #f5ede5
• Taille du texte : 0.8vw (ordinateur de bureau), 1.9vw (tablette), 2.8vw (téléphone)
• Hauteur de la ligne de texte : 2,3 em

Espacement

Ajoutez également une marge supérieure.

• Marge supérieure : 2vw

Cloner la colonne jusqu'à 5 fois et réutiliser pour d'autres CTA

Une fois que vous avez terminé la première colonne et tous les modules qu'elle contient, vous pouvez cloner la colonne entière jusqu'à 5 fois, en fonction du nombre de cartes CTA de balayage de colonne que vous souhaitez afficher. Assurez-vous de modifier toute la copie pour chaque colonne en double ainsi que les liens des boutons.

Ajouter la ligne n° 2

Structure des colonnes

Passons au deuxième rang ! Nous utiliserons cette ligne pour créer un chevauchement avec la précédente. Choisissez la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne et ajustez 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 %

Espacement

Plus tard dans la publication, nous ajouterons les modules dont nous avons besoin et créerons un chevauchement supérieur négatif pour donner l'impression que les modules font partie de la première rangée. Cela signifie que nous n'avons pas du tout besoin que la deuxième rangée prenne de la place dans notre conception. C'est pourquoi nous supprimons tous les remplissages par défaut des rangées supérieure et inférieure.

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

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

Ajouter du contenu H1

Il est temps de commencer à ajouter des modules ! Commencez par un premier module de texte et saisissez du contenu H1 de votre choix.

Paramètres de texte H1

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

• Police de titre : Poppins
• Couleur du texte du titre : #e92741
• Taille du texte de l'en-tête : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Espacement

Ajoutez ensuite quelques valeurs de marge.

• Marge supérieure : -35vw (ordinateur de bureau), 7vw (tablette), 10vw (téléphone)
• Marge gauche : 5vw
• Marge droite : 12vw

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

Ajouter du contenu

Le deuxième module dont nous avons besoin est un autre module de texte. Entrez le contenu du paragraphe de votre choix.

Paramètres de texte

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

• Police de texte : Poppins
• Poids de la police de texte : léger
• Couleur du texte : #e92741
• Taille du texte : 0.8vw (ordinateur de bureau), 1.9vw (tablette), 2.8vw (téléphone)
• Hauteur de la ligne de texte : 2,8 em

Espacement

Nous ajoutons également des valeurs de marge personnalisées au module de texte.

• Marge supérieure : 2vw (ordinateur de bureau), 7vw (tablette), 10vw (téléphone)
• Marge inférieure : 2vw (ordinateur de bureau), 7vw (tablette), 10vw (téléphone)
• Marge gauche : 5vw
• Marge droite : 13vw (ordinateur de bureau), 5vw (tablette et téléphone)

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le prochain module dont nous avons besoin est un module de bouton. Entrez une copie de votre choix.

Paramètres des boutons

Ensuite, allez dans l'onglet conception et stylisez le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.9vw
• Couleur du texte du bouton : #e92741
• Couleur d'arrière-plan du bouton : #f5ede5
• Largeur de la bordure du bouton : 0px
• Rayon de bordure de bouton : 5px
• Police des boutons : Poppins

Espacement

Nous augmentons également la taille du bouton en ajoutant des valeurs d'espacement personnalisées.

• Marge supérieure : 2vw
• Marge gauche : 5vw
• Rembourrage supérieur : 1.5vw (ordinateur de bureau), 2.5vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1.5vw (ordinateur de bureau), 2.5vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 6vw (ordinateur de bureau), 9vw (tablette), 15vw (téléphone)
• Rembourrage droit : 6vw (ordinateur de bureau), 9vw (tablette), 15vw (téléphone)

Boîte ombre

Terminez la conception du module de boutons en ajoutant une ombre de boîte subtile.

• Position verticale de l'ombre de la boîte : 20px
• Force de flou d'ombre de boîte : 50px
• Force de propagation de l'ombre de la boîte: -5px
• Couleur de l'ombre : rgba(0,0,0,0.19)

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 avons partagé gratuitement une belle section de héros de balayage de colonne et nous vous avons également montré comment la recréer à partir de zéro. C'est un excellent moyen de présenter plusieurs cartes CTA dans votre section héros sans avoir un design trop écrasant. Nous espérons que vous avez apprécié ce tutoriel et si vous avez des questions ou des suggestions, assurez-vous de les laisser 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.