Faire preuve de créativité avec les nouvelles options de survol de remplacement d'image de Divi

Les nouvelles options de survol de remplacement d'image de Divi donnent à vos projets un tout nouveau niveau de créativité. Dans cet article, nous allons vous montrer comment créer une belle section avec des images qui changent au survol. Nous espérons que cette conception vous inspirera pour créer vos propres sections créatives avec les options de survol de remplacement d'image de Divi. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page de remplacement d'image GRATUITEMENT

Pour mettre la main sur la mise en page de remplacement d'image gratuite, vous devrez d'abord la 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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer

Ajouter une nouvelle section

Espacement

Commencez par créer une nouvelle page ou ajouter une nouvelle section à une page existante. Avant d'ajouter une ligne, ajustez les paramètres d'espacement de la section.

• Marge supérieure et inférieure : 2vw
• Marge gauche et droite : 2vw

Frontière

Ensuite, ajoutez un rayon de bordure.

• Coins arrondis : 10px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Fond

Avant d'ajouter des modules, ajoutez un fond dégradé saumon pâle.

• Arrière-plan : Dégradé
• Dégradé de couleur 1 : saumon pâle #f4e9de
• Dégradé de couleur 2 : saumon encore plus pâle #fff0e8

Dimensionnement

Continuez en ajustant la largeur de la ligne.

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Enfin, ajustez l'espacement.

• Rembourrage supérieur :
  • Ordinateur de bureau + tablette : 5vw
• Rembourrage gauche :
  • Tablette + Téléphone : 5vw
• Rembourrage droit :
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 5vw

Ajouter un module de texte à la colonne 1

Ajouter du contenu H2

Il est temps de commencer à ajouter des modules ! Ajoutez un module de texte à la colonne 1 et insérez du contenu H2 de votre choix.

Texte d'en-tête

Passez à l'onglet Conception et stylisez les paramètres de texte H2 en conséquence :

• Niveau du texte de l'en-tête : H2
• Police H2 : Annie utilise votre télescope
• Poids de la police H2 : gras
• Alignement du texte H2 : Centre
• Couleur du texte H2 : Marron #793715
• Couleur du texte H2 :
  • Ordinateur de bureau : 7.2vw
  • Tablette : 12vw
  • Téléphone : 11vw

Dimensionnement

Modifiez ensuite la largeur sur le bureau.

• Largeur:
  • Ordinateur de bureau : 45 vw
  • Tablette + Téléphone : 100 %

Transformer

Enfin, faites pivoter le texte et modifiez sa position à l'aide des paramètres de transformation.

• Transformer Rotation :
  • Bureau : 270 degrés
• Transformer Traduire :
  • axe x : -10vw
  • axe y : 19vw

Ajouter le 1er module d'image à la colonne 1

Ajouter une illustration transparente

Ajoutez un nouveau module d'image juste en dessous du module de texte et téléchargez une illustration de votre choix. Vous pouvez trouver les images que nous utilisons dans ce tutoriel en téléchargeant le dossier zippé au début de cet article.

Dimensionnement

Maintenant, forcez la taille de l'image à pleine largeur.

• Pleine largeur : Oui

Espacement

Ensuite, ajustez les paramètres d'espacement.

• Marge supérieure:
  • Ordinateur de bureau + tablette : -11vw
• Marge de gauche:
  • Ordinateur de bureau : -2vw
  • Tablette + Téléphone : -36vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau : 10vw
  • Tablette + Téléphone : 34vw

Ajouter le 2e module d'image à la colonne 1

Ajouter une illustration transparente

Juste en dessous du premier module d'image, ajoutez-en un autre. Insérez une illustration de votre choix.

Dimensionnement

Forcer le module à pleine largeur.

• Pleine largeur : Oui

Espacement

Ensuite, ajustez les paramètres d'espacement.

• Marge supérieure:
  • Ordinateur de bureau : -2vw
  • Tablette + Téléphone : -10vw
• Marge de gauche:
  • Ordinateur de bureau + tablette : -14vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 35vw

Ajouter le 3e module d'image à la colonne 1

Ajouter une image

Ajoutez un autre module d'image à la colonne et insérez une illustration.

Dimensionnement

Ensuite, forcez le module à pleine largeur.

• Pleine largeur : Oui

Espacement

Enfin, ajustez l'espacement.

• Marge supérieure:
  • Tablette + Téléphone: -18vw
• Marge de gauche:
  • Ordinateur de bureau : -13vw
  • Tablette + Téléphone : 10vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau : 7vw
  • Tablette + Téléphone : 35vw

Ajouter le 4e module d'image à la colonne 1

Ajouter une image

Le dernier module de la colonne 1 est un autre module d'image. Insérez une illustration.

Dimensionnement

Forcer le module à pleine largeur.

• Pleine largeur : Oui

Espacement

Ensuite, ajustez l'espacement.

• Marge supérieure:
  • Ordinateur de bureau : 3vw
  • Tablette + Téléphone: -15vw
