Aller au contenu

Article exemple de l'utilisation du Flexible Content

24 Sep 2021

Le texte que vous êtes en train de lire est placé dans un composant Introduction. Il est traditionnellement écrit plus gros que le texte normal.

Texte

Ce composant permet d’afficher un bloc de texte, avec un ou plusieurs éléments de base comme un paragraphe, une liste à puces, une liste numérotée… Le texte peut être enrichi avec du gras, de l’italique, des liens hypertextes, etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta auctor arcu quis vehicula. In fringilla purus et sapien porta blandit.

Praesent consequat turpis vitae lorem ultricies congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat, tortor quis tristique auctor, mi nunc posuere nibh, in commodo odio nibh vitae dolor :

  • Cras at pulvinar nisl ;
  • Quisque elit augue ;
  • Ultrices eget velit rutrum ;
  • Lobortis commodo lorem.

Duis eu fringilla turpis, in aliquet metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ipsum mi, ultricies in auctor in, vehicula in est.

  1. Nullam a pulvinar ante ;
  2. Quisque egestas lacus finibus sapien egestas, vel venenatis urna venenatis ;
  3. Aenean semper feugiat est sit amet convallis.

Proin tellus ex, euismod et augue id, vulputate aliquet lacus.

Image(s) et image + texte

Image(s)

Ce composant permet d’afficher une ou plusieurs images sur la même ligne. En mobile, les images sont affichées les unes sous les autres.

Chaque image peut être cliquable. Si une image a une légende, celle-ci sera affichée.

Le nombre d’images est illimité, mais au-delà de trois, on peut utiliser le composant Galerie photo.

Image + texte

Clavier Mac
Ce clavier brille dans le noir pour une utilisation nocturne

Ce composant permet d’afficher une image à côté d’un texte. On peut choisir la proportion de l’image par rapport à la largeur totale, et la disposition (gauche ou droite du texte). En mobile, l’image est toujours affichée en premier, avec le texte en dessous. L’image peut être cliquable.

Photo pexels

Billboard

Un billboard est un grand panneau d’affichage occupant toute la largeur de la page. Il peut servir à mettre en valeur un message important, comme par exemple le titre de page et l’introduction.

Media et Media + texte

Média

Media + texte

Ce composant permet d’afficher un média à côté d’un texte. On peut choisir la proportion du média par rapport à la largeur totale, et la disposition (gauche ou droite du texte). En mobile, le média est toujours affiché en premier, avec le texte en dessous.

Galerie photo

Ce composant permet d’afficher une galerie de petites photos carrées cliquables. La version haute définition s’affiche dans une lightbox au clic sur un aperçu.

Section (ouverture / fermeture)

Ces deux composants doivent être utilisés ensemble. Ils permettent de démarrer une section avec une image de fond ou une couleur de fond, puis d’ajouter n’importe quel(s) composant(s), et enfin de fermer la section.

Attention, ne pas oublier d’ajouter le composant « Section (fermeture) » pour chaque composant « Section (ouverture) » ajouté dans la page.

Boutons

Ce composant permet d’afficher un ou plusieurs boutons centrés. Chacun peut avoir un titre, une icône et un lien qui peut envoyer vers une autre page du site ou n’importe quelle autre URL, et ouvert dans une nouvelle fenêtre si besoin.

Fichier

Ce composant permet d’afficher un bouton pour télécharger un fichier (PDF, archive…).

Fichier à télécharger après collecte de l'email

Éléments clés

Ce composant permet d’afficher une liste de points importants, d’arguments forts ou de chiffres clés. On peut ajouter une image pour chaque élément, cliquable ou non.
Les éléments clefs peuvent aussi n’afficher que des chiffres éventuellement accompagnés d’une unité.

En mobile, deux éléments par ligne sont affichés, puis quatre en desktop.

Graine dans la terre
Une graine
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Trois plantes
Trois jeunes pousses
Nunc pulvinar aliquam volutpat, duis mattis tempor varius.
Une feuille
Une feuille verte
Fusce fermentum nisl leo, a rhoncus tellus mollis non.
Des légumes dans une caisse
Une récolte généreuse
Maecenas luctus arcu eget orci tincidunt elementum.

