Comment styliser une image dans votre module Divi Fullwidth Header

Le module d'en-tête pleine largeur de Divi comprend de nombreuses options de style d'image, permettant aux utilisateurs de Divi de créer de belles images et des mises en page pour leurs en-têtes. L'image d'en-tête peut être stylisée de plusieurs façons pour créer des mises en page et des conceptions intéressantes. Cela devient encore plus intéressant lorsqu'il est associé aux différentes conceptions de texte et de bouton. Dans cet article, nous verrons comment styliser une image dans votre module Divi Fullwidth Header et partagerons trois exemples pour vous aider à concevoir votre module Fullwidth Header.

Commençons!

Aperçu

Exemple d'image d'en-tête pleine chasse pour le bureau

Exemple d'image d'en-tête pleine largeur du téléphone

Exemple d'image d'en-tête pleine chasse pour le bureau 2

Exemple d'image d'en-tête pleine largeur du téléphone 2

Exemple d'image d'en-tête pleine chasse pour le bureau 3

Image d'en-tête pleine largeur du téléphone Exemple 3

Ajouter une image à votre en-tête pleine largeur

Voici l'en-tête pleine largeur que nous utiliserons dans cet exemple. Voyons d'abord comment le construire. Nous utilisons des images et des files d'attente de conception du pack de mise en page gratuit Flower Farm disponible dans Divi.

Pour ajouter le module Divi Fullwidth Header à votre page, vous aurez besoin d'un nouveau conteneur de section avec une ligne à une colonne. Une fois que vous avez cela, ajoutez le module d'en-tête pleine largeur à la colonne de votre ligne.

Texte d'en-tête pleine chasse

Ensuite, ajoutez votre titre, sous-titre, texte du bouton un, texte du bouton deux et contenu.

• Titre : Bienvenue à Divi Flower Farm
• Sous-titre : À propos de nous
• Bouton 1 : Plus d'informations
• Bouton 2 : Boutique
• Contenu : votre texte

Image d'en-tête

Faites défiler jusqu'à Images , choisissez Image d'en-tête et ajoutez votre image.

Arrière plan

Ensuite, faites défiler jusqu'à Background , sélectionnez l'onglet Gradient et ajoutez quatre Gradient Stops :

• Arrêt dégradé 1 : 0 %, #000000
• Arrêt 2 : 25 %, rgba (0,0,0,0,8)
• Dégradé 3 : 75 %, rgba (0,0,0,0,8)
• Dégradé 4 : 100 %, #000000

Ensuite, activez Placer le dégradé au-dessus de l'image d'arrière-plan . Laissez les autres paramètres à leurs valeurs par défaut.

• Placer le dégradé au-dessus de l'image d'arrière-plan : Oui

Sélectionnez l'onglet Image d'arrière -plan et ajoutez votre image. Ensuite, nous allons styliser le module d'en-tête pleine largeur.

Texte du titre

Sélectionnez l'onglet Conception et faites défiler jusqu'à Texte du titre . Sélectionnez H1 et choisissez Italiana pour la police. Définissez l'alignement à gauche et choisissez le blanc pour la couleur.

• Niveau de titre : H1
• Police : Italiana
• Alignement : Gauche
• Couleur : #ffffff

Définissez la taille du bureau sur 80 pixels, la taille de la tablette sur 40 pixels et la taille du téléphone sur 32 pixels.

• Taille: 80px Desktop, 40px Tablet, 32px Phone

Le corps du texte

Ensuite, faites défiler jusqu'à Corps du texte . Définissez l'alignement sur la gauche, choisissez Roboto pour la police et changez la couleur en blanc.

• Alignement : Gauche
• Police : Roboto
• Couleur : #ffffff

Modifiez la taille du bureau à 18 pixels, la taille de la tablette à 16 pixels et la taille du téléphone à 14 pixels.

• Taille du texte : Bureau 18px, Tablette 16px, Téléphone 14px

Texte du sous-titre

Ensuite, faites défiler jusqu'à Texte du sous-titre . Choisissez Roboto pour la police et définissez le poids sur Lourd. Choisissez TT pour le style, réglez l'alignement sur la gauche et changez la couleur en # b5a68f.

• Police : Roboto
• Poids : Lourd
• Style : TT
• Alignement : Gauche
• Couleur : #b5a68f

Ensuite, modifiez l' espacement à 0,2 em et la hauteur de ligne à 1,7 em. Laissez la taille de la police à sa valeur par défaut, 18px.

