Comment créer une fenêtre contextuelle de verrouillage de contenu
Créez une fenêtre contextuelle qui empêche les visiteurs de voir le contenu de la page à moins qu’ils ne cliquent sur un bouton spécifique dans la fenêtre contextuelle.
Vous apprendrez à créer une fenêtre contextuelle qui:
- Posez au visiteur une question Oui ou Non et autorisez le visiteur à cliquer sur un bouton Oui ou sur un bouton Non
- Afficher le contenu de la page si le visiteur clique sur le bouton Oui, et rediriger le visiteur vers une autre URL s’il clique sur le bouton Non ou clique ailleurs que sur le bouton Oui.
Concevoir la fenêtre contextuelle et son contenu
- 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.)
- 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.
Popup> Onglet Disposition
- Largeur : définie sur 600 px
- Hauteur : sélectionnez Personnalisé
- Hauteur personnalisée : définie sur 800 px
- Position verticale : centre
- Bouton Fermer : définir pour masquer
- Animation d’entrée : choisissez Fade In
Contenu
- Ajoutez un en-tête qui pose une question Oui ou Non et modifiez-le selon vos besoins.
- Ajoutez deux boutons, un pour Oui et un pour Non, et stylisez chacun selon vos besoins.
- Cliquez sur l’ icône engrenage / engrenage
située en bas à gauche du panneau pour revenir aux paramètres contextuels
Popup> Onglet Style
- Type de fond : transparent
- Image : ajoutez une image d’arrière-plan et ajustez ses paramètres si nécessaire
Popup> Onglet Avancé
- Rembourrage : réglé à 80px pour la droite et la gauche, laissant Haut et fond blanc
- Empêcher la fermeture sur superposition : définissez sur Oui
- Empêcher à la fermeture sur la touche ESC : réglé sur Oui
Modifier la section
Section> Style> Bordure
- Type de bordure : solide
- Largeur de la bordure : 15px
- Couleur : choisissez une couleur pour votre bordure
- Rayon de la bordure : 40 pour le bas uniquement
Section> Avancé
Rembourrage : 30 px pour le bas uniquement.
Modifier la colonne
Colonne> Style
- Type de fond : dégradé
- Couleur : choisissez la première couleur du dégradé
- Deuxième couleur : choisissez la deuxième couleur de dégradé
- Type : radial
Frontière
- Rayon de la bordure : 20px pour le bas uniquement
- Box Shadow : Définir selon les besoins
Colonne> Avancé
- Marge : Set -30 (moins 30) pour le haut et la gauche
- Rembourrage : définissez 100 pixels pour le haut et le bas
Modifier le contenu
Titre> Style
Titre : définissez la couleur sur blanc.
Bouton> Style
Couleur du texte : définissez la couleur sur blanc pour chaque bouton.
Modifier le bouton Oui
Contenu:
- Lien : cliquez sur l’icône Dynamique
et choisissez Actions> Popup - Cliquez à nouveau sur Popup
- Choisissez Fermer la fenêtre contextuelle et faites glisser Ne plus afficher sur Oui
Modifier le bouton Non
Contenu :
Lien : saisissez un lien de site adapté à votre âge
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 .
Modifiez la page qui contient le bouton Acheter (ou le bouton que vous créez pour lancer la fenêtre contextuelle).
Modifier le bouton d’achat
- Si vous n’avez pas encore créé de bouton pour lancer le Popup, vous pouvez le faire maintenant. Modifiez son texte et sa typographie au besoin
- Lien : cliquez sur l’icône Dynamique et choisissez Actions> Popup
- Cliquez à nouveau sur Popup, et sous Action, choisissez Open Popup .
- Dans le champ Popup, entrez quelques lettres pour rechercher / trouver le Popup que vous venez de créer.
- Cliquez sur le bouton Mettre à jour pour mettre à jour la page.
Terminé. Maintenant, allez sur la page avec le bouton Acheter, cliquez dessus et voyez le popup en action.
Source : https://docs.elementor.com/article/508-how-to-create-a-content-lock-popup
