Comment créer un menu contextuel réactif

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

Vous apprendrez à créer un menu contextuel qui:

• C'est attrayant, fonctionnel et beau.
• Réponse sur mobile

Concevoir la fenêtre contextuelle et son contenu

1. Aller Modèles> Pop-ups> Ajouter nouveau et donnez un nom à votre nouvelle fenêtre contextuelle. (Une autre méthode consiste à appuyer sur CMD + E ou CTRL + E ouvrir Découvreur, recherchez Popup, choisissez Ajouter une nouvelle fenêtre contextuelleet donnez-lui un nom.)
2. Choisissez un modèle de popup prédéfini 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 contextuels Elementor Pro. Recherchez simplement "menu" dans la bibliothèque Popups pour le trouver.

Fenêtre contextuelle> Onglet Conception

1. Largeur: Réglé sur 85vw
2. Couverture: Cacher
3. Animation d'entrée: Fusionner
4. Durée de l'animation: 2 secondes

Fenêtre contextuelle> onglet Style

Surgir

Ombre de la boîte: Définissez-les comme vous le souhaitez.

Bouton Fermer

1. Position verticale: 4
2. Couleur: Définit la couleur sur # 878787
3. Taille: 35

Popup> onglet Avancé

Évitez de chevaucher la fermeture: Oui

Ajoutez maintenant une section avec deux colonnes.

Concevoir la première colonne

Section> Conception

1. Ancho del Contenu: Pleine largeur
2. Espacement des colonnes: Pas d'espace

Faites glisser un widget de section interne vers la première colonne.

Au dessous de Section > La conception > Espacement des colonnes, mettre en place Pas d'espace.

Au dessous de Section > Avancée, mettre en place Farci 70 px autour.

Section> Avancé

Farci: 70 haut, bas, gauche et droite.

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

Au dessous de Style > Typographie, réglez la taille sur 60 et moins Poids mis à 100.

Conseil: Le moment est venu d'ajuster les titres ' Configuration mobile.

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

1. Faites un clic droit sur le contrôle du widget de titre et choisissez Dupliquer.
2. Répétez la duplication pour tous les éléments de menu dont vous avez besoin.
3. Modifiez le texte du titre de chaque widget d'en-tête 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 ajustez-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 du mobile sur 40 pour le haut.

Faites glisser un autre Section intérieure widget dans la première colonne sous le bouton.

1. Au dessous de Section > La conception > Largeur, mettre en place Pleine largeur.
2. Au dessous de Section > Disposition> Espacement des colonnes, ensemble Pas d'espace.
3. Dans Section> Avancé> Remplir, définissez 30 pour Haut, 70 pour Droite, 50 pour Bas et 70 pour Gauche.
4. Maintenant, faites un clic droit sur une poignée de colonne et sélectionnez Se débarrasser de pour supprimer l'une des colonnes, ne vous en laissant qu'une.

Ajouter des boutons de partage au menu

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

Boutons de partage> Contenu

1. Edite los elementos de la réseau social selon être necesario.
2. Peau: Le minimum
3. Alignement: Gauche

Boutons de partage> Style

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

Concevoir la deuxième colonne

Faites un clic droit sur l'identifiant de la colonne pour modifier les paramètres de la colonne.

Colonne> Style

Antécédents

1. Couleur de l'arrière plan: Réglé sur # 000000 (noir)
2. Deuxième couleur: Réglé sur # 000000 (noir)

Noter: 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 la newsletter Abonnez-vous au formulaire d'appel à l'action

Faites glisser un widget de section intérieure vers cette colonne.

Faites un clic droit sur une poignée de colonne et sélectionnez Se débarrasser de pour supprimer l'une des colonnes, ne vous en laissant qu'une.

Section intérieure> Avancé

1. Marge: Défini sur 130 uniquement pour le bas
2. Farci: 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 vers la colonne

