Divi : Comment créer la page blog avec le module Blog

par Gaetan Taffo | Divi, Tutoriels Divi

Désirez-vous créer une page de blog avec le module Blog de Divi ?

Habituellement, chaque pack de mise en page Divi publié sur Elegant Themes propose une mise en page de blog, qui vous aide à créer votre blog assez rapidement. Mais avez-vous déjà voulu voir comment créer vous-même l’une de ces pages de blog ? 

Dans cet article, nous verrons comment créer une page de blog avec le module Blog de Divi. Nous allons passer en revue chaque paramètre étape par étape.

Commençons !

Aperçu

Avant de nous lancer, voyons d’abord un aperçu de ce que nous allons créer.

Créer une nouvelle page de blog

Créer une nouvelle page

Tout d’abord, nous allons créer notre page. Dans le tableau de bord WordPress, cliquez sur Pages > Ajouter.

Donnez à la page un titre qui a du sens pour vous.

• Titre de la page : Blog sur Divi

Passer à Divi Builder

Cliquez sur le bouton violet au centre de la page : Utiliser Divi Builder .

Ajouter une section pour le titre de la page de blog

Personnalisez la section

Nous allons commencer par la première section. Ouvrez les paramètres de la section .

Faites défiler jusqu’à Fond et changez la couleur en #f9f3fd. Entrez Blog comme étiquette d’administration. Fermez les paramètres de la section.

• Arrière-plan : #f9f3fd
• Libellé d’administration : Blog

Créer le titre de la page de blog

Ensuite, nous ajouterons une ligne pour le titre. Sélectionnez l’icône verte et choisissez la ligne à une seule colonne.

Ensuite, ajoutez un module de texte à la ligne.

Personnaliser le module Texte du titre du blog

Ouvrez les paramètres du module Texte et sélectionnez H1. Ajoutez le titre Notre blog.

• Police : Titre 1
• Texte : Notre blog

Ensuite, allez dans l’onglet Style et définissez l’alignement sur Centré. Pour le texte du titre H1, choisissez Cormorant Infant pour la police et mettez-le en gras.

• Alignement du texte : Centré
• Texte d’en-tête : H1
• Police En-tête : Cormorant Infant
• En-tête Lumière tamisée : Texte en gras

Définissez la couleur sur # 442854, la taille sur 130px et définissez la hauteur de ligne sur 0,8em.

• Couleur : #442854
• Taille du texte du bureau : 130 px
• Hauteur de ligne : 0,8em

Créer la section Dernier article et Appel à l’Action

Notre section est composé du dernier article et un e-mail opt-in. 

Ajoutez une nouvelle ligne sous notre première ligne et sélectionnez la conception de la colonne 2/3 à gauche et 1/3 à droite.

Ouvrez les paramètres de ligne en cliquant sur l’icône d’engrenage.

Sélectionnez l’onglet Style, faites défiler jusqu’à Espacement et ajoutez 0px à Marge interne Bas. Fermez les paramètres.

• Marge interne Bas : 0px

Ajouter et personnaliser le module de publication de blog à la une

Ensuite, nous ajouterons un module Blog . Celui-ci contiendra notre dernier article. Cliquez sur l’icône grise plus dans la colonne de gauche de notre nouvelle ligne et ajoutez le module Blog.

Contenu

Sous Contenu , saisissez 1 pour le nombre de publications.

• Nombre de postes : 1

Éléments

Faites défiler jusqu’à Éléments et décochez Auteur et Pagination. Nous laisserons le reste à leurs valeurs par défaut.

• Afficher l’auteur : non
• Afficher la pagination : Non

Disposition

Ensuite, sélectionnez l’ onglet Style et choisissez Plein Ecran pour la mise en page et désactivez la superposition d’images en vedette.

• Modèle : Plein écran
• Superposition d’images sélectionnées : désactivée

Texte du titre

Faites défiler jusqu’à Texte du titre . Sélectionnez H2 et choisissez Cormoran Infant. Sélectionnez Gras et changez la couleur en #442854.

• Insérer l’en-tête trois : H2
• Police Titre : Cormorant Infant
• Titre Lumière tamisée : Texte en gras
• Couleur du texte Titre : #442854

Définissez la taille de la police sur 30 pixels. Changez la hauteur de ligne à 1.1em.

• Taille : 30 pixels pour ordinateur de bureau, 20 pixels pour tablette, 18 pixels pour téléphone
• Hauteur de la ligne de titre : 1,1 em

Le corps du texte

Ensuite, faites défiler jusqu’à Corps du texte . Choisissez Cabin pour la police, changez la couleur en #442854 et changez la hauteur de ligne en 1,8 em.

• Police Corps : Cabin
• Couleur du texte Corps : #442854
• Hauteur de la ligne Corps : 1,8 em

Métadonnées texte

Ensuite, faites défiler jusqu’à Metadonnées Texte . Définissez les paramètres comme suit :

• Police Métadonnées : Cormorant Infant
• Métadonnées Lumière tamisée : Régulier
• Métadonnées Copier le style : Aucun
• Couleur du texte Métadonnées : #442854
• Métadonnées taille du texte : Bureau 16px, Tablette 15px, Téléphone 14px
• Hauteur de la ligne Métadonnées : 1,8 em

Espacement

Ensuite, faites défiler jusqu’à Espacement et changez la marge supérieure en 0vw.

• Marge Sommet : 0vw

Boîte ombre

Enfin, faites défiler jusqu’à Boîte ombre et désactivez-la.

• Boîte Ombre : Désactiver

Ajouter et personnaliser le module de texte d’e-mail de blog

Maintenant, nous allons passer à la colonne de droite et créer l’Appel à l’Action par e-mail . Tout d’abord, ajoutez un module Texte dans la colonne de droite. Cliquez sur l’icône grise plus et recherchez Texte.

Contenu

Sélectionnez Heading 2 et saisissez le texte Abonnez vous à nos offres.

• Police : Heading 2
• Texte : Abonnez vous à nos offres

Texte d’en-tête

