Comment concevoir des superpositions d'images personnalisées dans Divi

Les superpositions d'images existent depuis longtemps dans la conception de sites Web. Ils sont parfaits pour engager les visiteurs en révélant du contenu et des éléments de conception supplémentaires lorsque vous survolez l'image. Parce qu'il s'agit d'une fonctionnalité de conception si populaire, il existe de nombreux plugins dédiés à la création de superpositions d'images. Cependant, selon le plugin, ils peuvent être assez limités ou ils peuvent être un peu exagérés pour ce dont vous pourriez avoir besoin. C'est pourquoi il est utile d'avoir le savoir-faire pour les construire soi-même dans Divi.

Dans ce tutoriel, nous allons vous montrer comment concevoir des superpositions d'images personnalisées dans Divi. Ces superpositions changeront et révéleront des éléments lors du survol de l'image. La meilleure partie est que vous avez un contrôle total sur la conception de vos superpositions d'images à l'aide des options de conception intégrées de Divi. Et, avec quelques extraits de CSS personnalisés, vous pouvez avoir de superbes superpositions d'images pour faire passer votre site au niveau supérieur. Aucun plugin n'est nécessaire.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez GRATUITEMENT la mise en page des superpositions d'images Divi

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 les fichiers

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.

TÉLÉCHARGER

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 de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Créer des superpositions d'images personnalisées dans Divi

Création de la section, de la ligne et des colonnes

Pour commencer, créez une ligne à trois colonnes dans la section par défaut.

Ouvrez les paramètres de la section et ajoutez la couleur d'arrière-plan suivante :

• Couleur de fond : #3a0ca3

Ensuite, ouvrez les paramètres de la colonne 1 et mettez à jour les éléments suivants :

• Classe CSS : et-overlay-conteneur
• Débordement horizontal : masqué
• Débordement vertical : caché

La classe CSS est nécessaire pour déclencher les effets de survol des éléments de superposition que nous allons construire. Le débordement caché est nécessaire car nous allons avoir un effet de survol qui redimensionne l'image au-delà du conteneur de colonne.

Ajout de l'image

Maintenant que la section, la ligne et la colonne sont prêtes, allez-y et ajoutez un nouveau module d'image à la colonne 1. Ce sera l'image principale derrière nos conceptions de superposition.

Téléchargez une image qui est plus un portrait qu'un paysage. J'en utilise un qui mesure environ 800px par 1050px. Assurez-vous qu'il est suffisamment large pour couvrir toute la largeur de la colonne sur toutes les tailles de navigateur.

