Comment créer un ticker de publication de blog avec le module Post Slider de Divi
Publié: 2021-07-03Un ticker d'article de blog est un outil pratique pour présenter dynamiquement des articles de blog (récents, liés, etc.) sur votre site Web. Vous pouvez le considérer comme un téléscripteur pour les articles de blog WordPress.
Aujourd'hui, nous allons vous montrer comment créer un ticker de publication de blog avec le module de curseur de publication de Divi. Semblable à un téléscripteur, le téléscripteur de publication de blog que nous allons créer sera une version simplifiée et compacte du module de curseur de publication de Divi. Et, comme le module de curseur de publication dispose de fonctionnalités intégrées pour présenter les publications de diverses manières, vous pouvez l'utiliser où vous le souhaitez. Vous pouvez l'utiliser sur la page d'accueil comme ticker de publication pour afficher les publications récentes, ou vous pouvez l'utiliser sur l'en-tête d'un modèle de publication de blog pour afficher les publications liées par catégorie actuelle.
Après vous avoir montré comment créer le ticker de publication de blog dans Divi, nous vous montrerons également comment l'enregistrer dans votre bibliothèque Divi afin que vous puissiez l'ajouter à un en-tête d'un modèle de publication de blog dans Divi Builder.
Commençons!
Aperçu
Voici un bref aperçu du ticker de billet de blog que nous allons construire dans ce didacticiel.
Voici comment le téléscripteur s'empile bien sur l'écran du téléphone.
Nous montrerons comment ajouter le ticker de publication pour afficher également les publications associées sur l'en-tête d'un modèle de publication de blog.
Téléchargez la mise en page et le modèle GRATUITEMENT
Pour mettre la main sur les designs 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 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.
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 !
Importer la mise en page dans la bibliothèque Divi
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur. Il s'agira du fichier JSON à l'intérieur du dossier nommé « disposition de billet de blog (bibliothèque Divi) ».
Cliquez ensuite sur le bouton importer.
Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.
Importer le modèle d'en-tête dans le générateur de thème Divi
Si vous souhaitez importer le modèle de publication de blog avec le ticker de publication ajouté à l'en-tête, vous devrez naviguer dans Divi > Theme Builder.
Utilisez ensuite l'icône de portabilité en haut à droite de la page pour importer le fichier JSON. Ce sera le fichier à l'intérieur du dossier nommé "modèle d'en-tête de billet de blog avec ticker de billet (Theme Builder)".
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devrez effectuer les opérations suivantes :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création du ticker de billet de blog dans Divi
Création de la ligne
Pour commencer, créons une ligne à une colonne à l'intérieur de la section.
Paramètres de ligne
Ensuite, mettez à jour les paramètres de conception de ligne comme suit :
- Largeur de gouttière : 1
- Remplissage : 0px en haut, 0px en bas
Création du titre du téléscripteur avec un module de texte
Maintenant que la ligne est en place, ajoutez un module de texte à la ligne pour créer le titre du téléscripteur.
Texte du titre et arrière-plan
Mettez à jour le corps du texte pour lire « messages récents : ».
Ensuite, mettez à jour la couleur d'arrière-plan :
- Couleur d'arrière-plan : #333333
Paramètres de conception
Sous l'onglet Conception, mettez à jour les styles de texte comme suit :
- Police de texte : Poppins
- Poids de la police de texte : demi-gras
- Style de police de texte : TT
- Couleur du texte du texte : rgba(255,255,255,0.7)
- Espacement des lettres du texte : 1px
- Hauteur de la ligne de texte : 40 pixels
- Alignement du texte : Centre
- Largeur : 100 %
- Largeur max : 175 px (ordinateur de bureau et tablette), 100 % (téléphone)
Cela prend en charge notre titre de téléscripteur. Commençons maintenant à créer le téléscripteur.
Création du téléscripteur d'article de blog avec un module de curseur d'article de blog
Pour créer le ticker de publication de blog, nous allons utiliser un module de curseur de publication, puis simplifier la conception pour la rendre vraiment compacte.
Ajoutez un module de curseur de publication sous le module de texte.
Publier le contenu du curseur
Sous l'onglet Contenu, vous pouvez choisir le nombre de publications, les catégories incluses et leur mode de classement. Pour cet exemple, nous allons conserver la valeur par défaut et faire en sorte que le curseur affiche les publications les plus récentes.
Pour masquer l'extrait de publication, assurez-vous de mettre à jour les éléments suivants :
- Utiliser des extraits de messages : NON
- Longueur de l'extrait : 0
Éléments et arrière-plan du curseur de publication
Vraiment, tout ce que nous voulons afficher dans le curseur est le titre du message et les flèches de la diapositive. Sous le groupe d'options des éléments, masquez tout sauf les flèches.
- Afficher les commandes : NON
- Afficher le bouton Lire la suite : NON
- Afficher la méta du message : NON
Nous allons conserver la possibilité d'afficher l'image en vedette comme arrière-plan de chaque diapositive. Mais pour une sauvegarde, assurez-vous d'ajouter la couleur de fond suivante :
- Couleur de fond : #eeeeee
Paramètres de conception du curseur de publication
Styles de superposition et de flèche
Sous l'onglet Conception, mettez à jour la superposition d'arrière-plan et la couleur de la flèche comme suit :
- Utiliser la superposition d'arrière-plan : OUI
- Couleur de superposition d'arrière-plan : rgba(248,248,248,0.9)
- Couleur de la flèche : #ffffff (bureau), #ef51f7 (survol)
Texte du titre
Ensuite, mettez à jour les styles de texte du titre comme suit :
- Police du titre : Poppins
- Poids de la police du titre : moyen
- Alignement du texte du titre : à gauche
- Couleur du texte du titre : #333333
- Couleur du texte du titre (survol) : #ef51f7
- Taille du texte du titre : 16px (ordinateur de bureau), 14px (téléphone)
- Hauteur de la ligne de titre : 40 px
- Ombre du texte du titre : voir capture d'écran
- Couleur de l'ombre du texte du titre : transparent
Espacement
Nous devons faire de la place pour le module de texte du titre du téléscripteur afin que nous puissions positionner notre curseur de publication sur le côté droit de celui-ci. Pour ce faire, mettez à jour les éléments suivants :
- Marge : 175 px à gauche (ordinateur de bureau et tablette), 0 px à gauche (téléphone)
- Remplissage : 0px en haut, 0px en bas, 0px à gauche, 0px à droite
Animation automatique
Le curseur de publication a une option intégrée pour ajouter une animation automatique. Cela nous donnera la fonctionnalité de téléscripteur dont nous avons besoin pour voir les publications sans avoir à cliquer sur les flèches des diapositives.
Ajoutez l'animation automatique comme suit :
- Animation automatique : ON
- Vitesse d'animation automatique : 3 500
N'hésitez pas à augmenter ou à diminuer la vitesse à ce que vous sentez le mieux.
Stylisme avancé
Classe CSS et CSS personnalisé
À ce stade, le curseur de publication est un ticker de publication fonctionnel pour la plupart. Mais il y a quelques ajustements avancés que nous pouvons ajouter pour nettoyer la conception.
Tout d'abord, ajoutez une classe CSS personnalisée comme suit :
- Classe CSS : et-post-ticker
Pour vous assurer que le titre du message reste sur une ligne à l'intérieur du curseur/ticker et masque le débordement avec des points de suspension, ajoutez le CSS suivant au titre de la diapositive :
padding-bottom:0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Pour donner aux flèches des diapositives une impression de bouton, ajoutez le CSS suivant aux flèches des diapositives :
height: 40px; width: 40px; line-height:40px; font-size: 28px; text-align: center; margin-top:-20px; background:#333;
CSS supplémentaire avec module de code pour le positionnement des flèches de diapositive
À ce stade, la fonctionnalité par défaut des flèches de la diapositive ne s'affichera qu'au survol et le placement des flèches se fera sur les côtés droit et gauche de la diapositive. Pour améliorer l'expérience utilisateur et la faire ressembler davantage à un téléscripteur, nous pouvons toujours afficher les flèches et les positionner à droite du curseur.
Pour ce faire, ajoutez un nouveau module de code sous le curseur de publication.
Collez ensuite le CSS suivant en vous assurant de l'envelopper avec les balises de style nécessaires.
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
right: 40px !important;
opacity: 1 !important;
left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
right: 0px !important;
opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
padding: 0 84px 0 3% !important;
}
Résultat final
Voici le résultat final sur une page en direct.
Remarquez comment le téléscripteur gère le débordement du texte du titre.
Et voici comment le téléscripteur s'empile bien sur l'écran du téléphone.
Ajout du téléscripteur à l'en-tête d'un modèle d'article de blog
Un cas d'utilisation évident pour ce téléscripteur consiste à afficher les articles récents sur un en-tête réel d'un modèle d'article de blog. Voici comment vous pouvez le faire.
Enregistrer la ligne dans la bibliothèque Divi
Tout d'abord, enregistrez la ligne contenant les éléments qui composent notre téléscripteur dans la bibliothèque Divi. Vous pouvez le faire en cliquant sur l'icône à trois points sur la ligne et en sélectionnant « Enregistrer dans la bibliothèque ». Donnez ensuite un nom à la mise en page et cliquez sur le bouton « Enregistrer dans la bibliothèque ».
Ajout de la ligne Post Ticker au modèle d'en-tête
Modifier l'en-tête personnalisé
Une fois la ligne enregistrée dans la bibliothèque, nous sommes prêts à l'ajouter à un en-tête personnalisé. Pour cet exemple, assurez-vous que le modèle est affecté à « Tous les messages ». Cliquez ensuite pour modifier l'en-tête personnalisé de ce modèle.
Insérer une ligne (Post Ticker) à partir de la bibliothèque
Dans l'éditeur de mise en page d'en-tête, cliquez pour ajouter une nouvelle ligne à l'endroit où vous souhaitez que le téléscripteur s'affiche.
Dans le modal Insérer une ligne, sélectionnez l'onglet Ajouter à partir de la bibliothèque. Recherchez la ligne de téléscripteur de billet de blog que vous avez précédemment enregistrée dans la bibliothèque et sélectionnez-la.
Maintenant, le téléscripteur apparaîtra sur l'en-tête.
Afficher les articles liés à la catégorie actuelle
Étant donné que ce téléscripteur ne sera affiché que sur les articles de blog, nous pouvons choisir d'afficher uniquement les articles liés à la catégorie actuelle.
Tout d'abord, nous devons mettre à jour le texte du titre dans notre module de texte en « Articles liés : ».
Ensuite, ouvrez les paramètres du curseur de publication. Sous Catégories incluses, sélectionnez l'option Catégorie actuelle.
Désormais, chaque article de blog aura un ticker d'article dans l'en-tête qui affiche les articles associés par catégorie actuelle.
Résultat sur le modèle d'article de blog
Voici l'animation automatique en action.
Voici comment vous pouvez cliquer sur les flèches de navigation pour passer aux articles suivants et précédents. Et cliquer sur le titre du message vous amène à ce message.
Et voici à quoi cela ressemble sur tablette et téléphone. 
Dernières pensées
Comme nous l'avons appris, nous pouvons créer facilement un ticker de billet de blog en simplifiant la conception du module de curseur de Divi et en apportant quelques ajustements personnalisés aux flèches de navigation. Et n'oubliez pas que vous pouvez toujours effectuer facilement des ajustements de style en utilisant toutes les options intégrées au curseur de publication. Espérons que cela sera utile pour tous les blogueurs et développeurs Web.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!