Pour le texte du titre , sélectionnez Alignement central, choisissez H2, sélectionnez Cormorant Infant et réglez-le sur Gras.

• Alignement du texte : Centré
• Texte d’en-tête : H2
• Police En-tête : Cormorant Infant
• En-tête Lumière tamisée : Gras

Changez la couleur en # 442854, la taille en 32 pixels et la hauteur de ligne en 0,95 em.

• Couleur du texte En-tête : #442854
• En-tête Taille du Texte : 32 pixels
• Hauteur de la ligne En-tête : 0,95 em

Espacement

Enfin, faites défiler jusqu’à Espacement et ajoutez 10 pixels à la marge inférieure. Fermez les paramètres du module Texte.

• Marge Bas : 10 px

Ajouter et personnaliser le module Blog Email Optin

Ensuite, nous allons créer le formulaire de courrier électronique . Ajoutez un module Email Optin sous le module Texte dans la colonne de droite.

Contenu

Tout d’abord, supprimez le texte du titre et du corps.

• Titre : Aucun
• Corps du texte : aucun

Faites défiler jusqu’à Compte de messagerie et ajoutez votre fournisseur de services.

Ensuite, faites défiler jusqu’à Fond et désélectionnez la couleur d’arrière-plan.

• Utiliser la couleur d’arrière-plan : non

Des champs

Allez dans l’ onglet Style et changez la Couleur d’arrière-plan des champs en rgba(255,255,255,0) et la Couleur du texte en #442854.

• Champs Couleur d’arrière-plan : rgba (255,255,255,0)
• Couleur du texte Champs : #442854

Faites défiler jusqu’aux options de police et changez la police en cabin, la taille en 16 pixels et la hauteur de ligne en 1,8 em.

• Police Champs : Cabin
• Champs Taille du Texte : 16 pixels
• Hauteur de la ligne Champs : 1,8 em

Ensuite, ajustez le coin arrondi des champs à 32px, la largeur de la bordure à 2px et changez la couleur de la bordure à # 442854.

• Champs Rectangle arrondi : 32px
• Champs Largeur de la bordure : 2px
• Champs Couleur de la bordure : #442854

Bouton

Faites défiler jusqu’à Bouton et sélectionnez Utiliser des styles personnalisés pout Bouton . Changez la taille en 18ps, la couleur du bouton en blanc et la couleur d’arrière-plan du bouton en #442854.

• Utiliser des styles personnalisés pour le bouton : Oui
• Bouton Taille du Texte : 18 pixels
• Couleur du Texte Bouton : #ffffff
• Bouton Background : #442854

Changez le rayon de la bordure en 50 pixels, la police en Cormorant Infant et mettez le poids en gras.

• Bouton Rayon des Frontières : 50px
• Police Bouton : Cormorant Infant
• Bouton Lumière tamisée : Texte en gras

Enfin, ajoutons quelques Marges . Entrez 20px pour la marge Sommet, 12px pour le rembourrage Sommet et Bas et 32px pour le rembourrage gauche et droit. Fermez les paramètres Email Optin.

• Bouton Marge Sommet : 20 px
• Bouton Rembourrage Sommet et Bas : 12 px
• Bouton Rembourrage gauche et droite : 32px

Ajouter une nouvelle ligne pour la liste des articles du blog

Nous allons maintenant créer la liste des articles de la page. Tout d’abord, ajoutez une nouvelle rangée à une seule colonne sous notre section précédente.

Paramètres de ligne

Accédez à l’ onglet Style et ajoutez 0px à la Marge interne Sommet. Fermez les paramètres de ligne.

• Marge interne Sommet : 0px

Ajouter un module Blog à votre ligne

Ajoutez un module Blog à votre nouvelle ligne en cliquant sur l’icône grise plus et en cliquant sur Blog.

Styliser le fil d’article du blog

Modifions le flux de la page Blog.

Contenu du flux de blog

Ouvrez les paramètres du module Blog et saisissez 3 pour le nombre de publications. Cela vous permet de choisir le nombre de publications qui s’affichent à l’écran.

Un nombre inférieur, tel que 3, nous permet de nous concentrer sur les publications récentes et de réduire la taille de la page. C’est un bon choix si vous ne postez pas souvent ou si vous voulez garder la page plus propre. Afficher plus de messages, tels que 6-9, est une bonne idée si vous souhaitez vous concentrer sur le flux du blog.

• Nombre de messages : 3

Entrez 1 pour le décalage. Cela indique à Divi de commencer par le deuxième article de blog, ce qui nous empêche d’afficher le même article que celui déjà affiché dans l’article de blog présenté au-dessus de celui-ci.

• Numéro de décalage de poste : 1

Éléments

Faites défiler jusqu’à Éléments . Activez l’image en vedette, la date, l’extrait de catégories et la pagination. Désactivez le reste.

• Afficher l’image en vedette : Oui
• Data : Oui
• Catégories : Oui
• Extrait : Oui
• Pagination : Oui

Arrière plan

Accédez à Fond et définissez la couleur d’arrière-plan de la tuile de grille sur rgba (255,255,255,0)

• Couleur de fond des carreaux de quadrillage de la grille : rgba (255,255,255,0)

Mise en page et superposition

Ensuite, allez dans l’ onglet Style . Laissez la mise en page définie sur Grille. Nous avons choisi la mise en page pleine largeur pour l’article de blog présenté au-dessus de celui-ci. Nous utiliserons la disposition en grille pour ce flux de blog, qui est l’option par défaut. Désactivez la superposition d’images en vedette.

• Disposition : Grille
• Superposition d’images sélectionnées : désactivée

Texte du titre

Pour le texte du titre , sélectionnez H2. Choisissez Cormorant Infant, réglez-le sur Gras et entrez # 442854 pour la couleur.

• Insérer l’en-tête trois : H2
• Police Titre : Cormorant Infant
• Titre Lumière tamisée : Texte en gras
• Couleur du texte Titre : #442854

Choisissez 20px pour la taille du texte. Définissez la hauteur de ligne sur 1,1 em.

