Décorer votre page avec la transformation de formes en survol avec Divi

Créer un design interactif est quelque chose qui aide immédiatement à améliorer l'apparence de n'importe quel site Web. Avec les options intégrées de Divi, vous pouvez prendre plusieurs tours et créer des effets vraiment uniques à votre site Web.

Dans cet article, nous allons vous montrer comment décorer votre page avec des formes de transformation au survol. Le résultat que nous obtiendrons se concentre sur l'expérience de bureau, mais conserve également un design soigné et convivial sur des écrans de plus petite taille.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide aux deux exemples que nous allons recréer à partir de zéro.

Exemple 1

Exemple #2

Télécharger les superpositions d'images en forme

Pour mettre la main sur les superpositions d'images en forme qui sont utilisées tout au long de ce didacticiel, vous devrez 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 !

Commençons à créer !

Ajouter une nouvelle section

Couleur de l'arrière plan

Stary en créant une nouvelle page ou en ouvrant une page existante. Ajoutez-y une section normale, ouvrez les paramètres de la section et ajoutez une couleur de fond entièrement noire.

• Couleur d'arrière-plan : #000000

Débordement

Pour couper la superposition d'image en forme plus tard dans ce didacticiel, nous allons nous assurer que rien ne dépasse le conteneur de section en ajoutant une seule ligne de code CSS à l'élément principal de la section.

overflow: hidden;

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Ajouter un module d'image à la ligne

Télécharger une superposition d'image en forme

Il est temps de commencer à ajouter des modules ! Le premier module dont nous avons besoin est un module Image. Téléchargez la première superposition d'image en forme que vous pouvez trouver dans le dossier que vous avez téléchargé. Vous pouvez trouver des superpositions d'images plus en forme en accédant à cet article, en téléchargeant les fichiers, en ouvrant le fichier Illustrator et en les personnalisant selon vos besoins. Si, toutefois, vous souhaitez simplement recréer les exemples partagés dans l'aperçu de cet article, le dossier que vous avez téléchargé au début de cet article fera l'affaire.

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

Accédez aux paramètres d'arrière-plan du module Image et ajoutez la couleur d'arrière-plan par défaut suivante :

• Couleur d'arrière-plan : #6a00ff

Couleur d'arrière-plan du survol

Modifiez la couleur d'arrière-plan au survol à l'aide du code de couleur suivant :

• Couleur d'arrière-plan : #ffa216

Fond dégradé

Continuez en ajoutant également un arrière-plan dégradé au module Image.

• Couleur 1 : #ff2841
• Couleur 2: rgba(255,255,255,0)
• Direction du gradient : 168 degrés
• Position finale : 68 %

Dimensionnement

Passez à l'onglet Conception et activez l'option "Forcer la pleine largeur".

• Forcer la pleine largeur : Oui

Espacement

Nous cachons également une partie de la superposition de l'image en forme en ajoutant une marge supérieure négative aux paramètres d'espacement. Vous remarquerez que le module ne dépassera pas le conteneur de section grâce à cette ligne de code CSS que nous avons ajoutée à la section au début du didacticiel.

• Marge supérieure : -22vw (ordinateur de bureau et tablette), 0vw (téléphone)

Rotation de transformation par défaut

Nous pouvons maintenant commencer à transformer le module ! Ajoutez les paramètres de rotation de transformation par défaut suivants au module Image :

• Centre : 359 degrés

Survol Transformer Rotation

Et modifiez ces valeurs au survol pour créer une forme de transformation.

• Gauche : 250 degrés
• Centre : 320 degrés

Identifiant CSS

Lorsque vous survolez le module d'image, la superposition d'image en forme chevauchera tous les autres modules qui se trouvent au-dessus. Pour éviter cela, nous devrons modifier le z-index du module au survol plus tard dans la publication. Pour ce faire, vous devrez ajouter une classe CSS personnalisée au module Image.

Transitions

Enfin, nous créons une transition en douceur en augmentant la durée de transition dans l'onglet avancé.

• Durée de transition : 950 ms

