Comment créer une belle section de héros pour votre site Web personnel avec Divi

Créer un site Web personnel est à la fois amusant et stimulant. Vous voulez que votre site Web soit suffisamment attrayant et personnel pour que votre histoire soit racontée. Et en même temps, vous voulez avoir un site Web beau et authentique qui montre que vous savez ce que vous faites.

Pour vous aider dans le processus créatif de création d'un tel site Web personnel, nous avons créé une magnifique section de héros qui fera définitivement ressortir votre site Web. Dans cet article, nous allons vous montrer étape par étape comment créer ce résultat en n'utilisant rien d'autre que les paramètres intégrés de Divi pour chacune des étapes. Avant de plonger dans le tutoriel, jetons un œil au résultat.

Résultat sur le bureau

Le résultat sur le bureau ressemble à ceci :

Résultat sur mobile

Et les visiteurs qui visitent le site Web sur mobile verront le résultat suivant :

Comment créer une belle section de héros pour votre site Web personnel avec Divi

Abonnez-vous à notre chaîne Youtube

Créer une section

Commencez par créer une nouvelle page sur votre site WordPress, en activant le Divi Builder, en passant au Visual Builder et en y ajoutant une nouvelle section.

Fond dégradé

La seule chose que vous devrez changer dans cette section est l'arrière-plan. Cet arrière-plan s'appliquera à toutes les lignes que nous ajouterons dans les prochaines étapes de cet article. Ouvrez la sous-catégorie Arrière-plan et ajoutez-y l'arrière-plan dégradé suivant :

• Première couleur : #c2c6f3
• Deuxième couleur : #cea5b9
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 45 %
• Position finale : 45 %

Ajouter la première ligne

Ensuite, allez-y et ajoutez la première ligne à la section. Cette ligne n'inclura que le module de texte que vous pouvez voir en haut de la mise en page.

Structure des colonnes

Ensuite, choisissez une structure de colonne avec une colonne.

Dimensionnement

Passez à l'onglet Conception de vos paramètres de ligne et utilisez les paramètres suivants pour la sous-catégorie Dimensionnement :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Module de texte

Comme mentionné précédemment, cette ligne n'aura besoin que d'un module de texte.

Paramètres de texte

Une fois que vous avez saisi le texte que vous souhaitez voir apparaître dans l'onglet Contenu, accédez à l'onglet Conception et appliquez les paramètres suivants à la sous-catégorie Texte :

• Police du texte : Arizona
• Poids de la police de texte : régulier
• Taille du texte : 150 (ordinateur de bureau), 80 (tablette), 70 (téléphone)
• Couleur du texte : rgba(255,255,255,0.39)
• Orientation du texte : Centre

Ajouter une deuxième rangée

Une fois que vous avez terminé la première ligne, continuez et ajoutez une deuxième ligne à cette même section.

Structure des colonnes

Comme la ligne précédente, cette ligne n'aura également qu'une seule colonne.

Image de fond

Ouvrez les paramètres de ligne et ajoutez l'image personnelle que vous souhaitez utiliser comme image d'arrière-plan pour la première colonne. Assurez-vous également que la position de l'image est définie sur « Centre ».

Dimensionnement

Ensuite, ouvrez la sous-catégorie Dimensionnement et apportez les modifications suivantes :

• Utiliser la largeur personnalisée : Oui
• Largeur personnalisée : 557 pixels

Espacement

Ensuite, utilisez « 0px » pour le rembourrage en haut, en bas, à droite et à gauche de la ligne.

Boîte ombre

Enfin, appliquez la Box Shadow suivante :

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 2px
• Force du flou d'ombre de la boîte : 53px
• Force de propagation de l'ombre de la boîte: 10px
• Couleur de l'ombre : rgba(0,0,0,0.3)
• Position de l'ombre : ombre extérieure

Module de texte

Une fois vos paramètres de ligne terminés, allez-y et ajoutez un module de texte à la colonne.

Couleur de l'arrière plan

Tout d'abord, ce module de texte aura besoin d'une couleur d'arrière-plan avec la couleur 'rgba(0,0,0,0.66)'.