Définitions

Ce composant permet de lister un ou plusieurs termes et leur définition, idéal pour un glossaire.

CMS

En anglais, un Content Management System est un Système de Gestion de Contenu. WordPress est un CMS car il permet d’ajouter et de modifier le contenu de pages web.

Custom Post Type

WordPress propose par défaut deux types de publication : un Article (Post) et une Page. Il est souvent préférable d’ajouter de nouveaux types de publication pour s’adapter aux contraintes métier du client. Par exemple, le plugin Woocommerce ajoute le type Produit (Product) pour gérer un catalogue de produits, qui ne sont pas mélangés avec les Articles et les Pages du site.

Accordéon / FAQ

Ce composant permet d’afficher une liste de titres avec des descriptions cachées par défaut, affichées au clic sur le titre. Ce composant est idéal pour une liste de questions fréquentes par exemple, et il inclut par défaut le balisage microdata des données structurées de type FAQPage.

Qu'est-ce qu'une FAQ ?

En anglais, FAQ signifie Frequently Asked Question, ce qui a été traduit en français par Foire Aux Questions pour respecter l’ordre des initiales.

Pourquoi avoir ajouté les données structurées FAQPage ?

Les moteurs de recherche comme Google respectent le schéma de données structurées et peuvent s’en servir pour afficher des résultats de recherche enrichis. Dans le cas des FAQ, Google peut afficher directement la réponse à la question sur la page de résultats.

Articles liés

Ce composant permet de proposer une liste d’une ou plusieurs autres pages du site, idéal pour une section « Voir aussi ». On peut choisir parmi tous les types de publication du site (Article, Page, Media par défaut), et les Custom Post Types seront automatiquement disponibles.

Tableau responsive

Ce composant vous permet d’afficher un tableau de données. L’agencement desktop et mobile est modifiable suivant vos besoins.

Thème acheté

Thème acheté « Page builder » (DiVi)

Thème sur mesure

Coûts

€€

€€€

Respect du concept CMS

Simplicité de saisie

Thème acheté

Thème acheté « Page builder » (DiVi)

Thème sur mesure

Coûts

Thème acheté

Thème acheté « Page builder » (DiVi)

€€

Respect du concept CMS

Thème acheté

Thème acheté « Page builder » (DiVi)

Simplicité de saisie

Thème acheté

Thème acheté « Page builder » (DiVi)

Cards

Ce composant permet d’afficher une liste de cartes. Dans ces cartes, il est possible d’insérer une image, un sur-titre, un titre, du contenu et un lien.
Le lien peut être de type vidéo (ouverture de la vidéo dans une modale), externe au site, ou interne au site (listing des pages du site proposé).

Jeune femme à la terrasse d'un café
Pause café
On discute autour d'un café

Phasellus sollicitudin dui tempor feugiat malesuada. Praesent eu malesuada ligula.

Contact

Vidéo
CaenCamp #23 SVG, format clé du responsive

Le format SVG est en plein essor depuis l’avènement du responsive design.

Juste du texte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a mi ac nisl congue molestie sit amet ac nisi. Vivamus rhoncus rutrum varius. Phasellus sollicitudin dui tempor feugiat malesuada. Praesent eu malesuada ligula. Donec iaculis nulla nec auctor blandit. Morbi quis sem odio. Duis auctor tellus et massa rutrum facilisis. Etiam pharetra elit eget est vehicula pharetra. Donec iaculis nulla nec auctor blandit. Morbi quis sem odio. Phasellus imperdiet nisi vitae augue euismod, sit amet molestie nisi interdum. Maecenas ultrices eros ac gravida auctor. Proin consequat vel lorem at vehicula. Donec dictum dapibus gravida.

Lorem ipsum

Colonnes

Ce composant permet d’afficher du contenu texte sur plusieurs colonnes. En mobile, les colonnes sont affichées les unes sous les autres, puis également réparties en desktop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquam volutpat. Duis mattis tempor varius. Maecenas luctus arcu eget orci tincidunt elementum. Proin at sodales leo.

