Comment créer une fenêtre contextuelle d'article connexe

Créez une fenêtre contextuelle à la fin d'un article pour afficher les articles liés aux utilisateurs.

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

1. C'est pleine largeur
2. Encouragez le visiteur à rester après avoir lu un article.
3. Proporciona una mejor expérience utilisateur a sus visitantes.

---

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, chercher Surgir, choisir 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.
3. Dans le Paramètres des fenêtres contextuelles, au dessous de La conception, changer la Largeur à 100vw, il sera donc affiché dans le 100% de la largeur de la fenêtre.
4. Puis configurez le Disposition> Position horizontale à Centre, et le Disposition> Position verticale à Arrière-plan.
5. Cliquez sur l'icône Ajouter une nouvelle section pour ajouter une nouvelle section avec 4 colonnes.
6. Modifiez chaque colonne en définissant la largeur de la première colonne sur 55% et chacune des autres colonnes sur 15%.
7. Ajoutez un widget d'en-tête et un widget d'éditeur de texte à la première colonne.
8. Ajoutez un widget d'image à chacune des autres colonnes.
9. Ingrese la URL du relier para cada uno de los widgets de imagen, cada uno apuntando al artículo relevante.
10. Ajoutez des effets d'image. Pour une image, allez à Normal onglets Estilo> Filtres CSS et changez la saturation en 0. Donc sous le Flotter onglet, allez à Style> Filtres CSS et assurez-vous que la saturation est toujours 100.
11. Cliquez avec le bouton droit sur le widget d'image et choisissez Copier.
12. Faites un clic droit sur chacun des autres widgets d'image et choisissez Style de pâte.
13. Cliquez sur l'icône d'engrenage pour ouvrir le Paramètres des fenêtres contextuelles panneau. Aller Animation d'entrée et choisissez Balayez vers le haut.
14. Sélectionnez le Couverture à Cacher.

Définir les options de publication

1. Ajouter un nouveau État Quoi Inclure> Singulier> Toutes les pages> Nom de la page
2. Ajouter un nouveau Déclencheur. Ensemble On Faire défiler to Element à Oui et entrez un nom de classe CSS de votre choix dans le Sélectionnerchamp r.
3. Cliquez sur l'icône d'engrenage pour ouvrir le Paramètres des fenêtres contextuelles panneau.
4. Edite la página donde desea que aparezca la ventana emergente. Una vez allí, edite el elemento que activará el Popup cuando el Nom d'utilisateur se desplace hacia él.
5. Aller à l'élément Avancé> Classes CSS et entrez le même nom de classe CSS que vous avez entré dans le Déclencheur sur.

Tout prêt. Maintenant, visitez la page en direct, faites défiler jusqu'à la fin de l'article et voyez votre Popup des éléments connexes en action.