• Titre Taille du Texte : Bureau 20px
• Hauteur de ligne Titre : 1,1 em

Le corps du texte

Faites défiler jusqu’à Corps Texte et choisissez Cabin. Définissez la couleur sur #442854.

• Police Corps : cabine
• Couleur du texte Corps : #442854

Réglez la hauteur de ligne sur 1,8 em.

• Hauteur de ligne : 1,8 em

Métadonnées texte

Faites défiler jusqu’à Metadonnées Texte et choisissez Cormorant Infant. Définissez le poids sur normal, le style sur aucun et la couleur sur # 442854.

• Police Métadonnées : Cormorant Infant
• Métadonnées Lumière tamisée : Régulier
• Métadonnées Copier le style : Aucun
• Couleur du texte Métadonnées : #442854

• Métadonnées Taille du Texte : ordinateur de bureau 16 px, tablette 15 px, téléphone 14 px
• Hauteur de la ligne Métadonnées : 1,8 em

Texte de pagination

Passons maintenant à la Pagination . Pour la police, choisissez Cormorant Infant, sélectionnez Gras et changez la couleur en #442854.

• Police Afficher la Pagination : Cormorant Infant
• Afficher la pagination Lumière tamisée : Gras
• Couleur du texte Afficher la pagination : #442854

Espacement

Ensuite, nous allons passer à l’ espacement et ajouter la marge 0vw au sommet. Cela empêche notre module de chevaucher le module précédent.

• Marge Sommet : 0vw

Bordure

Faites défiler jusqu’à Bordure et entrez 0px pour les quatre coins. Cela nous donne notre forme carrée pour la carte.

• Disposition de la grille Rectangle arrondi : 0px

Boîte ombre

Enfin, faites défiler jusqu’à Box Shadow et désactivez-le. Fermez les paramètres du blog. La section blog est terminée.

• Boîte ombre : aucune

Ajouter une nouvelle section « Appel à l’Action » à la page de blog

Ensuite, nous allons créer la section « Appel à l’Action de la page. Cette section comprend une image d’arrière-plan plein écran en parallaxe, des informations de contact et des liens de suivi social.

Ajouter une nouvelle rubrique

Cliquez sur l’icône bleue pour ajouter une nouvelle section régulière au bas de la page.

• Section : Régulier

Styliser la section d’Appel à l’Action

Ouvrez les paramètres de la section en cliquant sur son icône d’engrenage.

Arrière plan

Faites défiler jusqu’à Fond et choisissez l’onglet Image. Cliquez sur l’icône grise intitulée Image de fond.

Choisissez une image plein écran dans votre médiathèque. Sélectionnez Utiliser l’effet de parallaxe, puis choisissez CSS pour la méthode de parallaxe.

• Image de fond
• Utiliser l’effet de parallaxe : Oui
• Méthode de parallaxe : CSS

Faites défiler jusqu’à Etiquette Admin et entrez « Footer » dans le champ. Cela vous aidera à garder une trace des sections.

• Etiquette Admin : Footer

Ensuite, allez dans l’ onglet Style.

• Marge interne : 10vw (Sommet et Bas)

Ajouter une nouvelle ligne

Cliquez sur l’icône verte plus et ajoutez une ligne à une seule colonne pour notre contenu.

Dimensionnement

Ouvrez les paramètres de la ligne et accédez à l’onglet Style.

• Largeur maximale : 320 pixels

Module de texte du titre

Notre section Appel à l’Action est présenté avec un titre. Pour créer cela, ajoutez un module de texte à la ligne.

Personnaliser le texte du titre

Ajoutez votre titre et changez la police en Heading 3.

• Police : Heading 3
• Texte : Tout savoir sur Divi

Texte d’en-tête

Accédez à l’ onglet Style et faites défiler jusqu’à Texte sous-titre . Choisissez le centre pour l’alignement, sélectionnez H3, choisissez Cormorant Infant, réglez-le sur Gras et choisissez le blanc pour la couleur.

• Alignementdu texte : Centre
• Texte d’en-tête : H3
• Police En-tête : Cormorant Infant
• En-tête Lumière tamisée : Gras
• Couleur du texte en-tête : #ffffff

• En-tête Taille du Texte : 42 pixels pour ordinateur de bureau, 20 pixels pour tablette, 16 pixels pour téléphone
• Hauteur de la ligne En-tête : 1,1 em

Espacement

Enfin, faites défiler jusqu’à Espacement et ajoutez 10 pixels à la marge inférieure. Fermez les paramètres du module.

• Marge Bas : 10 px

Module Texte pour l’adresse

Ajoutez un autre module Texte pour votre adresse physique.

Styliser le module Texte de l’adresse physique

Texte d’adresse

Ajoutez votre adresse en tant que texte de paragraphe.

• Style : Paragraphe
• Texte : votre adresse

Texte du paragraphe

Ensuite, allez dans Texte dans l’ onglet Style et choisissez Cormorant Infant, semi bold, et réglez-le sur blanc.

• Police : Cormorant Infant
• Texte Lumière tamisée : semi-gras
• Couleur du texte Texte : #ffffff

• Texte Taille du texte : 28 px pour ordinateur de bureau, 20 px pour tablette, 16 px pour téléphone
• Hauteur de la ligne Texte : 1,2 em

Ajouter le module suivez-nous sur les réseaux sociaux

Notre dernier module est le module Suivez-nous sur les réseaux sociaux . Ajoutez-le au bas de la ligne.

Styliser Le module de suivez-nous sur les réseaux sociaux

Nous allons commencer par l’ onglet Style cette fois. Sélectionnez Centre pour l’alignement du module et changez la couleur de l’icône en #442854.

• Alignement du module : Centre
• Couleur de l’icône : #442854

Faites défiler jusqu’à Bordure et ajoutez 23 pixels pour les coins arrondis.

• Rectangle arrondi : 32px

Ajoutez et personnalisez vos réseaux sociaux

Maintenant, revenez à l’ onglet Contenu et ajoutez tous les réseaux sociaux que vous souhaitez inclure. Cliquez sur l’icône grise plus.

