Comment ajouter un pop – up supportant le défilement à un billet de blog dans Divi

Personnaliser le corps. Ceci vous mènera à l’éditeur de mise en page du modèle de corps, où nous ajouterons une fenêtre contextuelle déclenchée par le défilement. Concevoir des POP – ups déclenchés en faisant défiler les messages pertinents par catégorie. Les POP – ups seront inclus dans la ligne Divi. Ainsi, une fois la fonction pop – up implémentée, vous pouvez remplir la ligne avec n’importe quel formulaire pour créer tout ce que vous voulez. Pour le premier exemple, nous créerons une fenêtre contextuelle qui affiche les messages pertinents par catégorie. De cette façon, lorsque les visiteurs défilent vers la fin de leur billet, ils reçoivent un message sur la suggestion dans la fenêtre contextuelle.
Voici comment faire. Ajouter une ligne à une colonne ajoute d’abord une ligne dans la colonne directement sous la ligne qui contient le module de contenu du message dans la disposition du modèle de message. Avant d’ajouter un module, mettre à jour les paramètres de ligne comme suit: couleur de fond: # FFFFFF largeur de la gouttière: 1 largeur: 300 Px (bureau), 200 Px (téléphone) remplissage: 20px vers le haut, 0px vers le bas ombrage de la boîte: voir capture d’écran Une fois que vous avez ajouté les paramètres de ligne personnalisés du formulaire de texte, ajoutez le formulaire de texte à la ligne. Ce sera la zone de titre de notre pop – up post pertinent. Mettre à jour le contenu du corps avec des messages connexes. La conception met ensuite à jour les paramètres de conception comme suit: police de texte: style de police de texte heebo: tt text text color: # f94857 text alignment: Center Sous le formulaire texte, ajoutez un formulaire de blog. Comme nous ne voulons afficher qu’un seul article connexe, nous limiterons le nombre d’articles à un seul et inclurons la catégorie actuelle afin que les articles affichés dans la fenêtre contextuelle partagent la même catégorie que les articles réels affichés sur le modèle.
Mise à jour comme suit: nombre de postes: 1 catégorie comprend: la catégorie actuelle Éléments du Groupe d’options de
Projet, assurez – vous que la sélection n’affiche que l’image de premier plan. Cache tout le reste. Conception dans l’onglet conception, mettre à jour ce qui suit: police de titre: heebo police de titre poids: Super gras taille du texte de titre: 16px hauteur de la ligne de titre: 1,4em remplissage: 5% en haut, 5% à gauche, 5% à droite Advanced rowsetup CSS class, Custom CSS, and Z Index in the Advanced tab, we need to assign a CSS Class for rows, some Custom CSS, and Update Z index so that the popup is above the other content of the page.
Lorsque vous utilisez Visual Builder à l’avant, cette procédure cache les lignes dans la vue. Il est donc préférable de déployer les vues wireframe avant de mettre à jour ces options. Après avoir entré le mode wireframe view, ouvrez la sauvegarde des paramètres de ligne et ajoutez la classe CSS suivante: CSS Class: Post Line, puis ajoutez le CSS personnalisé suivant à l’élément principal: position: fixe;
En bas: 0%;
Droite: – 300px;
Et mettre à jour l’index Z: index Z: 999 Ajoutez un séparateur comme déclencheur de défilement et la fenêtre contextuelle est maintenant prête. Maintenant, nous devons décider où ajouter des déclencheurs de défilement sur le modèle post afin que les fenêtres contextuelles s’affichent ou se cachent lorsque l’utilisateur défile sur ces points. Le point d’activation du défilement est déterminé par l’élément avec la classe CSS. Puisque nous voulons que le déclencheur de défilement soit au bas de l’article, vous pouvez utiliser un séparateur avec une classe CSS comme élément du déclencheur de défilement.
Ajouter un point d’activation de défilement # 1 pour ajouter le premier point d’activation de défilement, nous avons ajouté un module séparateur directement sous le module contenu du message. Puis ajoutez la classe CSS suivante: classe CSS: point de cheminement post C’est facile. Ajouter un point d’activation de défilement # 2 maintenant pour ajouter un deuxième point de déclenchement (qui cache le point de déclenchement de la fenêtre contextuelle en bas de la page), copiez le module séparateur nouvellement créé. Ensuite, collez – le à la position inférieure dans le modèle de post où vous voulez fermer (ou masquer) la fenêtre contextuelle. Pour cet exemple, je l’ajoute directement sous le module blog du billet concerné et directement au – dessus de la section commentaires du modèle de billet. Utilisez le module de code pour ajouter du code personnalisé pour faire fonctionner cette fenêtre contextuelle qui permet le défilement, il ne reste plus qu’un petit Code. Continuez à ajouter des formulaires de code à votre modèle de poste. Ensuite, collez le code suivant dans la zone de code: – Oui. Ligne post {
Transition: tous. 4 s;
}
– Oui. Publier la ligne. Afficher les messages
Droite: 0px;
} Jquery (document). Prêt (fonction ($)
$(‘point de cheminement arrière’). Point de cheminement (fonction () {
$(\
}, {offset: ‘97%});
}); Résultats pour voir les résultats, visitez un de vos billets de blog et faites défiler la page vers le bas. Lorsque vous arrivez à la fin du contenu du message, vous devriez voir la fenêtre contextuelle du message pertinent. Faites défiler pour voir qu’il est caché derrière la partie pertinente de l’article. Il est intéressant d’ajouter l’option E – mail à une fenêtre contextuelle déclenchée en faisant défiler la fenêtre contextuelle des messages pertinents, mais vous devrez peut – être sélectionner l’e – mail de la fenêtre contextuelle. C’est facile à faire. En fait, nous pouvons même utiliser les options de courriel déjà conçues dans la disposition par défaut du pied de page de ce modèle. Enregistrer le pied de page dans la Bibliothèque Divi activez enregistrer la mise en page et quittez Theme Builder. Cliquez ensuite pour modifier la disposition du modèle de pied de page personnalisé. Localisez le formulaire d’activation du courriel et sauvegardez – le dans la Bibliothèque Divi. Ajouter une option de courriel enregistrée à la ligne contextuelle retourne maintenant à la mise en page du modèle