Cette page montre les blocs de WordPress tels que le thème les habille, chacun inséré à nu, sans réglage propre. Elle est privée : seuls les rédacteurs du site la voient. Revenez-y après chaque retouche du dessin du thème, à la largeur d’un téléphone comme à celle d’un écran.
Charte du thème
Couleurs
Tailles de texte
Petit small Portez ce vieux whisky au juge blond qui fume.
Moyen medium Portez ce vieux whisky au juge blond qui fume.
Grand large Portez ce vieux whisky au juge blond qui fume.
Très grand x-large Portez ce vieux whisky au juge blond qui fume.
Titre héros xx-large Portez ce vieux whisky au juge blond qui fume.
Polices
Titres (Cormorant Garamond) Portez ce vieux whisky au juge blond qui fume.
Corps (Montserrat) Portez ce vieux whisky au juge blond qui fume.
Sur un fond contrasté
Une section sur la couleur du thème la plus éloignée de son fond, avec un lien et du texte en gras : les liens, les listes et les deux sortes de boutons doivent y rester lisibles.
- Un élément de la liste
- Un élément de la liste
Bannière
Un texte sur une bannière
Navigation
Paragraphes
Sur une seule colonne
Un paragraphe porte les formats du texte courant : du gras, de l’italique, un lien dans le texte, du code dans la ligne, de l’exposant et de l’indice, du texte barré, et une touche du clavier, Ctrl + S. Une note est appelée ici1 et écrite au pied de la page.
Un paragraphe qui s’ouvre sur une lettrine. La première lettre prend la hauteur de plusieurs lignes et le texte coule autour : vérifiez qu’elle garde la police du thème, et que la deuxième ligne ne la heurte pas.
Colonage automatique
Une ligne se lit le mieux entre quarante-cinq et soixante-quinze caractères. Au-delà, l’œil perd le début de la ligne suivante ; en deçà, il saute trop souvent. Un long texte posé sur toute la largeur d’un grand écran fatigue donc le lecteur, et la réponse habituelle est de resserrer la colonne. Le colonnage automatique répond autrement : le texte coule d’une colonne dans la suivante, comme dans un journal, autant qu’il en tient côte à côte, et une seule sur un téléphone. Rien n’est compté à la main ; seule est donnée la largeur à partir de laquelle une colonne se lit bien. Vérifiez l’écart entre les colonnes, le filet que le thème y trace peut-être, et qu’aucune colonne ne finit sur une ligne seule.
Éléments
Titre de niveau 2
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Listes
Non ordonnée
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
Imbriquée
- Un élément de la liste
- Un élément un niveau plus bas
- Un élément de la liste
- Un élément un niveau plus bas
Ordonnée
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
- Un élément de la liste
Un paragraphe après une liste : l’espace au-dessus doit être le même qu’entre deux paragraphes.
Boutons
Icônes de réseaux sociaux
Pagination
La pagination des archives, posée sur une boucle de deux articles : les numéros fonctionnent.
Auteur de la publication
Une citation
Une citation se détache du texte qui l’entoure, avec sa source en dessous.
La source de la citation
Une citation en exergue
Une citation en exergue sort une phrase du texte, en plus grand, pour accrocher l’œil.
La source de la citation
Poésie
Un vers posé sur sa ligne,
un second qui garde ses blancs,
et un troisième, plus en retrait.
Tableaux
Un tableau avec sa légende
| Colonne | Valeur |
|---|---|
| Première ligne | 12 |
| Deuxième ligne | 34 |
Un tableau en Rayures
| Écran | Largeur (px) | Hauteur (px) |
|---|---|---|
| Téléphone | 390 | 844 |
| Tablette | 768 | 1024 |
| Ordinateur portable | 1366 | 768 |
| Écran de bureau | 1920 | 1080 |
| Quatre largeurs à vérifier |
Dépliant
Ce qu’il cache
Le titre est le bouton : rien d’autre n’est nécessaire pour l’ouvrir, à la souris comme au clavier.
Accordéon
Chaque élément s’ouvre sur son propre titre ; les autres restent ouverts ou se ferment, selon le réglage du bloc.
Chaque élément s’ouvre sur son propre titre ; les autres restent ouverts ou se ferment, selon le réglage du bloc.
Onglets
Premier onglet
Le premier panneau
Un seul panneau s’affiche à la fois. Les flèches du clavier passent d’un onglet à l’autre une fois la liste sélectionnée.
Deuxième onglet
Le deuxième panneau
Vérifiez la marque de l’onglet actif, et qu’un long libellé passe à la ligne sans repousser les autres.
Média & texte
Une image et un texte côte à côte, l’un sous l’autre sur un téléphone.
Une boîte
Un paragraphe avec une bordure, des coins arrondis et une marge intérieure, tous choisis dans le bloc : la couleur de la bordure est la seule couleur de la page fixée à la main.
Préformaté
Écran Largeur Hauteur Téléphone 390 844 Tablette 768 1024 Bureau 1920 1080
Code
.wp-block-button__link {
padding: 0.75em 1.5em;
border-radius: 999px;
}Les séparateurs
Ligne simple (défaut)
Ligne large
Pointillés
Un espacement
Cent pixels de vide au-dessus de ce texte.
Champs de formulaire
Les champs du navigateur (HTML)
Un formulaire Cabrio Contact
Rechercher
Images et galeries
Une image avec sa légende
Elle s’agrandit au clic : vérifiez la visionneuse, son bouton de fermeture et son fond.
La galerie par défaut
Grille dépliante (Cabrio Options utiles)
Défilante (Cabrio Options utiles)
Maçonnerie (Cabrio Options utiles)
Une image à gauche, une image à droite
Une image alignée d’un côté laisse le texte couler autour d’elle. Vérifiez l’espace entre l’image et le texte, des deux côtés, et que sur un téléphone l’image ne serre pas le texte dans une colonne de trois mots. Une deuxième phrase rend le paragraphe assez long pour passer sous l’image.
Une image alignée d’un côté laisse le texte couler autour d’elle. Vérifiez l’espace entre l’image et le texte, des deux côtés, et que sur un téléphone l’image ne serre pas le texte dans une colonne de trois mots. Une deuxième phrase rend le paragraphe assez long pour passer sous l’image.
Multimédia
Contenu embarqué
Audio
Vidéo
Commentaires
Cas difficiles
Un mot très long et une adresse très longue
Un mot qui ne tient pas sur un téléphone : Hippopotomonstrosesquippedaliophobiquement. Et une adresse sans aucune espace : https://www.example.com/a/very/long/path/with/no/space/at/all/to/see/whether/the/text/runs/out/of/a-phone-screen.html.
Un titre sur trois lignes
Un titre très long, écrit pour courir sur trois lignes sur un grand écran et davantage sur un téléphone, pour vérifier l’espace entre ses lignes et sous lui
Un paragraphe juste après : l’espace au-dessus doit être celui qui suit un titre.
Note de bas de page
- Une note : le bloc Notes de bas de page, en fin de page, les rassemble toutes, chacune avec son retour vers le texte. ↩︎
Laisser un commentaire