Transformer des colonnes en plans tarifaires avec Divi

Les nouvelles options de colonnes de Divi ont apporté une tonne de nouvelles possibilités de conception à nos flux de travail. Ils permettent d'unir plusieurs modules sans avoir à toucher à une seule ligne de code CSS. Dans cet article, nous allons transformer les colonnes en plans tarifaires en utilisant uniquement les options intégrées de Divi. Nous allons également jouer avec les options de transformation du survol de colonne pour obtenir des effets de survol époustouflants. Vous pourrez également télécharger le 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 des plans de tarification de la colonne GRATUITEMENT

Pour mettre la main sur la mise en page des plans tarifaires des colonnes gratuites, 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 !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Fond dégradé

Ajoutez une nouvelle section standard à la page sur laquelle vous travaillez et ouvrez les paramètres de la section. Accédez aux paramètres d'arrière-plan et ajoutez un arrière-plan dégradé linéaire :

• Couleur 1 : #ededed
• Couleur 2 : #ffffff
• Position de départ : 30 %
• Position finale : 30 %

Espacement

Nous ajoutons également des rembourrages en haut et en bas à la section.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez à l'onglet avancé et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 80 % (ordinateur de bureau et tablette), 90 % (téléphone)
• Largeur maximale : 1400px (ordinateur de bureau), 90 % (tablette), 100 % (téléphone)

Paramètres de la colonne 1

Nous devrons également modifier les paramètres de la colonne, en commençant par la première. Ouvrez les paramètres de la colonne 1.

Fond dégradé

Appliquez l'arrière-plan dégradé suivant à la colonne 1 :

• Couleur 1 : #f7f7f7
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Bas
• Position de départ : 31 %
• Position finale : 31 %

Frontière

Ajoutez également le rayon de bordure « 20px » à la colonne.

Boîte ombre

Et pour créer de la profondeur sur la page, nous ajouterons également une ombre de boîte subtile.

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

Échelle de transformation par défaut

Comme vous pouvez le constater dans l'aperçu de cet article, les colonnes sont légèrement transformées. Accédez aux paramètres de transformation et assurez-vous que l'option d'échelle de transformation reste à « 100 % » dans son état par défaut.

• Bas : 100 %
• À droite : 100 %

Échelle de transformation de survol

Modifiez les valeurs d'échelle de transformation au survol.

• Bas : 120%
• À droite : 120 %

Traduire la transformation par défaut

Nous poussons également légèrement la colonne vers la droite sur le bureau en utilisant les paramètres de traduction de transformation. Ajoutez les entrées suivantes :

• En bas : 34 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• À droite : 0px

Hover Transformer Traduire

Ramenez les valeurs de traduction de transformation à la normale au survol.

• Bas : 0px
• À droite : 0px

Rotation de transformation par défaut

Passez aux paramètres de rotation de transformation et ajoutez la valeur suivante à gauche :

• Gauche : 352 degrés (ordinateur de bureau), 0 degrés (tablette et téléphone)

Survol Transformer Rotation

Ramenez la valeur à '0deg' au survol.

• Gauche : 0 degré

Débordements

Plus tard dans cet article, nous ajouterons un bouton en bas de la colonne. Ce bouton chevauchera la bordure inférieure de la colonne. Pour rendre cela possible, nous devrons rendre visibles les débordements de notre colonne.

• Débordement horizontal : Visible
• Débordement vertical : visible

Indice Z par défaut

Modifiez ensuite l'index z de la colonne sur différentes tailles d'écran. Cela nous aidera à garder l'empilement en ordre.

• Index Z : 9 (ordinateur de bureau), 11 (tablette et téléphone)

Hover Z Index

Au survol, nous voulons que la colonne apparaisse au-dessus des autres. Pour ce faire, nous allons augmenter l'indice z au survol.

• Indice Z : 11

Transitions

Nous créons également une transition en douceur en augmentant la durée de transition dans les paramètres de transition.

• Durée de transition : 500 ms

Paramètres de la colonne 2

Passons à la deuxième colonne ! Allez-y et ouvrez les paramètres de la colonne.

Fond dégradé

Appliquez les paramètres d'arrière-plan dégradé suivants :

• Couleur 1 : #fff200
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Bas
• Position de départ : 31 %
• Position finale : 31 %

Frontière

Ajoutez ensuite '20px' de rayon de bordure.

Boîte ombre

Avec une ombre de boîte subtile.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.14)

Échelle de transformation par défaut

La deuxième colonne est notre plan tarifaire en vedette. Pour nous assurer que cela ne passe pas inaperçu, nous allons augmenter la taille de la colonne dans les paramètres d'échelle de transformation.

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

Échelle de transformation de survol

Modifiez les valeurs d'échelle de transformation au survol.

• Bas : 120%
• À droite : 120 %

Débordements

Modifiez ensuite les débordements horizontaux et verticaux.

• Débordement horizontal : Visible
• Débordement vertical : visible

Indice Z par défaut

Ensuite, allez dans les paramètres de visibilité et augmentez l'index z de la colonne.

• Indice Z : 10

Hover Z Index

Modifiez l'index z au survol.

• Indice Z : 12

Transitions

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

• Durée de transition : 500 ms

Paramètres de la colonne 3

Passons à la troisième et dernière colonne ! Ouvrez les paramètres de la colonne.

Fond dégradé

Accédez aux paramètres d'arrière-plan et ajoutez l'arrière-plan dégradé suivant :

• Couleur 1 : #f7f7f7
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Bas
• Position de départ : 31 %
• Position finale : 31 %

Frontière

Ajoutez ensuite le rayon de bordure « 20px ».

Boîte ombre

Avec une ombre de boîte subtile.

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

Échelle de transformation par défaut

Il est temps de transformer la colonne ! Assurez-vous que les valeurs d'échelle de transformation par défaut restent « 100 % ».

• Bas : 100 %
• À droite : 100 %

Échelle de transformation de survol

Modifiez ces valeurs au survol.

• Bas : 120%
• À droite : 120 %

Traduire la transformation par défaut

Nous poussons également la colonne vers la gauche sur le bureau en appliquant des valeurs de traduction de transformation personnalisées.

• En bas : -34 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• À droite : 0px

Hover Transformer Traduire

Ramenez les valeurs à '0px' au survol.

• Bas : 0px
• À droite : 0px

Rotation de transformation par défaut

Continuez en faisant pivoter la colonne dans son état par défaut.

• Gauche : 8 degrés (ordinateur de bureau), 0 degrés (tablette et téléphone)

Survol Transformer Rotation

Remplacez la valeur de rotation de la transformation gauche par « 0px » au survol.

• Gauche : 0 degré

Débordements

Assurez-vous que les débordements sont visibles ensuite.

• Débordement horizontal : Visible
• Débordement vertical : visible

Indice Z par défaut

Ensuite, accédez aux paramètres de visibilité et assurez-vous que l'index z par défaut est 9.

• Indice Z : 9

Hover Z Index

Modifiez l'index z au survol.

• Indice Z : 11

Transitions

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

• Durée de transition : 500 ms

Ajouter le module Blurb à la colonne 1

Ajouter un titre

Il est temps de commencer à ajouter des modules à la première colonne ! Ajoutez un nouveau module Blurb et insérez un titre.

Sélectionnez l'icône

Sélectionnez ensuite une icône.

Paramètres des icônes

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

• Couleur de l'icône : #000000
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 50px

Paramètres du titre

Modifiez ensuite les paramètres du texte du titre.

• Police du titre : Poppins
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000
• Taille du texte du titre : 27 px

Espacement

Et ajoutez aussi une marge supérieure.

• Marge supérieure : 80px

Ajouter un module diviseur à la colonne 1

Visibilité

Passons au deuxième module, qui est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Passez à l'onglet Conception et changez la couleur du séparateur en noir.

• Couleur de la ligne : #000000

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur : 6px
• Largeur : 14%
• Alignement du module : Centre
• Hauteur : 0px

Espacement

Enfin, ajoutez une marge supérieure.

• Marge supérieure : 50px

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

Ajouter du contenu

Continuez en ajoutant un module de texte juste en dessous du module de séparation et insérez le contenu de votre choix.

Paramètres de texte

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

• Police de texte : Poppins
• Poids de la police de texte : léger
• Alignement du texte : Centre
• Couleur du texte : #4f4f4f
• Hauteur de la ligne de texte : 2,3 em

Espacement

Ajoutez également des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 50px
• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px

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

Ajouter du contenu

Juste en dessous du module de texte précédent, nous aurons besoin d'un autre module de texte. Entrez un contenu de votre choix.

Paramètres de texte

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

• Police de texte : Poppins
• Poids de la police de texte : lourd
• Alignement du texte : Centre
• Couleur du texte : #000000
• Taille du texte : 47 px
• Hauteur de la ligne de texte : 1 em

Espacement

Ajoutez également des marges haut et bas personnalisées.

• Marge supérieure : 50px
• Marge inférieure : 80px

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans la colonne 1 est un module de bouton. Entrez une copie de votre choix.

Alignement

Accédez à l'onglet Conception et modifiez l'alignement des boutons au centre.

• Alignement des boutons : Centre

Paramètres des boutons

Stylisez également le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 17px
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels
• Police des boutons : Poppins
• Poids de la police du bouton : gras

Espacement

Nous ajouterons également des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 50px
• Marge inférieure : -40px
• Rembourrage supérieur : 23 pixels
• Rembourrage inférieur : 23px
• Remplissage gauche : 70px
• Rembourrage droit : 70 pixels

Boîte ombre

Et nous couronnerons le tout en donnant au module de boutons une ombre de boîte subtile.

• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Cloner tous les modules deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé tous les modules de la colonne 1, vous pouvez les cloner deux fois et placer les doublons dans les deux colonnes restantes de la ligne.

Modifier les icônes et les titres Blurb

Assurez-vous de modifier les icônes et les titres de présentation pour chaque doublon.

Modifier le contenu du module de texte

Avec le contenu du module de texte.

Changer le bouton #2

Enfin, ouvrez le bouton de la colonne 2 et modifiez les paramètres du bouton. Une fois que vous avez terminé cette étape, vous avez terminé !

• Couleur du texte du bouton : #FFFFFF
• Couleur d'arrière-plan du bouton : #8300E9

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 cet article, nous vous avons montré comment transformer des colonnes en plans tarifaires à l'aide des nouvelles options de colonnes de Divi. Vous pouvez personnaliser les plans tarifaires sans avoir à toucher une seule ligne de code CSS ! Ce didacticiel ne fait que montrer comment les nouvelles options de colonne vous aident à unir différents modules dans un beau design. Si vous avez des questions ou des suggestions, n'hésitez pas à les laisser 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.