Modules Blurb interactifs créatifs utilisant les options de transformation et de survol de Divi

Nous avons tous adoré les nouvelles options de transformation. Ils nous aident à créer des designs étonnants et à avoir une vue en temps réel des changements que nous apportons. Et lorsqu'il est combiné avec des options de survol, vous pouvez certainement réussir à créer des effets époustouflants. Dans ce tutoriel, nous allons vous montrer comment créer des modules de présentation interactifs en combinant les options de transformation et de survol de Divi. Nous traiterons quatre exemples différents qui prennent peu ou pas de temps à créer et que vous pouvez utiliser pour tout projet Web que vous souhaitez.

Allons-y !

Aperçu

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

Étapes générales

Ajouter une nouvelle section

Dans la première partie de cet article, nous allons passer en revue quelques étapes générales qui nous aideront à nous concentrer sur les exemples de présentation de transformation plus tard dans l'article. Commencez par créer une nouvelle page ou ouvrez une page existante et ajoutez-y une section régulière.

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement dans l'onglet Conception pour permettre à la ligne d'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

Espacement

Ajoutez également des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 150 px
• Rembourrage inférieur : 150px

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Le seul module dont nous aurons besoin tout au long de ce didacticiel est un module Blurb. Une fois que nous aurons personnalisé le module Blurb, nous le réutiliserons pour réaliser les quatre exemples que vous avez pu voir au début de l'article. Allez-y et ajoutez un module Blurb à la première colonne et entrez le contenu de votre choix.

Sélectionnez l'icône

Continuez en sélectionnant une icône.

Couleur de l'arrière plan

Ajoutez ensuite un fond entièrement blanc.

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

Paramètres d'icône par défaut

Ensuite, modifiez les paramètres de l'icône dans l'onglet Conception.

• Couleur de l'icône : #7a69e6
• Icône de cercle : Oui
• Couleur du cercle : rgba (122,105,230,0.3)
• Placement des images/icônes : en haut
• Utiliser la taille de la police de l'icône : 32 px

Paramètres de l'icône de survol

Modifiez à la fois la couleur de l'icône et du cercle au survol.

• Couleur de l'icône : #ff758e
• Couleur du cercle : rgba (255 117 142,0,29)

Paramètres du texte du titre

Continuez en modifiant les paramètres de texte.

• Police du titre : Roboto
• Poids de la police du titre : gras
• Alignement du texte du titre : Centre
• Taille du texte du titre : 18px
• Hauteur de la ligne de titre : 1,7 em

Paramètres du corps du texte

Et modifiez également les paramètres du corps du texte.

• Police du corps : Open Sans
• Alignement du corps du texte : Centre
• Taille du corps du texte : 14 px
• Hauteur de la ligne du corps : 1,8 em

Dimensionnement

Nous réduisons également légèrement la taille du module sur différentes tailles d'écran.

• Largeur : 74 % (ordinateur de bureau), 85 % (tablette et téléphone)
• Alignement du module : Centre

Espacement

Et nous ajouterons également un rembourrage personnalisé.

• Rembourrage supérieur : 30px
• Rembourrage inférieur : 40px
• Rembourrage gauche : 20px
• Rembourrage droit : 20px

Frontière

Continuez en ajoutant « 10px » à chacun des coins du module Blurb.

Ombre de boîte par défaut

Et pour couronner le tout, ajoutez une subtile ombre de boîte.

• Force du flou d'ombre de la boîte: 70px
• Couleur de l'ombre : rgba (122,105,230,0.3)

Ombre de la boîte de survol

Modifiez la couleur de l'ombre de la boîte au survol pour qu'elle corresponde à l'icône de survol et aux couleurs du cercle.

• Couleur de l'ombre : rgba (255 117 142,0,29)

Cloner le module Blurb deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé de personnaliser le module Blurb, vous pouvez le cloner deux fois. Placez les doublons dans les deux colonnes restantes.

Ajouter la ligne n° 2

Structure des colonnes

Pour le dernier exemple, nous aurons besoin d'une ligne distincte. Choisissez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement dans l'onglet Conception.

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 1440px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Cloner le module Blurb dans la ligne précédente et le placer dans la colonne 1

Ensuite, clonez l'un des modules Blurb de la ligne précédente et placez le doublon dans la première colonne de la deuxième ligne.

Modifier la taille

Modifiez la largeur dans les paramètres de dimensionnement de votre nouveau module Blurb et une fois que vous l'aurez fait, vous aurez terminé les étapes générales !

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

