Comment styliser l'arrière-plan de votre module d'en-tête pleine largeur

Publié: 2022-09-28

Le module Fullwidth Header de Divi facilite la conception d'une section héros époustouflante pour votre site Web en quelques minutes seulement. Une section héros est la toute première section de votre site Web que vos visiteurs verront, vous voudrez donc qu'elle soit de marque, informative et convaincante. Heureusement, l'en-tête Divi Fullwidth est livré avec des options de contenu : texte d'en-tête, texte de sous-titre, corps de texte, deux images et deux boutons. Nous utiliserons tous ces éléments dans nos en-têtes pleine largeur aujourd'hui.

Dans cet article, nous allons vous montrer 3 façons de concevoir l'arrière-plan de votre en-tête pleine chasse avec des designs accrocheurs. Prêt à commencer? Plongeons-nous !

Aperçu de la conception

Jetons un coup d'œil aux 3 en-têtes pleine largeur que nous allons concevoir aujourd'hui.

Communauté Divi Bushcraft

La première conception utilise les options d'image d'arrière-plan de Divi pour créer un arrière-plan texturé unique et sur la marque de la communauté Bushcraft.

2e année de Mme Nicole

Cette deuxième conception utilise une image d'arrière-plan et un dégradé d'arrière-plan pour créer un en-tête de bienvenue propre, moderne et frais pour la classe de 2e année de Mme Nicole.

En-tête de l'agent immobilier

La troisième conception utilise une image d'arrière-plan, un dégradé d'arrière-plan et un motif d'arrière-plan, tous combinés pour créer une conception élevée mais subtile pour la page d'accueil d'un agent immobilier.

Téléchargez les mises en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre newsletter en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis ! 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éabonné" ou ne recevrez pas d'e-mails supplémentaires.

Télécharger les fichiers
Télécharger gratuitement

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack de mise en page ultime Divi Landing Page, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-nous 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.

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 !

Pour importer le modèle d'en-tête dans votre bibliothèque Divi, procédez comme suit :

  1. Accédez au générateur de thèmes Divi.
  2. Cliquez sur le bouton Importer en haut à droite de la page.
  3. Dans la popup de portabilité, sélectionnez l'onglet import
  4. Choisissez le fichier de téléchargement sur votre ordinateur (assurez-vous d'abord de décompresser le fichier et d'utiliser le fichier JSON).
  5. Cliquez ensuite sur le bouton d'importation.

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, d'accord ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez procéder comme suit :

  1. Installez Divi sur votre site WordPress.
  2. Ajoutez une page, donnez-lui un titre et publiez-la.
  3. Activez le constructeur visuel.

Configuration de notre page

Une fois que vous aurez cliqué sur le bouton "Utiliser Divi Builder", la page se rechargera à l'aide de l'interface de construction par glisser-déposer de Divi. Trois options apparaîtront et pour les besoins d'aujourd'hui, sélectionnez "Construire à partir de zéro" afin que nous ayons une ardoise vierge où nous pouvons construire nos en-têtes pleine largeur.

Comment concevoir l'en-tête pleine largeur de la communauté Divi Bushcraft

Ajouter une section Fulldwith et un en-tête pleine largeur

Tout d'abord, nous devrons ajouter une section pleine largeur à notre page. Cliquez sur l'icône « + » pour afficher les options de la section, puis cliquez sur « Pleine largeur ». Cela chargera la bibliothèque de modules pleine largeur où vous pourrez sélectionner "En-tête pleine largeur" ​​dans les options. Cela chargera le module d'en-tête pleine largeur sur votre page.

Ajouter le contenu

Nous allons maintenant ajouter le contenu de notre module dans l'onglet Texte. Configurez les paramètres suivants :

  1. Texte d'en-tête : Divi Bushcraft Community
  2. Texte du sous-titre : Divi Bushcraft
  3. Bouton n° 1 : Inscrivez-vous aujourd'hui
  4. Bouton #2 : En savoir plus
  5. Corps du texte : At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Styliser l'arrière-plan

Cette conception utilise une image d'arrière-plan du pack de mise en page gratuit Divi Bushcraft. Vous pouvez obtenir toutes les images de ce pack de mise en page dans cet article. Faites simplement défiler jusqu'au bas de la publication et cliquez pour télécharger les images haute résolution.

Ajouter une image d'arrière-plan

Une fois que vous avez les photos, ajoutez une image de fond.

  1. Cliquez sur la troisième icône, l'icône d'image.
  2. Cliquez sur "Ajouter une image d'arrière-plan". Cela fera apparaître la médiathèque où vous pourrez télécharger une nouvelle photo ou sélectionner une photo dans votre médiathèque.
  3. Définissez le mode de fusion de l'image d'arrière-plan sur Superposition .
  4. Cliquez sur la première icône, l'icône du pot de peinture, et définissez une couleur d'arrière-plan : rgba(10,10,10,0.3)

Choisissez la mise en page

Sous les paramètres de conception, dans l'onglet Disposition, sélectionnez l'alignement au centre. Basculez l'option "Faire plein écran" sur "oui".

Style du texte du titre

Donnez du style au texte du titre en configurant ces paramètres :

  1. Niveau d'en-tête du titre : H1
  2. Police du titre : Josefin Sans
  3. Épaisseur de la police du titre : gras
  4. Style de police du titre : majuscule
  5. Taille du texte du titre : 7 rem

Style du corps du texte

Donnez du style au corps du texte en configurant ces paramètres :

  1. Police du corps : Josefin Sans
  2. Taille du corps du texte : 20 px

Style du texte du sous-titre

Donnez du style au texte des sous-titres en configurant ces paramètres :

  1. Police des sous-titres : Josefin Sans
  2. Poids de la police des sous-titres : semi-gras
  3. Style de police des sous-titres : majuscules
  4. Espacement des lettres de sous-titre : 3px
  5. Hauteur de la ligne de sous-titre : 5 em

Bouton Style #1

Maintenant, stylisons les boutons ! Pour le bouton 1, configurez ces paramètres :

  1. Utiliser des styles personnalisés pour le bouton 1 : Oui
  2. Taille du texte du bouton 1 : 14 px
  3. Couleur du texte du bouton 1 : #666b4a
  4. Arrière-plan du bouton 1 : #ead5a4
  5. Largeur de la bordure du bouton 1 : 0 pixel
  6. Rayon de la bordure du bouton 1 : 0px
  7. Espacement d'une lettre du bouton : 3px
  8. Style de police du bouton un : majuscule
  9. Rembourrage du bouton un : 15 pixels en haut et en bas ; 25px gauche et droite.

Bouton Style #2

Pour styliser le bouton 2, configurez les paramètres suivants :

  1. Utiliser des styles personnalisés pour le bouton 1 : Oui
  2. Taille du texte du bouton 1 : 14 px
  3. Couleur du texte du bouton 1 : #ead5a4
  4. Arrière-plan du bouton un : #666b4a
  5. Largeur de la bordure du bouton 1 : 0 pixel
  6. Rayon de la bordure du bouton 1 : 0px
  7. Espacement d'une lettre du bouton : 3px
  8. Style de police du bouton un : majuscule
  9. Rembourrage du bouton un : 15 pixels en haut et en bas ; 25px gauche et droite.

Et voilà ! Vous avez un en-tête pleine largeur magnifiquement stylé avec une image d'arrière-plan texturée avec une superposition pour la communauté Divi Bushcraft.

Comment concevoir l'en-tête pleine largeur de Mme Nicole

Créons maintenant un en-tête pleine largeur pour la classe de 2e année de Mme Nicole ! Cet en-tête utilise une image d'arrière-plan et un dégradé pour créer un design amusant et frais. Commençons!

Ajoutez une nouvelle page, puis ajoutez une section pleine largeur et un en-tête pleine largeur

Tout d'abord, nous devrons ajouter une section pleine largeur à notre page. Cliquez sur l'icône « + » pour afficher les options de la section, puis cliquez sur « Pleine largeur ». Cela chargera la bibliothèque de modules pleine largeur où vous pourrez sélectionner "En-tête pleine largeur" ​​dans les options. Cela chargera le module d'en-tête pleine largeur sur votre page.

Ajouter le contenu

