Comment ajouter une fenêtre contextuelle déclenchée par défilement à vos articles de blog dans Divi

Ajouter une fenêtre contextuelle déclenchée par défilement à vos articles de blog semble être une chose vraiment intelligente à faire. Vous les avez peut-être déjà vus en lisant d'autres blogs. Lorsque l'utilisateur fait défiler jusqu'à un certain point de la publication (généralement la fin), une boîte contenant un appel à l'action apparaît soudainement. L'objectif d'une fenêtre contextuelle déclenchée par défilement est de présenter un appel à l'action ciblé aux visiteurs au moment exact où vous souhaitez qu'ils le voient sur la page. En bref, c'est un excellent outil pour booster les conversions ou gagner des leads qualifiés. Pour cette raison, de nombreux plugins d'amplification de conversion (comme notre propre Bloom ou comme Optin Monster) vous permettent de faire la même chose.

Dans ce tutoriel, nous allons vous montrer comment ajouter une popup déclenchée par défilement à vos articles de blog dans Divi à partir de zéro, sans plugin. Pour ce faire, nous utiliserons Divi Theme Builder pour concevoir une fenêtre contextuelle contenant une publication associée par catégorie ainsi qu'une fenêtre contextuelle comprenant une option d'abonnement par e-mail. Le déclenchement du défilement sera accompli à l'aide d'un petit extrait de jQuery.

Commençons!

Aperçu

Voici un aperçu des fenêtres contextuelles déclenchées par défilement que nous allons créer.

Nous allons créer une fenêtre contextuelle pour révéler un article associé (par catégorie) comme indiqué ci-dessous.

Et nous vous montrerons également comment ajouter une option d'e-mail à la fenêtre contextuelle, ainsi que vu ici.

Téléchargez GRATUITEMENT le modèle de publication Popup Divi déclenché par défilement

Pour mettre la main sur le modèle de publication de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et ajoutez l'un des fichiers json dans le générateur de thème Divi à l'aide de l'option Portabilité du générateur de thème.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez installer et activer le thème Divi. Assurez-vous d'avoir la dernière version de Divi.

Vous devrez télécharger le quatrième pack de création de thèmes, car nous utiliserons le modèle de publication prédéfini de ce pack pour ce didacticiel.

Vous aurez également besoin d'au moins quelques articles de blog créés à des fins de test pour que le modèle de publication affiche les résultats.

Après cela, vous êtes prêt à partir.

Créer une pop-up déclenchée par le défilement à la fin de vos articles de blog Divi

