Utilisation des options de transformation de Divi pour créer du contenu de section extensible au survol

Aujourd'hui, nous allons mettre en évidence l'option de conception d'échelle de transformation fournie avec les nouvelles options de transformation de Divi. Plus encore, nous allons recréer un design époustouflant qui permet aux sections de se développer au survol de manière élégante.

Vous pouvez utiliser cette conception pour tout type de site Web que vous créez. Cela vous aidera à partager du contenu pertinent de manière structurée et minimale. À la fin de ce didacticiel, vous pourrez télécharger gratuitement l'intégralité de la mise en page.

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

Commençons à recréer !

Ajouter la section #1

Espacement

Commencez par créer une nouvelle page. Ajoutez votre première section normale à la page, ouvrez les paramètres de section et supprimez tous les rembourrages supérieur et inférieur par défaut dans les paramètres d'espacement.

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

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant la première 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.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut. Nous faisons cela pour limiter l'espace qui sera occupé par la ligne et la section.

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

Ajouter un module diviseur

Visibilité

Le seul module dont nous avons besoin dans cette rangée est un module diviseur. À la fin de ce didacticiel, nous transformerons le séparateur en un séparateur vertical qui reliera toutes les sections à venir. Une fois que vous avez ajouté le 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 en noir.

• Couleur : #000000

Dimensionnement

Modifiez également les valeurs de dimensionnement.

• Poids du diviseur : 1px
• Hauteur : 0px

Espacement

Et augmentez la longueur du diviseur en ajoutant des marges négatives à gauche et à droite.

• Marge gauche : -135vw (ordinateur de bureau), -300vw (tablette), -340vw (téléphone)
• Marge droite : -135vw (ordinateur de bureau), -300vw (tablette), -340vw (téléphone)

Ajouter la section #2

Couleur de l'arrière plan

Passons à la prochaine section régulière ! Une fois que vous avez ajouté la nouvelle section, ouvrez les paramètres de la section et ajoutez une couleur d'arrière-plan entièrement blanche.

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

Espacement

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

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

Bordure par défaut

Ajoutez également une bordure à la section.

• Largeur de la bordure : 1px
• Couleur de la bordure : #000000

Bordure de survol

Et supprimez la largeur de la bordure au survol.

• Largeur de la bordure : 0px

Ombre de boîte par défaut

Nous ajoutons également une ombre de boîte au survol. Pour ce faire, nous devrons d'abord en ajouter un par défaut. Pour nous assurer que l'ombre de la boîte n'apparaît pas par défaut, nous utilisons une couleur d'ombre entièrement transparente.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0)

Ombre de la boîte de survol

Modifiez la couleur de l'ombre au survol à l'aide du code de couleur suivant :

• Couleur de l'ombre : rgba(0,0,0,0.13)

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant la première ligne à la section 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 la section.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter un module de texte

Ajouter du contenu H2

Il est temps de commencer à ajouter des modules ! Le premier module dont nous avons besoin est un module de texte avec du contenu H2.

Paramètres de texte H2

Accédez à l'onglet Conception et modifiez les paramètres de texte H2 selon vos préférences.

• Police du titre 2 : Abril Fatface
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte : 7vw

Espacement

Ajoutez également des valeurs de marge personnalisées.

• Marge inférieure : 5vw
• Marge gauche : 5vw
• Marge droite : 5vw

Ajouter un module diviseur

Visibilité

Le prochain et dernier module dont nous avons besoin dans cette rangée 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 en noir.

• Couleur : #000000

Ajouter la ligne n° 2

Structure des colonnes

Passons au deuxième rang ! Utilisez la structure de colonnes suivante :

Dimensionnement

Nous nous assurons, encore une fois, que la ligne occupe toute la largeur de l'écran en modifiant les paramètres de dimensionnement dans l'onglet de conception.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Nous réduisons également légèrement la taille de la ligne en ajoutant des rembourrages personnalisés à gauche et à droite dans les paramètres d'espacement.

• Rembourrage gauche : 10vw
• Rembourrage droit : 10vw