Ajouter le module de texte n° 1 à la ligne

Ajouter du contenu H2

Le prochain module dont nous avons besoin est un module de texte. Ajoutez du contenu H2 de votre choix.

Paramètres de texte H2

Ensuite, allez dans l'onglet conception et modifiez les paramètres de texte H2.

• Police de titre 2 : Didact Gothic
• Poids de la police de l'en-tête 2 : gras
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 7vw
• Titre 2 Hauteur de ligne : 0.9em

Espacement

Créez un chevauchement entre ce module et le module Image en utilisant des valeurs de marge personnalisées.

• Marge supérieure : -68vw
• Marge inférieure : 8vw
• Marge gauche : 29vw
• Marge droite : 29vw

Ajouter le module de texte n° 2 à la ligne

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous du précédent et entrez le contenu du paragraphe de votre choix.

Paramètres de texte

Ensuite, allez dans l'onglet conception et modifiez les paramètres du texte.

• Police de texte : Open Sans
• Couleur du texte : #ffffff
• Taille du texte : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Hauteur de la ligne de texte : 1,8 em
• Orientation du texte : Centre

Espacement

Ajoutez également des valeurs de marge personnalisées.

• Marge inférieure : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Marge de gauche : 30vw (ordinateur de bureau), 10vw (tablette et téléphone)
• Marge droite : 30vw (ordinateur de bureau), 10vw (tablette et téléphone)

Ajouter un module de séparation à la ligne

Visibilité

Le prochain et dernier module dont nous avons besoin 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 design et changez la couleur du séparateur.

• Couleur : #ffffff

Dimensionnement

Modifiez également les valeurs de dimensionnement.

• Poids du diviseur : 7px
• Largeur : 15 %
• Alignement du module : Centre

Espacement

Et ajoutez un rembourrage inférieur personnalisé.

• Marge inférieure : 5vw

Cloner la section entière

Passons au deuxième exemple ! Clonez la section que vous venez de terminer.

Changer le module d'image

Télécharger une nouvelle superposition d'image en forme

Nous devons apporter quelques modifications, à commencer par la superposition d'images en forme. Allez-y et téléchargez la deuxième superposition d'image en forme que vous pouvez trouver dans le dossier que vous avez téléchargé au début de cet article.

Changer la couleur d'arrière-plan par défaut

Ensuite, accédez aux paramètres d'arrière-plan du module Image et modifiez la couleur d'arrière-plan par défaut.

• Couleur d'arrière-plan : #2d007c

Changer la couleur d'arrière-plan du survol

Modifiez également la couleur d'arrière-plan du survol.

• Couleur d'arrière-plan : #008089

Changer le fond dégradé

Avec le fond dégradé.

• Couleur 1 : #0c0c0c
• Couleur 2: rgba(255,255,255,0)
• Direction du gradient : 168 degrés
• Position finale : 68 %

Modifier les paramètres de rotation de transformation par défaut

Nous modifions également l'effet de transformation. Accédez aux paramètres de transformation et modifiez les valeurs de rotation de transformation par défaut.

• Gauche : 270 degrés
• Centre : 359 degrés

Modifier les paramètres de rotation de la transformation au survol

Modifiez ces mêmes valeurs au survol.

• Gauche : 192 degrés
• Centre : 280 degrés
• Droite : 15 degrés

Ajouter un code personnalisé à la page

Ouvrir les paramètres de la page

Maintenant, la dernière partie de cet article s'assure que la forme de transformation reste en dessous de tous les autres modules lorsqu'elle est survolée. Ouvrez les paramètres de la page.

Ajouter un code CSS

Allez ensuite dans l'onglet avancé et ajoutez le code CSS suivant.

.hover-state:hover {
z-index: -99; }

Nous utilisons la classe CSS que nous avons attribuée aux sections tout au long du didacticiel.

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat.

Exemple 1

Exemple #2

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les options de transformation de Divi. Plus précisément, nous avons utilisé des modules d'image avec des superpositions d'images en forme pour créer une forme d'arrière-plan transformante. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!