Cet article est en “non classifié” et exclus de la recherche. Merci de ne pas modifier ces réglages.
Le titre d’un article est le titre H1 et doit rester le seul éléments H1. Pour les intertitres, utiliser H2 et H3.
À noter : les titrages auront un nouveau style lors de la mise en place de la nouvelle HOME.
Les classes additionnelles disponibles
Les classes suivantes sont à ajouter (sans le point) :
- Dans les modules DIVI pour les classes disponibles pour cet éditeur (Avancé / ID et classes).
- Dans la zone “Avancé” de la barre d’outils “Bloc” de Gutenberg pour les classes disponibles pour cet éditeur.
Classes utilisables pour les deux éditeurs
.hvr-grow : agrandir l’élément au hover
Passer la souris sur ce texte pour tester hvr-grow.
.smallblue : paragraphe bleu encadré
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sollicitudin magna eu vehicula euismod. Curabitur commodo metus ligula, rhoncus consequat elit ornare sit amet.
Classes spécifiques à GUTENBERG
.bloc-bleu : fond de bloc bleu avec marge H/B et coins arrondis (exemple ci-dessus). Attention : ajouter “has-background” si le bloc est le dernier d’une série (se voit si le padding bas est manquant).
.bloc-gris : Idem en gris (exemple ci-dessus)
.lipoint (sur ligne séparateur) : Ligne pointillée bleue pleine largeur.
.lipointmarge (sur ligne séparateur) : Ligne pointillée bleue avec espace haut / bas. (voir exemples dans cette page)
.footnote : pour styler un paragraphe en “note de bas de page”.
.image-bord : ajouter une bordure à une image.
.arrondie : arrondir les bords de l’image
Accordéons pour Gutenberg (extension wordpress ajoutée).
Penser à régler le % de largeur de la colonne d’accordéons.
Insertion d’image avec légende, lightbox, bordure (.image-bord) et arrondi (.arrondie).
Pour la lightbox, choisissez simplement “fichier media” comme cible de lien sur l’image.
| Col1 | Col2 | Col3 |
|---|---|---|
| Ceci est un exemple de table Gutenberg formattée par CSS | L’ajout de lignes / colonnes se fait avec le petit icône à 4 cases de l’objet Table. | La largeur des colonnes se règle automatiquement. |
| Les rayures 1 ligne sur 2 se règlent dans les options à droite avec d’autres options diverses. | ||
| Dernière ligne |
Ceci est un exemple de citation standard stylée en CSS. A utiliser quand on a pas de photo.
Auteur de la citation
Sed ultricies eleifend justo in vestibulum. Aenean porta tempus nunc, eu aliquet tortor facilisis vel. Aliquam erat volutpat. Donec sagittis ultricies pharetra.
Ceci est un exemple de texte avec LETTRINE. Sous gutenberg, il suffit d’activer l’option Lettrine dans Typographie (à droite). La lettrine est stylée par le CSS. Sous DIVI, ajouter la classe has-drop-cap au module.
Classes spécifiques aux sections / lignes / colonnes / modules DIVI
.bulletspace : ajouter une marge entre les puces d’une liste
.pa-inline-buttons : Aligner et centrer 2 boutons au lieu de stack. A ajouter à la ligne.
.has-drop-cap : Ajouter une lettrine à un paragraphe. A ajouter au module.
.centrercontenu : Centrer verticalement le contenu d’une colonne (ajouter la classe à la colonne)
Styles utilisables en code HTML dans Divi
Ces styles manuels (par rapport aux styles standard) sont listés ici pour référence et n’ont pas à être modifiés ou utilisés au quoitidien.
<Titrepage> : Montserrat 700 – 60px (CSS). Titres de pages non SEO.
<hr class=”lipointmarge”> : ajouter un séparateur pointillé bleu.
Presets DIVI
Les presets sont des styles “macro” affectables aux modules Divi concernés. Ils sont indiqués ici pour référence et n’ont pas à être modifiés ou utilisés au quotidien.
BT Bleu Rond : Bouton bleu standard
BT Orange 18 : idem BT mais plus gros et fond orange
Ceci est un exemple de note de bas de page (ajout de la classe “footnote”)
