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

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.

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 subtile de boîte.

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

Ajouter une nouvelle ligne

Structure de colonne

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 max: 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;

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

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 ]

Alignement

Modifiez ensuite l’alignement du module.

  • Alignement de l’image: centre

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.

Disposition

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

  • Style: Centré

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

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

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

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement du module.

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]

  • Largeur: 33%
  • Alignement du module: centre

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)

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 la flèche suivante 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 du texte: Open Sans
  • Couleur du texte: # 007fff
  • Taille du texte: 3vw
  • Hauteur de la ligne de texte: 0em
  • Alignement du texte: centre

Index Z

Nous augmentons également l’index z du module.

  • Index Z: 11

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.

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;

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

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.

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

display: none;

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

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

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 de messagerie 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