• Espacement : 0,2 em
• Hauteur de ligne : 1,7 em

Bouton un

Faites défiler jusqu'à Button One et sélectionnez Use Custom Styles for Button One . Définissez la taille de la police sur 14 pixels, la couleur du texte sur # aa6a3c et la couleur d'arrière-plan sur # f5f3ef.

• Utiliser des styles personnalisés pour le bouton 1 : Oui
• Taille de la police : 14 px
• Couleur du texte : #aa6a3c
• Couleur de fond : #f5f3ef

Définissez la couleur de la bordure sur # aa6a3c, l'espacement des lettres sur 0,15 em, la police sur Roboto, l'épaisseur sur gras et le style sur TT.

• Couleur de la bordure : #aa6a3c
• Espacement des lettres : 0,15 em
• Police : Roboto
• Poids : Gras
• Style : TT

Faites défiler jusqu'à Rembourrage du bouton 1 . Changez le rembourrage supérieur et inférieur à 20px et le rembourrage gauche et droit à 30px.

• Rembourrage : Haut, Bas 20px, Gauche, Droite 30px

Bouton deux

Ensuite, faites défiler jusqu'au bouton deux . Sélectionnez Utiliser des styles personnalisés pour le bouton 2 . Définissez la taille de la police sur 14 pixels, la couleur du texte sur blanc et la couleur d'arrière-plan sur rgba (255,255,255,0).

• Utiliser des styles personnalisés pour le bouton 2 : Oui
• Taille de la police : 14 px
• Couleur du texte : #ffffff
• Couleur de fond : rgba (255,255,255,0)

Définissez la couleur de la bordure sur blanc, l'espacement des lettres sur 0,15 em, la police sur Roboto, l'épaisseur sur Gras et le style sur TT.

• Couleur de la bordure : #ffffff
• Espacement des lettres : 0,15 em
• Police : Roboto
• Poids : Gras
• Style : TT

Faites défiler jusqu'à Rembourrage du bouton 2 et définissez le Rembourrage supérieur et inférieur sur 20 pixels, et le Rembourrage gauche et droit sur 30 pixels. C'est tout pour le style du module d'en-tête pleine largeur. Maintenant, nous allons voir trois façons de styliser l'image.

• Rembourrage : Haut, Bas 20px, Gauche, Droite 30px

Exemples de style d'image d'en-tête pleine chasse

Voici trois exemples utilisant notre mise en page comme point de départ. Je vais faire quelques ajustements à la mise en page pour chacun des exemples.

Exemple d'image d'en-tête pleine chasse

Pour notre premier exemple d'image d'en-tête pleine largeur, nous allons créer un haut arrondi avec une bordure. Accédez à l'onglet Conception et faites défiler jusqu'à Image . Désynchronisez les valeurs et modifiez la bordure supérieure à 400 pixels.

• Bordure supérieure droite et gauche : 400 px
• Bordure inférieure droite et gauche : 0px

Changez la largeur de la bordure en 2px et la couleur de la bordure en blanc.

• Largeur : 2 pixels
• Couleur : #ffffff

Ensuite, nous allons ajuster l' alignement du texte et de l'image pour ajuster leur placement sur l'écran. Pour cet exemple, nous laisserons l'image et le texte dans leurs positions actuelles, mais nous modifierons l'alignement vertical du texte et des boutons. La sélection de Plein écran ouvre une option pour l'alignement vertical du texte dans les options de texte.

Tout d'abord, allez dans l'onglet Conception. Sous Disposition, définissez l'alignement du texte sur la droite et activez Faire plein écran.

• Faire plein écran : Oui

Enfin, faites défiler jusqu'à Texte . Vous verrez maintenant une option intitulée Text Vertical Alignment . Réglez-le sur Bas. Fermez le module et enregistrez vos paramètres.

• Alignement vertical du texte : bas

Exemple d'image d'en-tête pleine largeur 2

Pour cet exemple, nous utiliserons un texte et une image de bouton différents. Tout d'abord, changez le texte du bouton un en informations.

• Texte du bouton 1 : informations

Ensuite, faites défiler jusqu'à Arrière -plan et choisissez une autre image. Cette image prendra environ 1/3 de la largeur de l'écran. J'utilise la même image que l'arrière-plan.

• Image d'en-tête : grande image

