3 effets de survol de transformation transparente que vous pouvez appliquer à vos images avec Divi

Vous cherchez un moyen sympa de présenter des images sur votre prochain site Divi ? Continuez à lire, car dans cet article, nous allons gérer 3 effets de survol de transformation d'image qui aideront à améliorer l'apparence générale de votre page. Vous pourrez suivre le processus de recréation de A à Z de trois exemples différents et même les télécharger pour une utilisation immédiate. L'objectif principal de ce tutoriel est de vous inspirer à combiner les nouvelles options de transformation de Divi avec les options déjà existantes pour créer une belle conception Web.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons rapidement le résultat des trois exemples sur différentes tailles d'écran.

Bureau

Exemple 1

Exemple #2

Exemple #3

Mobile

Exemple 1

Exemple #2

Exemple #3

Téléchargez les effets de survol de la transformation d'image GRATUITEMENT

Abonnez-vous à notre chaîne Youtube

Pour mettre la main sur les effets de survol de transformation d'image gratuits, vous devez d'abord les télécharger à l'aide du 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 !

Étapes générales

Ajouter une nouvelle section

Espacement

Avant de recréer chacun des exemples individuellement, nous allons passer par quelques étapes générales. Ajoutez une nouvelle section standard à votre page en utilisant les valeurs de marge et de remplissage suivantes :

• Marge supérieure : 200px
• Marge inférieure : 200px
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

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

Couleur d'arrière-plan de la colonne 2

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une couleur d'arrière-plan à la deuxième colonne.

• Couleur de fond de la colonne 2 : #efefef

Dimensionnement

Accédez ensuite aux paramètres de dimensionnement et laissez la ligne occuper toute la largeur de l'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ajoutez ensuite les valeurs de remplissage personnalisées suivantes :

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Rembourrage supérieur de la colonne 2: 10vw
• Rembourrage inférieur de la colonne 2: 10vw
• Rembourrage gauche de la colonne 2 : 5vw
• Rembourrage droit de la colonne 2 : 5vw

Ajouter le module de texte n° 1 à la colonne 2

Ajouter du contenu H2

Il est temps de commencer à ajouter les différents modules à la colonne 2, en commençant par un module de texte. Entrez du contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2.

• Police de la rubrique 2 : Times New Roman
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Couleur du texte : #0f47ff
• Titre 2 Taille du texte : 3.5vw

Ajouter le module diviseur à la colonne 2

Visibilité

Le prochain module dont nous avons besoin dans la deuxième colonne est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Couleur

Ensuite, allez dans l'onglet conception et changez la couleur du séparateur.

• Couleur : #ff961e

Dimensionnement

Modifiez également les valeurs de dimensionnement.

• Poids du diviseur : 1px
• Largeur : 20%
• Alignement du module : à gauche
• Hauteur : 0px

Espacement

Et créez de l'espace pour le module en utilisant les valeurs de marge supérieure et inférieure suivantes :

• Marge supérieure : 1vw
• Marge inférieure : 1vw

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu

Passons au module suivant, qui est un autre module de texte. Entrez le contenu du paragraphe de votre choix.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres du texte.

• Police de texte : Open Sans
• Taille du texte : 0.7vw (ordinateur de bureau), 1.7vw (tablette), 2.5vw (téléphone)
• Hauteur de la ligne de texte : 1,5 vw (ordinateur de bureau), 2,5 vw (tablette), 3,5 vw (téléphone)
• Orientation du texte : Justifier

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Largeur : 61 % (ordinateur de bureau), 80 % (tablette et téléphone)

Espacement

Et ajoutez une marge supérieure et inférieure personnalisée.

• Marge supérieure : 2vw
• Marge inférieure : 2vw

Ajouter le module de texte n° 3 à la colonne 3

Ajouter du contenu

Passons au module suivant et dernier dont nous avons besoin dans la deuxième colonne, qui est un autre module de texte. Nous utiliserons ce module comme un bouton en ajoutant du contenu de paragraphe.

Ajouter un lien

Continuez en ajoutant un lien vers le CTA.

Paramètres de texte

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

• Police du texte : Times New Roman
• Couleur du texte : #ff961e
• Taille du texte : 1,5 vw (ordinateur de bureau), 2,5 vw (tablette), 3,5 vw (téléphone)

Dimensionnement

Modifiez également la largeur du module dans les paramètres de dimensionnement.

• Largeur : 48 %

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez un rembourrage personnalisé.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw

Frontière

Terminez le module de texte en ajoutant une bordure inférieure avec les paramètres suivants :

• Largeur de la bordure inférieure : 1px
• Couleur de la bordure inférieure : #0f47ff

Cloner la section deux fois

Une fois que vous avez terminé de personnaliser la section et tous les éléments qu'elle contient, vous pouvez continuer et la cloner deux fois. Nous utiliserons chacune des sections de notre page pour recréer les trois exemples qui ont été partagés au début de cet article.

Recréer l'exemple #1

Ajouter un module d'image à la colonne 1

Laisser la zone d'image vide

Commençons par le premier exemple ! Ajoutez un nouveau module d'image à la première colonne et assurez-vous de laisser la zone d'image vide.

Couleur d'arrière-plan par défaut

Modifiez la couleur d'arrière-plan du module Image :

• Couleur d'arrière-plan : #0f47ff

