Utilisez Divi & amp; pour transformer votre module blog en Carrousel avancé glisser \/ glisser; Glissant

C’était un succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! 1. Créer une page de blog Ajouter une nouvelle page d’abord ajouter une nouvelle page au site Web que vous travaillez. Spécifiez un titre pour la page, Publiez la page, puis passez à Visual Builder. Télécharger la mise en page de la page de blog de l’entreprise de design d’intérieur dans ce tutoriel de cas d’utilisation, nous utiliserons la mise en page du blog de l’entreprise de design d’intérieur, mais vous êtes libre d’utiliser toute autre mise en page que vous choisissez. 2. Utilisez le module Blurb pour créer des éléments fléchés avant et après l’ajout d’une nouvelle ligne au début de la section structure de la colonne. Une fois que nous sommes entrés dans la page de blog, nous pouvons commencer à construire le Carrousel avancé glisser – déposer. La première partie est consacrée à la conception des flèches dont nous avons besoin pour permettre aux visiteurs de se déplacer entre les messages. Les flèches ne seront pas la seule option pour les visiteurs de naviguer dans le Carrousel. Ils peuvent faire glisser un manège sur le Bureau ou même sur le téléphone. Pour concevoir les flèches, nous utiliserons le module Blurb intégré de Divi, mais vous serez libre d’utiliser n’importe quel autre module de votre choix. Ajoutez une nouvelle ligne en haut de la Section Blog en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, activer les paramètres de ligne et permettre aux lignes de toucher légèrement les côtés gauche et droit du joint en changeant les paramètres de taille comme suit: largeur: 100% largeur maximale: 100% Ajouter un module Blurb ajouter un titre, puis ajouter un module Blurb et entrer un titre. Sélectionnez l’icône sélectionnez l’icône suivante. Les paramètres de l’icône passent à l’onglet conception et changent les paramètres de l’icône comme suit: couleur de l’icône: # 000000 icône ce
Rchio: is Circle color: # f2f2f2f2f2f2f2image \/ icon Location: TOP image \/ icon Alignment: Center Les paramètres du texte du titre changent ensuite les paramètres du texte du titre. Police de titre: Muli title font Weight: Half bold title text alignment: Central title text color: # 000000 Ensuite, nous changerons les paramètres de taille des modules sur différents écrans de taille. Largeur: 10% (bureau), 20% (tablette), 30% (téléphone) Alignement du module: à droite Classe CSS e nous ajouterons également une classe CSS. Cette classe CSS nous aidera à cliquer sur le tutoriel plus tard pour activer l’opération Carrousel.
Classe CSS: bouton arrière Enfin, et ce n’est pas le moins important, nous ajouterons également une ligne de code CSS à l’élément principal du module pour transformer le curseur en pointeur. Curseur: pointeur; Une fois la première flèche terminée, vous pouvez cloner l’ensemble du conteneur de ligne et placer les lignes dupliquées à la fin de la section blog. Changez le titre ouvrez le module Blurb dans la ligne dupliquée et changez le titre. Changez l’icône avec l’icône. Changez la classe CSS tout en changeant la classe CSS. Classe CSS: bouton Suivant 3. Préparez le module de blog qui contient la taille du blog. Une fois que vous avez placé la flèche, vous pouvez commencer à éditer le module de blog, en commençant par la ligne où vous avez placé le module de blog. Ouvrir les paramètres de ligne et modifier les paramètres de taille en conséquence: largeur: 100% largeur maximale: 100% La visibilité place ensuite le débordement de ligne dans un état caché. Cela vous aidera à vous assurer que le Carrousel n’affiche aucune barre de défilement horizontale sur la page. Débordement horizontal: masquer le débordement vertical: masquer Modifier le module masquer le blog
Lorsque les paramètres de la ligne de pagination sont prêts, ouvrez les paramètres du module blog. Assurez – vous que la mise en page est désactivée dans les paramètres du projet. Afficher la disposition: Non La mise en page se déplace ensuite vers l’onglet conception et modifie la mise en page à pleine largeur. Disposition: largeur hors tout Superposition nous avons également ajouté une superposition. Superposer l’image de premier plan: couleur de l’icône de superposition active: # FFFFFF superposer la couleur de fond: rgba (1,0,66,0,33) Ensuite, nous ajouterons une classe CSS à notre blog qui nous aidera à activer le Carrousel plus loin dans le tutoriel.
Classe CSS: module Blog CSS e Meta post génère de l’espace entre le Meta Post et l’extrait en ajoutant une marge inférieure à l’élément de Meta post CSS dans l’onglet avancé. Bord inférieur: 50px; 4. Ajouter la fonctionnalité slick JS ajouter le module de code sous le module blog une fois que tous les paramètres Divi sont prêts, il est temps d’ajouter la fonctionnalité slick JS! Ajoutez un formulaire de code directement sous le formulaire de blog (ou n’importe où ailleurs sur la page). Ajoutez l’étiquette de script slick JS, puis ajoutez la Bibliothèque slick JS à l’étiquette de script (comme le montre l’écran d’impression ci – dessous). Vous pouvez également les ajouter au titre 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 le Code de diapositives CSS nous utiliserons le code CSS pour éditer chaque billet de blog individuellement. Assurez – vous d’insérer le Code entre les étiquettes de style, comme indiqué sur l’écran d’impression ci – dessous. Glissière lisse
Flotteur: gauche;
Bénéfice: 2vw;
} Ajoutez le Code jquery, et enfin, et ce n’est pas le moins important, nous ajouterons le Code jquery pour permettre la formation avancée de carrousels glisser – déposer. Dans le code ci – dessous, nous avons également ajouté