L’entrée d’aujourd’hui a été soumise par Michelle Nunan de Divi Soup, la maison de Divi Kitchen, où elle crée constamment de nouveaux tutoriels et cours Divi utiles.


Les carrousels sont une fonctionnalité de site Web populaire. Ils vous permettent d’afficher plus de contenu sans prendre d’espace de stockage supplémentaire, et ils ajoutent un élément d’interactivité à votre site Web qui peut encourager vos visiteurs à être plus interagissants avec votre contenu.

Il existe un certain nombre d’excellents plugins qui peuvent être utilisés pour afficher votre contenu dans un carrousel. Cependant, dans cet article, je vais vous montrer comment créer un carrousel cliquable à partir des modules Divi en utilisant uniquement CSS et Javascript.

Cet effet peut être utilisé avec presque tous les modules Divi standard ou une combinaison de modules. Je vais vous montrer comment créer ce carrousel en utilisant le module image, puis le module blog car le processus est un peu différent. À partir de là, vous devez comprendre comment utiliser presque tous les modules standard pour créer votre propre carrousel.

Résultat

C’est ce que vous devriez avoir à la fin après avoir créé un carrousel avec le module blog

Cliquez-carrousel-result-880

Vous pouvez en voir un Démo en direct ici Montrant l’effet avec différents modules Divi Builder.

Alors, commençons.

Ajouter une nouvelle page

Nous allons commencer par créer un carrousel avec le module image. Ajoutez une nouvelle page ou ouvrez une page à laquelle vous souhaitez ajouter le carrousel.

Ajouter une nouvelle section

Ajoutez une nouvelle section standard à une seule colonne à votre page. Ensuite, ouvrez Paramètres de la section et ajoutez la classe dans l’onglet Avancé section carrousel ds dans le champ de classe CSS.

Cliquez sur le carrousel 1

Puisque nous allons changer la façon dont les sections et les lignes sont affichées, nous aimerions que ces modifications soient appliquées uniquement à notre carrousel. Nous ajoutons donc une classe personnalisée pour empêcher notre code d’affecter d’autres éléments de notre site.

Enregistrez puis quittez la section.

Ouvrez maintenant les paramètres de ligne et ajoutez la classe dans l’onglet Avancé série ds carrousel dans le champ de classe CSS. Enregistrez puis quittez la ligne.

Cliquez sur le carrousel 2

Ensuite, nous allons ajouter un module d’image à notre ligne. Cliquez sur Insérer un module et sélectionnez le module d’image dans la liste.

Dans l’onglet Contenu du module Image, cliquez sur Télécharger l’image et sélectionnez l’image souhaitée dans la bibliothèque multimédia ou téléchargez-en une nouvelle.

Cliquez sur le carrousel 3

Si vous souhaitez que vos images s’ouvrent dans une boîte à lumière, sélectionnez cette option dans Paramètres.

Cliquez sur le carrousel 4

Vous pouvez également ajouter une URL pour ouvrir une nouvelle page lorsque vous cliquez sur l’image si vous le souhaitez.

Cliquez sur le carrousel 5

La dernière chose que nous devons faire est d’ajouter une classe au module. Cliquez sur l’onglet Avancé et ajoutez la classe module carrousel ds dans le champ de classe CSS. Enregistrez puis quittez le module.

Cliquez sur le carrousel 6

C’est l’un de nos modules, mais nous aurons besoin de plus d’une seule image pour créer le carrousel. Le code que je fournirai plus tard dans cet article affichera 5 images à la fois. Nous avons donc besoin d’au moins 6 images pour que nos boutons de carrousel aient un effet et déplacent notre contenu.

Utilisez la fonction de clonage de Divi pour dupliquer le module d’image autant de fois que vous voulez que les images apparaissent dans votre carrousel.

Cliquez sur le carrousel 7

Lorsque vous avez terminé, votre section devrait ressembler à ceci avec vos modules d’image empilés sur une seule ligne.

Cliquez sur le carrousel 8

Vous devrez ouvrir les paramètres de chaque module et échanger vos images et votre URL lorsque vous les avez ajoutés.

Ceci termine la configuration du contenu. Créons maintenant la navigation.

Ajouter une nouvelle section

Ajoutez une nouvelle section juste en dessous de votre section d’image, cette fois avec deux colonnes.

Ouvrez les paramètres de ligne et ajoutez la classe dans l’onglet Avancé série de flèches DS dans le champ de classe CSS. Enregistrez puis quittez la ligne.

Cliquez sur le carrousel 9

Ajouter la navigation

Ensuite, ajoutez un module de texte à chacune des deux colonnes de cette ligne.

Cliquez sur le carrousel 10

Nous devons maintenant créer des champs de saisie qui serviront de boutons de navigation. Ouvrez le module de texte dans la colonne de gauche et collez le code HTML suivant dans la zone de contenu:

Cliquez sur le carrousel 11

Enregistrez puis quittez le module.

