Sélectionner une page


Chaque semaine, nous vous fournissons de nouveaux packages de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l’un des packages de mise en page, nous partageons également un cas d’utilisation qui peut vous aider à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous vous montrons comment créer un carrousel automatisé à l’aide de Divi, Slick.js et du pack de mise en page Ice Cream Shop. Nous allons commencer par ajouter la bibliothèque Slick JS à notre site Web, puis la faire fonctionner dans le Divi Builder. C’est un excellent moyen de créer un carrousel automatique pour tout type de module que vous souhaitez présenter. Vous pouvez également télécharger le fichier JSON gratuitement!

Commençons.

Aperçu

Avant d’entrer dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Bureau

carrousel automatique

Téléphone portable, téléphone portable

carrousel automatique

Téléchargez GRATUITEMENT la mise en page du carrousel automatique

Pour mettre la main sur la disposition gratuite du carrousel automatique, vous devez d’abord la télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

Assurez-vous d’inclure le fichier Slick.js dans vos balises de tête! Sans cela, cela ne fonctionnera pas. Voir la première étape ci-dessous.

1. Ajoutez Slick JS à votre intégration de thème Divi

Aller aux options du thème Divi

La première partie de ce tutoriel est très importante. Ajout de Slick.js à votre site Web. Pour ce faire, accédez aux options de votre thème Divi.

carrousel automatique

Ajouter Slick.js aux balises Head

Accédez à l’onglet Intégration et ajoutez le fichier Slick.js aux balises head de votre site Web.

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

carrousel automatique

2. Créez une nouvelle page avec la disposition du menu du glacier

Ajouter une nouvelle page

Allez-y en ajoutant une nouvelle page à votre site Web. Donnez un titre à votre page, publiez la page et passez à Divi Builder.

carrousel automatique

Télécharger la disposition du menu du glacier

Pour ce didacticiel, nous utiliserons la disposition du menu du pack de disposition du magasin de crème glacée. Cependant, vous pouvez également utiliser toute autre page / mise en page de votre choix.

carrousel automatique

2. Ajoutez une nouvelle section à la page

Ajouter une nouvelle section

La prochaine étape de la création du carrousel automatique consiste à ajouter une nouvelle section à votre page.

carrousel automatique

Couleur de l’arrière plan

Ouvrez les paramètres de la section et modifiez la couleur d’arrière-plan.

  • Couleur d’arrière-plan: # f5f5f5

carrousel automatique

Diviseur inférieur

Ajoutez également un séparateur inférieur à la section.

  • Style de pièce: rechercher dans la liste
  • Couleur du séparateur: #ffffff
  • Poids du diviseur: 10vw

carrousel automatique

distance

Avec un peu de rembourrage au sol.

carrousel automatique

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant la première ligne avec la structure de colonnes suivante:

carrousel automatique

Ajouter le module de texte de titre à la colonne

Ajouter du contenu H2

Ajoutez un module de texte à la colonne de la ligne et insérez un contenu H2 de votre choix.

carrousel automatique

Paramètres de texte H2

Accédez à l’onglet Conception et modifiez les paramètres de texte H2 en conséquence:

  • Police du titre 2: invite de commandes
  • Titre 2 Épaisseur de la police: ultraléger
  • Alignement du texte du titre 2: milieu
  • Taille du texte du titre 2: 60 px (bureau), 40 px (tablette), 25 px (téléphone)
  • Titre 2 hauteur de ligne: 1.2em

carrousel automatique

Dimensionnement

Modifiez également les paramètres de taille du module.

  • Largeur maximale: 800px
  • Orientation du module: centre

carrousel automatique

3. Attribuez une nouvelle ligne à une seule colonne au curseur automatique

Ajouter une nouvelle ligne

Structure de la colonne

Pour créer le carrousel automatique, nous devons attribuer une nouvelle ligne aux éléments que nous voulons placer dans le carrousel. Assurez-vous de sélectionner une ligne avec une seule colonne. Dans les prochaines étapes, nous transformerons cette colonne en un carrousel automatique.

carrousel automatique

Dimensionnement

Ouvrez les paramètres de ligne sans ajouter de modules et laissez la ligne remplir la largeur de l’écran dans les paramètres de taille.

  • Largeur: 100%
  • Largeur maximale: 100%

carrousel automatique

distance

Ajoutez une bordure supérieure et ensuite, supprimez tous les tampons supérieurs et inférieurs standard.

  • Marge supérieure: 50px
  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

carrousel automatique

Les débordements

Nous nous assurons également que rien ne bat le conteneur de lignes en masquant les débordements.

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

carrousel automatique

Paramètres de colonne

Allez-y en ouvrant les paramètres de colonne.

carrousel automatique

Classes CSS

Ajoutez deux classes CSS différentes à la colonne. Assurez-vous de laisser un espace entre eux. Plus tard dans ce didacticiel, nous utiliserons ces classes pour créer le carrousel automatique.

  • Classe CSS: curseur d’élément de crème glacée

carrousel automatique

Ajouter le premier élément slider à la colonne (module d’appel à l’action)

Contenu standard