Ensuite, allez dans l' onglet Avancé et faites défiler jusqu'au champ Image d'en-tête. Ajoutez CSS pour définir la largeur à 150 % et la hauteur à auto. Fermez le module et enregistrez vos paramètres.

Image d'en-tête CSS :

max-width: 150%;
height: auto;

Maintenant que l'image et le texte du bouton sont en place, nous allons faire nos ajustements. Nous pouvons ajuster l' alignement du texte et de l'image pour ajuster leur placement sur l'écran. Tout d'abord, allez dans l'onglet Conception . Sous Disposition, laissez l'alignement du texte à gauche et activez Make Fullscreen .

• Faire plein écran : Oui

Ensuite, faites défiler jusqu'au texte du titre et définissez l'alignement sur le centre.

• Alignement du texte du titre : centré

Ensuite, faites défiler jusqu'à Corps du texte . Changez l'alignement du texte au centre.

• Alignement : Centre

Ensuite, faites défiler jusqu'au texte du sous-titre et définissez l'alignement sur le centre.

• Alignement du texte des sous-titres : centré

Faites défiler jusqu'à Button One Margin et modifiez la marge de gauche à 29% pour les ordinateurs de bureau, 18% pour les tablettes et 19% pour les téléphones.

• Marge gauche du bouton un : 29 % pour ordinateur, 18 % pour tablette, 19 % pour téléphone

Faites défiler jusqu'à la marge du bouton deux et modifiez la marge de gauche à 30 % pour les tablettes et à 31 % pour les téléphones.

• Marge gauche du bouton deux : 30 % tablette, 31 % téléphone

Faites défiler jusqu'à Dimensionnement et définissez la largeur sur 104 % pour les téléphones. Cela centre correctement le contenu pour les écrans étroits.

• Largeur : 104 % du téléphone

Exemple d'image d'en-tête pleine largeur trois

Tout d'abord, allez dans l'onglet Conception . Sous Disposition , définissez l'alignement du texte sur Droite. Dans mon cas, le texte est aligné à gauche, mais le vôtre peut être centré si vous n'avez pas spécifié l'alignement.

• Alignement du texte et du logo : centré

Faites défiler jusqu'à Image . Modifiez la largeur de la bordure à 4 pixels et la couleur de la bordure à # b5a68f.

• Largeur bordure : 4px
• Couleur de la bordure : #b5a68f

Ensuite, faites défiler jusqu'au texte du titre et changez l'alignement en centré.

• Alignement du texte du titre : centré

Faites défiler jusqu'à Corps du texte et changez l'alignement en Centré.

• Alignement du corps du texte : centré

Ensuite, faites défiler jusqu'au texte du sous-titre et changez l'alignement en centré.

• Alignement du texte des sous-titres : centré

Ensuite, accédez à l'onglet Contenu et remplacez le texte du bouton 1 par Informations uniquement pour les téléphones.

• Contenu de Button One pour téléphones : informations

Revenez à l'onglet Design et ajoutez une marge droite de 5 % à l'onglet téléphone de Button Two.

• Marge droite : 5 % du téléphone

Enfin, faites défiler jusqu'à Dimensionnement et définissez la largeur du contenu sur 52 % pour les ordinateurs de bureau et 100 % pour les tablettes et les téléphones. Fermez le module et enregistrez vos paramètres.

• Largeur du contenu : 52 % pour ordinateur, 100 % pour tablette et téléphone

Résultats

Exemple d'image d'en-tête pleine chasse pour le bureau

Exemple d'image d'en-tête pleine largeur du téléphone

Exemple d'image d'en-tête pleine chasse pour le bureau 2

Exemple d'image d'en-tête pleine largeur du téléphone 2

Exemple d'image d'en-tête pleine chasse pour le bureau 3

Image d'en-tête pleine largeur du téléphone Exemple 3

Mettre fin aux pensées

C'est notre regard sur la façon de styliser votre module d'en-tête Divi Fullwidth. L'image est facile à styliser et peut être placée à plusieurs endroits dans le module. Les différentes options de mise en page du module vous offrent de nombreuses possibilités de conception. Assurez-vous de tester vos conceptions sur toutes les tailles d'écran pour garantir la meilleure expérience utilisateur.

Nous voulons de vos nouvelles. Avez-vous stylisé vos images dans le module d'en-tête pleine largeur de Divi ? Faites-nous part de votre expérience dans les commentaires.