Lorsque créez des pages FAQ pour votre site Web, assurez de garder à lamp;rsquoesprit lamp;rsquoexpérience utilisateur. Les visiteurs recherchent les réponses le plus rapidement possible, et la façon dont Concevez la page a une grande influence sur elle. le nombre de FAQ est limité, pouvez facilement les afficher sous lamp;rsquoautre. Cependant, si avez beaucoup de questions auxquelles devez répondre, il peut être plus utile de les combiner. Dans le tutoriel Divi damp;rsquoaujourdamp;rsquohui, nous montrerons comment les construire en onglets cliquables personnalisés. Vous pouvez également gratuitement le fichier json!
On y va. Aperçu avant damp;rsquoaller plus loin dans ce tutoriel, jetons un coup damp;rsquooeil 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, devez damp;rsquoabord en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire. Télécharger le fichier
Inscrivez à Divi Newsletter et nous enverrons par courriel une copie du dernier paquet de mise en page de la page damp;rsquoatterrissage Divi, ainsi quamp;rsquoun grand nombre damp;rsquoautres ressources, conseils et astuces Divi gratuits. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et cliquez sur pour accéder au paquet Layout.
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 lamp;rsquoélément de construction section 1
La page sur laquelle travaillez. Ouvrez les paramètres partiels et appliquez la couleur de fond. Couleur de fond: fffbf2 Lamp;rsquoespacement passe à lamp;rsquoonglet 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 damp;rsquoombre contient également une ombre de boîte. Position verticale de lamp;rsquoombre de la boîte: 0px force de diffusion de lamp;rsquoombre de la boîte: 1px couleur de lamp;rsquoombre: 000000 position de lamp;rsquoombre dans la boîte: ombre intérieure Index Z e complète la configuration de la section en ajoutant lamp;rsquoindex Z dans lamp;rsquoonglet 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 damp;rsquoespacement 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 damp;rsquoajouter 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 que lamp;rsquooption afficher le séparateur est activée. Afficher les séparateurs: Oui La ligne passe à lamp;rsquoonglet conception du module et change la couleur de la ligne. Couleur de ligne: 000000 Redimensionner lamp;rsquoédition
Au lieu de redimensionner les paramètres. Poids du séparateur: 2px largeur maximale: 150 Px hauteur: 2px Lamp;rsquoespacement e complète le réglage du module en ajoutant une marge supérieure au réglage de lamp;rsquoespacement. 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 damp;rsquoécran. Largeur: Bureau: 22% tablette et téléphone: 44% Lamp;rsquoespacement ajoute ensuite des valeurs damp;rsquoespacement 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 damp;rsquoombre contient également une ombre de boîte. Position verticale de lamp;rsquoombre du cadre: 0px couleur de lamp;rsquoombre: fff3dd position de lamp;rsquoombre dans la boîte: ombre intérieure Lamp;rsquoélément principal CSS e complète la configuration du module en spécifiant des attributs damp;rsquoaffichage personnalisés pour lamp;rsquoélément principal du module
Onglet avancé. Cela, combiné à une largeur ajustée, permettra à plusieurs modules de se tenir à côté lamp;rsquoun de lamp;rsquoautre. Affichage: Bloc inline Une fois le premier module de texte cloné, pouvez le cloner trois fois.
Assurez damp;rsquoéditer le contenu de chaque copie. Ajouter lamp;rsquoespacement 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 à lamp;rsquoonglet 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 damp;rsquoéchange no 1 à la colonne ajouter du contenu, puis ajoutez le premier module damp;rsquoéchange à la ligne et utilisez une partie du contenu que avez sélectionné. Les paramètres de lamp;rsquoicône passent à lamp;rsquoonglet conception du module et changent les paramètres de lamp;rsquoicône. Couleur de lamp;rsquoicône: 000000 utiliser la taille de lamp;rsquoicône personnalisée: est la taille de la police de lamp;rsquoicô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 damp;rsquoespacement 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 damp;rsquoactivation désactivation du contenu de lamp;rsquoonglet avancé. Bord supérieur: 30px Cloner le module damp;rsquoactivation plusieurs fois au besoin une fois le premier module de commutation terminé, pouvez Cloner le module damp;rsquoactivation plusieurs fois au besoin. Modifier le contenu assurez que tout le contenu en double est édité. Changez lamp;rsquoétat du module de commutation no 1, puis ouvrez à nouveau le premier module de commutation et changez lamp;rsquoé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 damp;rsquoactivation désactivation. Correspond au nombre de modules de texte à la deuxième ligne de la section 1. Assurez damp;rsquoé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 damp;rsquoappliquer cette fonctionnalité. Nous veillerons à ce que le commutateur correspondant à la FAQ soit affiché une fois que cliquez sur le formulaire texte à la ligne 2 de la section 1. Ouvrez chaque formulaire de texte séparément et utilisez lamp;rsquoID 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 lamp;rsquoID 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 damp;rsquoajouter des balises de style et des scripts à lamp;rsquoavance. 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 lamp;rsquoonglet FAQ
Visibilité: cachée
Opacité: 0
}
Oui. Afficher lamp;rsquoonglet 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 ($)
$(
$(
$(amp;lsquo[ID * =
$(amp;lsquo[ID * =
Sélecteur de variables = $(ceci). Propriété (
Variable $faqselect = $(
$(amp;lsquo[ID * =
$(amp;lsquo[ID * =
$FAQ selection. Addclass (amp;lsquoshow FAQ tabamp;rsquo)
$(amp;lsquo[ID * =
$(this). Addclass (amp;lsquoFAQ item activeamp;rsquo)
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 nous montrons comment améliorer lamp;rsquoexpérience utilisateur de la page FAQ. Plus précisément, nous avons montré comment organiser les questions en différents onglets par type. Cette approche aidera à organiser des questions fréquemment posées, ce qui aidera vos visiteurs à trouver des réponses plus rapidement. Vous pouvez également gratuitement le fichier json! avez des questions, namp;rsquohésitez pas à faire part de vos commentaires dans la section commentaires ci dessous. souhaitez en savoir plus sur Divi et recevoir plus de cadeaux sur Divi, assurez de abonner à notre newsletter et à YouTube Channel afin que soyez toujours lamp;rsquoun des premiers à apprendre et à bénéficier de ce contenu gratuit.
Comment construire des FAQ en utilisant des onglets personnalisés dans Divi