Ouvrez les paramètres de chacun de vos réseaux sociaux , choisissez le réseau et ajoutez le lien vers votre compte. Définissez la couleur d’arrière-plan sur #f9f3fd. Fermez les paramètres du sous-module.

• Réseau social : votre choix
• URL du lien de compte : votre lien
• Couleur de fond : #f9f3fd

Enregistrez la page blog et quittez le constructeur visuel

Enfin, enregistrez la page dans le coin inférieur droit et sélectionnez Quitter Visual Builder en haut de la page. Vous êtes prêt à voir votre travail.

Aperçu de la page de blog

Voici nos résultats.

Télécharger DIVI Maintenant !!!

Conclusion

Voilà ! C’est notre regard sur la façon de créer une page de blog avec Divi. 

Divi Builder facilite la création de mises en page intéressantes et il existe plusieurs façons d’utiliser chacun des modules. Comme ce tutoriel l’a exploré, il est possible d’utiliser plusieurs versions du module Blog sur la même page pour afficher le flux de blog de différentes manières.

Si vous avez un quelconque souci ou des suggestions, retrouvons nous dans la section commentaires pour en discuter.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

…

Divi : Comment créer un menu latéral coulissant et responsive

par Gaetan Taffo | Divi, Tutoriels Divi

Envie de créer un menu latéral coulissant et responsive dans Divi ?

Lors de la création d’un site Web, vous vous demandez souvent quel type d’en-tête créer. La plus utilisée sur le Web est la barre de menu horizontale en haut, mais il existe également d’autres options, telles qu’un menu coulissant. 

Les menus coulissants vous aident le plus souvent à limiter l’espace occupé par l’en-tête global. Ainsi, vous pouvez laisser un menu coulissant apparaître lorsque vos visiteurs cliquent sur l’icône hamburger dans le coin supérieur droit. 

Par conséquent, l’utilisation d’un menu coulissant vous aide à ajouter une interaction supplémentaire à votre site Web.

Dans ce didacticiel, nous vous montrerons donc comment en créer un à l’aide de Thème Builder de Divi

Commençons !

Aperçu

Avant de nous plonger dans ce didacticiel, examinons d’abord le résultat que nous allons obtenir.

Accédez à Theme Builder et créez un en-tête global

Aller sur Theme Builder

Pour commencer, rendez-vous sur Theme Builder du menu Divi présent dans votre tableau de bord WordPress et cliquez sur « Ajouter un en-tête global ».

Créer l’en-tête global

Continuer en sélectionnant ‘Créer l’en-tête global’.

Créer un style d’en-tête

Paramètres de section

Couleur d’arrière-plan

Une fois dans l’éditeur de modèles, vous remarquerez une section. Ouvrez cette section et rendez la couleur d’arrière-plan transparent.

• Fond : rgba (255,255,255,0)

Espacement

Passer à l’onglet Style et supprimer toutes les marges inférieure et supérieure.

• Marge interne Sommet : 0px
• Marge interne Bas : 0px

Poste

Ensuite, nous allons modifier la position de la section en allant dans l’onglet avancé et en modifiant les paramètres de position.

• Poste : Fixed
• Location : En haut au centre

Ajouter la première ligne

Structure de la colonne

Une fois que vous avez terminé les paramètres de section, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Largeur maximale : 97 %
• Largeur maximale : 100 %

Espacement

Modifiez les paramètres d’espacement.

• Marge interne Sommet : 1 %
• Marge interne Bas : 0px

Elément principal

Ensuite, allez dans l’onglet avancé et ajoutez deux lignes de code CSS à l’élément principal de la ligne. Cela nous aidera à aligner verticalement le contenu de la colonne dans notre ligne.

display: flex;

align-items: center;

Ajouter un module Image à la colonne 1

Télécharger le logo

Il est temps d’ajouter des modules, en commençant par un module Image dans la colonne 1. Téléchargez votre logo.

Ajouter un module Texte à la colonne 3

Ajouter 3 espaces à la zone de contenu

<spanclass="line line-1"></span>

<spanclass="line line-2"></span>

<spanclass="line line-3"></span>

Couleur de l’arrière-plan

Modifiez la couleur de fond du module.

• Fond : rgba (0,0,0,0.04)

Paramètres de texte

Ensuite, passez à l’onglet Style et supprimez la hauteur de la ligne de texte. Cela nous aidera à avoir un contrôle total sur les étendues que nous avons ajoutées.

• Hauteur de la ligne Texte : 0em

Dimensionnement

Nous allons modifier les paramètres de dimensionnement du module.

• Largeur maximale : 120 pixels
• Alignement du texte : à droite

Espacement

Et nous compléterons les paramètres du module en transformant le module en carré. Pour cela, nous allons utilisé des valeurs de remplissage personnalisées dans les paramètres d’espacement.

• Marge interne Sommet : 40px
• Marge interne Bas : 60px
• Marge interne Gauche : 40px
• Marge interne Droit : 40px

Ajouter la deuxième ligne

Structure de la colonne

Au rang suivant ! Nous utiliserons cette ligne pour concevoir l’ensemble de notre menu coulissant. Utilisez la structure de colonnes suivante :

Couleur de l’arrière-plan

Sans ajouter de modules, ouvrez les paramètres de ligne et modifiez la couleur d’arrière-plan comme suit :

• Fond : #e7e0e2

Image de fond

Nous utilisons également une image d’arrière-plan à motif. Vous pouvez utiliser un motif d’arrière-plan de votre choix.

• Taille de l’image d’arrière-plan : taille réelle
• Position de l’image d’arrière-plan : centre
• Répéter l’image de Fond : Répétition

Dimensionnement

Ensuite, passez à l’onglet Style et modifiez les paramètres de dimensionnement en conséquence :

• Utilisation Personnalisée Largeur de Gouttière : Oui
• Espacement des colonnes : 1
• Largeur maximale : 20 % (ordinateur de bureau), 40 % (tablette), 60 % (téléphone)
• Hauteur : 100vh

Espacement

