Comment concevoir une section FAQ créative avec Divi

Rifat Divi Tutorials May 21, 2021

La « question fréquemment posée » est une section spéciale où un fournisseur de services partage des renseignements importants ou clarifie les doutes que les gens posent habituellement. Il s’agit d’une section essentielle pour tout site Web qui fournit n’importe quel service parce que les gens visitent habituellement leur premier pour trouver des réponses à leurs questions. Une page FAQ avec un design créatif est un excellent moyen de dire comment la beauté soif que vous êtes, et en même temps, vous vous souciez de leurs demandes.

Faq section est une section fixe avec plusieurs questions et réponses. Il est essentiel de les garder organisés. Dans le tutoriel d’aujourd’hui, nous allons apprendre comment nous pouvons utiliser Divi pour concevoir une section FAQ créative avec onglets cliquables.

Aperçu

C’est à cela que ressemblera notre conception finale.

Construction de la structure

Ajouter: Section 1

Couleur de fond

Nous commencerons par ajouter une couleur d’arrière-plan sur la section initiale de notre page de travail. Ouvrez les paramètres de la section et appliquez la couleur de fond.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant
  • Couleur de fond: #fffbf2

Paramètres d’espacement

Nous allons faire quelques ajustements sur l’espacement.

  • Rembourrage inférieur: 0px

Paramètres frontaliers

Maintenant, nous allons appliquer une bordure personnalisée à la section.

  • Largeur de la bordure: 1vw
  • Couleur de la frontière: #fffbf2

Paramètres de l’ombre de la boîte

Ajouter une ombre de boîte.

  • Position verticale de l’ombre de la boîte : 0px
  • Force de propagation de l’ombre de la boîte : 1px
  • Couleur de l’ombre: #000000
  • Position de l’ombre de la boîte : Ombre intérieure

Paramètres de l’index Z

Augmentez la valeur de l’index Z dans l’onglet avancé et nous en avons fini avec les paramètres de cette section.

Ajouter: Ligne 1 Sur la section 1

Structure de colonne

Ajouter une nouvelle ligne (mentionnée dans l’image) à la section nouvellement terminée.

Paramètres de dimensionnement

Ouvrez les paramètres de la ligne et faites les ajustements suivants.

  • Utilisez la largeur de gouttière personnalisée : Oui
  • Largeur de gouttière: 1
  • Largeur maximale: 1380px

Paramètres d’espacement

Faites quelques ajustements sur les onglets d’espacement aussi!

  • Marge supérieure : 3 %
  • Marge inférieure : 3 %
  • Rembourrage gauche: 1%
  • Rembourrage droit: 1%

Ajouter: Module texte colonne

Contenu H1

Ajoutez un module texte à la ligne et ajoutez une balise H1.

Paramètres de texte H1

Modifier les paramètres des textes H1.

  • Cap Sur Font: Cormorant Garamond
  • Titre Font Weight: Bold
  • Taille du texte: Bureau: 60px, Tablette: 42px, et Téléphone: 36px

Ajouter: Module diviseur sur colonne

Ajouter un module diviseur sous le module texte.

Réglage de la visibilité

Assurez-vous que l’option Diviseur d’exposition est activée.

  • Afficher diviseur: Oui

Paramètres de ligne

Passez à l’onglet design et changez la couleur du diviseur.

  • Couleur de ligne: #000000

Paramètres de dimensionnement

En dessous des paramètres de ligne, faire quelques ajustements au dimensionnement.

  • Poids diviseur: 2px
  • Largeur maximale: 150px
  • Hauteur: 2px

Paramètres d’espacement

Maintenant, ajoutez une certaine marge des paramètres d’espacement.

  • Marge supérieure : 4 %

Ajouter: Ligne 2 Sur la section 1

Structure de colonne

Ajouter une 2ème rangée en dessous de la 1ère avec la même structure de colonne.

Paramètres de dimensionnement

Modifiez les paramètres de dimensionnement de la ligne nouvellement créée à partir de l’onglet de conception.

  • Utilisez la largeur de gouttière personnalisée : Oui
  • Largeur de gouttière: 1
  • Largeur maximale: 1380px

Paramètres d’espacement

Faites quelques petits ajustements sur la section d’espacement aussi.

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

Ajouter: Column Text Module 1

Contenu H3

Ajoutez un nouveau module Texte et ajoutez du contenu H3.

Couleur de fond