Couleur d'arrière-plan du survol

Modifiez la couleur de fond au survol.

• Couleur d'arrière-plan : rgba (255,150,30,0,65)

Image de fond

Au lieu de télécharger une image, nous en ajouterons une à l'arrière-plan, accompagnée des paramètres suivants :

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : lumière douce

Espacement

Passez aux paramètres d'espacement du module et ajoutez des valeurs de remplissage personnalisées :

• Afficher l'espace sous l'image : Non
• Rembourrage supérieur : 22vw
• Rembourrage inférieur : 22vw

Par défaut Traduire Rotation

Nous allons également faire pivoter l'image au survol. Assurez-vous que l'image apparaît dans son état d'origine avant de survoler en ajoutant « 0deg » à la bonne option.

• Droite : 0 degré

Survol Traduire Faire pivoter

Modifiez cette valeur au survol :

• Droite : 180 degrés

Transitions

Pour créer un effet immédiat, nous allons supprimer la durée de transition :

• Durée de transition : 0 ms

Recréer l'exemple #2

Ajouter un module d'image à la colonne 1

Laisser la zone d'image vide

Passons au deuxième exemple ! Encore une fois, assurez-vous de laisser la zone d'image vide.

Couleur d'arrière-plan par défaut

Accédez aux paramètres d'arrière-plan et ajoutez la couleur d'arrière-plan (complètement transparente) suivante :

• Couleur d'arrière-plan : rgba(255,255,255,0)

Couleur d'arrière-plan du survol

Modifiez cette couleur au survol :

• Couleur d'arrière-plan : rgba(0,0,0,0.65)

Image de fond

Nous utilisons, encore une fois, une image d'arrière-plan au lieu d'en télécharger une dans le module lui-même. Combinez l'image d'arrière-plan avec les paramètres suivants :

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : lumière douce

Espacement

Ensuite, allez dans les paramètres d'espacement et modifiez le rembourrage supérieur et inférieur :

• Afficher l'espace sous l'image : Non
• Rembourrage supérieur : 22vw
• Rembourrage inférieur : 22vw

Échelle de transformation par défaut

Assurez-vous que les valeurs d'échelle de transformation par défaut restent « 100 % ».

• À droite : 100 %
• Bas : 100 %

Échelle de transformation de survol

Et modifiez ces valeurs au survol pour créer un effet de mise à l'échelle.

• À droite : 120 %
• Bas : 120%

Traduire la transformation par défaut

Par défaut, nous conservons « 0px » pour l'option du bas dans les paramètres de traduction de la transformation.

• Bas : 0px

Hover Transformer Traduire

Modifiez cette valeur au survol pour repositionner l'élément.

• Bas : 9vw

Transitions

Nous créons également une transition légèrement plus rapide en modifiant la durée de la transition dans l'onglet avancé :

• Durée de la transition : 200 ms

Recréer l'exemple #3

Modifier la structure des colonnes

Passons au prochain et dernier exemple ! Commencez par modifier la structure des colonnes de la ligne.

Ajouter un module d'image à la colonne 1

Télécharger une image 1:1

Ensuite, ajoutez un module d'image à la première colonne. Contrairement aux deux premiers exemples, nous allons télécharger une image avec un rapport 1:1 (même largeur et hauteur).

Dimensionnement

Passez à l'onglet conception et forcez l'image à être pleine largeur dans les paramètres de dimensionnement.

• Forcer la pleine largeur : Oui

Espacement

Supprimez ensuite l'espace sous l'image dans les paramètres d'espacement.

• Afficher l'espace sous l'image : Non

Bordure par défaut

Ensuite, allez dans les paramètres de bordure et ajoutez « 500vw » à chacun des coins. Nous veillons à ce que cette valeur soit suffisamment élevée pour couvrir toutes les tailles d'écran.

Bordure de survol

Supprimez les coins arrondis que vous avez ajoutés au survol.

Filtres par défaut

Ensuite, allez dans les paramètres des filtres et assurez-vous que ces valeurs par défaut sont ajoutées :

• Saturation : 100 %
• Luminosité : 46%
• Opacité : 3%

Filtres de survol

Activez l'option de survol sur chacun des paramètres modifiés et utilisez les valeurs suivantes :

• Saturation : 300%
• Luminosité : 46%
• Opacité : 100 %

Échelle de transformation par défaut

Ensuite, accédez aux options de transformation et modifiez les options d'échelle de transformation par défaut :

• À droite : 68 %
• Bas : 68 %

Échelle de transformation de survol

Modifiez ces valeurs au survol.

• À droite : 130 %
• Bas : 130%

Traduire la transformation par défaut

Passez aux valeurs de conversion de transformation et assurez-vous que les valeurs de conversion de transformation par défaut restent les mêmes :

• À droite : 0px
• Bas : 0px

Hover Transformer Traduire

Modifiez les valeurs au survol.

• À droite : 1vw
• Bas : 8vw

Transitions

Enfin, augmentez la durée de transition dans l'onglet avancé pour créer une transition en douceur et le tour est joué !

• Durée de transition : 600 ms

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

Exemple 1

Exemple #2

Exemple #3

Mobile

Exemple 1

Exemple #2

Exemple #3

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec le module Image et les options de survol et de transformation de Divi. Les effets que nous avons recréés ne sont que quelques-unes des nombreuses belles possibilités qui existent. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.