Modifiez également les paramètres d’espacement sur différentes tailles d’écran.

• Marge interne Sommet : 10 vw (ordinateur de bureau), 30 vw (tablette), 40 vw (téléphone)

Bordure

Et complétez les paramètres de ligne en ajoutant une bordure gauche.

• Largeur bordure gauche : 10px
• Couleur de la bordure gauche : #24394a
• Style de bordure gauche : Double

Ajouter un module Texte à la colonne

Ajouter du contenu

Il est temps d’ajouter le premier élément de menu Module Texte ! Ajoutez la copie à la zone de contenu.

Ajouter un lien

Continuez en ajoutant un lien pertinent à l’élément de menu.

• URL du lien de module : #

Couleur de l’arrière-plan

Modifiez ensuite la couleur de fond.

• Fond : rgba (216,210,212,0.35)

Paramètres du texte

Ensuite, passez à l’onglet Style’3 et modifiez les paramètres de texte comme suit :

• Police du texte : Domine
• Texte Lumière tamisée : Texte en gras
• Couleur du texte Texte : #000000
• Texte Taille du texte : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Alignement du texte : Centré

Espacement

Complétez les paramètres du module en ajoutant des valeurs d’espacement personnalisées sur différentes tailles d’écran.

• Marge Bas : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Marge interne Sommet : 1vw
• Marge interne Bas : 1vw

Cloner le module de texte (1 module par élément de menu)

Une fois que vous avez terminé le premier module de texte de l’élément de menu, vous pouvez le cloner autant de fois que nécessaire. Assurez-vous simplement que vos modules ne dépassent pas la hauteur de la fenêtre.

Modifier le contenu et les liens des modules Texte en double

Modifiez le contenu et les liens de chaque module Texte en double.

Ajouter un module Bouton à la colonne

Ajouter une copie

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

Ajouter un lien

Ajoutez également un lien.

• URL du lien du bouton : #

Alignement

Passez à l’onglet Style et modifiez l’alignement des boutons.

• Alignement des boutons : centré

Paramètres du Bouton

Continuez en personnalisant le module Bouton comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Bouton Taille du Texte : 0,7 vw (ordinateur de bureau), 1,5 vw (tablette), 2,5 vw (téléphone)
• Couleur du texte Bouton : #000000
• Bouton Background : rgba (0,0,0,0)
• Bouton Couleur de la Bordure : #24394a
• Bouton Rayon des Frontières : 0 pixel
• Espacement des lettres Bouton : 4px

• Police Bouton : Open Sans
• Bouton Lumière tamisée : Texte en gras
• Bouton Copier le style : TT

Espacement

Et complétez les paramètres du module en ajoutant des valeurs d’espacement personnalisées sur différentes tailles d’écran.

• Marge Sommet : 5vw
• Marge interne Sommet : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Marge interne Bas : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Marge interne Gauche : 1,8 vw (ordinateur de bureau), 3 vw (tablette), 4 vw (téléphone)
• Marge interne Droite : 1,8 vw (ordinateur de bureau), 3 vw (tablette), 4 vw (téléphone)

Ajouter une fonctionnalité de coulissement

Ajouter un ID CSS au module de texte de l’icône de menu

Maintenant que nous avons tous les éléments en place, il est temps de créer l’effet de menu coulissant responsive ! Tout d’abord, ouvrez le module Texte (contenant les étendues) dans la troisième colonne de votre première ligne et utilisez un ID CSS personnalisé dans l’onglet avancé. Nous utiliserons cet ID CSS pour créer une fonction de clic dans notre code.

• ID CSS : slide-in-open

Ajouter une classe CSS à la ligne #2

Ensuite, ouvrez la deuxième ligne, accédez à l’onglet avancé et ajoutez une classe CSS personnalisée. Lors d’un clic, la ligne va glisser.

• Classe CSS : slide-in-menu-container

Changer le positionnement de la ligne #2

Nous allons également repositionner cette ligne. Remarquez comment le décalage horizontal correspond à la largeur de la ligne sur différentes tailles d’écran dans les paramètres de dimensionnement.

• Poste : Absolu
• Emplacement : En haut à droite
• Décalage horizontal : -20 % (ordinateur de bureau), -40 % (tablette), -60 % (téléphone)

Modifier l’opacité de la ligne 2

Et amenez l’opacité à 0 dans un état par défaut.

opacity: 0;

Ajouter le module Code à la deuxième colonne de la première ligne

Insérer le code CSS

Pour créer l’effet de fonction de clic et styliser les portées de notre icône de hamburger, nous aurons besoin de code CSS. Ajoutez un module de code à la deuxième colonne de votre première ligne et placez les lignes de code CSS suivantes entre les balises de style, comme vous pouvez le remarquer dans l’écran d’impression ci-dessous :

#slide-in-open{

cursor: pointer;

}

.line{

display: block;

position: absolute;

height: 4px;

width: 100%;

background: #24394A;

border-radius: 9px;

opacity: 1;

-webkit-transition: .1s ease-in-out;

-moz-transition: .1s ease-in-out;

-o-transition: .1s ease-in-out;

transition: .1s ease-in-out;

}

.line-2{

top: 10px;

}

.line-3{

top: 20px;

}

#slide-in-open.open .line-1{

top: 10px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

#slide-in-open.open .line-2{

display: none;

}

#slide-in-open.open .line-3{

top: 10px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

-o-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.slide-in-menu {

right: 0!important;

opacity: 1!important;

}

.slide-in-menu-container {

-webkit-transition: all0.5s ease !important;

-moz-transition: all0.5s ease !important;

-o-transition: all0.5s ease !important;

-ms-transition: all0.5s ease !important;

transition: all0.5s ease !important;

}

Insérer le code JQuery

Nous devrons également ajouter du JQuery pour la fonction de clic. Assurez-vous de placer le code entre les balises de script , comme vous pouvez le remarquer dans l’écran d’impression ci-dessous :

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

Enregistrer les modifications du générateur de thème et afficher le résultat sur le site Web