Il est temps d’ajouter le premier élément de carrousel! Nous utilisons un module d’appel à l’action, mais nous pouvons utiliser tout autre module de votre choix. Entrez le contenu de votre choix.

carrousel automatique

Survolez le contenu

Remplacez le titre et le contenu du texte par un caractère vide (comme suit: « ) pour supprimer le contenu au survol.

carrousel automatique

raccourci

Assurez-vous d’ajouter également un lien vers le module pour que le bouton apparaisse.

carrousel automatique

Fond dégradé standard

Ensuite, allez dans les paramètres d’arrière-plan et ajoutez un arrière-plan dégradé.

  • Couleur 1: # 8300e9
  • Couleur 2: rgba (41, 196, 169, 0)
  • Type de dégradé: Radial
  • Direction radiale: vers le haut
  • Position de départ: 35%
  • Position finale: 35%

carrousel automatique

Supprimer l’arrière-plan dégradé de survol

Supprimez l’arrière-plan dégradé en flottant.

carrousel automatique

image de fond

Téléchargez également une image d’arrière-plan pertinente.

carrousel automatique

Paramètres du texte du titre

Basculez vers l’onglet Conception et modifiez les paramètres du texte du titre en conséquence:

  • Police du titre: invite
  • Taille du texte du titre: 2vw (bureau), 4vw (tablette), 5vw (téléphone)
  • Hauteur de la ligne de titre: 2vw (bureau), 3vw (tablette), 4vw (téléphone)

carrousel automatique

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

  • Police du corps: Open Sans
  • Taille du corps du texte: 0,9 VW (bureau), 2 VW (tablette), 2,5 VW (téléphone)
  • Hauteur de la ligne du corps: 1 VW (bureau), 2 VW (tablette), 3 VW (téléphone)

carrousel automatique

Paramètres des boutons

Ensuite, allez dans les paramètres du bouton et concevez le bouton comme ceci:

  • Utiliser des styles de boutons personnalisés: Oui
  • Taille du texte du bouton: 0,9 VW (bureau), 1,5 VW (tablette), 2 VW (téléphone)
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # 000000 (par défaut), # ff6f7e (survol)
  • Largeur du cadre du bouton: 0px

carrousel automatique

  • Rayon du bord du bouton: 0px
  • Espacement des lettres clés: 2px
  • Police du bouton: invite de commande
  • Poids de la police clé: Normal
  • Style de bouton: majuscule

carrousel automatique

  • En haut: 19 VW (bureau), 30 VW (tablette), 45 VW (téléphone)
  • Rembourrage supérieur: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Rembourrage au sol: 1vw (bureau), 2vw (tablette), 3vw (téléphone)
  • Rembourrage gauche: 2vw (bureau), 4vw (tablette), 5vw (téléphone)
  • Sellerie droite: 2vw (bureau), 4vw (tablette), 5vw (téléphone)

carrousel automatique

Dimensionnement

Nous modifions également la largeur et la hauteur du module.

  • Largeur: 23vw
  • Hauteur: 23 VW (bureau), 50 VW (tablette), 80 VW (téléphone)

carrousel automatique

distance

Enfin, accédez aux paramètres d’espacement et ajoutez des valeurs de marge et de remplissage personnalisées.

  • Marge gauche: 1vw
  • Marge droite: 1vw
  • Rembourrage supérieur: 2vw (bureau), 4vw (tablette), 6vw (téléphone)

carrousel automatique

4. Clonez le curseur autant de fois que vous le souhaitez

Clonez le module CTA quatre fois

Une fois que vous avez terminé le premier module CTA, vous pouvez le cloner autant de fois que vous le souhaitez. Chaque module de cette colonne fait partie du carrousel automatique.

carrousel automatique

Changer le contenu, l’arrière-plan dégradé et le fond d’écran pour chaque doublon

Assurez-vous de changer le contenu, l’arrière-plan dégradé et le fond d’écran de chaque duplicata pour rendre chaque module CTA unique.

carrousel automatique

5. Ajoutez une nouvelle ligne sous la précédente

Ajoutez la ligne suivante et la dernière à la section avec la structure de colonne suivante:

carrousel automatique

Insérez le premier module de code avec le code jQuery

Ajouter un nouveau module de code à la colonne

Ajoutez un premier module de code à la colonne.

carrousel automatique

Insérer du code CSS

Collez les lignes suivantes de code CSS:

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

carrousel automatique

Insérez le deuxième module de code avec le code CSS

Ajouter un nouveau module de code à la colonne

Ajoutez un autre module de code juste en dessous du précédent.

carrousel automatique

Collez le code jQuery

Collez les lignes suivantes de code jQuery:

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

carrousel automatique

Après avoir ajouté le code CSS et jQuery, vous pouvez quitter le constructeur visuel pour voir le résultat!

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

carrousel automatique

Téléphone portable, téléphone portable

carrousel automatique

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser Divi, slick.js et le pack de mise en page Ice Cream Shop pour créer un carrousel automatique. C’est un excellent moyen d’ajouter de l’interaction à votre site Web. Vous pouvez faire cette technique avec n’importe quel type de module que vous souhaitez afficher! Si vous avez des questions ou des suggestions, veuillez laisser un commentaire dans la section des commentaires ci-dessous.

Si vous voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts