Transformer votre module de blog en un carrousel avancé à glisser/glisser avec Divi & Slick

Pour de nombreux sites Web, les blogs sont devenus une partie importante de leur stratégie de référencement. Mais en plus de créer un contenu de haute qualité, il est également important de simplifier le processus de navigation de vos visiteurs. De cette façon, ils peuvent passer d'un article à l'autre et passer plus de temps sur votre site Web à lire le contenu que vous y publiez. Dans Divi, il existe un module de blog que vous pouvez utiliser pour afficher dynamiquement vos articles de blog et les styliser également. Si vous cherchez un moyen de faire passer l'expérience de recherche d'articles au niveau supérieur, vous allez adorer cet article. Nous allons vous montrer comment transformer le module de blog Divi intégré en un carrousel avancé à glisser/glisser avec les éléments intégrés de Divi et la bibliothèque gratuite slick js. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la disposition du carrousel de glissement du module de blog

Pour mettre la main sur la mise en page gratuite du carrousel à glissement déplaçable du module Blog, vous devez d'abord la télécharger à l'aide du 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 !

1. Créer une page de blog

Ajouter une nouvelle page

Commencez par ajouter une nouvelle page au site Web sur lequel vous travaillez. Donnez un titre à votre page, publiez la page et passez à Visual Builder.

Télécharger la mise en page du blog de l'entreprise de design d'intérieur

Dans ce didacticiel de cas d'utilisation, nous utiliserons la mise en page du blog Interior Design Company, mais vous êtes libre d'utiliser toute autre mise en page de votre choix.

2. Créez des conceptions de flèches précédentes et suivantes à l'aide de modules Blurb

Ajouter une nouvelle ligne en haut de la section

Structure des colonnes

Une fois que nous sommes à l'intérieur de la page du blog, nous pouvons commencer à créer le carrousel de balayage avancé et déplaçable. La première partie est consacrée à la conception des flèches dont nous avons besoin pour permettre aux visiteurs d'aller et venir entre les messages. Les flèches ne seront pas la seule option dont disposent les visiteurs pour naviguer dans le carrousel. Ils pourront également faire glisser le carrousel sur le bureau et glisser sur le mobile. Pour concevoir les flèches, nous utiliserons le module Blurb intégré de Divi mais vous êtes libre d'utiliser tout autre module de votre choix. Ajoutez une nouvelle ligne en haut de la section de votre blog en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de la ligne et laissez la ligne toucher les côtés gauche et droit de la section en modifiant les paramètres de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter un module de présentation

Ajouter un titre

Ensuite, ajoutez un module Blurb et insérez un titre.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Paramètres des icônes

Passez à l'onglet Conception et modifiez les paramètres de l'icône comme suit :

• Couleur de l'icône : #000000
• Icône de cercle : Oui
• Couleur du cercle : #f2f2f2
• Placement des images/icônes : en haut
• Alignement image/icône : Centre

Paramètres du texte du titre

Ensuite, modifiez les paramètres du texte du titre.

• Police du titre : Muli
• Poids de la police du titre : semi-gras
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000

Dimensionnement

Nous modifions ensuite les paramètres de dimensionnement du module sur différentes tailles d'écran.

• Largeur : 10 % (ordinateur de bureau), 20 % (tablette), 30 % (téléphone)
• Alignement du module : à droite

Classe CSS

Et nous allons également ajouter une classe CSS. Cette classe CSS nous aidera à déclencher l'action carrousel en cliquant plus tard dans le tutoriel.

• Classe CSS : bouton de retour

Élément principal CSS

Enfin, nous ajouterons également une ligne de code CSS à l'élément principal du module pour transformer le curseur en pointeur.

cursor: pointer;

Cloner la ligne et la placer au bas de la section

Une fois que vous avez terminé la première flèche, vous pouvez cloner l'intégralité du conteneur de lignes et placer la ligne en double à la fin de la section du blog.

Changer de titre

Ouvrez le module Blurb dans la ligne en double et modifiez le titre.

Changer l'icône

Avec l'icône.

Changer la classe CSS

Et modifiez également la classe CSS.

• Classe CSS : bouton suivant

3. Préparez le module de blog

Ouvrir la ligne contenant le module de blog

Dimensionnement

Une fois les flèches en place, il est temps de commencer à peaufiner le module Blog, en commençant par la ligne dans laquelle il est placé. Ouvrez les paramètres de la ligne et modifiez les paramètres de dimensionnement en conséquence :

• Largeur : 100 %
• Largeur maximale : 100 %

Visibilité

Ensuite, placez les débordements de la ligne à masqué. Cela aidera à garantir que le carrousel ne provoque pas l'apparition d'une barre de défilement horizontale dans notre page.

• Débordement horizontal : masqué
• Débordement vertical : caché

Modifier le module de blog

Masquer la pagination

Une fois les paramètres de ligne en place, ouvrez les paramètres du module de blog. Assurez-vous que la pagination est désactivée dans les paramètres des éléments.

• Afficher la pagination : Non

Disposition

Ensuite, passez à l'onglet Conception et modifiez la mise en page en pleine largeur.

• Disposition : pleine largeur

Recouvrir

Nous ajoutons également une superposition.

• Superposition de l'image en vedette : activée
• Couleur de l'icône de superposition : #ffffff
• Couleur de fond de superposition : rgba (1,0,66,0,33)

Classe CSS

Ensuite, nous ajouterons une classe CSS à notre blog, ce qui nous aidera à activer le carrousel plus tard dans le didacticiel.

• Classe CSS : module de blog

Post Meta CSS

Et nous allons générer de l'espace entre le post meta et l'extrait en ajoutant une marge inférieure à l'élément CSS post meta dans l'onglet avancé.

margin-bottom: 50px;

4. Ajouter la fonctionnalité Slick JS

Ajouter un module de code sous le module de blog

Une fois tous les paramètres Divi en place, il est temps d'ajouter la fonctionnalité slick js ! Ajoutez un module de code juste en dessous du module de blog (ou n'importe où ailleurs sur la page).

Ajouter des balises de script Slick JS

Ensuite, ajoutez la bibliothèque slick js dans les balises de script (comme vous pouvez le voir dans l'écran d'impression ci-dessous). Vous êtes également libre de les ajouter à la tête de votre site Web dans les paramètres du thème Divi.

src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js

Ajouter un code CSS de diapositive

Nous modifierons légèrement chaque article de blog à un niveau individuel en utilisant du code CSS. Assurez-vous de placer le code entre les balises de style comme indiqué dans l'écran d'impression ci-dessous.

.slick-slide {
float: left;
margin: 2vw;
}

Ajouter du code JQuery

Et enfin, nous ajouterons du code JQuery pour permettre au carrousel de balayage avancé et déplaçable de prendre sa forme. Dans le code ci-dessous, nous ajoutons également les boutons que nous avons conçus aux fonctionnalités du carrousel. Assurez-vous de placer le code dans les balises de script comme vous pouvez le voir dans l'écran d'impression ci-dessous.

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. Enregistrez la page et quittez Visual Builder pour afficher le résultat

Dans le Visual Builder, vous ne verrez pas le résultat. Alors, dès que vous avez terminé, enregistrez votre page, quittez le Visual Builder et visualisez le résultat sur votre site Web !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire passer la conception de votre module de blog au niveau supérieur. Plus précisément, nous vous avons montré comment transformer le module de blog intégré de Divi en un carrousel de balayage avancé et déplaçable à l'aide de la bibliothèque gratuite slick js. Nous avons également fourni le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.