Comment créer une fenêtre contextuelle de compte à rebours Hello Bar

Créer une fenêtre contextuelle affichant un compte à rebours de vente de 24 heures

Vous apprendrez à créer une fenêtre contextuelle qui:

1. Ajouter de l'urgence
2. Augmenter les ventes

Diseñe la ventana emergente y su Contenu

1. Aller Modèles> Popups> Ajouter un nouveau et donnez un nom à votre nouvelle fenêtre contextuelle
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: 100vw, donc il s'affichera dans la largeur de la fenêtre 100%
2. Hauteur: Personnalisé
3. Hauteur personnalisée: 300 px
4. Position> Verticale: Partie supérieure
5. Couverture: Glisser vers Off
6. Animation d'entrée: Fusionner
7. Durée de l'animation: 2,2 secondes

Fenêtre contextuelle> onglet Style

1. Popup> Couleur: Glisser vers transparent
2. Popup> Ombre de boîte: Cliquez sur la flèche de réinitialisation pour désactiver l'ombre de la boîte.
3. Bouton Fermer> Position verticale: 20
4. Bouton Fermer> Position horizontale: 4
5. Taille: 30

Popup> onglet Avancé

Farci: 30px pour tout le monde.

Le contenu

1. Cliquer + pour ajouter une nouvelle section avec 4 colonnes.
2. Section> Conception> Position du contenu: Moitié
3. Section> Style> Couleur: # e8e8e8
4. Ajouter un Sauter widget, écrivez votre titre et ajustez la taille et le poids de la police comme vous le souhaitez
5. Ajouter un Bouton widget et ajustez le texte, la couleur et les éléments de conception à votre guise
6. Ajouter un Compte à rebours widget et étirez-le en faisant glisser la colonne
7. Compte à rebours> Contenu> Type: Temporizador À feuilles persistantes
8. Compte à rebours> Contenu> Heures: 23
9. Compte à rebours> Contenu> Minutes: 59
10. Compte à rebours> Contenu> Actions après l'expiration: Choisissez Masquer et Nouveau message
11. Compte à rebours> Contenu> message: Le message que vous souhaitez afficher avec la minuterie expire
12. Compte à rebours> Style> Boîtes> Couleur de l'arrière plan: Sélectionnez une couleur
13. Compte à rebours> Style> Contenu> Chiffres: Changez la couleur et la police comme vous le souhaitez
14. Compte à rebours> Style> Contenu> Hashtag: Changez la couleur et la police comme vous le souhaitez
15. Ajouter un Photo widget et choisissez une photo dans votre bibliothèque.
16. Image> Avancé> Marge: Définissez une marge négative en bas pour que l'image flotte légèrement sous la fenêtre contextuelle.
17. Image> Avancé> Animation d'entrée: Rotation vers le bas à gauche
18. Image> Avancé> Durée de l'animation: Ralentir
19. Image> Avancé> Délai d'animation (ms): 500

Définir les options de publication

1. État: Inclure> Tout le site
2. Déclencheurs> Charger sur la page: Oui, en 3 secondes
3. Règles avancées> Masquer des utilisateurs connectés: Oui, tous les utilisateurs
4. Règles avancées> Afficher jusqu'à X fois: Oui, 1 fois

Tout prêt. Visitez votre page et après 3 secondes, la fenêtre contextuelle Compte à rebours apparaîtra, créant un sentiment d'urgence et une incitation à acheter un produit.