Affichage

Pour nous assurer que les trois colonnes s'affichent les unes à côté des autres sur des écrans de plus petite taille, nous allons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Continuez en ajoutant un module Blurb à la première colonne de la ligne. Entrez un contenu de votre choix.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Paramètres des icônes

Ensuite, allez dans l'onglet conception et changez la couleur de l'icône.

• Couleur de l'icône : #000000

Paramètres du texte du titre

Passez aux paramètres du texte du titre et modifiez les paramètres selon vos propres préférences.

• Police du titre : Abril Fatface
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000
• Taille du texte du titre : 1.5vw (ordinateur de bureau), 2.5vw (tablette), 3.5vw (téléphone)
• Hauteur de la ligne de titre : 2 em

Paramètres du corps du texte

Faites la même chose pour les paramètres du corps du texte.

• Police du corps : Open Sans
• Alignement du corps du texte : Centre
• Couleur du corps du texte : #666666
• Taille du corps du texte : 0.8vw (ordinateur de bureau), 1.5vw (tablette), 2vw (téléphone)
• Hauteur de la ligne du corps : 2 em

Espacement

Enfin, ajoutez des marges gauche et droite personnalisées au module Blurb.

• Marge gauche : 2vw
• Marge droite : 2vw

Cloner le module Blurb deux fois et le placer 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 de la ligne.

Ajouter la ligne n° 3

Structure des colonnes

Passons à la ligne suivante et dernière. Choisissez la structure de colonne suivante pour cela :

Dimensionnement

Sans ajouter de modules pour le moment, ouvrez les paramètres de ligne et autorisez la ligne à occuper toute la largeur de la section en modifiant les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter un module de boutons

Ajouter du contenu

Le seul module dont nous avons besoin ici est un module de bouton. Ajoutez une copie de votre choix.

Alignement

Ensuite, accédez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Modifiez ensuite les paramètres des boutons.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1,5 vw (ordinateur de bureau), 2,5 vw (tablette et téléphone)
• Couleur du texte du bouton : #000000
• Largeur de la bordure du bouton : 1px
• Couleur de la bordure du bouton : #000000
• Rayon de la bordure du bouton : 1px
• Police des boutons : Open Sans
• Poids de la police : Ultra gras

Espacement

Et créez une forme pour le bouton en utilisant des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 5vw
• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 2vw
• Rembourrage gauche : 10vw
• Rembourrage droit : 10vw

Ajouter des paramètres de transformation à la section 2

Ajouter l'échelle de transformation par défaut à la section 2

Maintenant que nous avons fini de créer et de modifier les deux sections que nous avons ajoutées à notre page, nous pouvons commencer à appliquer les options de transformation. Ouvrez la section 2 et ajoutez des valeurs d'échelle de transformation personnalisées.

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

Passez l'échelle de transformation à la section #2

Modifiez ces valeurs au survol. Remarquez comment nous utilisons la même valeur que pour les écrans plus petits. Cela garantira que l'effet de survol n'aura lieu que sur des écrans de plus grande taille.

• Bas : 90 %
• À droite : 90 %

Cloner la section deux fois

Ensuite, clonez la deuxième section deux fois (ou jusqu'à autant de fois que vous le souhaitez).

Ajoutez Transformer Rotate to Divider Module dans la section #1

Et transformez le diviseur que vous avez ajouté à la première section en jouant avec la valeur de rotation de transformation.

• Gauche : 90 degrés

Téléchargez GRATUITEMENT la disposition de la section en expansion

Pour mettre la main sur la mise en page de la section en expansion, 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 !

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

Dernières pensées

Dans ce didacticiel, nous avons mis en évidence l'option d'échelle de transformation fournie avec les nouvelles options de transformation de Divi. En plus de cela, nous avons recréé un design époustouflant qui permet à l'effet de survol de donner un sens et d'améliorer l'expérience utilisateur globale que les gens ont lorsqu'ils visitent la page. À la fin du didacticiel, vous avez également pu télécharger gratuitement l'intégralité de la mise en page. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!