Créer des designs de FAQ de colonnes uniques avec Divi

Chaque site Web qui communique régulièrement avec les clients peut bénéficier d'une section FAQ. Lors de la création de votre site Web avec Divi, il existe de nombreuses façons d'aborder la conception de votre section FAQ. Maintenant, dans cet article, nous allons créer une section FAQ amusante qui se concentre sur la combinaison de la colonne et du conteneur de module pour créer un beau design. Vous pourrez également télécharger le fichier 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 conception de la FAQ de la colonne GRATUITEMENT

Pour mettre la main sur la conception gratuite de la FAQ de la colonne, vous devez 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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer

Ajouter une nouvelle section

Fond

Commencez par ajouter une nouvelle section régulière à la page sur laquelle vous travaillez. Avant d'ajouter une ligne, ajustez l'arrière-plan de la section.

• Arrière-plan : Dégradé
• Couleur 1 : aqua foncé # 50aebf
• Couleur deux : Aqua clair # 6bf2ff
• Direction: 180deg
• Position de départ : 21 %

Espacement

Modifiez également les valeurs de remplissage de la section.

• Rembourrage supérieur :
  • Ordinateur de bureau : 4vw
  • Tablette : 15vw
  • Téléphone : 24vw
• Rembourrage inférieur : 2vw

Ajouter une nouvelle ligne

Structure des colonnes

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

Paramètres de colonne

Espacement

Ouvrez les paramètres de la colonne 1 et ajoutez un peu de rembourrage à gauche et à droite.

• Rembourrage gauche et droit :
  • Ordinateur de bureau : 1vw
  • Tablette + Téléphone : 3vw

Ajouter un module de texte

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un nouveau module de texte avec du contenu H2 et paragraphe de votre choix.

Texte

Passez à l'onglet Conception et stylisez le texte du paragraphe.

• Police du texte : Acteur
• Couleur du texte : blanc cassé ##f6f6f6
• Taille du texte:
  • Ordinateur de bureau + tablette : 1.5vw
  • Téléphone : 3.8vw
• Espacement des lettres du texte : 1px
• Alignement du texte : Centre

Texte d'en-tête

Ensuite, stylisez le texte du titre.

• Niveau du texte de l'en-tête : H2
• Police H2 : Verdana
• Poids de la police H2 : demi-gras
• Couleur de la police H2 : Blanc cassé : #f6f6f6
• Taille de la police H2 :
  • Ordinateur de bureau : 3vw
  • Tablette : 5vw
  • Téléphone : 6vw
• Espacement des lettres H2 : 7px
• Hauteur de la ligne H2 :
  • Bureau : 1,8 em
  • Tablette : 1,6 em
  • Téléphone : 1,5 cm

Dimensionnement

De plus, ajustez la taille.

• Largeur : 100 %

Espacement

Enfin, ajustez l'espacement.

• Marge supérieure:
  • Ordinateur de bureau + tablette : 1.5vw
• Marge inférieure :
  • Téléphone : -5vw
• Rembourrage inférieur : 0vw
• Rembourrage Gauche + Droite : 7vw

Ajouter un module diviseur

Ligne

Sous le texte, ajoutez un module de séparation et rendez-le jaune.

• Couleur de la ligne : Jaune #ffe100

Dimensionnement

Ensuite, ajustez le poids et la largeur.

• Poids du diviseur : 4px
• Largeur : 12%
• Alignement du module : Centre

Espacement

Enfin, ajustez l'espacement.

• Marge supérieure:
  • Ordinateur de bureau + tablette : -1vw
  • Téléphone : 10vw

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant un nouveau en utilisant la structure de colonnes suivante :

Dimensionnement

Avant toute chose, ajustez la taille.

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ajustez ensuite l'espacement.

• Marge supérieure : 3vw
• Marge inférieure : 11vw
• Marge gauche et droite : automatique
• Rembourrage supérieur : 0vw
• Rembourrage inférieur : 11vw
• Rembourrage gauche et droit : 5vw

Paramètres de la colonne 1

Contexte en survol

Avant d'ajouter les autres colonnes, stylisez l'arrière-plan de la colonne 1 comme suit :

• Arrière-plan de survol : Dégradé
• Couleur 1 : Jaune #ffe100
• Couleur deux : transparent
• Type de dégradé : Radial
• Direction radiale : en haut à gauche
• Position de début et de fin : 19 %

Espacement

Ajoutez des valeurs d'espacement à la colonne suivante.

• Rembourrage inférieur :
  • Ordinateur de bureau + tablette : 0vw
  • Téléphone : 4vw
• Rembourrage gauche et droit :
  • Ordinateur de bureau : 1vw
  • Tablette + Téléphone : 3vw

Frontière

Ajoutez également des coins arrondis à la colonne.

• Coins arrondis : 1vw aux quatre coins

Transformer

Enfin, appliquez une valeur de traduction de transformation personnalisée à la colonne.

• Transformer la traduction : axe des y 4vw (ordinateur de bureau), 0vw (survol, tablette et téléphone)

Dupliquer la colonne 1 quatre fois

Maintenant, dupliquez la première colonne quatre fois.

Paramètres de la colonne 2

Transformer

Ensuite, ajustez les valeurs de transformation. Tout d'abord, la colonne 2.

• Transformer la traduction : 2vw axe y (bureau), 0vw (survol, tablette et téléphone)

Paramètres de la colonne 3

Transformer

Ensuite, réinitialisez la valeur de transformation dans la colonne 3.

• Transformer traduire : réinitialiser

Colonne 4 Paramètres

Transformer

Ajustez également la valeur de transformation dans la colonne 4.

• Transformer la traduction : 2vw axe y (bureau), 0vw (survol, tablette et téléphone)

Colonne 5 Paramètres

Transformer

Enfin, examinez les valeurs de transformation dans la colonne 5.

• Transformer la traduction : axe des y 4vw (ordinateur de bureau), 0vw (survol, tablette et téléphone)

Ajouter un module de bascule à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un module à bascule à la première colonne avec du contenu de votre choix.

• Titre
• Corps

État

Ensuite, sélectionnez « Fermer » comme état du module.

• Etat : Fermé

Fond

Et ajoutez une image transparente d'un point d'interrogation comme arrière-plan.

• Image de fond
• Mélange d'images d'arrière-plan : lumière douce

Icône

Dans l'onglet Conception, stylisez l'icône.

• Couleur de l'icône : Jaune #ffe100
• Taille de l'icône :
  • Bureau : 34 pixels
  • Tablette + Téléphone : 20px

Basculer

Ensuite, stylisez les arrière-plans à bascule pour la statique et le survol.

• Couleur d'arrière-plan à bascule ouverte : sarcelle #0092af
• Couleur d'arrière-plan à bascule fermée : Blanc cassé : #f7f7f7
  • Survol : Sarcelle #0092af

Texte du titre

Continuez en stylisant le texte du titre.

• Couleur du texte du titre ouvert : Blanc cassé : #f7f7f7
• Couleur du texte du titre : gris très foncé #3a3a3a
  • Survol : Blanc cassé : #f7f7f7
• Titre Titre Niveau : H5
• Police H5 : Acteur
• Alignement H5 : Gauche
• Taille du texte H5 :
  • Ordinateur de bureau : 1,5 vw
  • Tablette : 3 vw
  • Téléphone : 4.5 vw

Texte du titre fermé

Stylisez également le texte fermé.

• Couleur du texte du titre fermé : gris très foncé #3a3a3a
• Police du titre fermé : Acteur
• Alignement : à gauche
• Taille du texte fermé :
  • Ordinateur de bureau : 1.5vw
  • Tablette : 3vw
  • Téléphone : 4.5vw

Le corps du texte

N'oubliez pas le corps du texte.

• Police de caractère : acteur
• Alignement du corps du texte : à gauche
• Couleur du corps du texte : Blanc cassé : #f7f7f7
• Taille du corps du texte :
  • Ordinateur de bureau : 0.9vw
  • Tablette : 2vw
  • Téléphone : 3vw
• Hauteur de la ligne du corps : 1,8 em

Espacement

Après le style du texte, ajoutez des valeurs d'espacement.

• Marge supérieure:
  • Ordinateur de bureau + tablette : 1vw
• Rembourrage haut + bas :
  • Ordinateur de bureau : 2vw
  • Tablette : 3vw
  • Téléphone : 5vw
• Rembourrage gauche :
  • Ordinateur de bureau : 2vw
  • Tablette : 4vw
  • Téléphone : 5vw
• Rembourrage droit :
  • Ordinateur de bureau : 2vw
  • Tablette : 3vw
  • Téléphone : 4vw

Frontière

Ajoutez des coins arrondis et supprimez la bordure 1px par défaut.

• Coins arrondis : 1vw aux quatre coins
• Bordure : 0px

Boîte ombre

Enfin, ajoutez une ombre de boîte intérieure.

• Boîte Ombre : 6ème Option
• Force du flou de l'ombre de la boîte :
  • Ordinateur de bureau + tablette : 18px
  • Téléphone : 9px
• Force de propagation de l'ombre de la boîte: -4px
• Couleur de l'ombre : rgba(0,0,0,0.21)

Dupliquer le module à bascule 4 fois

Dupliquez le module à bascule stylisé quatre fois et faites glisser les nouveaux vers les colonnes vides.

Modifier le contenu

Modifiez les questions et les réponses dans les modules à bascule dupliqués et vous avez terminé !

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

Conclusion

Dans cet article, nous vous avons montré comment créer un design de FAQ de colonne unique. Nous avons ajouté quelques options de survol pour donner au design un effet de coin jaune intéressant. Nous espérons que ce design vous inspirera pour créer des designs FAQ intéressants dans le cadre de vos projets Divi. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous!