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
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
Largeur de la bordure: 1vw couleur de la bordure: # fffbf2
Utiliser une largeur de gouttière personnalisée: Oui largeur de gouttière: 1 largeur maximale: 1380 px
Au lieu de redimensionner les paramètres. Poids du séparateur: 2px largeur maximale: 150 Px hauteur: 2px
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
Largeur du bord: 1px
Onglet avancé. Cela, combiné à une largeur ajustée, permettra à plusieurs modules de se tenir à côté l’un de l’autre. Affichage: Bloc inline;
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
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
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
}
$(\
$(\
$(‘[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;
});
});