Comment utiliser de manière créative les bordures de lignes de Divi pour créer un superbe design de section de héros

La section héros de votre page définit généralement la barre pour le reste de la page. Il joue également un rôle majeur dans la première impression de vos visiteurs. Avec Divi, vous pouvez créer des sections de héros incroyables en utilisant uniquement les options intégrées. Maintenant, si vous cherchez un moyen de faire ressortir votre prochaine section de héros, vous adorerez cet article. Nous allons vous montrer comment créer un design de section de héros efficace et magnifique tout en jouant avec les bordures de lignes de Divi. Vous pourrez également télécharger gratuitement le fichier JSON de conception !

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 la mise en page de la section Hero GRATUITEMENT

Pour mettre la main sur la mise en page GRATUITE de la section héros, 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 !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Fond dégradé

Allez-y et créez une nouvelle page ou ouvrez une page existante. Ajoutez une nouvelle section régulière, ouvrez les paramètres de la section et ajoutez l'arrière-plan dégradé suivant :

• Couleur 1 : #7e2dff
• Couleur 2 : #ffffff
• Position de départ : 63 %
• Position finale : 63 %

Espacement

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

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

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 la largeur maximale.

• Largeur maximale : 100 %

Espacement

Supprimez également le rembourrage supérieur et inférieur par défaut de la ligne.

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

Ajouter un module d'image à la colonne

Télécharger une image

Il est temps de commencer à ajouter des modules ! Le premier module dont nous avons besoin est un module Image. Téléchargez l'image que vous pouvez trouver dans le dossier zippé que vous avez pu télécharger au début de ce tutoriel. Si vous préférez utiliser une autre image, assurez-vous d'utiliser une largeur de 1160px et une hauteur de 1385px.

Dimensionnement

Passez à l'onglet de conception du module Image et activez l'option « Forcer la pleine largeur ».

• Forcer la pleine largeur : Oui

Espacement

Modifiez ensuite les paramètres d'espacement.

• Afficher l'espace sous l'image : Non
• Rembourrage gauche : 17vw

Frontière

Et ajoutez « 50vw » dans le coin supérieur droit du module Image.

Filtres

Nous modifions également les couleurs de notre image pour qu'elles correspondent à notre palette de couleurs. Ouvrez les paramètres des filtres et appliquez les paramètres suivants :

• Teinte: 211deg
• Saturation : 600%
• Luminosité : 67%
• Contraste : 112%
• Inverser : 18%

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H1

Le deuxième module dont nous avons besoin dans cette rangée est un module de texte avec du contenu H1.

Paramètres de texte H1

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

• Police de titre : Montserrat
• Poids de la police d'en-tête : semi-gras
• Couleur du texte du titre : #ffffff
• Taille du texte de l'en-tête : 5vw
• Espacement des lettres d'en-tête : -2px

Dimensionnement

Modifiez ensuite la largeur du module.

• Largeur: 70%

Espacement

Et créez un chevauchement entre ce module et le module précédent en utilisant une marge supérieure négative.

• Marge supérieure : -57vw (ordinateur de bureau), -75vw (tablette), -91vw (téléphone)

Ajouter un module diviseur à la colonne

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

Changez ensuite la couleur de la ligne.

• Couleur de la ligne : #00dcff

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur: 0.8vw
• Largeur : 27%

Ajouter le module de texte #2 à la colonne

Ajouter du contenu de paragraphe

Continuez en ajoutant un nouveau module de texte avec du contenu de 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
• Couleur du texte : #ffffff
• Taille du texte : 1vw (ordinateur de bureau), 2vw (tablette), 2.5vw (téléphone)
• Hauteur de la ligne de texte : 1,8 em

Dimensionnement

Modifiez également la largeur du module.

• Largeur : 53 % (ordinateur de bureau), 65 % (tablette), 100 % (téléphone)

Ajouter un module de bouton à la colonne

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans cette rangée est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Accédez ensuite aux paramètres du bouton et modifiez le style de votre bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Police des boutons : Open Sans

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw
• Rembourrage gauche : 4vw
• Rembourrage droit : 4vw

Ajouter la ligne n° 2

Structure des colonnes

Au rang suivant ! Choisissez la structure de colonnes suivante :

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne. Changez la couleur de fond en blanc.

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

Dimensionnement

Passez à l'onglet conception et augmentez la largeur maximale.

• Largeur maximale : 100 %

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 3vw
• Rembourrage inférieur : 8vw
• Rembourrage gauche : 7vw
• Rembourrage droit : 7vw

Frontière

Nous allons continuer en ajoutant « 20vw » dans les coins inférieur gauche et supérieur droit de la rangée. Nous allons également ajouter une bordure supérieure en utilisant les paramètres suivants :

• Largeur de la bordure supérieure : 1.2vw
• Couleur de la bordure supérieure : #00dcff

Boîte ombre

Nous ajoutons également une ombre de boîte subtile pour créer de la profondeur sur la page.

• Force de flou d'ombre de boîte : 120px

Indice Z

Pour nous assurer que la ligne apparaît au-dessus du module Image, nous allons augmenter la ligne Index Z dans les paramètres de visibilité.

• Indice Z : 10

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Une fois que vous avez terminé les paramètres de ligne, vous pouvez ajouter un module Blurb à la première colonne de la ligne. Entrez un contenu de votre choix.

Sélectionnez l'icône

Sélectionnez ensuite une icône de votre choix.

Paramètres des icônes

Passez à l'onglet Conception et modifiez les paramètres de l'icône.

• Couleur de l'icône : #000000
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 5vw

Paramètres du texte du titre

Modifiez également les paramètres du titre.

• Police du titre : Montserrat
• Poids de la police du titre : gras
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000
• Taille du texte du titre : 1.1vw (ordinateur de bureau), 2.5vw (tablette), 3vw (téléphone)
• Espacement des lettres du titre : -1px

Paramètres du corps du texte

Avec les paramètres du corps du texte.

• Police du corps : Open Sans
• Alignement du corps du texte : Centre
• Taille du corps du texte : 0.8vw (ordinateur de bureau), 1.6vw (tablette), 2vw (téléphone)
• Hauteur de la ligne du corps : 1,5 vw (ordinateur de bureau), 3 vw (tablette et téléphone)

Cloner le module Blurb deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé le module Blurb dans la colonne 1, vous pouvez le cloner deux fois et placer les doublons dans les deux colonnes restantes de la ligne.

Modifier le contenu

Assurez-vous de modifier le contenu des deux doublons et le tour est joué !

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 faire preuve de créativité avec les bordures de lignes intégrées de Divi pour créer une section de héros époustouflante que vous pouvez utiliser pour votre prochain projet Divi. Nous avons recréé un bel exemple à partir de zéro et vous avez également pu télécharger gratuitement le fichier JSON. 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.