Une fois que vous avez terminé tous les éléments de votre en-tête global, il ne vous reste plus qu’à enregistrer toutes les modifications et à afficher le résultat sur votre site !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat.

Conclusion

En conclusion, dans cet article, nous vous avons montré comment utiliser le générateur de thèmes de Divi pour créer un menu coulissant responsive. Pour cela, nous avons combiné le meilleur des éléments et options intégrés de Divi avec un code de fonction de clic personnalisé. Ainsi, cela vous permet de vous concentrer sur la conception du menu coulissant et de laisser le code prendre en charge la partie fonctionnelle de l’en-tête global ! 

Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.

Divi : Comment ajouter un formulaire de contact à un en-tête global

par Gaetan Taffo | Divi, Tutoriels Divi

Besoin d’ajouter un formulaire de contact à un en-tête global ?

Lorsque vous créez un en-tête personnalisé pour votre site Web à l’aide du Thème Builder de Divi, vous vous retrouvez à chercher le moyen idéal d’ajouter un CTA (Appel à l’action). Une façon de procéder consiste à ajouter un formulaire de contact déroulant. 

Cela vous aidera à garder propre l’apparence générale de votre en-tête tout en offrant la possibilité d’entrer en contact sans avoir besoin de faire défiler. 

Dans ce tutoriel, nous allons vous montrer comment créer un formulaire de contact déroulant en utilisant Divi et du code JQuery & CSS.

Commençons !

Aperçu

Avant de plonger dans ce tutoriel, examinons un aperçu du résultat que nous allons obtenir.

Créer un en-tête global

Aller sur Theme Builder

Rendez-vous sur Theme Builder du menu Divi présent dans votre tableau de bord WordPress et cliquez sur « Ajouter un en-tête global ».

Sélectionner ‘Créer l’en-tête global’.

Créer un style d’en-tête

Paramètres de section

Couleur de l’arrière-plan

Une fois dans l’éditeur de modèles, vous remarquerez une section. Ouvrez cette section et modifiez la couleur de fond.

• Fond : #FFFFFF

Espacement

Supprimez ensuite les Marges internes Sommet et Bas par défaut de la section.

• Marge interne Sommet : 0px
• Marge interne Bas : 0px

Boîte ombre

Appliquez également une ombre de boîte subtile.

• Box Shadow Blue Strength : 50 px
• Couleur de la police du sous-titre : rgba(0,0,0,0.15)

Ajouter un nouvelle ligne

Structure de la colonne

Ajouter une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utilisation Personnalisée Largeur De Gouttière : Oui
• Espacement des colonnes : 1
• Harmoniser les hauteurs de colonne : Oui
• Largeur maximale : 95 %
• Largeur maximale : 100 %

Espacement

Ajoutez ensuite un rembourrage supérieur et inférieur personnalisé.

• Marge interne Sommet : 1vw
• Marge interne Bas : 1vw

Elément principal

Alignez tout le contenu de la colonne en ajoutant une seule ligne de code CSS à l’élément principal de la ligne.

align-items: center;

Indice Z de la colonne 2

Nous nous assurons également que la deuxième colonne ait une valeur d’index z plus élevée pour le responsive design.

• Indice Z : 12

Ajouter un module image à la colonne 1

Télécharger le logo

Il est temps de commencer à ajouter des modules ! En commençant par un module Image dans la colonne 1. Téléchargez un logo.

Alignement

Modifiez ensuite l’alignement du module.

• Alignement de l’image : Centré

Dimensionnement

Modifiez également la largeur.

• Largeur maximale : 3vw (bureau), 5vw (tablette), 7vw (téléphone)

Ajouter le module Menu à la colonne 2

Sélectionnez Menu

Dans la deuxième colonne, nous ajouterons un module Menu.

Disposition

Passez à l’onglet de Style du module et modifiez le style de mise en page.

• Styles : Centré

Paramètres de texte du menu

Modifiez ensuite les paramètres de texte du menu du module.

• Police Menu : Open Sans
• Menu Lumière tamisée : semi-gras
• Couleur du texte du menu : #000000
• Menu Taille du Texte : 0,8 vw (ordinateur de bureau), 2 vw (tablette), 3 vw (téléphone)
• Espacement des lettres Menu : 1px

Paramètres du texte du menu déroulant

Ensuite, changez la couleur de la ligne du menu déroulant.

• Couleur de la ligne du menu déroulant : #007dff

Icônes

Changez la couleur de l’icône du menu hamburger.

• Couleur de l’icône du menu hamburger : #007dff

Ajouter le module Texte à la colonne 3

Ajouter un message

Place au troisième module ! Ajoutez un module Texte avec un message de votre choix.

Couleur de l’arrière plan

Ajoutez une couleur de fond.

• Couleur de fond : #007dff

Paramètres du texte

Passez à l’onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police Texte : Open Sans
• Texte Lumière tamisée : Gras
• Couleur du texte Texte : #ffffff
• Texte Taille du texte : 0,8 vw (ordinateur de bureau), 2 vw (tablette), 3 vw (téléphone)
• Alignement du texte : Centré

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement du module.

• Largeur maximale : 33 %
• Alignement du module : Centre

Espacement

Ensuite, ajoutez des marges internes Sommet et Bas personnalisées.

• Marge interne Sommet : 0,8 vw (ordinateur de bureau), 2 vw (tablette et téléphone)
• Marge interne Bas : 0,8 vw (ordinateur de bureau), 2 vw (tablette et téléphone)

Bordure

Et complétez les paramètres du module en ajoutant un rayon de bordure.

• Rectangle arrondi : 100px

Ajouter un autre module Texte à la colonne 3

Ajouter un symbole à la zone de contenu

Passons au module suivant, qui est un autre module de texte. Ajoutez le symbole de flèche suivant dans la zone de contenu : ‘▼’.

Paramètres de texte

Passez à l’onglet de conception du module et modifiez les paramètres de texte en conséquence :

• Police Texte : Open Sans
• Couleur du texte : #007fff
• Texte Taille du texte : 3vw
• Hauteur de la ligne Texte : 0em
• Alignement du texte : Centré

