skip to Main Content

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

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 701.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Lorsque vous créez un en-tête personnalisé pour votre site Web, en utilisant le générateur de thème de Divi, vous vous trouverez à la recherche du moyen idéal pour ajouter un AAL (appel à l’action). Une façon de procéder consiste à ajouter un formulaire de contact déroulant. Cela vous aidera à garder l’aspect général de votre en-tête propre tout en offrant la possibilité d’entrer en contact avec vous, sans avoir défiler vers le bas. Dans ce tutoriel, nous vous montrerons comment créer un formulaire de contact déroulant à l’aide de Divi et d’un code JQuery & CSS. Vous pourrez également télécharger gratuitement le fichier JSON!

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d’œil au résultat sur différentes tailles d’écran.

Menu déroulant divi

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

Accédez à Divi Theme Builder

Commencez par vous rendre dans le Divi Theme Builder dans le backend de votre site WordPress.

Entete global divi

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é.

Construire entete global divi

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
Reglage arriere plan

Espacement

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

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

Boîte ombre

Appliquez également une ombre subtile de boîte.

  • Box Shadow Blur Strength: 50px
  • Couleur de l’ombre: rgba (0,0,0,0,15)
Configuration ombre divi

Ajouter une nouvelle ligne

Structure de colonne

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

Choisir une mise en page

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 max: 100%
Configurer dimension ligne divi

Espacement

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

  • Rembourrage supérieur: 1vw
  • Rembourrage inférieur: 1vw
Configuration espacement section

É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;

Css personnalisé

Colonne 2 Index Z

Nous nous assurons également que la deuxième colonne a une valeur d’index z plus élevée à des fins réactives.

  • Index Z: 12
Paramètre colonne

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 d’image dans la colonne 1. Téléchargez un logo.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Image module divi

Alignement

Modifiez ensuite l’alignement du module.

  • Alignement de l’image: centre
Alignment module image

Dimensionnement

Modifiez également la largeur.

  • Largeur: 3vw (bureau), 5vw (tablette), 7vw (téléphone)
formulaire de contact déroulant

Ajouter un module de menu à la colonne 2

Sélectionnez le menu

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

Personnalisation module menu divi

Disposition

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

  • Style: Centré
Style module menu

Paramètres de texte du menu

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

  • Police du menu: Ouvrir sans
  • Poids de la police du menu: Semi gras
  • Couleur du texte du menu: # 000000
  • Taille du texte du menu: 0.8vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Espacement des lettres de menu: 1px
Texte de menu divi

Paramètres de texte du menu déroulant

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

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

Icônes

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

  • Couleur de l’icône du menu Hamburger: # 007dff
Menu icons divi

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.

Contactez nous divi module

Couleur de l’arrière plan

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

  • Couleur d’arrière-plan: # 007dff
Arriere plan divi

Paramètres de texte

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

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

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement du module.

  • Largeur: 33%
  • Alignement du module: centre
Dimensionnement section texte divi

Espacement

Ensuite, ajoutez un rembourrage supérieur et inférieur personnalisé.

  • Rembourrage supérieur: 0.8vw (bureau), 2vw (tablette et téléphone)
  • Rembourrage inférieur: 0.8vw (bureau), 2vw (tablette et téléphone)
Configuration espacement module texte

Frontière

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

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Tous les coins: 100px
Configuration bordure module texte

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 la flèche suivante dans la zone de contenu: «▼».

Module texte divi fleche

Paramètres de texte

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

  • Police du texte: Open Sans
  • Couleur du texte: # 007fff
  • Taille du texte: 3vw
  • Hauteur de la ligne de texte: 0em
  • Alignement du texte: centre
Police module texte divi

Index Z

Nous augmentons également l’index z du module.

  • Index Z: 11
Position module texte divi

Ajouter le module de formulaire de contact à la colonne 3

Vous pouvez désormais ajouter un formulaire de contact juste en bas du module texte qui continent la flèche. Ce module est assez simple à utiliser, vous devrez donc personnaliser les champs que vous souhaitez rendre visible.

Module formulaire de contact

3. Personnaliser les éléments pour créer un formulaire de contact en un clic

Ajouter la hauteur de la colonne 3

Une fois tous les modules en place, il est temps de créer l’effet. La première étape vers l’atteinte du 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;

Exmple de formulaire de contact dépliant

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

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

  • Classe CSS: show-contact
Ajouter section show contact

Ajouter une classe CSS au formulaire de contact

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

  • Classe CSS: contact-form-module
Ajouter une classe au formulaire divi

Masquer le module Formulaire de contact

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

display: none;

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Style css module divi

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

Et pour créer la fonction de clic, nous aurons besoin d’un 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;}

Ajouter code javascript

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

Exemple de conception

Ce qu’il faut retenir

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 une action dès le début. 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez4
Tweetez
Enregistrer