Comment construire des FAQ en utilisant des onglets personnalisés dans Divi

Lorsque vous créez des pages FAQ pour votre site Web, assurez – vous de garder à l’esprit l’expérience utilisateur. Les visiteurs recherchent les réponses le plus rapidement possible, et la façon dont vous Concevez la page a une grande influence sur elle. Si le nombre de FAQ est limité, vous pouvez facilement les afficher sous l’autre. Cependant, si vous avez beaucoup de questions auxquelles vous devez répondre, il peut être plus utile de les combiner. Dans le tutoriel Divi d’aujourd’hui, nous vous montrerons comment les construire en onglets cliquables personnalisés. Vous pouvez également télécharger gratuitement le fichier json!
On y va. Aperçu avant d’aller plus loin dans ce tutoriel, jetons un coup d’oeil rapide aux résultats sur différents écrans de taille. Bureau Mobile Téléchargement gratuit mise en page pour obtenir une mise en page gratuite, vous devez d’abord télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire. Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout.
Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! 1. Ajouter la structure de l’élément de construction section 1
La page sur laquelle vous travaillez. Ouvrez les paramètres partiels et appliquez la couleur de fond. Couleur de fond: # fffbf2 L’espacement passe à l’onglet conception de la section et supprime tous les remblais inférieurs par défaut. Remplissage du Bas: 0px Bordure puis appliquer une bordure personnalisée.
Largeur de la bordure: 1vw couleur de la bordure: # fffbf2 La boîte d’ombre contient également une ombre de boîte. Position verticale de l’ombre de la boîte: 0px force de diffusion de l’ombre de la boîte: 1px couleur de l’ombre: # 000000 position de l’ombre dans la boîte: ombre intérieure Index Z e complète la configuration de la section en ajoutant l’index Z dans l’onglet avancé. Indice Z: 12 Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes à la section en utilisant la structure de colonne suivante: Redimensionner sans ajouter de module, ouvrez les paramètres de ligne et changez les paramètres de taille comme suit:
Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur maximale: 1380 px Espacement ajoutez des valeurs d’espacement personnalisées plus tard. Marge supérieure: 3% marge inférieure: 3% marge gauche: 1% marge droite: 1% Ajouter un formulaire texte à la colonne ajouter du contenu H1 il est temps d’ajouter un formulaire, en commençant par un formulaire texte qui contient du contenu H1 de votre choix. Paramètres de texte H1 modifier les paramètres de texte du module en conséquence H1: police de titre: cormorant garamond poids de la police de titre: en gras taille du texte: Bureau: tablette de 60 pixels: 42px téléphone mobile: 36px Ajouter un module séparateur à la colonne visibilité le module suivant que nous ajouterons est le module séparateur. Assurez – vous que l’option afficher le séparateur est activée. Afficher les séparateurs: Oui La ligne passe à l’onglet conception du module et change la couleur de la ligne. Couleur de ligne: # 000000 Redimensionner l’édition
Au lieu de redimensionner les paramètres. Poids du séparateur: 2px largeur maximale: 150 Px hauteur: 2px L’espacement e complète le réglage du module en ajoutant une marge supérieure au réglage de l’espacement. Marge supérieure: 4% Ajouter la structure de colonne de la ligne # 2 à la ligne suivante. Utilisez la structure de colonne suivante: Redimensionner sans ajouter de module, activer les paramètres de ligne et modifier les paramètres de taille comme suit: utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1max: 1380 px Supprime tous les remblais supérieurs et inférieurs par défaut. Remplissage supérieur: 0px remplissage inférieur: 0px Ajouter le formulaire de texte 1 à la colonne ajouter du contenu H3 ajouter le premier formulaire de texte à la ligne qui contient du contenu H3 de votre choix. Couleur de fond ajouter une couleur de fond blanche. Couleur de fond: # FFFFFF Le paramètre de texte H3 est ensuite modifié en conséquence:
Titre 3 caractères: Karla header 3 poids de police: bold header 3 style de police: capital header 3 alignement du texte: header Center 3 taille du texte: 15 Px header 3 espacement des lettres: 4px Il peut également changer la largeur entre les différentes tailles d’écran. Largeur: Bureau: 22% tablette et téléphone: 44% L’espacement ajoute ensuite des valeurs d’espacement personnalisées. Marge droite: 1% marge supérieure: 30px marge inférieure: 20px marge gauche: 5% marge droite: 5% Bordure ajouter une bordure.
Largeur du bord: 1px La boîte d’ombre contient également une ombre de boîte. Position verticale de l’ombre du cadre: 0px couleur de l’ombre: # fff3dd position de l’ombre dans la boîte: ombre intérieure L’élément principal CSS e complète la configuration du module en spécifiant des attributs d’affichage personnalisés pour l’élément principal du module
Onglet avancé. Cela, combiné à une largeur ajustée, permettra à plusieurs modules de se tenir à côté l’un de l’autre. Affichage: Bloc inline; Une fois le premier module de texte cloné, vous pouvez le cloner trois fois. Assurez – vous d’éditer le contenu de chaque copie. Ajouter l’espacement de la section # 2 ajouter une autre section juste en dessous de la section précédente, ouvrir les paramètres de la section et appliquer le remplissage en haut et en bas. Remplissage supérieur: 100 Px remplissage inférieur: 100 px Ajouter une structure de ligne 1 continuer à ajouter de nouvelles lignes en utilisant la structure de colonne suivante: Redimensionner pour ouvrir les paramètres de ligne, aller à l’onglet conception et modifier les paramètres de taille comme suit: utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 2 largeur maximale: 1380 px Ajoutez le module d’échange no 1 à la colonne ajouter du contenu, puis ajoutez le premier module d’échange à la ligne et utilisez une partie du contenu que vous avez sélectionné. Les paramètres de l’icône passent à l’onglet conception du module et changent les paramètres de l’icône. Couleur de l’icône: # 000000 utiliser la taille de l’icône personnalisée: est la taille de la police de l’icône: 24 px Activer \/ désactiver les paramètres modifie également les paramètres de commutation. Activer la couleur de fond de commutation: # fffbf2désactiver la couleur de fond de commutation: # FFFFFF Les paramètres de texte du titre appliquent ensuite un style personnalisé au titre. Ouvrir le titre couleur du texte: # 333333 titre couleur du texte: # 333333 titre niveau du titre: H4 titre caractère: cormorant garamond titre poids de la police: gras titre taille du texte: Bureau: 36px tablette: 34px Téléphone: 28px Désactiver les paramètres du texte du titre nous changeons également la couleur du texte du titre désactivé. Fermer la couleur du texte du titre: # 3333 Configuration du corps du document
Nous modélisons donc le corps. Caractères du corps: Karla taille du texte du corps: 17px hauteur de la ligne du corps: 1,9 em Espacement nous ajouterons également des valeurs d’espacement des réactions. Remplissage en haut: Bureau: 2% tablette: 4% téléphone mobile: 6% remplissage en bas: Bureau: 2% tablette: 4% téléphone mobile: 6% remplissage à gauche: 5% remplissage à droite: 5% Bordure ensuite, nous changerons la couleur de la bordure. Couleur de la bordure: # 000000 Activer \/ désactiver le contenu CSS, nous complétons la configuration du module en ajoutant une ligne de code CSS dans la zone d’activation \/ désactivation du contenu de l’onglet avancé. Bord supérieur: 30px; Cloner le module d’activation plusieurs fois au besoin une fois le premier module de commutation terminé, vous pouvez Cloner le module d’activation plusieurs fois au besoin. Modifier le contenu assurez – vous que tout le contenu en double est édité. Changez l’état du module de commutation no 1, puis ouvrez à nouveau le premier module de commutation et changez l’état en marche. État: ouvert Maintenant que nous avons le premier ensemble de modules de commutation, nous pouvons cloner la ligne entière trois fois. Nous avons maintenant un total de 4 lignes qui contiennent des modules d’activation \/ désactivation. Correspond au nombre de modules de texte à la deuxième ligne de la section 1. Assurez – vous d’éditer le contenu de chaque ligne en double. Ajouter une fonctionnalité ajouter des identifiants CSS consécutifs au formulaire texte à la ligne 2 de la section 1 maintenant que nous avons tous les éléments prêts, il est temps d’appliquer cette fonctionnalité. Nous veillerons à ce que le commutateur correspondant à la FAQ soit affiché une fois que vous cliquez sur le formulaire texte à la ligne 2 de la section 1. Ouvrez chaque formulaire de texte séparément et utilisez l’ID CSS consécutif suivant: formulaire de texte 1: FAQ – item – 1 formulaire de texte 2: FAQ – item – 2 formulaire de texte 3: FAQ – item – 3 formulaire de texte 4: FAQ – item – 4 A.
Ajoutez un ID CSS séquentiel à la ligne de la section # 2. Ensuite, nous appliquerons l’ID CSS à chaque ligne qui contient le module Switch. Nous suivons la même séquence continue. Première ligne: FAQ – tab – 1 deuxième ligne: FAQ – tab – 2 troisième ligne: FAQ – tab – 3 quatrième ligne: FAQ – tab – 4 Ajoutez le module de code à la ligne 1 de la section 1 pour que cette fonctionnalité fonctionne, et nous utiliserons le code CSS et jquery personnalisé. Pour ajouter du Code à la page, nous insérons un nouveau module de code directement sous le module séparateur à la ligne 1 de la section 1. Assurez – vous d’ajouter des balises de style et des scripts à l’avance. Ensuite, copiez et collez le code CSS suivant entre les balises de style: [ID * = \
Curseur: pointeur;
}
[ID * = \
Position: absolument! Important
En haut: 0px;
En bas: voiture élévatrice;
Gauche: 50%;
Droite: automatique;
Conversion: translatex (- 50%);
}
– Oui. Activités foire aux questions
Couleur: # 6b63dd! Important
Couleur de fond: # FFF;
}
– Oui. Masquer l’onglet FAQ
Visibilité: cachée;
Opacité: 0;
}
– Oui. Afficher l’onglet FAQ
Visibilité: visible! Important
Transparence: 1! Important
Indice Z: 12;
Position: relative! Important
Gauche: 0! Important
Transformation: translatex (0%)! Important
}
– Oui. Activation du projet FAQ
Couleur de fond: # 000! Important
Couleur: # FFF! Important
}
– Oui. FAQ item activation H3 {
Couleur: # FFF! Important
} Ajoutez le Code jquery et complétez le tutoriel cost en utilisant la ligne de code jquery suivante entre les balises de script: jquery (document). Prêt (fonction ($)
$(\
$(\
$(‘[ID * = \
$(‘[ID * = \
Sélecteur de variables = $(ceci). Propriété (\
Variable $faqselect = $(\
$(‘[ID * = \
$(‘[ID * = \
$FAQ selection. Addclass (‘show FAQ tab’);
$(‘[ID * = \
$(this). Addclass (‘FAQ item active’)
B) la question;
});
}); aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille. Bureau mobile dernière idée dans cet article, nous vous montrons comment améliorer l’expérience utilisateur de la page FAQ. Plus précisément, nous vous avons montré comment organiser les questions en différents onglets par type. Cette approche vous aidera à organiser des questions fréquemment posées, ce qui aidera vos visiteurs à trouver des réponses plus rapidement. Vous pouvez également télécharger gratuitement le fichier json! Si vous avez des questions, n’hésitez pas à faire part de vos commentaires dans la section commentaires ci – dessous. Si vous souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez – vous de vous abonner à notre newsletter et à YouTube Channel afin que vous soyez toujours l’un des premiers à apprendre et à bénéficier de ce contenu gratuit.