Comment transformer le module de blog Divi en articles de blog carrousel

Publié: 2022-10-28

Dans Divi, il existe un module de blog qui peut afficher vos articles de blog de manière dynamique et vous pouvez également les styliser dans deux sélections de mises en page dès le départ, la mise en page pleine largeur qui affiche les articles empilés verticalement afin qu'un seul article apparaisse sur une seule ligne, et la grille mise en page qui place les articles de blog dans plusieurs colonnes créant ainsi une grille. Si vous utilisez le module depuis un certain temps, il y a de fortes chances que vous souhaitiez avoir un autre style en plus de la mise en page Grille et Pleine largeur pour vos articles de blog.

Auparavant, nous avons également rédigé des articles que vous pouvez essayer pour styliser vos articles de blog. L'un d'eux consiste à déplacer le contenu des articles de blog sur l'image sélectionnée pour le module de blog de mise en page en grille et un autre consiste à transformer vos articles de blog avec une mise en page pleine largeur en mise en page de liste.

Et cette fois, nous voulons vous montrer une autre personnalisation pour styliser vos articles de blog : transformer les articles de blog en carrousel avec une fonctionnalité déplaçable sur PC et glissable sur mobile pour naviguer dans les articles de blog comme l'animation suivante.

Transformer le module Divi Blog en carrousel

Étape 1 : créer une page ou modifier une page existante

Pour commencer à transformer votre module de blog Divi en carrousel, ajoutez une nouvelle page au site Web ou modifiez une page existante puis modifiez-la avec l'éditeur visuel Divi Builder. Pour ce didacticiel, nous allons créer une nouvelle page et utiliser les packs de mise en page préfabriqués de la mise en page du blog de Charter Boat .

Étape 2 : Créer les boutons Précédent et Suivant pour le carrousel

Une fois que vous avez chargé la mise en page, le module de blog chargera dynamiquement vos articles de blog. L'étape suivante consiste à créer les boutons précédent et suivant pour permettre à l'utilisateur d'aller et venir entre les messages.

Ajouter une nouvelle ligne pour les boutons de navigation

Commencez par ajouter une nouvelle ligne et déplacez-la juste au-dessus de la ligne du module de blog, puis utilisez la structure de colonne suivante.

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne , puis définissez la largeur de la ligne à 100 % de la largeur de la section en accédant à l'onglet Conception → Bloc de dimensionnement et en définissant à la fois la largeur et la largeur maximale sur 100 %.

Ajouter les modules Blurb pour les boutons

Une fois la ligne prête, ajoutez un module de présentation pour le premier bouton pour naviguer dans les publications. Nous choisissons le module de présentation pour le bouton car il propose de nombreuses options pour styliser l'icône du bouton que nous utilisons pour la navigation dans les publications.

Ouvrez les paramètres Blurb une fois que vous avez ajouté le module, appliquez les paramètres suivants au module :

  • Changez le titre en "Précédent"
  • Supprimer le corps du texte
  • Ouvrez le bloc Image et icône , basculez l'option Utiliser l'icône sur Oui et sélectionnez l'icône de la flèche vers la gauche.
  • Accédez à l'onglet Conception , puis ouvrez le bloc Image et icône pour modifier les paramètres de l'icône comme suit :
    • Couleur de l'icône : #000000
    • Couleur d'arrière-plan de l' image/de l'icône : #f2f2f2
    • Image/Icône Coin arrondi : 50px pour tous les coins
  • Ouvrez le bloc Texte du titre pour styliser le texte du titre comme suit :
    • Poids de la police du titre : semi-gras
    • Alignement du texte du titre : centré
  • Modifiez l'option de dimensionnement du module sur différentes tailles d'écran et ajustez son alignement vers la droite en allant dans le bloc Dimensionnement puis modifiez ses paramètres comme suit :
    • Largeur : Bureau = 10 %, Tablette = 20 %, Téléphone = 30 %
    • Alignement du module : à droite
  • Ajoutez une classe CSS personnalisée au module pour déclencher l'action du carrousel ultérieurement en accédant à l'onglet Avancé → bloc CSS ID & Classes , puis ajoutez la classe CSS personnalisée "bouton de retour" au champ Classe CSS .
  • Transformez le curseur en pointeur en ajoutant l'extrait CSS suivant au CSS personnalisé → Élément principal :
    • cursor: pointer;

Clonez la rangée de boutons et déplacez-la sous la rangée de blogs

Une fois le bouton précédent défini, clonons sa ligne et son module inclus afin de ne pas avoir à répéter les étapes, déplacez la ligne sous la ligne des articles de blog et modifiez simplement quelques paramètres sur le module de présentation cloné pour l'icône, le titre, et la classe CSS personnalisée pour le bouton suivant. Les paramètres modifiés sont les suivants :

  • Dans l'onglet Contenu , modifiez la valeur de :
    • Titre : Suivant
    • Icône : Flèche vers la droite
  • Passez ensuite à l'onglet Avancé pour changer la classe CSS
    • ID CSS & Classes → Classe CSS : bouton suivant

Étape 3 : préparez le module de blog

Préparez la rangée pour les articles du blog du carrousel