Ensuite, ouvrez le module de texte dans la colonne de droite et collez le code HTML suivant:

Cliquez sur le carrousel 12

Enregistrez puis quittez le module.

Nous attribuons à ces champs de saisie des identifiants uniques de ds-flèche-gauche et ds-arrow-right Par conséquent, nous pouvons les formater tous les deux avec CSS et les cibler avec JavaScript pour leur dire quoi faire lorsque l’utilisateur clique dessus.

Les valeurs de 8 et 9 se réfèrent aux doubles flèches à gauche et à droite du Modules ET de la famille de polices.

C’est tout ce que nous avons à faire dans le constructeur. Maintenant, si vous vérifiez le front-end de votre page, il ne s’agit que d’une seule colonne d’images, puis de deux petits boutons gris avec un 8 et un 9 qui ne font rien. Alors passons à la partie amusante et ajoutons notre code.

Ajouter le CSS

Je recommanderais d’ajouter le CSS suivant à votre sous-section. Cependant, si vous n’avez pas de sous-section, vous pouvez ajouter Divi> Options du thème> Général> CSS personnalisé et cliquez sur Enregistrer.

Cliquez sur le carrousel 13

/*Hide the section overflow*/
.ds-carousel-section {
    width: 100%;
    overflow: hidden;
}

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1000vw !important;
    }
}

/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
    color: #fff;
    background: gray;
    font-family: 'ETModules';
    font-size: 30px;
    padding: 5px 30px;
    border-style: none;
    border-radius: 0;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/*Position the left arrow*/
#ds-arrow-left {
    float: right;
    margin-right: 5px;
}

/*Position the right arrow*/
#ds-arrow-right {
    float: left;
    margin-left: 5px;
}

/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
    -webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}

/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
    -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}

/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
    float: left;
    width: 100% !important;
    margin-right: 0 !important;
}

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

Modifiez le CSS à votre guise

Selon le nombre de modules que vous utilisez dans votre carrousel, vous devrez peut-être modifier certaines des déclarations CSS.

Maintenant pour un peu de maths!

Cette déclaration définit la largeur de la ligne contenant les modules.

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 1000vw;
    max-width: 1000vw;
}

Pour faire flotter nos modules côte à côte, certains étant assis à l’extérieur de la zone visible, nous devons augmenter la largeur de la rangée.

Si vous montrez un total de 15 modules avec 5 par page, vous obtiendrez 3 pages. La largeur visible de la ligne doit donc être:

(15/5) x 100 = 300.

Vous devez donc changer les valeurs de 1000vw à un minimum de 300vw. (Peu importe si vous insérez un plus grand nombre, car le JavaScript garantit qu’aucune page vierge supplémentaire ne sera affichée.) Ainsi, votre CSS personnalisé ressemblerait à ceci:

/*Set the row width*/
.ds-carousel-row {
    overflow: hidden;
    width: 300vw;
    max-width: 300vw;
}

C’est un peu différent avec les requêtes médiatiques. Étant donné que le CSS est configuré pour afficher 3 images par page sur des écrans de 1024 pixels de large et moins et 1 image par page sur des écrans de 479 pixels de large ou moins, nous devons ajuster les calculs pour refléter:

(15/3) x 100 = 500 (pour les tablettes)
(15/1) x 100 = 1500 (pour les téléphones portables)

Votre CSS personnalisé ressemblerait à ceci:

@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 500vw !important;
    }
}

@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
    .ds-carousel-section .ds-carousel-row {
        max-width: 1500vw !important;
    }
}

Si vous le souhaitez, vous pouvez modifier toutes ces valeurs en une largeur supérieure au nombre total de modules que vous utilisez pour plus de commodité. Dans l’exemple ci-dessus, cette valeur serait de 1500 VW ou plus.

Vous pouvez également modifier le nombre de modules affichés par page. Vous pouvez l’adapter dans cette déclaration CSS.

/*Set the module width*/
.ds-carousel-module {
    width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
    padding: 0 30px;
    float: left;
    position: relative;
    margin-bottom: 0 !important;
}

La valeur de largeur de 20vw montre 5 images par page, et ce n’est qu’un pourcentage de 100. Ainsi, 25vw afficherait 4 images par page, et 16.66vw afficherait 6 images par page, et ainsi de suite.

Vous pouvez faire de même pour les requêtes multimédias:

/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
    /*Show 3 modules per page on tablets*/
    .ds-carousel-module {
        width: 33.33vw;
    }
    /*Align the navigation on smaller screens*/
    #ds-arrow-row .et_pb_column {
        width: 50% !important;
    }
}

@media all and (max-width: 479px) {
    /*Show 1 module per page on mobiles*/
    .ds-carousel-module {
        width: 100vw;
    }
}

N’oubliez pas que si vous modifiez le nombre d’images affichées par page, vous devrez peut-être également ajuster la valeur de largeur de ligne décrite précédemment.

