Comment créer des références de galerie étonnantes avec Divi

Chaque semaine, nous vous proposons un nouveau paquet gratuit de mise en page Divi que vous pouvez utiliser pour votre prochain projet. Pour l’un de ces paquets de mise en page, nous partageons également un cas d’utilisation qui vous aidera à mettre votre site au niveau suivant. Cette semaine, dans le cadre de notre programme de conception Divi en cours, nous vous montrerons comment créer des recommandations de galerie étonnantes en utilisant le pack de mise en page du planificateur de mariage Divi. Ce tutoriel vous aidera à lier les références à votre portefeuille au même endroit. Cela vous permettra d’aller de l’avant, de convaincre les visiteurs de vos capacités et de les transformer en clients potentiels. Nous appliquerons également des effets subtils lorsque vous passez le curseur sur l’image que vous voyez.
Allons – y! Aperçu avant d’aller plus loin dans ce tutoriel, examinons les résultats finaux sur différents écrans de taille. Lorsque la souris survole Ouvrez la page d’atterrissage du progiciel de mise en page du planificateur de mariage, en commençant par la page d’atterrissage créée à l’aide du progiciel de mise en page du planificateur de mariage Divi Amazing. Modifier la recommandation supprimer la deuxième ligne cette disposition contient déjà une section de recommandation. Au lieu de créer une nouvelle section, nous modifierons cette section pour créer une recommandation de galerie. Faites défiler vers le bas jusqu’à ce que vous trouviez la section et supprimez la deuxième ligne. Supprimez le module image de la colonne 1 et il reste une ligne dans cette section. Continuer à supprimer le module image dans la première colonne de la ligne. Modifier les paramètres de la structure de la ligne 1 Nous devons apporter quelques modifications aux paramètres de cette ligne pour qu’elle ressemble à ce que nous voulons. Commencez par changer la structure des colonnes dans une colonne au lieu de deux. Ensuite, ajoutez une couleur de fond blanche à la ligne. Image de fond nous réutilisons le modèle de fond que vous pouvez trouver
Placez le formulaire de texte cloné directement sous le formulaire de texte précédent dans la ligne recommandée. Changez le contenu en un nom qui apparaîtra dans votre témoignage. Modifier les paramètres du texte, puis ouvrir les paramètres du texte et effectuer les modifications suivantes: Titre 6 alignement du texte: titre droit 6 taille du texte: 77 px Changer l’espacement nous allons superposer ce module de texte à l’ombre du cadre de ligne et à l’arrière – plan de la section en appliquant les paramètres d’espacement suivants: marge supérieure: – 50 Px marge droite: – 150 Px marge inférieure: 20 px Nous avons également augmenté l’opacité du texte à « 17% », ce qui le rend encore plus surprenant. Ajouter une structure de colonne de ligne # 2 nous avons terminé la ligne recommandée. L’étape suivante consiste à ajouter la Bibliothèque ci – jointe. Pour ce faire, nous utiliserons une nouvelle ligne avec la structure de colonne suivante: Alignement de ligne nous voulons utiliser l’alignement de ligne à gauche pour déplacer cette galerie à gauche de la page. Pour créer une galerie, il suffit d’utiliser un module image pour chaque colonne. Pour effacer l’espacement entre les colonnes et créer des résultats cohérents, redimensionnez les lignes en appliquant les paramètres suivants:
Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 Activez les paramètres d’espacement et appliquez les marges personnalisées et le remplissage suivants aux lignes: marge inférieure: 80 Px marge gauche: 50 Px remplissage supérieur et inférieur: 0px Ajouter un module image à la colonne 1 charger une image bien que nous ayons besoin de quatre modules image au total, nous allons d’abord créer un module image, puis le cloner à d’autres colonnes pour gagner du temps et de l’énergie. Ajouter un module image au premier
Colonnes et Téléchargez l’image que vous avez sélectionnée. En activant l’option Ouvrir dans Lightbox dans les paramètres de lien du formulaire image, vous pouvez ouvrir une image plus grande dans Lightbox. Filtre nous réduirons également la luminosité du module image à \
Cloner le module image trois fois et modifier l’image vous pouvez maintenant Cloner le module image trois fois et le placer dans les colonnes restantes. Modifier l’image de chaque colonne au besoin. Créer une référence de l’autre côté cloner deux lignes existantes pour créer la même référence dans la galerie de l’autre côté, nous devons apporter quelques changements. Commencez par cloner deux lignes. Changez l’alignement des deux lignes, puis changez l’alignement des deux lignes à droite. Vous remarquerez que la deuxième ligne n’apparaît pas encore. C’est parce que nous devons changer les paramètres d’espacement à l’étape suivante. Au lieu d’utiliser 60px pour répéter la première ligne horizontalement, modifiez la boîte d’ombre de la ligne 1 en utilisant – 60px. Changez l’espacement des lignes 2 supprimez l’espacement à gauche de la deuxième ligne et ajoutez 50px à droite. Une fois terminé, vous remarquerez que votre ligne a également été déplacée à droite. Modifier l’orientation et l’espacement du texte du deuxième format de texte le format du texte contenant le nom du témoin doit également être déplacé à gauche. Pour ce faire, utilisez d’abord l’alignement du texte
À gauche dans les paramètres de texte du titre 6. Supprimez également la marge droite et ajoutez – 150 Px à la marge gauche. Ajoutez un effet à la configuration de la page que vous passez le curseur sur la page ouverte la dernière chose qui reste dans ce tutoriel est d’ajouter une ligne de code CSS qui activera l’effet de vol stationnaire. Pour ce faire, cliquez sur l’icône suivante au bas de la page pour ouvrir la configuration de la page: Supprimer le filtre de passage de la souris en utilisant le code CSS la seule chose que nous voulons faire est de supprimer le filtre appliqué au module image lorsque la souris passe en utilisant la ligne de code CSS suivante, et de terminer l’opération: # image en vol stationnaire: en vol stationnaire {
Filtre: aucun;
} Aperçu maintenant que nous avons terminé toutes les étapes, jetons un dernier coup d’oeil aux résultats finaux sur les différents écrans de taille. Lorsque la souris survole Dans ce blog de cas d’utilisation, nous vous montrons comment créer des références de galerie étonnantes en utilisant le pack de mise en page du planificateur de mariage de Divi. Ces références de galerie peuvent vous aider à établir un lien entre les références et votre collection et à vous rapprocher de la transformation des visiteurs en clients potentiels et, en bout de ligne, en clients. Si vous avez des questions ou des suggestions, assurez – vous de laisser un commentaire dans la section commentaires ci – dessous!