Sed in semper ex, et iaculis nibh. Phasellus tincidunt nisl sed fermentum ullamcorper. Nullam ultrices, velit a lobortis eleifend, mauris turpis luctus leo, id bibendum eros velit ut risus. Vivamus eget congue nibh.

Avantages / Inconvénients

Ce composant permet d’afficher deux listes d’éléments côte à côte, idéal pour une liste d’avantages et une liste d’inconvénients.

Avantages
  • Respect du concept CMS
  • Simplicité de saisie
Inconvénients
  • Design : maintenance et évolution
  • Implémentation de règles métier

Citation, Témoignage

Ce composant permet d’afficher une citation ou un commentaire, éventuellement avec son auteur. Le nom de l’auteur peut être cliquable, et on peut ajouter sa photo.

Écoute... Je n'aime pas faire la morale, mais je vais te donner un conseil qui te servira à jamais. Dans la vie tu rencontreras beaucoup de cons. S'ils te blessent, dis-toi que c'est la bêtise qui les pousse à te faire du mal. Ça t'évitera de répondre à leur méchanceté. Car il n'y a rien de pire au monde que l'amertume et la vengeance. Reste toujours digne et intègre à toi-même.
Jeune femme à la terrasse d'un café
La grand-mère de Marjane (Persepolis)

Note, évaluation

Ce composant permet de lister des critères et de leur donner une note sur 100. Conçu pour enrichir une fiche produit avec l’évaluation notée du rédacteur. L’affichage de la note se fait dans le template du thème, elle pourra être affichée sur 5, sur 10, arrondie ou non, etc.

Qualité de fabrication 80 / 100
Durée de vie 50 / 100

Note globale

Ce composant permet d’afficher une note globale entre 0 et 100, dans une fiche produit par exemple. Si des composants Note ont été ajoutés dans la même page, il est possible d’en afficher le résumé à côté de la note globale. Cependant, même dans ce cas, la note globale n’est pas calculée automatiquement.

65 / 100
  • Qualité de fabrication : 80 / 100
  • Durée de vie : 50 / 100

Post social

Ce composant permet d’afficher un post venant d’un réseau social (Facebook, Twitter, Instagram) directement au sein de la page ou de l’article.

Timeline

Ce composant permet d’afficher une liste d’événements datés, alternativement présentés à gauche et à droite en desktop. Idéal pour présenter l’historique d’une société ou d’une personne.

1492
Duis eleifend molestie velit vitae eleifend.
14 juillet 1789
In fringilla purus et sapien porta blandit. Pellentesque imperdiet eu est vel sagittis.
20 juillet 1969
Suspendisse porta auctor arcu quis vehicula.
Août 2019
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id luctus est.

Tutoriel

Ce composant permet d’afficher une liste d’étapes à suivre pour effectuer une tâche. On peut donner un titre, une description et une image du résultat final. Les microdata sont les données structurées du schéma HowTo.

Maquillage de Roddy McDowall dans La Planète de Singes de 1974

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus metus. Proin a tellus a libero congue facilisis eu eget orci. Curabitur porta velit non augue condimentum porttitor. Sed volutpat ante vel finibus semper. Vivamus efficitur metus sit amet nisi bibendum tincidunt. Pellentesque turpis neque, rhoncus a bibendum id, feugiat pulvinar elit. Maecenas nec tempus enim. Praesent sit amet nibh ex. Vestibulum quis commodo magna. Ut imperdiet odio lacus. Curabitur condimentum ultricies nibh. Vestibulum non massa nunc. Praesent scelerisque quis eros vel gravida.

Étape 1

La pose du nez

Vivamus efficitur metus sit amet nisi bibendum tincidunt. Pellentesque turpis neque, rhoncus a bibendum id, feugiat pulvinar elit. Maecenas nec tempus enim.

Étape 2

Le reste du visage

Praesent sit amet nibh ex. Vestibulum quis commodo magna. Ut imperdiet odio lacus. Curabitur condimentum ultricies nibh. Vestibulum non massa nunc. Praesent scelerisque quis eros vel gravida.