Nous allons maintenant ajouter le contenu de notre module dans l'onglet Texte. Configurez les paramètres suivants :

  1. Texte d'en-tête : Bienvenue dans la classe de 2e année de Mme Nicole
  2. Texte du sous-titre : Bienvenue
  3. Bouton n° 1 : Afficher les affectations
  4. Bouton #2 : Contactez Mme Nicole
  5. Corps du texte : Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.

Styliser l'arrière-plan

Cette conception utilise des images du pack de mise en page prédéfini gratuit Classroom. Vous pouvez télécharger les images en pleine résolution en faisant défiler vers le bas de cet article.

Donnez du style à l'arrière-plan en configurant ces paramètres :

  1. Cliquez sur le deuxième onglet, l'icône de dégradé.
  2. Réglez les arrêts de dégradé sur : #ffffff à 40 % et transparent à 18 %.
  3. Définissez la direction du dégradé sur 219 degrés.
  4. Basculez "oui" pour Placer le dégradé au-dessus de l'image d'arrière-plan.
  5. Cliquez sur la troisième icône, l'icône d'image, puis cliquez sur "Ajouter une image d'arrière-plan".

Choisissez la mise en page

C'est ici que nous allons aligner le contenu du module au centre et le mettre en plein écran.

  1. Alignement du texte et du logo : centré
  2. Faire plein écran : Oui

Styliser le texte du titre

Donnez du style au texte du titre en configurant ces paramètres :

  1. Police du titre : Candal
  2. Taille du texte du titre : 4 rem

Styliser le corps du texte

Donnez du style au corps du texte en configurant ces paramètres :

  1. Police du corps : Montserrat
  2. Couleur du corps du texte : #6d6d6d
  3. Taille du corps du texte : 20 px

Styliser le texte du sous-titre

Donnez du style au texte des sous-titres en configurant ces paramètres :

  1. Poids de la police des sous-titres : ultra gras
  2. Style de police des sous-titres : majuscules
  3. Couleur du texte des sous-titres : rgba(28,10,10,0.6)
  4. Espacement des lettres de sous-titre : 3px
  5. Hauteur de la ligne de sous-titre : 3 em

Bouton Style #1

Style bouton #1 en configurant ces paramètres :

  1. Utiliser des styles personnalisés pour le bouton 1 : Oui
  2. Taille du texte du bouton 1 : 15 px
  3. Couleur du texte du bouton 1 : #ffffff
  4. Arrière-plan du bouton 1 : #000000
  5. Largeur de la bordure du bouton 1 : 0 pixel
  6. Rayon de la bordure du bouton 1 : 0px
  7. Espacement d'une lettre du bouton : 3px
  8. Poids de la police du bouton un : ultra gras
  9. Style de police du bouton un : majuscule
  10. Rembourrage du bouton un : 15 pixels en haut et en bas ; 25px gauche et droite.

Bouton Style #2

Style bouton #2 en configurant ces paramètres :

  1. Utiliser des styles personnalisés pour le bouton 2 : Oui
  2. Taille du texte du bouton deux : 15 px
  3. Couleur du texte du bouton deux : #ffd078
  4. Arrière-plan du bouton 2 : transparent
  5. Largeur de la bordure du bouton deux : 0 pixel
  6. Rayon de la bordure du bouton deux : 0px
  7. Espacement des deux lettres du bouton : 3px
  8. Poids de la police du bouton deux : ultra gras
  9. Style de police du bouton deux : majuscules
  10. Couleur de l'icône du bouton deux : #ffd078
  11. Afficher uniquement l'icône au survol pour le bouton 2 : Non
  12. Rembourrage du bouton deux : 15 pixels en haut et en bas ; 25px gauche et droite.

Dimensionnement

Définissez la largeur du contenu sur 70 %.

Voila ! Vous avez maintenant un en-tête pleine largeur entièrement conçu pour la classe de 2e année de Mme Nicole.

Comment concevoir l'en-tête pleine largeur d'un agent immobilier

Concevons cet en-tête pleine largeur élégant et moderne pour le site Web d'un agent immobilier. Cette section utilise une image d'arrière-plan, un dégradé d'arrière-plan ET un motif d'arrière-plan. Mettons-nous au travail!

Ajoutez une nouvelle page, puis ajoutez une section pleine largeur et un en-tête pleine largeur