Ajouter une couleur de fond.

  • Couleur de fond: #ffffff

Paramètres de contenu H3

Faites ces paramètres en texte H3.

  • Cap 3 Font: Karla
  • Cap 3 Font Weight: Bold
  • Cap 3 Font Style: Uppercase
  • Cap 3 Alignement de texte: Centre
  • Cap 3 Taille du texte: 15px
  • Cap 3 Espacement des lettres: 4px

Paramètres de dimensionnement

Modifiez les paramètres de dimensionnement pour différentes tailles d’écran.

Paramètres d’espacement

Personnalisez les valeurs d’espacement.

  • Marge droite: 1%
  • Rembourrage supérieur: 30px
  • Rembourrage inférieur: 20px
  • Rembourrage gauche: 5%
  • Rembourrage droit: 5%

Frontière

Ajoutez une bordure à notre conception de course.

  • Largeur de la bordure: 1px

Ombre de boîte

Ajoutez une ombre de boîte pour rendre le design plus dynamique.

  • Position verticale de l’ombre de la boîte : 0px
  • Couleur de l’ombre: #fff3dd
  • Position de l’ombre de la boîte : Ombre intérieure

Élément principal CSS

Comme tâche finale pour ce module texte, nous ajouterons un code CSS personnalisé à partir de l’onglet avancé. Ce CSS se combinera avec l’ensemble de la conception du texte et permettra d’afficher plusieurs modules côte à côte de la même catégorie

display: inline-block;

Dupliquer le module texte 3 fois

Clonez maintenant le module texte nouvellement fini 3 fois.

Modifier le contenu sur les modules clonés

Maintenant, modifiez le contenu sur les modules clonés en fonction de vos besoins.

Ajouter: Section 2

Espacement

Maintenant, ajoutez une section « régulière » juste sous la précédente et modifiez les paramètres d’espacement de l’onglet de conception.

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

Ajouter: Ligne 1 Sur la section 2

Structure de colonne

Maintenant, ajoutez une nouvelle ligne à cette section. Utilisez la structure de colonne marquée sur l’image.

Paramètres de dimensionnement

Ouvrez les paramètres de la ligne et faites des ajustements sur le dimensionnement de l’onglet de conception.

  • Utilisez la largeur de gouttière personnalisée : Oui
  • Largeur de gouttière : 2
  • Largeur maximale: 1380px

Ajouter: Toggle Module 1 Sur colonne

Ajouter du contenu

Ajoutez un module Toggle sur la ligne et ajoutez du contenu.

Paramètres d’icônes

À partir de l’onglet conception, faites des ajustements sur les paramètres de l’icône.

  • Couleur de l’icône: #000000
  • Utilisez la taille personnalisée de l’icône : Oui
  • Taille de police d’icône : 24px

Paramètres de basculement

Modifiez les paramètres de basculement .

  • Couleur de fond de basculement ouvert : #fffbf2
  • Couleur fermée de fond de bascule : #ffffff

Texte du titre

Son temps pour personnaliser le texte du titre.

  • Couleur de texte de titre ouvert : #333333
  • Couleur du texte du titre: #333333
  • Niveau titre: H4
  • Titre Font: Cormorant Garamond
  • Titre Font Weight: Bold
  • Taille du texte titre: Bureau: 36px, Tablette: 34px, et Téléphone: 28px

Texte de titre fermé

Changez de couleur pour le texte de titre proche.

  • Couleur de texte de titre fermé : #333333

Texte du corps

Nous allons personnaliser le texte du corps aussi.

  • Police de corps: Karla
  • Taille du texte du corps: 17px
  • Hauteur de la ligne du corps: 1.9em

Paramètres d’espacement

Maintenant, modifiez certaines valeurs d’espacement pour la rendre réactive.

  • Top Rembourrage: Bureau: 2%, Tablette: 4%, et Téléphone: 6%
  • Rembourrage inférieur : Bureau : 2%, Tablette : 4%, et Téléphone : 6%
  • Rembourrage gauche: 5%
  • Rembourrage droit: 5%

Paramètres frontaliers

Ensuite, changez la couleur de la bordure en noir.

  • Couleur de la frontière: #000000

Toggle Contenu CSS

À partir de l’onglet avancé, ajoutez un code CSS à la zone de contenu de basculement.

margin-top: 30px;

Dupliquer le module de basculement

Comme nous l’avons fait avec notre premier module de basculement, clonez-le autant de fois que vous en avez besoin.