Indice Z

Augmentons également l’index z du module.

• Indice Z : 11

Ajouter le module Formulaire de contact à la colonne 3

Ajouter des champs pleine largeur de votre choix

Le prochain et dernier module dont nous avons besoin dans la troisième colonne est un module de formulaire de contact. Ajoutez tous les champs pleine largeur dont vous avez besoin.

Ajouter un titre

Utilisez également un titre.

Couleur de l’arrière plan

Changeons ensuite la couleur de fond.

• Couleur de fond : #e7f2ff

Paramètres des champs

Passons à l’onglet de Style du module et modifiez les paramètres des champs.

• Champs Couleur d’arrière plan : #ffffff
• Couleur du texte des champs : #dddddd
• Couleur du texte de mise au point  : #007dff
• Champs Rembourrage Sommet : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Champs Rembourrage Bas : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Police Champs : Open Sans

• Champs Taille du texte : 0,7 vw (ordinateur de bureau), 1,8 vw (tablette), 3 vw (téléphone)

Paramètres du texte du titre

Modifiez les paramètres du texte du titre.

• Insérer l’en-tête trois : H3
• Titre Lumière tamisée : Texte en gras
• Alignement du texte : centré
• Couleur du texte Titre : #007dff
• Titre Taille du texte : 1 vw (ordinateur de bureau), 2,5 vw (tablette), 3,5 vw (téléphone)
• Hauteur de la ligne Titre : 1,6 em

Paramètres de texte Captcha

Avec les paramètres de texte captcha.

• Police Captcha : Open Sans
• Couleur du texte captcha : #007dff

Paramètres des boutons

Continuez en personnalisant le bouton.

• Utiliser des styles personnalisés pour Bouton : Oui
• Bouton Taille du texte : 0,8 vw (ordinateur de bureau), 2 vw (tablette), 3 vw (téléphone)
• Couleur du texte Bouton : #ffffff
• Bouton Backgound : #007dff
• Bouton Largeur de la bordure : 0 pixel
• Bouton Rayon des Frontières : 100 px

• Police Bouton : Open Sans
• Bouton Lumière tamisée : Texte en gras

• Bouton Marge : 1vw
• Bouton Rembourrage Sommet : 1vw (ordinateur de bureau), 2vw (tablette et téléphone)
• Bouton Rembourrage Bas : 1vw (ordinateur de bureau), 2vw (tablette et téléphone)
• Bouton Rembourrage Gauche : 2vw (bureau), 7vw (tablette et téléphone)
• Bouton Rembourrage Droite : 2vw (bureau), 7vw (tablette et téléphone)

Espacement

Utilisez des valeurs de remplissage personnalisées sur différentes tailles d’écran.

• Marge interne Sommet : 4vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Marge interne Bas : 4vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Marge interne Gauche : 2vw (bureau), 6vw (tablette et téléphone)
• Marge interne Droite : 2vw (bureau), 6vw (tablette et téléphone)

Bordure

Modifiez ensuite les paramètres de bordure.

• Entrée Rectangle arrondi : 10px

Élément principal, titre du contact et Captcha CSS

Complétez les paramètres du module en ajoutant quelques petites modifications CSS à l’onglet avancé.

Élément principal :

Titre du contact :

Captcha :

Personnalisez les éléments pour créer un formulaire de contact en un clic

Ajouter la hauteur de la colonne 3

Une fois que vous avez tous les modules en place, il est temps de créer l’effet. La première étape vers l’obtention du résultat souhaité consiste à ouvrir les paramètres de la colonne 3 et à ajouter une hauteur responsive personnalisée dans l’onglet avancé.

Bureau :

Tablette:

Téléphoner:

Ajouter une classe CSS au bouton et à la flèche

Ensuite, nous ajouterons la même classe CSS aux deux premiers modules de texte dans la colonne 3.

• Classe CSS : show-contact

Ajouter une classe CSS au formulaire de contact

Nous aurons également besoin d’une classe CSS personnalisée pour le module de formulaire de contact.

• Classe CSS : contact-form-module

Masquer le module formulaire de contact

Continuez en ajoutant une ligne supplémentaire de code CSS à l’élément principal du module de formulaire de contact. Cela nous permettra de masquer le module avant de cliquer.

Ajouter le module de code à la colonne 3 avec JQuery et le code CSS

Et pour créer la fonction de clic, nous aurons besoin de code JQuery. Nous utiliserons également du code CSS personnalisé. Ajoutez un nouveau module de code à la colonne 2 avec le code. Assurez-vous de placer le code JQuery entre les balises de script et le code CSS entre les balises de style.

jQuery(function($){

$(".show-contact").click(function() {

$('.contact-form-module').slideToggle();

});

});

.show-contact {

cursor: pointer;

}

.et-menu>li {

padding-left: 0.7vw !important;

padding-right: 0.7vw !important;

}

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d’œil au résultat.

Conclusion

Dans cet article, nous vous avons montré comment ajouter un formulaire de contact déroulant à votre en-tête personnalisé.

Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.

Divi : Comment créer un en-tête global avec le module Menu Plein Ecran

par Gaetan Taffo | Divi, Tutoriels Divi

Souhaitez-vous créer un en-tête global avec le module Menu Plein Ecran dans Divi ?

L’en-tête est l’un des éléments les plus importants de tout site Web et est au cœur de l’expérience utilisateur. Le menu de navigation donne à vos utilisateurs une idée de ce qu’ils peuvent s’attendre à trouver sur votre site Web et les aide à localiser les informations dont ils ont besoin. 

De plus, une barre de menu secondaire peut être un espace idéal pour mettre en évidence un appel à l’action ou pour promouvoir une offre. Sans oublier que l’en-tête est l’une des parties les plus importantes de votre site Web, car il apparaît généralement sur chaque page. C’est une excellente occasion de mettre en valeur votre image de marque et de créer un en-tête cohérent avec la conception du reste de votre site Web.

Les options du générateur de thèmes de Divi vous permettent de créer un en-tête global personnalisé et de personnaliser l’apparence de vos modules d’en-tête et de menu sur l’ensemble de votre site Web. 

