Démonstration des mises en page WordPress

Tout d’abord, testons l’affichage des pages filles

Une page fille pour la démo

Avec un chapeau suivis des blocs « lien lire la suite » qui ajoute le lien ci-dessous et « lire la suite »qui marque la séparation entre l’intro et le reste de la page.

Démo encore : Une autre page fille pour la démo

Continuer la lecture de « Démonstration des mises en page WordPress »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. …

Continuer la lecture de « Démonstration des mises en page WordPress »

Comment ça ? une autre page qui ne sert à rien ?

Continuer la lecture de « Démonstration des mises en page WordPress »

Il en faut plusieurs pour tester l’affichage des pages filles

Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem …

Continuer la lecture de « Démonstration des mises en page WordPress »

…dans une bannière pleine largeure ?
…à améliorer 🙂

Une page fille pour la démo

Avec un chapeau suivis des blocs « lien lire la suite » qui ajoute le lien ci-dessous et « lire la suite »qui marque la séparation entre l’intro et le reste de la page.

Du texte

Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ce paragraphe utilise l’option « lettrine » (drop cap).

1. Titres (H2 à H4)

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Sous-titre niveau 3

Sous-titre niveau 4

Titre centré

2. Listes

Premier élément
Deuxième élément avec sous-liste
1. Sous-élément A
2. Sous-élément B
Troisième élément

Étape une
Étape deux

3. Citations

« La simplicité est la sophistication suprême. »

Une citation mise en avant en grand format, souvent utilisée pour aérer un long article.

4. Tableau

Colonne A	Colonne B	Colonne C
Valeur 1	Valeur 2	Valeur 3
Valeur 4	Valeur 5	Valeur 6

5. Colonnes — répartitions courantes

2 colonnes égales (50/50)

Colonne 1 : Aenean ut orci vel massa suscipit pulvinar. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.

Colonne 2 : taque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

3 colonnes égales (33/33/33)

Colonne A : Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Colonne B: Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Colonne C : Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.

Colonnes inégales (25/75)

Barre latérale (25%) taque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Contenu principal (75%). Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Colonne A : Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Colonne A : Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

4 colonnes (empilement mobile automatique)

Et harum quidem rerum facilis est et expedita distinctionecessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.

Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.

Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum.

Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

6. Groupe avec fond et espacement

Bloc « Groupe » encadré

Le bloc Groupe permet d’appliquer une couleur de fond, un padding et de regrouper plusieurs blocs comme une seule section.

7. Cover (superposition sur image)

Titre sur image de fond

8. Média & texte

Texte à côté de l’image. Ce bloc est idéal pour présenter un produit, une personne ou un service avec un visuel associé.

9. Galerie

10. Boutons

Bouton plein (fill)

Bouton contour (outline)

11. Blocs de code / texte préformaté / vers

function bonjour() {
  return "Bonjour depuis un bloc code";
}

Texte préformaté qui   conserve
    les espaces et retours à la ligne.

Un poème
sur plusieurs lignes,
mis en forme avec le bloc "Vers".

12. Détails repliables

Cliquez pour en savoir plus

Contenu masqué par défaut, affiché au clic. Pratique pour une FAQ.

13. Alignements larges et pleine largeur

Ce paragraphe utilise l’alignement « large » (alignwide), qui déborde de la colonne de texte standard si le thème le permet.

Section pleine largeur (alignfull) avec fond sombre.

14. Espaceur et séparateurs stylés

15. HTML personnalisé

Bloc HTML personnalisé — utile pour insérer du code que Gutenberg ne gère pas nativement (widgets tiers, iframes, etc.).

16. Saut de page / lire la suite

Le texte ci-dessous sera masqué sur la page d’accueil et remplacé par un lien « Lire la suite » grâce au tag « more ».

Suite de l’article, visible uniquement sur la page de l’article complet.

Pages : 1 2

Tout d’abord, testons l’affichage des pages filles

…dans une bannière pleine largeure ?…à améliorer 🙂

1. Titres (H2 à H4)

Sous-titre niveau 3

Sous-titre niveau 4

Titre centré

2. Listes

3. Citations

4. Tableau

5. Colonnes — répartitions courantes

6. Groupe avec fond et espacement

Bloc « Groupe » encadré

7. Cover (superposition sur image)

Titre sur image de fond

8. Média & texte

9. Galerie

10. Boutons

11. Blocs de code / texte préformaté / vers

12. Détails repliables

13. Alignements larges et pleine largeur

14. Espaceur et séparateurs stylés

15. HTML personnalisé

16. Saut de page / lire la suite

…dans une bannière pleine largeure ?
…à améliorer 🙂