Avant de toucher au module, préparons d'abord la ligne du module de blog avant de le transformer en articles de blog carrousel. Commencez par ouvrir les paramètres de la ligne de blog , puis modifiez les paramètres comme suit :

  • Allez dans l'onglet Design → bloc Dimensionnement puis paramétrez :
    • Largeur : 100 %
    • Largeur maximale : 100 %
  • Allez dans l'onglet Avancé → bloc Visibilité :
    • Débordement horizontal : Caché
    • Débordement vertical : masqué

Les paramètres ci-dessus garantiront que le carrousel ne fera pas apparaître de barre de défilement horizontale dans votre page.

Préparer le module Blog

Une fois que vous avez préparé la ligne, il est temps de commencer à peaufiner le module de blog. Commencez par ouvrir les paramètres du blog , puis modifiez les paramètres comme suit :

  • Dans l'onglet Contenu → bloc Éléments , définissez le paramètre Afficher la pagination sur Non
  • Accédez à l'onglet Conception → Bloc de mise en page pour modifier la mise en page de l'article de blog en pleine largeur
    • Mise en page : pleine largeur
  • Ajoutez ensuite une superposition en ajoutant les valeurs suivantes sur le bloc Superposition
    • Superposition d'images sélectionnées : Activé
    • Couleur de l'icône de superposition : #ffffff
    • Couleur d'arrière-plan de superposition : rgba (1,0,66,0,33)
  • Toujours dans l'onglet Conception , ouvrez le bloc Image et sélectionnez l'un des effets d'ombre de la boîte de l'option Ombre de la boîte d'image pour ajouter un effet d'ombre à l'image sélectionnée et utilisez la couleur suivante :
    • RVB(1,0,66,0.33)
  • Passez à l'onglet Avancé , ajoutez une classe CSS personnalisée au module de blog pour activer le carrousel plus tard en ouvrant le bloc CSS ID & Classes puis ajoutez la classe CSS suivante :
    • Classe CSS : wpblog-module
  • Ajoutez un peu d'espace entre l'image sélectionnée et le titre ainsi qu'un peu d'espace entre la méta du message et l'extrait en ajoutant des marges. Pour ce faire, ajoutez l'extrait CSS suivant au bloc CSS personnalisé :
    • Titre : margin-top: 10px;
    • Post Meta : margin-bottom: 30px;

Et c'est tout pour les paramètres du module de blog. Transformons-le en un carrousel déplaçable et balayable, d'accord ?

Étape 4 : Transformez les articles du blog en un carrousel déplaçable et glissable

Une fois les paramètres du module de blog définis, il est maintenant temps de transformer les articles de blog en un carrousel déplaçable et balayable. Pour ce faire, nous devons ajouter une bibliothèque Slick JS et des codes personnalisés pour le faire fonctionner.

Ajouter la fonctionnalité Slick JS et Slide CSS

Slick JS est un plugin jQuery permettant de créer des carrousels entièrement personnalisables, réactifs et adaptés aux mobiles. Pour ajouter la fonctionnalité de Slick JS, ajoutez un module de code à n'importe quelle colonne de la page, ou vous pouvez ajouter le script suivant avec l'URL à l'en-tête de votre site Web en allant dans Divi → Options du thème Divi → Intégrations : 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Pour ce didacticiel, nous utilisons le module de code et y plaçons le code ci-dessus, puis nous ajoutons le code CSS de la diapositive suivante juste en dessous de la fin de la balise de script. 

 <Style>
	.slick-slide {
	flotteur : gauche ;
	marge : 2vw ;
	}
</style>

Laissez le carrousel prendre sa forme

Pour enfin laisser le carrousel déplaçable et glissable prendre sa forme, vous devrez ajouter le code JQuery suivant. Vous pouvez placer le code après le code CSS de la diapositive précédente. Sans plus tarder voici le code : 

 <script>
  jQuery(fonction($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('curseur'); 
postContainer.addClass('blog-carousel'); 
 
$('.blog-carousel').slick({
    infini : vrai,
    slidesToShow : 3,
    slidesToScroll : 1,
    CenterMode : vrai,
    rembourrage central : '10%',
    glisser : vrai,
    prevArrow : bouton de retour,
    flèche suivante : bouton suivant,
   
    réactif : [{
    point d'arrêt : 1079, paramètres : {
    slidesToShow: 1
    }
    }]
 
});
});
</script>

Le code ci-dessus permet également aux boutons Précédent et Suivant de fonctionner correctement en tant que boutons de navigation. Vous pouvez regarder l'image ci-dessous pour notre placement de code dans le module de code.

Étape 5 : Regardez vos articles de blog carrousel en direct

Maintenant, tous les codes requis sont déjà en place, cependant, le module de blog est toujours dans la disposition pleine largeur dans notre constructeur Divi. Comment venir?

Ne vous inquiétez pas, enregistrez la page et quittez le générateur visuel pour voir les articles de votre blog depuis le front-end. Et voilà, vos articles de blog sont transformés en un carrousel déplaçable et balayable avec les boutons suivant et précédent pour vous donner un autre moyen de naviguer dans les articles de blog du carrousel.

L'essentiel

Si vous utilisez le module de blog depuis un certain temps, il y a de fortes chances que vous souhaitiez avoir un autre style en plus de la mise en page Grille et Pleine largeur pour vos articles de blog qui sont la mise en page par défaut que vous pouvez obtenir dès le départ. Ce didacticiel vous a montré comment transformer vos articles de blog en un carrousel déplaçable et balayable qui vous donne plus d'options pour styliser les éléments de votre site Web tels que la page de blog ou les articles connexes.

Télécharger Divi