Paramètres de texte

Ensuite, passez à l'onglet Conception et appliquez les modifications suivantes à la sous-catégorie Texte :

• Police du texte : Andika
• Poids de la police de texte : gras
• Style de police de texte : majuscule
• Taille du texte : 78 px (ordinateur de bureau), 70 px (tablette), 50 px (téléphone)
• Couleur du texte : #c2c6f3
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Frontière

Ensuite, ouvrez la sous-catégorie Bordure et utilisez la bordure suivante :

• Utiliser la bordure : Oui
• Couleur de la bordure : #c2c6f3
• Largeur de la bordure : 8px
• Style de bordure : solide

Espacement

En continuant, ajoutez la marge et le remplissage suivants :

• Marge haut, droite, bas et gauche : 50px
• Rembourrage supérieur : 200 px
• Rembourrage inférieur : 200px

Boîte ombre

Enfin, utilisez le Box Shadow suivant pour le module de texte :

• Position horizontale de l'ombre de la boîte : 0px
• Position verticale de l'ombre de la boîte : 0px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte: 50px
• Couleur de l'ombre : rgba (206 165 185 0,41)
• Position de l'ombre de la boîte : ombre extérieure

Ajouter une troisième rangée

Comme mentionné précédemment, nous n'utilisons qu'une seule section pour ce didacticiel. La raison derrière cela est que nous voulons que l'arrière-plan dégradé de la section soit réparti sur tous les différents contenus partagés. Allez-y et ajoutez une nouvelle ligne.

Structure des colonnes

Sélectionnez deux colonnes pour cette ligne.

Dimensionnement

Ensuite, activez l'option 'Utiliser la largeur personnalisée' et appliquez une largeur de '663px'.

Espacement

Enfin, ajoutez une marge supérieure et inférieure de « 50px ».

Premier module de texte

Ajoutez un premier module de texte à la première colonne de la ligne.

Paramètres de texte

Ensuite, allez dans l'onglet Design, utilisez 'Andika' comme police de texte et 'Regular' comme poids de police de texte.

Cloner le module de texte et le placer dans la deuxième colonne

Le module de texte dans la deuxième colonne a exactement les mêmes paramètres, alors allez-y, clonez le module de texte et placez-le dans la deuxième colonne.

Ajouter une quatrième ligne

Il reste une ligne à ajouter à la section avant que la conception ne soit terminée.

Structure des colonnes

Cette nouvelle ligne comporte également deux colonnes.

Dimensionnement

Ouvrez les paramètres de ligne et appliquez les paramètres suivants à la sous-catégorie Dimensionnement :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ensuite, ajoutez un rembourrage supérieur de 20px.

Premier module d'images

Allez-y et ajoutez un premier module d'image à la première colonne de cette dernière ligne.

Boîte ombre

Et ajoutez-y le Box Shadow suivant :

• Position horizontale de l'ombre de la boîte : -6px
• Position verticale de l'ombre de la boîte : 2px
• Force du flou d'ombre de la boîte : 53px
• Force de propagation de l'ombre de la boîte: 10px
• Couleur de l'ombre : rgba(0,0,0,0.3)
• Position de l'ombre de la boîte : ombre extérieure

Cloner le module d'image et le placer dans la deuxième colonne

Et enfin, clonez ce module image et placez-le également dans la deuxième colonne pour compléter cette ligne.

Résultat

Une fois que vous aurez suivi toutes les étapes que nous avons ajoutées à cet article, vous devriez pouvoir obtenir le résultat suivant :

Sur le bureau

Sur le mobile

Dernières pensées

Les possibilités que vous avez avec Divi sont infinies. Vous pouvez donner à votre site Web exactement l'apparence que vous souhaitez en utilisant Visual Builder qui vous montrera les changements en temps réel. Pour cet article en particulier, nous vous avons montré comment créer une belle section de héros pour un site Web personnel. Ce tutoriel a été réalisé en n'utilisant rien d'autre que les options intégrées de Divi. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !