Comment créer une fenêtre contextuelle de blocage de contenu

Créez une fenêtre contextuelle qui empêche les visiteurs de voir le contenu de votre 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:

1. Posez une question Oui ou Non au visiteur et autorisez le visiteur à cliquer sur le bouton Oui ou Non
2. Affichez le contenu de la page si le visiteur clique sur le bouton Oui et redirigez le visiteur vers une autre URL s'il clique sur le bouton Non ou à un autre endroit que le bouton Oui.

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.

Fenêtre contextuelle> Onglet Conception

1. Largeur: Défini sur 600 px
2. Hauteur: Sélectionnez Personnalisé
3. Hauteur personnalisée: Défini sur 800 px
4. Position verticale: Centre
5. Bouton Fermer: Définir pour masquer
6. Animation d'entrée: Choisissez Fade In

Le contenu

1. Ajoutez un en-tête qui pose une question par oui ou par non et modifiez-le si nécessaire.
2. Ajoutez deux boutons, un pour Oui et un pour Non, et modifiez le style de chacun selon vos besoins.
3. Clique sur le icône d'engrenage / engrenage situé en bas à gauche du panneau pour revenir à la fenêtre contextuelle Paramètres

Fenêtre contextuelle> onglet Style

1. Type de fonds: Transparent
2. Photo: Ajoutez une image d'arrière-plan et ajustez ses paramètres si nécessaire

Popup> onglet Avancé

1. Farci: Défini sur 80 pixels pour la droite et la gauche, en laissant
   
   partie supérieure
   et fond blanc
2. Évitez le chevauchement des fermetures: Réglé sur Oui
3. Empêcher la fermeture avec la touche ESC: Réglé sur Oui

Modifier la section

Section> Style> Bordure

1. Type de bordure: Solide
2. Largeur de la bordure: 15px
3. Couleur: Choisissez une couleur pour votre bordure
4. Rayon du bord: 40 uniquement pour la partie inférieure

Section> Avancé

Farci: 30px uniquement pour la partie inférieure.

Modifier la colonne

Colonne> Style

1. Type de fonds: Pente
2. Couleur: Choisissez la première couleur de dégradé
3. Deuxième couleur: Choisissez la deuxième couleur du dégradé
4. Type: Radial

Frontière

1. Rayon du bord: 20px uniquement pour la partie inférieure
2. Ombre de la boîte: Définir selon les besoins

Colonne> Avancé

1. Marge: Réglez -30 (moins 30) pour le haut et la gauche
2. Farci: Définissez 100 pixels pour le haut et le bas

Modifier le contenu

Titre> Style

Qualification: Définit la couleur sur le blanc.

Bouton> Style

Couleur du texte: Définit la couleur sur blanc pour chaque bouton.

Modifier le bouton Oui

Contenu:

1. Relier: Cliquez sur l'icône Dynamique et choisissez Actions> Fenêtre contextuelle
2. Cliquez sur Surgir de nouveau
3. Choisir Fermer la fenêtre contextuelle et glisser Ne pas réapparaître Donc

Modifier le bouton Non

Le contenu:

Relier: Saisissez des liens annexes adaptés à votre âge

Définir les options de publication

Cliquer publier bouton. Il n'y a pas de conditions avancées, de déclencheurs ou de règles pour cette fenêtre contextuelle, alors cliquez sur le bouton Sauver et fermer bouton.

Éditer la page qui contient le bouton Acheter (ou tout autre bouton que vous créez pour ouvrir la fenêtre contextuelle).

Modifier le bouton Acheter

1. Si vous n'avez pas encore créé de bouton pour lancer la fenêtre contextuelle, vous pouvez le faire maintenant. Modifiez votre texte et votre typographie au besoin
2. Relier: Cliquez sur l'icône Dynamique et choisissez Actions> Fenêtre contextuelle
3. Cliquez à nouveau sur Popup et sous Action, choisissez Ouvrir la fenêtre contextuelle.
4. Dans le champ Popup, entrez des lettres pour rechercher / trouver le Popup que vous venez de créer.
5. Clique sur le Mettre à jour bouton pour actualiser la page.

Tout prêt. Maintenant, allez sur la page avec le bouton Acheter, cliquez dessus et voyez la pop-up en action.