Ajustez le texte du titre (c'est-à-dire abonnez-vous à notre newsletter) et la taille, la couleur, etc. du texte selon les besoins.

Faites glisser un Former Widget (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: Moitié
3. Email> Contenu > Largeur de colonne: 80%

Bouton de soumission

1. Taille: Moitié
2. Largeur de colonne: 20%
3. Alignement: C'est Correct
4. Icône: Longue flèche vers la droite

Forme> Style

Former

1. Espacement des colonnes: 0
2. Écartement des rangs: 0

Campagne

1. Couleur du texte: Blanc
2. Couleur de l'arrière plan: Transparent
3. Couleur de la bordure: Blanc
4. Largeur de la bordure: 1 uniquement pour le bas
5. Typographie> Taille: 10

Bouton

1. Couleur de l'arrière plan: Transparent
2. Couleur du texte: Blanc
3. Frontière: Solide
4. Largeur de la bordure: 1 uniquement pour le bas
5. Couleur de la bordure: Blanc

Créer la présentation du produit

Faites glisser un autre widget de la section interne vers cette colonne sous le formulaire.

Section intérieure> Avancé

1. Farci: Défini sur 30 pour la droite uniquement

Sensible

1. Masquer sur mobile: Cacher

Section intérieure> Design

1. Espacement des colonnes: Pas d'espace

Faites un clic droit sur une poignée de colonne et sélectionnez Se débarrasser de pour supprimer l'une des colonnes, ne vous en laissant qu'une.

Modifier la colonne

Colonne> Avancé

1. Marge: Réglez -60 (moins 60) uniquement pour la gauche

Faites un clic droit sur le contrôle du widget d'en-tête et copiez le titre du titre 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éfini sur 20 pour la gauche uniquement

Colonne> Style

Antécédents

Couleur: Blanc (#ffffff)

Frontière

1. Rayon du bord: 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. Ombre de boîte> Verticale: 10
4. Ombre de la boîte> Flou: 30
5. Box Shadow> Extension: -10 (moins 10)
6. Positionner: Contour

Ombre de boîte (flottant)

1. Couleur: rgba (0,0,0,0.21)
2. Ombre de boîte> Horizontale: 0
3. Ombre de boîte> Verticale: 15
4. Ombre de la boîte> Flou: 40
5. Box Shadow> Extension: -10 (moins 10)
6. Positionner: Contour

Faites glisser un Photo widget sous l'en-tête

Photo

Ne choisissez pas encore une image

1. Taille de l'image: Plein
2. Alignement: Gauche

Maintenant, faites un clic droit sur le contrôle du widget de titre , dupliquez-le et ajustez le style du widget dupliqué.

Titre> Style

1. Taille: 15
2. Poids: 300

Maintenant, changez le libellé de chacun.

Faites un clic droit sur l'identifiant de la colonne et dupliquez-le deux fois pour avoir un total de 3 colonnes.

1. Modifiez la colonne des colonnes du milieu et de la dernière, en changeant le marges au 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.

Fit pour mobile

Modifiez chacune des sections internes dans la colonne de gauche

Section intérieure> Avancé

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

Clique sur le icône d'engrenage / engrenage situé en bas à gauche du panneau pour revenir à la fenêtre contextuelle Paramètres.

Paramètres de la fenêtre contextuelle> Mise en page

1. Largeur: 100vw

Former

Définissez la largeur du champ d'e-mail et du bouton Envoyer sur 80% et 20%, respectivement.

Définir les options de publication

Clique sur le publier bouton. Ils n'existent pas termes, Déclencheursou Règles avancées Pour cette fenêtre contextuelle, cliquez sur le bouton Sauver et fermer bouton.

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

Aller Plantillas> Creador de temas> En-têtes > Sélectionnez votre en-tête et cliquez sur Modifier avec Elementor

Cliquez sur le contrôle du widget à partir de votre bouton de menu pour modifier le widget, s'il existe, ou en créer un nouveau.

Bouton

1. Relier: Clique sur le Dynamique icône et sélectionnez Actions> Fenêtre contextuelle
2. Cliquez à nouveau sur Surgir et en action, choisissez Basculer la fenêtre contextuelle
3. Dans le champ Pop-up, recherchez et sélectionnez le pop-up que vous venez de créer.

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

Tout prêt. Accédez à votre site en direct, cliquez sur le Bouton de menu dans votre en-tête et voyez votre nouveau menu contextuel en action.

Cousine: Agregue efectos de animación de entrada en cualquiera de sus widgets para agregar efectos geniales. Simplemente edite un widget, vaya a su pestaña Avanzado, elija una de las animaciones de entrada que se enumeran allí.