Comment ajouter un formulaire de contact déroulant à votre en-tête global

Lorsque vous créez un en-tête personnalisé pour votre site Web, à l'aide du générateur de thème de Divi, vous vous retrouverez à la recherche du moyen idéal pour ajouter un CTA. Une façon de procéder consiste à ajouter un formulaire de contact déroulant. Cela vous aidera à garder l'apparence générale de votre en-tête propre 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. Vous pourrez également télécharger le fichier JSON gratuitement !

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.

Bureau

Mobile

Téléchargez GRATUITEMENT le modèle d'en-tête global

Pour mettre la main sur le modèle d'en-tête global gratuit, 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 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 !

1. Accédez à Divi Theme Builder et commencez à créer un en-tête global

Aller à Divi Theme Builder

Commencez par accéder au Divi Theme Builder dans le backend de votre site WordPress.

Créer un en-tête global

Cliquez sur « Ajouter un en-tête global » et sélectionnez « Créer un en-tête global » pour commencer à créer un en-tête global personnalisé.

2. Construire la conception de l'en-tête

Paramètres de section

Couleur de l'arrière plan

Une fois à l'intérieur du modèle d'en-tête global, vous remarquerez une section. Ouvrez cette section et utilisez une couleur de fond blanc.

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

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut de la section.

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

Boîte ombre

Appliquez également une ombre de boîte subtile.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.15)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section 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 :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 95%
• Largeur maximale : 100 %

Espacement

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

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw

Élément principal

Et alignez tout le contenu des colonnes 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 a une valeur d'index z plus élevée à des fins réactives.

• Indice Z : 12

Ajouter un module d'image à la colonne 1

Télécharger le logo

Il est temps de commencer à ajouter des modules ! Commencer par un module image dans la colonne 1. Téléchargez un logo.

Alignement

Modifiez ensuite l'alignement du module.

• Alignement de l'image : Centre

Dimensionnement

Modifiez également la largeur.

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

Ajouter le module de menu à la colonne 2

Sélectionnez le menu

Dans la deuxième colonne, nous allons ajouter un module de menu.

Disposition

Passez à l'onglet conception du module et modifiez le style de mise en page.

• Style : Centré

Paramètres du texte du menu

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

• Police du menu : Open Sans
• Poids de la police du menu : semi-gras
• Couleur du texte du menu : #000000
• Taille du texte du menu : 0.8vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Espacement des lettres du menu : 1px

Paramètres de 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

Avec la couleur de l'icône du menu hamburger.

• Couleur de l'icône du menu Hamburger : #007dff

Ajouter le module de texte 1 à la colonne 3

Ajouter une copie

Passons au troisième module ! Ajoutez un module de texte avec une copie de votre choix.

Couleur de l'arrière plan

Ajoutez ensuite une couleur d'arrière-plan.

• Couleur d'arrière-plan : #007dff

Paramètres de texte

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

• Police de texte : Open Sans
• Poids de la police de texte : gras
• Couleur du texte : #ffffff
• Taille du texte : 0.8vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Alignement du texte : Centre

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement du module.

• Largeur : 33%
• Alignement du module : Centre

Espacement

Ensuite, ajoutez un rembourrage haut et bas personnalisé.

• Rembourrage supérieur : 0.8vw (ordinateur de bureau), 2vw (tablette et téléphone)
• Rembourrage inférieur : 0.8vw (ordinateur de bureau), 2vw (tablette et téléphone)

Frontière

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

• Tous les coins : 100px

Ajouter le module de texte 2 à 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 à 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 de texte : Open Sans
• Couleur du texte : #007fff
• Taille du texte : 3vw
• Hauteur de la ligne de texte : 0em
• Alignement du texte : Centre

Indice Z

Nous augmentons également l'index z du module.

• Indice Z : 11

Ajouter le module de formulaire de contact à la colonne 3

Ajouter des champs de choix pleine largeur

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 aussi un titre.

Couleur de l'arrière plan

Nous changeons ensuite la couleur de fond.

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

Paramètres des champs

Ensuite, passez à l'onglet de conception du module et modifiez les paramètres des champs.

• Couleur d'arrière-plan des champs : #ffffff
• Couleur du texte des champs : #dddddd
• Champs Focus Couleur du texte : #007dff
• Remplissage supérieur des champs : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Remplissage inférieur des champs : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Police des champs : Open Sans

• Taille du texte des champs : 0.7vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)

Paramètres du texte du titre

Modifiez ensuite les paramètres du texte du titre.

• Titre Titre Niveau : H3
• Poids de la police du titre : gras
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #007dff
• Taille du texte du titre : 1vw (ordinateur de bureau), 2.5vw (tablette), 3.5vw (téléphone)
• Hauteur de la ligne de 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 stylisant le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.8vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #007dff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels

• Police des boutons : Open Sans
• Poids de la police du bouton : gras

• Marge supérieure du bouton : 1vw
• Rembourrage supérieur des boutons : 1vw (ordinateur de bureau), 2vw (tablette et téléphone)
• Rembourrage inférieur des boutons : 1vw (ordinateur de bureau), 2vw (tablette et téléphone)
• Rembourrage du bouton gauche : 2vw (ordinateur de bureau), 7vw (tablette et téléphone)
• Rembourrage du bouton droit : 2vw (ordinateur de bureau), 7vw (tablette et téléphone)

Espacement

Ensuite, utilisez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 4vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Rembourrage inférieur : 4vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Rembourrage gauche : 2vw (ordinateur de bureau), 6vw (tablette et téléphone)
• Rembourrage droit : 2vw (ordinateur de bureau), 6vw (tablette et téléphone)

Frontière

Modifiez ensuite les paramètres de bordure.

• Tous les coins : 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 :

border-radius: 20px;

Titre du contact :

margin-bottom: 1vw;

Captcha :

margin-top: 1.5vw;

3. 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 pour atteindre le résultat souhaité consiste à ouvrir les paramètres de la colonne 3 et à ajouter une hauteur personnalisée réactive dans l'onglet avancé.

Bureau :

height: 3vw;

Tablette:

height: 5vw;

Téléphone:

height: 6vw;

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 : module de formulaire de contact

Masquer le module de 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.

display: none;

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

Et pour créer la fonction click, 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 sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment ajouter un formulaire de contact déroulant à votre en-tête personnalisé. C'est un excellent moyen de déclencher l'action dès le début. Nous avons également partagé le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à 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.