• Marge de gauche:
  • Ordinateur de bureau : -3vw
  • Tablette + Téléphone : 30vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau : 10vw
  • Tablette + Téléphone : 35vw

Transformer

Enfin, faites pivoter l'illustration.

• Rotation de transformation : 84 deg

Ajouter le 1er module de texte à la colonne 2

Ajouter du contenu

Passons à la colonne suivante ! Ajoutez un module de texte avec du contenu H3 de votre choix.

Ajouter un lien

Ensuite, ajoutez un lien vers le module.

Fond

Accédez aux paramètres d'arrière-plan et ajoutez ensuite une couleur d'arrière-plan.

• Couleur de l'arrière plan
• Couleur de fond : Marron #793715

Texte d'en-tête

Ensuite, stylisez le texte H3 dans l'onglet de conception.

• Niveau du texte de l'en-tête : H3
• Police H3 : Annie utilise votre télescope
• Couleur H3 : Blanc #ffffff
• Taille de la police H3 :
  • Ordinateur de bureau : 2vw
  • Tablette : 5vw
  • Téléphone : 6vw

Dimensionnement

Maintenant, ajustez les paramètres de dimensionnement.

• Largeur : 33%
• Alignement du module : Centre

Espacement

Ensuite, ajoutez des valeurs d'espacement sur différentes tailles d'écran.

• Marge inférieure : 1vw
• Rembourrage supérieur :
  • Ordinateur de bureau : 0,5 vw
  • Tablette + Téléphone : 2.3vw
• Rembourrage inférieur :
  • Ordinateur de bureau + tablette : 1.1vw

Frontière

Continuez en ajoutant un rayon de bordure.

• Coins arrondis : 1vw tous les coins

Boîte ombre

Enfin, ajoutez une ombre de boîte.

• Box Shadow : première option
• Position horizontale : 7px
• Force du flou : 25px

Ajouter le 1er module d'image à la colonne 2

Ajouter une image

Le prochain module dont nous avons besoin dans la colonne 2 est un module image. Téléchargez deux images différentes : une pour l'état statique et une en survol.

• Statique : première image
• Survol : deuxième image

Dimensionnement

Forcer l'image à pleine largeur.

• Pleine largeur : Oui

Espacement

Ensuite, ajustez les valeurs d'espacement.

• Marge supérieure:
  • Ordinateur de bureau : -2vw
  • Tablette + Téléphone : 20vw
• Marge inférieure :
  • Ordinateur de bureau + tablette : 4vw
• Marge de gauche:
  • Ordinateur de bureau : -5vw

Frontière

Ajoutez ensuite des coins arrondis.

• Coins arrondis : 10 px tous les coins

Boîte ombre

Donnez également à l'image une ombre de boîte subtile.

• Ombre de la boîte : deuxième option
• Position verticale : 20px
• Force du flou : 80px

Transformer

Enfin, ajustez les valeurs d'échelle de transformation au survol.

• Échelle de transformation au survol : 110 %

Dupliquer les modules de texte et d'image dans la colonne 2

Clonez les deux modules et placez les doublons dans le bon ordre.

Ajustez le 2e module de texte dans la colonne 2

Modifier le contenu et le lien

Modifiez le contenu dans le module de texte en double.

Ajustez le 2e module d'image dans la colonne 2

Changer d'image

Modifiez les images dans les paramètres statiques et de survol.

Cloner la colonne 2

Supprimer la colonne 3 et dupliquer la colonne 2

Revenez aux paramètres de ligne et supprimez la 3ème colonne. Ensuite, dupliquez la 2ème colonne.

Ajustez le 1er module de texte dans la colonne 3

Modifier le contenu et le lien

Après avoir dupliqué la 2e colonne, ajustez le texte et le lien dans le 1er module de texte de la colonne 3.

Ajustez le 1er module d'image dans la colonne 3

Changer d'image

Modifiez également les images dans le module image.

Espacement

Ensuite, ajustez l'espacement.

• Marge supérieure:
  • Ordinateur de bureau : -2vw
  • Tablette + Téléphone : 11vw
• Marge inférieure
  • Ordinateur de bureau + tablette : 5vw

Ajustez le 2e module de texte dans la colonne 3

Modifier le contenu et le lien

Modifiez le texte et le lien du dernier module de texte dans la colonne 3.

Ajustez le 2e module d'image dans la colonne 3

Changer d'image

Modifiez également les images statiques et survolées du dernier module d'image.

Espacement

Enfin, ajustez l'espacement du module image et le tour est joué !

• Marge supérieure:
  • Ordinateur de bureau : -3vw
  • Tablette + Téléphone : 7vw

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

Mobile

Conclusion

Dans cet article, nous vous avons montré comment créer un design avec les nouvelles options de survol de remplacement d'image de Divi. Cette fonctionnalité peut conduire à de nombreuses possibilités créatives. Nous espérons que vous les utiliserez dans vos propres projets. N'oubliez pas d'utiliser les mêmes tailles d'image pour les images statiques et de survol. Si vous avez des questions ou des suggestions, n'hésitez pas à les laisser dans la section commentaires ci-dessous!