(REMARQUE : vous pouvez utiliser des images de paysage, mais vous devrez peut-être ajuster le positionnement des éléments de superposition en conséquence afin qu'ils ne se chevauchent pas.)

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Marge : 0px en bas

Sous l'onglet avancé, ajoutez la classe CSS suivante :

• Classe CSS : et-overlay-image

Ajout de la couleur de superposition d'image à l'aide d'un module de séparation

Pour créer la couleur de superposition de l'image, nous allons utiliser un module diviseur. L'idée est de créer une couverture sur l'image en faisant en sorte que le séparateur s'étende sur toute la hauteur et la largeur de la colonne afin qu'il repose parfaitement sur l'image. Une fois en position, vous pouvez ajuster la couleur de fond du module diviseur pour obtenir la couleur de superposition que nous voulons.

Tout d'abord, ajoutez un module de séparation sous l'image.

Positionnez ensuite le séparateur comme absolu afin qu'il se place au-dessus de l'image :

• Position : Absolu

Sous l'onglet Contenu, mettez à jour les éléments suivants :

• Afficher le diviseur : NON
• Couleur d'arrière-plan : rgba (247,37,133,0.8)

Mettez ensuite à jour la hauteur et la largeur du séparateur :

• Largeur : 100 %
• Hauteur : 100 %

Une fois le design en place, ajoutez la classe CSS suivante au séparateur :

• et-overlay-item

(REMARQUE : cette classe doit être ajoutée à tous les éléments de conception de superposition que vous souhaitez afficher uniquement au survol. Si vous ne souhaitez pas que l'élément soit initialement masqué, laissez-le de côté.)

Pour aider à garder une trace des éléments/modules de conception, ouvrez le modal des calques et étiquetez le module diviseur (« couleur de superposition »).

Ajout du texte d'en-tête de superposition

Sous le module diviseur, ajoutez un nouveau module de texte. Cela servira de texte d'en-tête de superposition qui apparaîtra en haut de l'image au survol.

Mettez à jour le contenu avec un titre H2 :

<h2>Coaching</h2>

Mettez ensuite à jour l'étiquette du module de texte pour référencer ultérieurement.

Sous les paramètres de conception de texte, mettez à jour les éléments suivants :

• Alignement du texte : Centre
• Couleur du texte : clair

• Police de la rubrique 2 : Cormorant Garamond
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Taille du texte : 40 px

• Largeur : 100 %
• Largeur maximale : 85 %

Sous l'onglet avancé, mettez à jour la position comme suit :

• Position : Absolu
• Emplacement : en haut au centre
• Décalage vertical : 10 %

(REMARQUE : le décalage vertical peut devoir être ajusté en fonction de la taille du rapport hauteur/largeur de l'image. Par exemple, une image de type paysage peut nécessiter moins de décalage)

Ensuite, ajoutez les classes CSS suivantes au module de texte :

• Classe CSS : et-overlay-item move-down

En plus de la classe "et-overlay-item", nous ajoutons une classe "move-down" supplémentaire afin d'utiliser un CSS personnalisé pour déplacer légèrement le titre vers le bas lors du survol.

Création du corps de texte superposé

Pour créer le corps de texte de superposition, nous pouvons dupliquer le module de texte utilisé pour le titre de superposition. Avant de mettre à jour les paramètres du doublon, changez le libellé en « overlay body ».

Ouvrez les paramètres de texte pour le nouveau module de texte et mettez à jour le contenu du corps avec quelques phrases de texte de paragraphe.

Sous l'onglet avancé, modifiez l'emplacement absolu du module au centre.

Étant donné que nous ne voulons pas que celui-ci se déplace au survol (apparaît uniquement), mettez à jour la classe CSS pour inclure uniquement les éléments suivants :

• Classe CSS : et-overlay-item

Création du bouton de superposition

Le dernier élément de superposition sur cette image sera le bouton. Pour créer le bouton, ajoutez un nouveau module de bouton sous le module de texte « corps de texte ».

Avant de modifier la conception, mettez à jour la position du bouton comme suit :

• Position : absolue
• Décalage vertical : 10 %

Maintenant, le bouton doit être centré dans la partie inférieure de l'image.

Dans l'onglet avancé, mettez à jour la classe CSS et ajoutez un extrait de CSS personnalisé à l'élément principal comme suit :

• Classe CSS : et-overlay-item move-up
• Élément principal CSS :

  min-width: 15em

Notez qu'il y a une classe supplémentaire ajoutée au bouton afin de le déplacer légèrement vers le haut en survol. C'est pour compléter le mouvement vers le bas du texte d'en-tête lors du survol.

Mettez ensuite à jour les paramètres de conception suivants :

• Alignement des boutons : Centre
• Taille du texte du bouton : 14 px
• Couleur d'arrière-plan du bouton : #4361ee
• bouton Largeur de la bordure : 0px
• Espacement des lettres des boutons : 0,1 em
• Poids de la police du bouton : gras
• Style de police des boutons : TT
• Remplissage : 0.8em en haut, 0.8em en bas, 0px à gauche, 0px à droite

Ajout du CSS personnalisé avec le module de code

Avant de créer quelques autres versions de cette conception de superposition, ajoutons le CSS personnalisé nécessaire aux effets de survol de superposition. Pour ce faire, ajoutez un module de code sous le bouton.

Collez ensuite le CSS suivant dans le contenu du code. N'oubliez pas d'envelopper le code dans les balises de script nécessaires.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

Le code est commenté afin que vous puissiez comprendre où vous pouvez ajuster le CSS selon vos besoins.

Duplication de la colonne pour plus de conceptions

Bien que nous ayons déjà deux colonnes vides supplémentaires avec lesquelles travailler, il est plus facile de transférer tous les modules et la conception de la première colonne vers une nouvelle colonne en dupliquant la colonne entière. Pour ce faire, ouvrez le modal des calques, supprimez les deux colonnes vides, puis dupliquez deux fois la colonne contenant le motif de superposition d'image. Vous devriez avoir un total de trois colonnes avec des conceptions identiques.

Création de la conception de superposition d'images #2

Maintenant que nous avons tous les éléments de conception en place dans chacune des colonnes, nous pouvons modifier la conception pour créer des superpositions d'images supplémentaires. Pour ce prochain design, nous allons placer le bouton au centre de l'image (toujours visible). Ensuite, nous déplacerons le titre et le corps du texte à partir du haut et du bas de l'image.

Ajuster l'emplacement du corps du texte et la classe CSS

Ouvrez les paramètres du module de corps de texte superposé dans la colonne 2 et mettez à jour la position :

• Emplacement : En bas au centre
• Décalage vertical : 5%

Mettez ensuite à jour la classe CSS avec les éléments suivants :

• Classe CSS : et-overlay-item move-up

Ajuster l'emplacement du bouton et la classe CSS

Ensuite, ouvrez les paramètres du bouton dans la colonne 2 et mettez à jour l'emplacement de position suivant :

• Lieu : Centre Centre

Ensuite, retirez la classe CSS car nous voulons que le bouton reste toujours visible.

Ouvrez les paramètres du module diviseur (couleur de superposition) et modifiez l'arrière-plan comme suit :

• Couleur d'arrière-plan : rgba (67,97,238,0.8)

Ouvrez ensuite les paramètres du bouton et modifiez la couleur d'arrière-plan :

• Couleur d'arrière-plan du bouton : #f72585

Ajuster l'image et la classe CSS

Ensuite, ouvrez les paramètres de l'image et téléchargez une nouvelle image (si vous le souhaitez).

Ajoutez ensuite la classe CSS suivante à l'image :

• Classe CSS : et-overlay-image et-scale

Notez qu'en plus de la classe "et-overlay-image", il existe une classe supplémentaire appelée "et-scale" qui augmentera la taille de l'image, créant un effet de zoom avant au survol.

Création de la conception de superposition d'images #3

Il est maintenant temps de créer le troisième motif de superposition d'images dans la colonne 3.

Ajuster le contenu du corps du texte de superposition et la classe CSS

Commencez par ouvrir les paramètres du module de corps de texte de superposition dans la colonne 3 et ajoutez l'en-tête H2 au-dessus du texte du paragraphe. Maintenant, les deux seront à l'intérieur d'un module au lieu de deux.

Retirez ensuite la classe CSS pour que le texte reste visible au-dessus de l'image.

Ajuster le décalage des boutons et la classe CSS

Ouvrez les paramètres du module de boutons et mettez à jour le décalage vertical de la position :

• Décalage vertical : 5%

Supprimer l'en-tête de superposition

Ensuite, supprimez le module de texte d'en-tête de superposition.

Ajuster la couleur de superposition et la classe CSS

Ouvrez les paramètres du module diviseur (couleur de superposition) et mettez à jour l'arrière-plan avec les éléments suivants :

• Couleur d'arrière-plan du dégradé gauche : rgba (67,97,238,0.8)
• Dégradé d'arrière-plan à droite : rgba (247,37,133,0.8)
• Position de départ : 25 %
• Position finale : 75 %

Et puisque nous voulons garder la superposition de dégradé visible à tout moment, retirez la classe CSS.

Ajuster la classe CSS de l'image

Enfin, nous allons ajouter une classe CSS supplémentaire ("et-rotate") à l'image principale qui redimensionnera et fera pivoter l'image au survol.

• Classe CSS : et-overlay-image et-rotate

Touches finales

Avant de vérifier nos résultats finaux, nous devons faire quelques ajustements.

Supprimer la marge inférieure par défaut pour tous les modules

Par défaut, chaque module est livré avec une marge inférieure de 30px en raison de la largeur de gouttière par défaut (3) dans les paramètres de ligne. Cela peut perturber le positionnement des modules dans notre conception de superposition. Pour les supprimer, ouvrez les paramètres du module d'image pour l'une des images de la conception. Puisque nous avons déjà mis à jour la marge avec une marge inférieure de 0px, nous pouvons étendre cette marge à tous les modules.

Cliquez avec le bouton droit sur le paramètre de marge et choisissez « étendre la marge ».

Choisissez ensuite d'étendre la marge à Tous les modules sur la page.

Supprimer les modules de code en double

Assurez-vous de supprimer les modules de code supplémentaires qui ont été reportés lors de la duplication de la première colonne. Vous ne devriez en avoir qu'un. Vous pouvez le faire facilement à partir du modal des calques.

Résultats finaux

Maintenant que nos trois conceptions sont terminées, regardons les résultats finaux de nos conceptions de superposition d'images.

Et voici le design sur mobile. Les effets de survol de superposition s'appliquent uniquement au bureau via la requête multimédia CSS personnalisée dans le module de code. Par conséquent, les superpositions seront toujours visibles sur mobile.

Dernières pensées

Construire des superpositions d'images personnalisées est en fait très amusant. Il existe d'innombrables conceptions que vous pouvez tester visuellement avec le constructeur Divi et il ne faut qu'une petite quantité de CSS personnalisé pour appliquer les effets de survol. Même les effets de survol pour les éléments de superposition nécessitent un CSS personnalisé, vous pouvez toujours profiter des options de survol intégrées pour cibler individuellement chacun des éléments de superposition.

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

À votre santé!