Comment créer un curseur de galerie de photos personnalisé dans Divi
Publié: 2019-06-10Nous savons tous que les curseurs sont parfaits pour attirer les utilisateurs avec des services, des produits ou des pages en vedette dans un emplacement pratique au-dessus de la ligne de flottaison. Certains sites (je pense aux photographes) doivent présenter une ou plusieurs de leurs galeries de photos sur la page d'accueil. L'utilisation d'un curseur pour cela peut être une bonne option. Cependant, vous n'avez peut-être pas envisagé de présenter votre galerie de photos dans un curseur comme celui-ci.
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, il vous suffit de vous assurer et de sélectionner l'option permettant d'utiliser la Galerie Divi au lieu du style de la Galerie WordPress par défaut. C'est super facile et amusant à mettre en œuvre.
Commençons.
Aperçu
Voici un aperçu du curseur de la galerie de photos que nous allons construire dans ce tutoriel.
Téléchargez GRATUITEMENT la mise en page personnalisée du curseur de la galerie de photos
Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le 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 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.
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 !
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 tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin de la configuration suivante :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- 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.
Activer l'option Galerie Divi dans les options du thème Divi
Divi vous permet de remplacer l'affichage par défaut de la galerie WordPress par un affichage de la galerie Divi. Ainsi, chaque fois que vous créez une galerie WordPress et que vous l'intégrez dans un module, la galerie s'affiche comme une galerie à l'aide du module Divi Gallery. Cela vous permet essentiellement d'ajouter des galeries d'images Divi à n'importe quel module du Divi Builder. Dans notre cas, nous ajouterons une Divi Gallery au module slider.
Pour modifier le paramètre, accédez à Divi > Options du thème. Ensuite, sous l'onglet Général, cliquez pour activer l'option Divi Gallery.
C'est ça! Désormais, le shortcode par défaut de la galerie WordPress affichera une galerie de photos de style Divi.
Création du curseur de galerie de photos personnalisé dans Divi
La section et la rangée
Pour lancer les choses, allez-y et créez une section régulière avec une ligne à une colonne.
Mettez ensuite à jour les paramètres de ligne comme suit :
- Largeur : 100 % (le curseur sera donc en pleine largeur sur mobile)
- Remplissage : 0px en haut, 0px en bas
- Coins arrondis : 20px
Construire le contenu du curseur
Ensuite, ajoutez un module de curseur à la ligne.
Ouvrez les paramètres du curseur et supprimez l'une des diapositives ajoutées par défaut. Cliquez ensuite sur l'icône d'engrenage sur la diapositive pour ouvrir les paramètres de diapositive pour cette diapositive.
Mettez ensuite à jour le contenu de la diapositive avec les éléments suivants :
- Titre : Notre galerie
- Bouton : Tout afficher
- Corps : Ceci est notre galerie. Vérifiez-le.
Sous la zone de contenu du corps, cliquez sur le bouton Ajouter un média.
Dans la fenêtre contextuelle de la bibliothèque multimédia, sélectionnez l'onglet Créer une galerie en haut à gauche. Sélectionnez ensuite 6 images que vous souhaitez utiliser pour la galerie et cliquez sur le bouton « Créer une nouvelle galerie » en bas à droite.
Cela vous amènera à la page de modification 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 ».
Cela place un shortcode de galerie dans le contenu du module de curseur. Si vous souhaitez que la galerie s'affiche après le corps du texte actuel, assurez-vous de placer le shortcode après le contenu.
Vous avez maintenant une galerie intégrée de style Divi affichée dans la zone de contenu de votre module de curseur. Des trucs plutôt cool !
Continuons à mettre à jour notre contenu de diapositive en ajoutant une image de diapositive principale.
Maintenant que notre contenu de curseur est prêt à être utilisé, enregistrez vos paramètres pour la diapositive 1.
Paramètres du curseur
Assurez-vous d'enregistrer les paramètres de la diapositive individuelle. Mettez ensuite à jour les paramètres de conception suivants pour le curseur principal. Cela garantira que les mises à jour de conception affecteront toutes les diapositives individuelles que vous ajouterez.
Bordure de l'image et ombre de la boîte
- Coins arrondis de l'image : 20px
- Largeur de la bordure de l'image : 40 px (ordinateur de bureau), 0 px (tablette)
- Couleur de la bordure de l'image : rgba(0,0,0,0)
- 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)
Titre et corps du texte
- Police du titre : Karla
- Alignement du texte du titre : à droite
- Taille du texte du titre : 48 px
- Hauteur de la ligne de titre : 1,3 em
- Taille du corps du texte : 16px
- Espacement des lettres du corps : 2px
- Hauteur de la ligne du corps : 2 em
Styles de boutons
- Taille du texte du bouton : 16px
- Couleur d'arrière-plan du bouton : #333333
- Largeur de la bordure du bouton : 0px
- Rayon de bordure de bouton : 20px
- Espacement des lettres des boutons : 2px
- Police des boutons : Karla
- Police du bouton Poids : gras
- Icône du bouton : voir capture d'écran
- Alignement des boutons : à droite
- Marge du bouton : -5em à droite
- Rembourrage des boutons (bureau): 3em à gauche, 5em à droite
- Rembourrage des boutons (téléphone) : 2 em à gauche, 6 em à droite
- 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 : 20 pixels (ordinateur de bureau), 10 pixels (téléphone)
- Couleur de l'ombre : #ffffff
Rembourrage du curseur
- Rembourrage : 10 % haut, 10 % bas
Ajout d'un dégradé d'arrière-plan à la diapositive 1
Maintenant que le style du curseur est en place, nous pouvons ajouter un dégradé d'arrière-plan personnalisé à notre diapositive individuelle. Ouvrez les paramètres de diapositive pour la diapositive 1 et mettez à jour les éléments suivants :
- Couleur de fond du dégradé de gauche : #6d0066
- Dégradé de fond à droite : #000000
- Type de dégradé : Radial
- Direction radiale : en haut à gauche
Création de la diapositive 2
Pour créer la deuxième diapositive, nous pouvons simplement dupliquer la diapositive 1 à l'aide de l'icône dupliquer. Ensuite, ouvrez les paramètres de la diapositive dupliquée (diapositive 2).
À 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 code court d'intégration de galerie pour ajouter une nouvelle galerie de photos à la diapositive.
Mettez ensuite à jour le dégradé d'arrière-plan comme suit :
- Dégradé de fond à gauche : #0c71c3
Résultat final
Voici le résultat final.
Et voici à quoi ressemble le curseur sur tablette et téléphone.
Et voici le curseur si vous retirez les images des diapositives afin que seuls le contenu de la diapositive et la galerie s'affichent.
Dernières pensées
La possibilité d'intégrer une galerie Divi dans le module Slider de Divi ouvre la possibilité de créer de superbes curseurs de galerie de photos avec peu d'effort. Espérons que ce tutoriel vous donnera de l'inspiration pour créer de magnifiques curseurs de galerie de photos.
Pour plus d'informations sur cette technique d'intégration de galerie Divi (y compris des conseils sur le style de la galerie d'intégration Divi), consultez le post sur la façon d'intégrer des galeries Divi dans des bascules.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!