Importation du modèle d'article de blog à partir du quatrième pack de création de thèmes

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Dans le générateur de thème, sélectionnez l'icône de portabilité en haut à droite de la page. Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation, choisissez le fichier theme-builder-pack-4-post-template.json et cliquez sur le bouton d'importation. (Ce fichier d'importation se trouvera dans le dossier Fourth Theme Builder Pack)

Vous pouvez également sélectionner l'option pour importer l'en-tête et le pied de page globaux en tant que mises en page statiques.

Une fois le modèle importé, cliquez sur l'icône pour modifier la zone de corps personnalisée.

Cela vous mènera à l'éditeur de mise en page du modèle de corps où nous ajouterons les fenêtres contextuelles déclenchées par défilement.

Concevoir la fenêtre contextuelle déclenchée par défilement avec un article associé par catégorie

La popup sera contenue par une ligne Divi. Par conséquent, une fois la fonctionnalité contextuelle en place, vous pouvez remplir cette ligne avec n'importe quel module pour créer le contenu de votre choix. Pour ce premier exemple, nous allons créer une fenêtre contextuelle présentant un article associé par catégorie. De cette façon, lorsqu'un visiteur fait défiler vers le bas de la publication, une publication associée lui est suggérée dans une fenêtre contextuelle.

Voici comment procéder.

Ajouter une ligne à une colonne

Ajoutez d'abord une ligne d'une colonne juste en dessous de la ligne contenant le module de contenu de publication dans la mise en page du modèle de publication.

Paramètres de ligne

Avant d'ajouter un module, mettez à jour les paramètres de ligne comme suit :

• Couleur d'arrière-plan : #ffffff
• Largeur de gouttière : 1
• Largeur : 300px (bureau), 200px (téléphone)
• Remplissage : 20 pixels en haut, 0 pixels en bas
• Box Shadow : voir capture d'écran

Ajouter un module de texte

Une fois les paramètres de ligne personnalisés, ajoutez un module de texte à la ligne. Ce sera la zone de titre de notre popup de publication connexe.

Teneur

Mettez à jour le contenu du corps avec le texte « Article lié ».

Concevoir

Mettez ensuite à jour les paramètres de conception comme suit :

• Police du texte : Heebo
• Style de police de texte : TT
• Texte Couleur du texte : #f94857
• Alignement du texte : au centre

Ajouter un module de blog

Sous le module de texte, ajoutez un module de blog.

Teneur

Étant donné que nous ne voulons présenter qu'un seul message lié, nous allons limiter le nombre de messages à un et inclure la "catégorie actuelle" afin que le message qui s'affiche dans la fenêtre contextuelle partage la même catégorie que le message affiché sur le modèle.

Mettez à jour les éléments suivants :

• Nombre de messages : 1
• Catégories incluses : Catégorie actuelle

Éléments

Sous le groupe d'options des éléments, assurez-vous de sélectionner pour afficher uniquement l'image en vedette. Cachez tout le reste.

Concevoir

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Police du titre : Heebo
• Poids de la police du titre : ultra gras
• Taille du texte du titre : 16px
• Hauteur de la ligne de titre : 1.4em
• Rembourrage : 5 % en haut, 5 % à gauche, 5 % à droite

Paramètres de ligne avancés

Classe CSS, CSS personnalisé et index Z

Sous l'onglet avancé, nous devons donner à notre ligne une classe CSS, un peu de CSS personnalisé, et mettre à jour l'index z pour que la fenêtre contextuelle reste au-dessus des autres contenus de la page.

Cette étape masquera la ligne lors de l'utilisation du générateur visuel sur le front-end. Il peut donc être préférable de déployer la vue filaire avant de mettre à jour ces options.

Une fois en mode d'affichage filaire, ouvrez à nouveau les paramètres de ligne et ajoutez la classe CSS suivante :

• Classe CSS : post-ligne

Ajoutez ensuite le css personnalisé suivant à l'élément principal :

position: fixed;
bottom: 0%;
right: -300px;

Et mettez à jour l'index Z :

• Indice Z : 999

Ajouter des séparateurs en tant que points de déclenchement de défilement

À ce stade, notre popup est prêt à fonctionner. Maintenant, nous devons décider où ajouter nos points de déclenchement de défilement sur le modèle de publication, de sorte qu'une fois que l'utilisateur fait défiler jusqu'à ces points, la fenêtre contextuelle soit affichée ou masquée. Les points de déclenchement du défilement seront déterminés par un élément avec une classe CSS. Puisque nous voulons que le point de déclenchement de défilement soit au bas de la publication, nous pouvons utiliser un diviseur avec une classe CSS comme élément de point de déclenchement de défilement.

Ajouter le point de déclenchement de défilement n° 1

Pour ajouter notre premier point de déclenchement de défilement, ajoutons un module diviseur directement sous le module de contenu de publication.

Ajoutez ensuite la classe CSS suivante :

• Classe CSS : après le point de cheminement

C'était facile.

Ajouter le point de déclenchement de défilement #2

Maintenant, pour ajouter le deuxième point de déclenchement (celui qui masquera le popup plus bas dans la page), copiez le module diviseur que vous venez de créer.

Ensuite, collez-le à un endroit situé plus bas dans le modèle de publication où vous souhaitez que la fenêtre contextuelle soit fermée (ou masquée). Pour cet exemple, je l'ajoute juste en dessous du module de blog des articles associés et juste au-dessus de la section des commentaires du modèle d'article.

Ajouter un code personnalisé avec le module de code

Tout ce qui reste à faire pour que cette fenêtre contextuelle déclenchée par défilement fonctionne est un petit code.

Allez-y et ajoutez un module de code au modèle de publication.

Collez ensuite le code suivant dans la zone de code :

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Résultat

Pour voir le résultat, visitez l'un de vos articles de blog et faites défiler la page vers le bas. Vous devriez voir la fenêtre contextuelle de la publication associée lorsque vous atteignez le bas du contenu de la publication. Continuez à faire défiler pour le voir caché juste après la section des messages connexes du message.

Ajout d'une option d'e-mail à la fenêtre contextuelle déclenchée par défilement

La fenêtre contextuelle de publication associée est intéressante, mais vous aimeriez peut-être qu'un e-mail s'affiche à la place. Cela est facile à faire. En fait, nous pouvons même utiliser l'option de courrier électronique déjà conçue dans la disposition de pied de page prédéfinie sur ce modèle.

Enregistrer l'option d'e-mail du pied de page dans la bibliothèque Divi

Enregistrez votre mise en page et quittez le générateur de thème. Cliquez ensuite pour modifier la disposition du modèle de pied de page personnalisé.

Recherchez le module d'activation de la messagerie électronique et enregistrez-le dans la bibliothèque Divi.

Ajouter une option d'e-mail enregistrée à la ligne contextuelle

Revenez maintenant à la disposition du modèle de corps personnalisé et ajoutez l'e-mail enregistré dans la même ligne que vous utilisez comme popup. N'oubliez pas que tout ce qui se trouve à l'intérieur de cette ligne s'affichera comme contenu contextuel.

Étant donné que vous n'utilisez pas le module de texte et de blog, vous pouvez les désactiver pour qu'ils soient vus sur le front-end.

Paramètres d'option de messagerie

Une fois l'option d'inscription par e-mail en place et les autres modules désactivés, mettez à jour les paramètres d'inscription par e-mail comme suit :

• Titre : « Vous avez aimé cet article ? »
• Corps : « Rejoignez notre newsletter ! »

Ajoutez ensuite le remplissage suivant :

• Rembourrage : 5 % en bas, 20 pixels à droite

Résultat

Découvrez maintenant le résultat sur un post en direct.

Dernières pensées

Les popups déclenchés par défilement pourraient certainement être un atout précieux pour votre blog. Ils offrent un moyen discret de capitaliser sur des prospects qualifiés. Utilisez une fenêtre contextuelle de publication connexe pour les garder engagés sur votre site ou utilisez un e-mail pour vous aider à développer votre liste. Et avec Divi, vous pouvez également ajouter à peu près tout autre contenu auquel vous pouvez penser. Et vous pouvez décider exactement quand vous voulez que le visiteur voie ces popups, ce qui est assez puissant. J'espère que vous le trouverez utile pour votre propre blog ou votre prochain projet.

J'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!