Tout d'abord, nous devrons ajouter une section pleine largeur à notre page. Cliquez sur l'icône « + » pour afficher les options de la section, puis cliquez sur « Pleine largeur ». Cela chargera la bibliothèque de modules pleine largeur où vous pourrez sélectionner "En-tête pleine largeur" ​​dans les options. Cela chargera le module d'en-tête pleine largeur sur votre page.

Ajouter du contenu

Commençons par ajouter le contenu nécessaire à ce module dans l'onglet Texte :

  1. Titre : Trouvons la maison de vos rêves
  2. Sous-titre : Dave Merrit – agent immobilier
  3. Bouton #1 – Réservez une consultation gratuite
  4. Bouton #2 – Envoyez-moi un e-mail
  5. Corps du texte : Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Styliser l'arrière-plan

Ajouter un dégradé

Dans l'onglet arrière-plan, cliquez sur la deuxième icône, l'icône de dégradé, et configurez ces paramètres :

  1. Gradient Stops : rgba(56,65,58,0.74) à 100 % et #38413a à 70 %
  2. Direction du dégradé : 88 degrés
  3. Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Ajouter une image

Cliquez sur la troisième icône, l'icône d'image, puis cliquez sur "Ajouter une image d'arrière-plan" pour télécharger votre image. Cette démonstration utilise des images du pack de mise en page gratuit Realtor. Vous pouvez télécharger les images en pleine résolution en faisant défiler vers le bas de cet article.

Ajouter un motif d'arrière-plan

Ajoutez un motif d'arrière-plan en configurant ces paramètres :

  1. Sélectionnez Tufté dans la liste déroulante.
  2. Couleur du motif : rgba (0,0,0,0.2)

Choisissez la mise en page

C'est ici que nous allons aligner le contenu du module au centre et le mettre en plein écran.

  1. Alignement du texte et du logo : centré
  2. Faire plein écran : Oui

Styliser le texte du titre

Donnez du style au texte du titre en configurant ces paramètres :

  1. Police du titre : Merriweather
  2. titre Taille du texte : 5 rem

Styliser le corps du texte

Donnez du style au corps du texte en configurant ces paramètres :

  1. Police du corps : Open Sans
  2. Taille du corps du texte : 16 px
  3. Hauteur de la ligne du corps : 2em

Styliser le texte du sous-titre

Donnez du style au texte des sous-titres en configurant ces paramètres :

  1. Police des sous-titres : Open Sans
  2. Poids de la police des sous-titres : Gras
  3. Style de police des sous-titres : majuscules
  4. Couleur du texte des sous-titres : #b4926b
  5. Espacement des lettres de sous-titre : 3px

Bouton Style #1

Style bouton #1 en configurant ces paramètres :

  1. Utiliser des styles personnalisés pour le bouton 1 : Oui
  2. Taille du texte du bouton 1 : 18 px
  3. Arrière-plan du bouton un : #b4926b
  4. Largeur de la bordure du bouton 1 : 0 pixel
  5. Rayon de la bordure du bouton 1 : 0px
  6. Rembourrage du bouton un : 10 pixels en haut et en bas ; 25px gauche et droite.

Bouton Style #2

Style bouton #2 en configurant ces paramètres :

  1. Utiliser des styles personnalisés pour le bouton 2 : Oui
  2. Taille du texte du bouton 2 : 18 px
  3. Largeur de la bordure du bouton 2 : 1 pixel
  4. Couleur de la bordure du bouton deux : rgba (255,255,255,0.19)
  5. Rayon de la bordure du bouton 2 : 0x
  6. Rembourrage du bouton deux : 10 pixels en haut et en bas ; 25px gauche et droite

Voilà ! Vous avez maintenant un bel en-tête pleine largeur pour un site Web d'agent immobilier.

Dernières pensées

L'en-tête Divi Fullwidth est un moyen rapide et facile de créer une section de héros de site Web époustouflante pour votre site Web. Étant donné que les sections de héros de site Web sont si essentielles pour faire une bonne première impression, il est important que votre conception soit de marque, accrocheuse et informative. Avec l'en-tête pleine largeur, il est facile de créer un en-tête qui atteint tous ces objectifs dans un seul module. Maintenant que vous avez vu ce qui est possible avec l'en-tête pleine largeur, comment allez-vous concevoir le vôtre ?