Recréer l'exemple #1

Échelle de transformation par défaut

Maintenant que nous avons parcouru toutes les étapes générales, nous pouvons commencer à nous concentrer sur les différents exemples et comment les réaliser à l'aide des options de transformation et de survol de Divi. Le premier exemple, comme vous pouvez le remarquer dans le GIF ci-dessus, augmente la taille du module en survol. Pour ce faire, assurez-vous que les valeurs d'échelle de transformation restent à « 100 % » sur toutes les tailles d'écran.

• Bas : 100 % (ordinateur de bureau, tablette et téléphone)
• À droite : 100 % (ordinateur de bureau, tablette et téléphone)

Échelle de transformation de survol

Modifiez les valeurs d'échelle de transformation au survol pour créer un effet d'expansion.

• Bas : 132 %
• Droite : 132 %

Recréer l'exemple #2

Rotation de transformation par défaut

Passons au deuxième exemple ! Nous allons créer un effet de retournement horizontal comme vous pouvez le remarquer dans le GIF ci-dessus. Pour ce faire, nous devrons jouer avec les valeurs de rotation de transformation. Nous utilisons la valeur "la plus élevée" possible avant que la rotation ne devienne 0deg. Cela permettra à l'effet de retournement d'avoir lieu.

• Droite : 359,9 degrés

Survol Transformer Rotation

Activez les options de survol pour l'option de rotation de transformation et ajoutez « 0deg ». Ce que nous faisons essentiellement, c'est permettre au module de faire un retournement à 360 degrés (techniquement, 359,9).

• Droite : 0 degré

Transitions

Nous allons également augmenter la durée de transition dans l'onglet avancé pour créer une transition en douceur.

• Durée de transition : 1000 ms

Recréer l'exemple #3

Rotation de transformation par défaut

Pour le troisième exemple, nous allons faire presque exactement la même chose que dans l'exemple précédent, mais au lieu d'avoir un retournement horizontal, nous créons un retournement vertical.

• Centre : 359,9 degrés

Survol Transformer Rotation

Assurez-vous de remettre la valeur que vous avez modifiée à « 0deg » au survol.

• Centre : 0deg

Transitions

Et, encore une fois, augmentez la durée de transition dans les paramètres de transition.

• Durée de transition : 1000 ms

Recréer l'exemple n°4

Échelle de transformation par défaut

Passons au prochain et dernier exemple ! Commencez par transformer l'échelle du module mais assurez-vous que le module reste intact sur des tailles d'écran plus petites.

• Bas : 150 % (ordinateur de bureau), 100 % (tablette et téléphone)
• À droite : 150 % (ordinateur de bureau), 100 % (tablette et téléphone)

Échelle de transformation de survol

Modifiez l'échelle de transformation au survol pour permettre au module de se remettre en place sur le bureau.

• Bas : 100 %
• À droite : 100 %

Rotation de transformation par défaut

Continuez en modifiant les valeurs de rotation de transformation. Encore une fois, assurez-vous que le module reste intact sur des tailles d'écran plus petites en modifiant les valeurs en conséquence.

• Gauche : 322 degrés (ordinateur de bureau), 0 degrés (tablette et téléphone)
• À droite : 59 deg (ordinateur de bureau), 0 deg (tablette et téléphone)

Survol Transformer Rotation

Laissez le module se mettre en place au survol en remplaçant les valeurs que vous avez ajoutées par « 0deg ».

• Gauche : 0 degré
• Droite : 0 degré

Inclinaison de transformation par défaut

Modifiez également les valeurs d'inclinaison de la transformation.

• Bas : 22 degrés (ordinateur de bureau), 0 degrés (tablette et téléphone)
• À droite : 22 deg (ordinateur de bureau), 0 deg (tablette et téléphone)

Hover Transform Skew

Ramenez les valeurs par défaut au survol.

• Bas : 0deg
• Droite : 0 degré

Transitions

Enfin, augmentez la durée de transition dans les paramètres de transition.

• Durée de transition : 500 ms

Cloner le module Blurb dans la colonne 1 quatre fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé les paramètres de transition, vous pouvez continuer et cloner le module Blurb quatre fois. Placez les doublons dans les colonnes restantes et le tour est joué !

Dernières pensées

Dans ce didacticiel, nous vous avons montré comment utiliser de manière créative les options de transformation et de survol de Divi. Plus précisément, nous avons recréé quatre exemples différents qui vous montrent comment rendre les modules Blurb plus interactifs tout en conservant le résultat souhaité sur des écrans plus petits. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!