Créez un menu contextuel réactif qui se lance à partir d’un bouton de menu dans l’en-tête de votre site.

Vous apprendrez à créer un menu contextuel qui:

  • Est attrayant, fonctionnel et beau
  • Est réactif sur mobile

Concevoir la fenêtre contextuelle et son contenu

  1. Accédez à Modèles> Popups> Ajouter nouveau et donnez un nom à votre nouveau Popup. (Une autre méthode consiste à appuyer sur CMD + E ou CTRL + E pour ouvrir le Finder , rechercher Popup, choisir Ajouter une nouvelle fenêtre contextuelle et lui donner un nom.)
  2. Choisissez un modèle de Popup préconçu ou fermez la superposition de la bibliothèque et concevez votre Popup à partir de zéro. Pour cet exemple, nous concevrons le nôtre, mais vous pouvez également trouver ce modèle dans votre bibliothèque de modèles de fenêtres contextuelles Elementor Pro . Recherchez simplement «menu» dans la bibliothèque Popups pour le trouver.

Popup> Onglet Disposition

  1. Largeur : réglé sur 85vw
  2. Superposition : Masquer
  3. Animation d’entrée : fondu entrant
  4. Durée de l’animation : 2 secondes

Popup> Onglet Style

Apparaitre

Box Shadow : définissez-les comme vous le souhaitez.

Bouton Fermer
  1. Position verticale : 4
  2. Couleur : définissez la couleur sur # 878787
  3. Taille : 35

Popup> Onglet Avancé

Empêcher la fermeture sur superposition : Oui

Maintenant, ajoutez une section avec deux colonnes.

Concevoir la première colonne

Section> Disposition

  1. Largeur du contenu : pleine largeur
  2. Écart de colonnes : pas d’écart

Faites glisser un widget Section intérieure vers la première colonne. 

Sous Section > Disposition > Espace entre les colonnes , définissez Aucun espace .

Sous  Section  >  Avancé , définissez  Remplissage  de 70 px tout autour. 

Section> Avancé

Rembourrage : 70 pour le haut, le bas, la gauche et la droite.

Faites glisser un widget En – tête vers la première colonne.

Sous Style > Typographie , définissez la taille sur 60 et sous Poids défini sur 100.

Conseil : le moment est venu d’ajuster les paramètres mobiles des en-têtes  .

Créer le reste des éléments de menu

  1. Cliquez avec le bouton droit de la souris sur la poignée du widget En-tête et choisissez Dupliquer.
  2. Répétez la duplication pour autant d’éléments de menu que vous en aurez besoin.
  3. Modifiez le texte du titre pour chaque widget Titre pour étiqueter correctement chaque élément de menu

Ajouter un bouton au menu

Faites glisser un widget Bouton sous les éléments du menu et personnalisez-le à votre guise.

Sous l’onglet Avancé> Marge, Définissez sur 70 pour le haut, puis cliquez sur l’icône de la fenêtre responsive, cliquez sur l’icône Mobile et définissez la marge de Mobile sur 40 pour le haut.

Faites glisser un autre widget de la section intérieure vers la première colonne sous le bouton.

  1. Sous  Section  >  Disposition  >  Largeur , définissez  Pleine largeur .
  2. Sous  Section  >  Disposition> Espace entre les colonnes, définissez Aucun espace . 
  3. Sous Section> Avancé> Remplissage, définissez 30 pour le haut, 70 pour la droite, 50 pour le bas et 70 pour la gauche.
  4. Maintenant, cliquez avec le bouton droit sur une poignée de colonne et sélectionnez Supprimer pour supprimer l’une des colonnes, vous en laissant une seule.

Ajouter des boutons de partage au menu

Faites glisser un widget Boutons de partage (Pro) vers la colonne.

Boutons de partage> Contenu

  1. Modifiez les éléments des réseaux sociaux selon vos besoins.
  2. Peau : Minimal
  3. Alignement : gauche

Partager les boutons> Style

  1. Taille du bouton : 1
  2. Couleur : couleur personnalisée et choisissez noir (# 000000)

Concevoir la deuxième colonne

Cliquez avec le bouton droit sur la poignée de la colonne pour modifier les paramètres de la colonne.

Colonne> Style

Contexte
  1. Couleur d’arrière-plan : défini sur # 000000 (noir)
  2. Deuxième couleur : réglez sur # 000000 (noir)

Remarque : bien que la nouvelle couleur d’arrière-plan ait été définie, vous ne la verrez pas encore, car il n’y a pas encore de contenu dans la colonne.

Créer le bulletin d’inscription Formulaire d’appel à l’action

Faites glisser un widget Section intérieure vers cette colonne.

Cliquez avec le bouton droit sur une poignée de colonne et sélectionnez Supprimer pour supprimer l’une des colonnes, vous en laissant une seule.

Section intérieure> Avancé

  1. Marge : définie sur 130 pour le bas uniquement
  2. Rembourrage : défini sur 70 pour le haut, 60 pour la droite, 70 pour le bas et 60 pour la gauche

Faites glisser un widget d’en-tête dans la colonne

Ajustez le texte du titre (par exemple, inscrivez-vous à notre newsletter), et la taille du texte, la couleur, etc. au besoin.

Faites glisser un   widget de formulaire (Pro) sous l’en-tête

Formulaire> Contenu

Champs de formulaire
  1. Cliquez sur le X à l’extrême droite des champs Nom et Message, car nous n’avons besoin que de l’e-mail pour cet exemple.
  2. Taille d’entrée : moyenne
  3. E-mail> Contenu >  Largeur de colonne : 80%
Bouton de soumission
  1. Taille : moyenne
  2. Largeur de colonne : 20%
  3. Alignement : à droite
  4. Icône : Flèche longue à droite

Formulaire> Style

Forme
  1. Écart de colonne : 0
  2. Écart de ligne : 0
Champ
  1. Couleur du texte : blanc
  2. Couleur d’arrière-plan : transparent
  3. Couleur de la bordure : blanc
  4. Largeur de la bordure : 1 pour le bas uniquement
  5. Typographie> Taille : 10
Bouton
  1. Couleur d’arrière-plan : transparent
  2. Couleur du texte : blanc
  3. Bordure : solide
  4. Largeur de la bordure : 1 pour le bas uniquement
  5. Couleur de la bordure : blanc

Créer l’affichage des produits

Faites glisser un autre widget Section intérieure vers cette colonne sous le formulaire.

Section intérieure> Avancé

  1. Rembourrage : défini sur 30 pour la droite uniquement
Sensible
  1. Masquer sur mobile : Masquer

Section intérieure> Disposition

  1. Écart de colonnes : pas d’écart

Cliquez avec le bouton droit sur une poignée de colonne et sélectionnez Supprimer pour supprimer l’une des colonnes, vous en laissant une seule.

Modifier la colonne

Colonne> Avancé

  1. Marge : Set -60 (moins 60) pour la gauche uniquement

Cliquez avec le bouton droit sur la poignée du widget d’en-tête et copiez le titre de l’en-tête de la newsletter, puis collez-le dans cette colonne

Titre> Style

  1. Couleur du texte : noir (# 000000)
  2. Poids : 700

Titre> Avancé

  1. Marge : définie sur 20 pour la gauche uniquement

Colonne> Style

Contexte

Couleur : blanc (#ffffff)

Frontière

  1. Rayon de la bordure : 5 pour tous les côtés
Ombre de la boîte (normale)
  1. Couleur : rgba (0,0,0,0.21)
  2. Ombre de boîte> Horizontale : 0
  3. Boîte Ombre> Verticale : 10
  4. Box Shadow> Flou : 30
  5. Box Shadow> Spread : -10 (moins 10)
  6. Position : contour
Box Shadow (survol)
  1. Couleur : rgba (0,0,0,0.21)
  2. Ombre de boîte> Horizontale : 0
  3. Boîte Ombre> Verticale : 15
  4. Box Shadow> Flou : 40
  5. Box Shadow> Spread : -10 (moins 10)
  6. Position : contour

Faites glisser un   widget Image sous l’en-tête

Image

Ne choisissez pas encore une image

  1. Taille de l’image : pleine
  2. Alignement : gauche

Cliquez maintenant avec le bouton droit sur la poignée du widget Titre , dupliquez-la et ajustez le style du widget dupliqué.

Titre> Style

  1. Taille : 15
  2. Poids : 300

Maintenant, changez le libellé de chacun.

Cliquez avec le bouton droit de la souris sur la poignée de la colonne et dupliquez-la deux fois pour obtenir un total de 3 colonnes.

  1. Modifiez la colonne pour les colonnes du milieu et de la dernière colonne, en modifiant les marges dans Colonne> Avancé à -40 pour la marge gauche dans la colonne du milieu et à -20 pour la marge gauche dans la dernière colonne.
  2. Pour chaque colonne, modifiez le widget Image, en choisissant une image. Même les images .gif fonctionnent bien ici.
  3. Ajustez votre texte et vos marges selon vos besoins.

Ajuster pour mobile

Modifiez chacune des sections intérieures dans la colonne de gauche

Section intérieure> Avancé

  1. Rembourrage : 25 pour tous les côtés

Cliquez sur l’ icône engrenage / engrenage   située en bas à gauche du panneau pour revenir aux paramètres contextuels.

Paramètres de la fenêtre contextuelle> Disposition

  1. Largeur : 100vw

Forme

Définissez les largeurs du champ d’e-mail et du bouton d’envoi sur 80% et 20%, respectivement.

Définir les options de publication

Cliquez sur le bouton Publier . Il n’y a pas de conditions , déclencheurs ou règles avancées pour cette fenêtre contextuelle, cliquez donc sur le bouton Enregistrer et fermer .

Modifier le modèle d’en-tête créé par Elementor de votre site

Accédez à Modèles> Générateur de thèmes> En-têtes > Sélectionnez votre en-tête, puis cliquez sur Modifier avec Elementor

Cliquez sur la poignée du widget de votre bouton de menu pour modifier le widget, s’il existe, ou en créer un nouveau.

Bouton

  1. Lien : cliquez sur l’ icône Dynamique et sélectionnez Actions> Popup
  2. Cliquez à nouveau sur Popup et sous Action, choisissez Toggle Popup
  3. Dans le champ Popup, recherchez et sélectionnez la popup que vous venez de créer

Cliquez sur le bouton Mettre à jour pour enregistrer les modifications du modèle d’en-tête

Terminé. Accédez à votre site en direct, cliquez sur le bouton Menu dans votre en-tête et voyez votre nouveau menu contextuel en action.

Bonus : ajoutez des effets d’animation d’entrée sur l’un de vos widgets pour ajouter des effets sympas. Modifiez simplement un widget, accédez à son onglet Avancé, choisissez l’une des animations d’entrée qui y sont répertoriées.