Dans ce didacticiel, nous allons vous montrer comment créer un en-tête global à l’aide du module menu plein Ecran de Divi.

Commençons!

Aperçu

Voici un aperçu de l’en-tête global que nous allons concevoir.

Ouvrez le constructeur de thèmes

Puisque nous construisons un en-tête global dans cet exemple, naviguons vers « Theme Builder », que vous pouvez trouver dans le menu Divi de WordPress. Sélectionnez Ajouter un en-tête global, puis sélectionnez Créer un en-tête global.

Créer la barre de menu secondaire

Lorsque vous ouvrez la disposition d’en-tête globale pour la première fois, elle est préchargée avec une section régulière. Nous allons le modifier pour en faire notre barre de menu secondaire, qui se placera au-dessus de notre menu pleine largeur et inclura un texte d’appel à l’action et un bouton.
Tout d’abord, ouvrez les paramètres de la section et ajoutez la couleur d’arrière-plan.

• Fond : #92A8A1

Ensuite, la marge de la section.

• Marge interne Sommet : 0px
• Marge interne Bas : 0px

Insérez maintenant une ligne. Pour cet exemple, nous allons utiliser la disposition illustrée ci-dessous.

Dans les paramètres de ligne, sous Dimensionnement de l’onglet Style, harmoniser les hauteurs des colonnes.

• Harmoniser les hauteurs des colonnes : OUI

Ensuite, définir les marges Sommet et Bas ainsi qu’il suit :

• Marge Interne Sommet : 5px
• Marge Interne Bas : 5px

Puisque nous voulons que les éléments de notre en-tête secondaire soient alignés verticalement, nous allons ajouter du CSS personnalisé à l’élément principal de la ligne.

1. align-items:center;

Maintenant que notre ligne est configurée, nous pouvons insérer les modules pour notre contenu. Insérer d’abord un module texte sur le côté gauche.

Modifier le contenu du texte. C’est l’endroit idéal pour inclure un Appel à l’Action ou pour promouvoir une offre.

• Texte : « Inscrivez-vous à notre liste de diffusion pour recevoir 10 % de réduction sur votre commande ! »

Accéder à l’onglet Style du module Texte et modifier les paramètres ainsi qu’il suit :

• Police « Texte » : Poppins
• « Texte » Lumière tamisée : Moyen
• Couleur du texte « Texte » : #FFFFFF

Ensuite, ajouter le module Bouton à droite.

Ajouter le texte du bouton.

• Texte : « Obtenez un devis gratuit »

Dans l’onglet Style, aligner le bouton au centre.

• Alignement des boutons : Centre

Maintenant, personnalisons l’apparence du bouton.

• Utiliser des styles personnalisés pour « Bouton » : Oui
• Bouton Taille du texte : 14px
• Couleur du texte Bouton : #FFFFFF
• Bouton Background : #2F5349

• Bouton largeur de la Bordure : 0px
• Bouton Rayon des Frontières : 50px
• Espacement des lettres Bouton : 1px
• Police Bouton : Poppins

Ajouter le module Menu Plein écran

Maintenant que le menu secondaire est conçu, nous pouvons passer au menu principal. Nous allons construire le menu en utilisant le module Menu Plein écran. Ajoutez une nouvelle section Plein écran à l’en-tête global.

Sélectionner et insérer le module Menu plein écran

Ensuite, nous allons personnaliser les paramètres du Menu plein écran.

• Couleur du lien actif : #2F5349
• Police Menu : Poppins
• Menu Lumière tamisée : Semi Gras
• Menu Copier le Style : TT
• Couleur du texte Menu :  #000000

• Couleur du texte Menu au survol : #2F5349
• Menu Taille du Texte : 15px
• Espacement des lettres Menu : 2px

Changez la couleur de l’icône du menu hamburger en noir.

• Hamburger Menu Icon Couleur : #000000

Avant d’ajouter le logo à notre menu, modifions les options de dimensionnement. Nous utiliserons les options réactives intégrées de Divi pour définir une hauteur maximale différente pour le PC et mobile.

• Hauteur maximale du logo sur PC : 3vw

• Hauteur maximale du logo sur mobile : 6vw

Ajoutez maintenant votre logo au Menu plein écran.

Enfin, nous voulons que le menu principal reste en haut de l’écran lorsque l’utilisateur fera défiler le site Web, nous utiliserons donc les paramètres sticky collants intégrés de Divi pour cela.

• Sticky Position : Stick on top

Avec cela, la conception de notre en-tête global est terminée.

Créer une nouvelle page avec une mise en page prédéfinie

Pour voir l’en-tête et le menu pleine largeur en action, créons une nouvelle page avec une mise en page prédéfinie à partir de la bibliothèque Divi. Pour cet exemple, nous utiliserons la page d’accueil Flooring Home Page provenant du package flooring layout.

Ajoutez une nouvelle page à votre site Web et donnez-lui un titre, puis sélectionnez l’option Utiliser Divi Builder.

Nous utilisons une mise en page prédéfinie de la bibliothèque Divi pour cet exemple, alors sélectionnez Choisir la mise en page.

Recherchez et sélectionnez la disposition « Flooring Home Page ».

Sélectionnez « Choisir la mise en page » pour ajouter la mise en page à votre page.

Maintenant, la conception est terminée !

Résultat final

Conclusion

Comme nous l’avons dis plus haut, l’en-tête et le menu de navigation sont au cœur de l’expérience utilisateur de votre site Web. Vous avez maintenant vu à quel point il est facile de concevoir un superbe en-tête global avec le module « Menu plein écran » de Divi. 

Heureusement, le constructeur de thèmes de Divi vous permet de contrôler tous les aspects du menu et de l’en-tête de votre site Web, et vous pouvez créer des conceptions totalement personnalisées et uniques en quelques clics seulement.

Avez-vous utilisé les options d’en-tête global de Divi pour personnaliser votre en-tête et votre menu de navigation ? Dites-nous ce que vous en pensez en commentaires !