Maintenant, si vous vérifiez à nouveau votre page, elle devrait être bien conçue et ressembler à un carrousel. Cependant, pour que cela fonctionne, nous devons ajouter JavaScript.

Ajouter le JavaScript

Copiez et collez le code suivant dans votre blog dans Divi> Options de conception> Intégrations> Code. Sauve le.

Cliquez sur le carrousel 14

This code adds functionality to our buttons, moving the row left and right on click to display the modules.

There are a couple areas you may want to edit:

var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;

Le mn_visible = 5; La variable correspond au nombre de modules qui sont affichés par page sur le bureau. Si vous avez changé cela dans le CSS comme mentionné ci-dessus, vous voudrez également changer cette valeur.

Cette fonction ajuste également le nombre d'images affichées sur les tablettes et les téléphones. Si vous avez changé cela dans le CSS, ajustez également les valeurs mn_visible ici.

function mn_set_visible() {
	if ($(window).width() 

Finally, we have the speed at which the carousel moves. It is set here as 1000. This is the speed in milliseconds: 1000 milliseconds = 1 second.

You can adjust this value to speed up or slow down the animation.

function mn_next_slide(item) {
		mn_end_index = ( item.length / mn_visible ) - 1; //End index
	
		if (mn_index  0) {
			 mn_index--; 
			 item.animate({'left':'+=100vw'}, 1000);
		}
}

function mn_first_slide(item) {
		if (mn_index > 0) {
			 var move_vw = (100 * mn_index);
			 item.animate({'left':'+='+move_vw+'vw'}, 1000);
			 mn_index = 0; 
		}
}

C'est ça! Maintenant, lorsque vous affichez votre page, vous devriez avoir un carrousel cliquable de modules d'image.

Comme mentionné précédemment, vous pouvez utiliser cette méthode avec presque tous les modules standard de Divi Builder. Cependant, vous devrez peut-être ajuster les paramètres avec des modules conçus pour afficher des flux tels que le module Blog.

Étant donné que le module de blog extrait les articles et les affiche dans plusieurs colonnes (lors de l'utilisation de la fonction de grille), les paramètres du module et un peu de CSS supplémentaire devraient être ajustés.

Carrousel avec le module blog

Suivez les mêmes étapes pour configurer votre section et votre ligne.

Au lieu d'ajouter un module d'image, sélectionnez le module de blog et ajoutez-le module carrousel ds Classe sur l'onglet Avancé des paramètres du module.

Cliquez sur le carrousel 15

Ensuite, dans l'onglet Conception, sélectionnez Grille dans la liste déroulante Disposition.

Vous pouvez le laisser en pleine largeur si vous le souhaitez, mais l'option Grille ajoutera automatiquement un style qui correspond mieux à la disposition du carrousel.

Cliquez sur le carrousel 16

Nous devons maintenant ajuster certains paramètres dans l'onglet Contenu.

Pour ce premier module, nous devons définir le numéro des postes à 1 et le numéro de décalage à 0.
La manière dont vous ajustez le reste des paramètres et le contenu que vous affichez dépend entièrement de vous. Puis enregistrez et quittez.

Cliquez sur le carrousel 17

Comme auparavant, utilisez la fonction de clonage de Divi pour dupliquer le module autant de fois que nécessaire.

Cliquez sur le carrousel 18

Une fois que vous avez le nombre de modules de blog dont vous avez besoin, ouvrez chacun d'eux et augmentez le nombre de décalage de 1 à chaque fois afin que chaque module de blog affiche le prochain article dans le fil.

Cliquez sur le carrousel 19

Ainsi, vos paramètres ressembleraient à ceci:

1er = numéro de décalage: 0
2. = numéro de décalage: 1
3. = numéro de décalage: 2
4. = numéro de décalage: 3
Etc.

Étant donné que le module Blog est affiché dans des colonnes lors de l'utilisation du format de grille, nous devons ajouter cette requête multimédia supplémentaire à notre CSS pour remplacer le paramètre de colonne de Divi sur des écrans plus petits:

@media all and (max-width: 980px) {
    /*Set post to fullwidth on smaller screens*/
    .ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
        width: 100% !important;
        margin: 0 !important;
    }
}

Si vous souhaitez utiliser le module de blog en mode pleine largeur, vous n'avez pas besoin de l'ajouter.

Résultat

Maintenant, consultez votre page et voyez votre magnifique nouveau carrousel de blog 🙂

Cliquez-carrousel-result-880

Dernières pensées

Il existe de nombreuses façons d'utiliser cet effet de carrousel pour afficher plus de contenu sans augmenter la longueur de votre page.

Vous pouvez afficher une présentation de la conception de votre site Web, des témoignages, des biographies d'employés, des vidéos, des podcasts ou même des produits de votre magasin.

J'aimerais savoir comment vous utilisez ce tutoriel pour créer un carrousel cliquable à l'aide des modules Divi. Veuillez laisser un commentaire dans la section ci-dessous!

Image sélectionnée de aunaauna / Shutterstock.com



Source link

Recent Posts