Ajouter du contenu unique

Modifiez tout le contenu des modules de basculement clonés. De cette façon, il aura l’air plus unique.

Paramètres d’état du module de basculement

Développez le module Toggle 1 et modifiez l’état.

  • État: Ouvert

Dupliquer la ligne entière 3 fois

Nous avons maintenant terminé notre 1ère série de modules de basculement. Maintenant, nous allons le cloner trois fois. Il y aura quatre rangées de modules de basculement. 4 lignes pour quatre sections que nous avons créées précédemment.

Modifier le contenu sur les modules dupliqués

Modifiez le contenu sur les modules clonés en fonction de vos besoins.

Ajout de fonctionnalités

Section 1 Rangée 2 : Ajout consécutif de l’ID CSS

Maintenant, nous allons ajouter un id CSS personnalisé à nos modules. Ici, nous essayons de faire une conception où un visiteur va cliquer sur les onglets FAQ, et les basculements FAQ suivants vont s’étendre. Pour rendre cette conception fonctionnelle, ouvrez chaque module texte de la « ligne 2 sur la section 1 » et ajoutez les cd CSS consécutifs suivants.

  • Module texte #1: faq-item-1
  • Module texte #2: faq-item-2
  • Module texte #3: faq-item-3
  • Module texte #4: faq-item-4

Section 2 Toutes les lignes : Ajout consécutif de l’ID CSS

Ensuite, nous ajouterons des ID CSS aux quatre lignes qui contiennent le module de basculement dans la section 2. En outre, nous maintiendrons la même commande consécutive.

  • Première rangée: faq-tab-1
  • Deuxième rangée: faq-tab-2
  • Troisième rangée: faq-tab-3
  • Quatrième rangée: faq-tab-4

Ajouter: Module de code à la ligne 1 sur la section 1

Puisque nous avons placé à juste titre tous les ID consécutifs de CSS, nous allons maintenant ajouter quelques codes CSS et JQuery à notre page. Ajouter un nouveau module Code dans la 1ère rangée de la section 1 (ci-dessous le module diviseur).

Assurez-vous que les balises de style et de script sont ajoutées dans l’onglet avancé.

Ajouter: Code CSS

Copiez et coller le code suivant entre les balises de style.

[id*="faq-item"] {
cursor: pointer; 
}
 
[id*="faq-tab"]{  
position: absolute!important;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
 
 
.active-faq-item {
color: #6b63dd !important;
background-color: #fff;
}
 
.hide-faq-tab{  
visiblity: hidden;
opacity: 0;  
}
 
.show-faq-tab{
visibility: visible !important;
opacity: 1 !important;
z-index: 12;
   
position: relative !important;
left: 0 !important;
transform: translateX(0%) !important;
}
   
.faq-item-active {
background-color: #000 !important;
color: #fff !important;
}
 
.faq-item-active h3{
color: #fff !important;
}

Ajouter: Code JQuery

Maintenant, ajoutez du code JQuery entre les balises de script.

jQuery(document).ready(function($){
 
$('#faq-item-1').addClass('faq-item-active');
$('#faq-tab-1').addClass('show-faq-tab');
$('[id*="faq-tab"]').not('#faq-tab-1').addClass('hide-faq-tab');
  
$('[id*="faq-item"]').click(function() {
  
var selector = $(this).attr('id').replace('item', 'tab');
var $faqSelect  = $('#' + selector);
 
$('[id*="faq-tab"]').removeClass('show-faq-tab');
$('[id*="faq-tab"]').addClass('hide-faq-tab');
$faqSelect.addClass('show-faq-tab');
  
$('[id*="faq-item"]').removeClass('faq-item-active');
$(this).addClass('faq-item-active');
    
});
});

Résultat final

Nous avons terminé le travail, et notre section FAQ sur mesure ressemblera à ceci.

Mots fina fin

Nous pouvons faire tous les types de beaux dessins à travers Divi, qui gardera les visiteurs sur le site pendant une longue période. La conception interactive de la page FAQ d’aujourd’hui est l’une de ces nombreuses. Si vous voulez voir plus de ces tutoriels Divi, faites-le nous savoir dans les commentaires. Aussi, si vous voulez que nous faisons le tutoriel de votre choix, faites-le nous savoir. Si vous avez apprécié le tutoriel d’aujourd’hui, une part nous inspirerait à apporter plus de tutoriels pour vous.