Nous savons tous que les curseurs sont parfaits pour attirer les utilisateurs avec un service, un produit ou une page en vedette dans un endroit pratique au-dessus du pli. Certains sites Web (je pense que les photographes) doivent publier une ou plusieurs de leurs galeries de photos sur la page d’accueil. L’utilisation d’un curseur peut être une excellente option. Cependant, vous n’avez peut-être pas envisagé d’afficher votre galerie de photos dans un tel curseur.

Dans ce tutoriel, je vais vous montrer un moyen simple d’intégrer des galeries d’images Divi dans vos diapositives pour créer un curseur de galerie de photos entièrement personnalisé dans Divi. L’astuce consiste à créer une galerie d’images WordPress dans la zone de contenu de votre curseur. Ensuite, tout ce que vous avez à faire est de vous assurer et de sélectionner l’option permettant d’utiliser la galerie Divi au lieu du style de galerie WordPress standard. C’est super facile et amusant à mettre en œuvre.

Commençons.

Avant goût

Voici un petit aperçu du curseur Galerie de photos que nous allons créer dans ce didacticiel.

    curseur de galerie de photos divi

    curseur de galerie de photos divi

Téléchargez GRATUITEMENT la disposition du curseur personnalisé de la galerie de photos

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger en utilisant le 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.

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON dans le Divi Builder.

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez disposer de la configuration suivante:

  1. Le thème Divi installé et actif
  2. Une nouvelle page créée pour reconstruire le frontal à partir de zéro (Visual Builder)
  3. Environ 6 à 8 images à utiliser pour l’image du curseur et la galerie de photos

Après cela, vous aurez une toile vierge pour commencer à créer des onglets de survol dans Divi.

Activez l’option Divi Gallery dans les options du thème Divi

Divi vous permet de remplacer l’affichage de la galerie WordPress standard par un affichage de la galerie Divi. Ainsi, lorsque vous créez une galerie WordPress et l’incorporez dans un module, la galerie s’affichera comme une galerie à l’aide du module Divi Gallery. De cette façon, vous pouvez essentiellement ajouter des galeries d’images Divi à n’importe quel module de Divi Builder. Dans notre cas, nous ajoutons une galerie Divi au module slider.

Pour modifier le paramètre, accédez à Divi> Options du thème. Cliquez ensuite sur l’onglet Général pour activer l’option Divi Gallery.

    curseur de galerie de photos divi

C’est ça! Maintenant, le shortcode de la galerie WordPress par défaut montre une galerie de photos de style Divi.

Création du curseur de galerie de photos personnalisé dans Divi

La section et la ligne

Pour commencer, créez une section régulière avec une seule ligne de colonne.

Ensuite, mettez à jour les paramètres de ligne comme suit:

  • Largeur: 100% (le curseur est donc pleine largeur sur les appareils mobiles)
  • Rembourrage: 0px au-dessus, 0px en dessous
  • Coins arrondis: 20px

    curseur de galerie de photos divi

Création du contenu du curseur

Ensuite, ajoutez un module de curseur à la ligne.

    curseur de galerie de photos divi

Ouvrez les paramètres du curseur et supprimez toutes les diapositives ajoutées par défaut. Cliquez ensuite sur l’icône d’engrenage sur la diapositive pour ouvrir les paramètres de diapositive de cette diapositive.

    curseur de galerie de photos divi

Ensuite, mettez à jour le contenu de la diapositive comme suit:

  • Titre: Notre galerie
  • Bouton: Tout afficher
  • Body: Ceci est notre galerie. Ecoutez.

    curseur de galerie de photos divi

Dans la zone Contenu du texte, cliquez sur le bouton Ajouter un média.

    curseur de galerie de photos divi

Dans la fenêtre contextuelle de la bibliothèque multimédia, sélectionnez l’onglet Créer une galerie en haut à gauche. Ensuite, sélectionnez 6 images que vous souhaitez utiliser pour la galerie et cliquez sur le bouton « Créer une nouvelle galerie » dans le coin inférieur droit.

    curseur de galerie de photos divi

Cela vous mènera à la page d’édition de la catégorie dans la fenêtre contextuelle. Ignorez les paramètres de la galerie en haut à droite, car les styles de la galerie Divi remplaceront ces paramètres de la galerie WordPress.

Cliquez ensuite sur le bouton « Insérer une galerie ».

    curseur de galerie de photos divi

Cela ajoutera un shortcode de galerie au contenu du module de curseur. Si vous souhaitez que la galerie apparaisse après le texte actuel, vous devez placer le shortcode après le contenu.

    curseur de galerie de photos divi

Vous avez maintenant une galerie de style Divi intégrée dans la zone de contenu de votre module de curseur. Des trucs assez cool!

Continuons à mettre à jour le contenu de nos diapositives en ajoutant une image de diapositive principale.

    curseur de galerie de photos divi

Maintenant que le contenu de notre curseur est prêt, enregistrez vos paramètres pour la diapositive 1.

Paramètres du curseur

Assurez-vous de sauvegarder les paramètres de chaque diapositive. Mettez ensuite à jour les paramètres de thème suivants pour le curseur principal. Cela garantit que les mises à jour de conception affectent chaque diapositive que vous ajoutez.

Bordure d’image et ombre de la boîte

  • Coins arrondis de l’image: 20px
  • Largeur de la bordure de l’image: 40 px (bureau), 0 px (tablette)
  • Couleur de la bordure de l’image: rgba (0,0,0,0)

    curseur de galerie de photos divi

  • Image Box Shadow: voir capture d’écran
  • Position horizontale de l’ombre de la boîte: -170px
  • Position verticale de l’ombre de la boîte: -220px
  • Force de propagation de l’ombre de la boîte: -60px
  • Couleur de l’ombre: rgba (255,255,255,0,2)

    curseur de galerie de photos divi

Titre et corps du texte

  • Police du titre: Karla
  • Alignement du texte du titre: à droite
  • Taille du texte du titre: 48px
  • Hauteur de la ligne de titre: 1,3em
  • Taille du corps du texte: 16px
  • Espacement des lettres du corps: 2px
  • Hauteur de la ligne du corps: 2em

    curseur de galerie de photos divi

Styles de bouton

  • Taille du texte du bouton: 16px
  • Couleur d’arrière-plan du bouton: # 333333
  • Largeur du cadre du bouton: 0px
  • Rayon du bord du bouton: 20px
  • Espacement des lettres clés: 2px
  • Police du bouton: Karla
  • Poids du clavier: gras
  • Symbole du bouton: voir capture d’écran
  • Alignement des touches: correct
  • Bord du bouton: -5em correct
  • Rembourrage des touches (bureau): 3em à gauche, 5em à droite
  • Rembourrage des touches (téléphone): 2em à gauche, 6em à droite

    curseur de galerie de photos divi

  • Button Box Shadow: voir capture d’écran
  • Position verticale de l’ombre de la boîte: 0px
  • Force de propagation de l’ombre de la boîte: 20px (bureau), 10px (téléphone)
  • Couleur de l’ombre: #ffffff

    curseur de galerie de photos divi

Rembourrage du curseur

  • Rembourrage: 10% au-dessus, 10% en dessous

    curseur de galerie de photos divi

Ajouter un dégradé d’arrière-plan à la diapositive 1

Maintenant que nous avons configuré le style du curseur, nous pouvons ajouter un dégradé d’arrière-plan personnalisé à notre diapositive unique. Ouvrez les paramètres de la diapositive pour la diapositive 1 et mettez à jour les éléments suivants:

  • Couleur de fond dégradé gauche: # 6d0066
  • Couleur d’arrière-plan droite du dégradé: # 000000
  • Type de dégradé: Radial
  • Direction radiale: en haut à gauche

    curseur de galerie de photos divi

Créer la diapositive 2

Pour créer la deuxième diapositive, vous pouvez simplement dupliquer la diapositive 1 à l’aide de l’icône de duplication. Ouvrez ensuite les paramètres de la diapositive dupliquée (diapositive 2).

    curseur de galerie de photos divi

À ce stade, vous pouvez mettre à jour le contenu de la nouvelle diapositive selon vos besoins. Par exemple, vous pouvez ajouter une nouvelle image de diapositive et générer un autre shortcode d’intégration de galerie pour ajouter une nouvelle galerie de photos à la diapositive.

Ensuite, mettez à jour l’historique d’arrière-plan comme suit:

  • Couleur de fond dégradé gauche: # 0c71c3

    curseur de galerie de photos divi

En bout de ligne

Voici la ligne du bas.

    curseur de galerie de photos divi

Et voici à quoi ressemble le curseur sur tablette et téléphone portable.

    curseur de galerie de photos divi

    curseur de galerie de photos divi

Et voici le curseur lorsque vous retirez les images de la diapositive afin que seuls le contenu de la diapositive et la galerie soient affichés.

    curseur de galerie de photos divi

Dernières pensées

La possibilité d’intégrer une galerie Divi dans le module de curseur de Divi ouvre la possibilité de créer de superbes curseurs de galerie de photos avec peu d’effort. Espérons que ce didacticiel vous donnera de l’inspiration pour créer de jolis curseurs de galerie de photos.

Pour plus d’informations sur cette technique d’intégration de la galerie Divi (y compris des astuces sur la conception de la galerie intégrée Divi), consultez l’article sur comment intégrer des galeries divi dans des bascules.

J’ai hâte de vous entendre dans les commentaires.

De bas en haut!





Source link

Recent Posts