Transcription

Maintenant que j'ai créé ma page et que je lui ai fait une en-tête, je vais pouvoir m'attaquer au contenu de cette page. Pour travailler sur l'en-tête, on était dans l'onglet "Promotion", ce qui nous a permis de créer cette magnifique entête pour la page. Et du coup, maintenant, on va pouvoir travailler sur le contenu qui va s'afficher en dessous, ici, le corps, vraiment, de ma page. Pour l'instant, elle est complètement vierge. Et pour insérer des blocs, je vais cliquer sur le bouton "+". Et donc là, il nous propose plein d'options que je vais vous détailler pour que ce soit un peu plus clair. Donc, déjà, on commence par ce qu'il y a en haut. Tous ces composants-là, c'est des composants qui vont directement vous permettre d'insérer du texte, de l'image, des URL, des vidéos. Et selon le composant que vous choisissez, ça va être mis en forme de différentes façons. Donc, par exemple, un blog tout simple de texte avec mise en forme, on va pouvoir taper du contenu ici. On va pouvoir le mettre en forme, par exemple, le mettre en titre niveau 2 et puis éventuellement rajouter un peu de texte encore.

Là, j'ai du texte qui s'insère comme ça, on le voit dans la preview. Ça, c'est vraiment le format le plus simple, mais on aurait pu, par exemple, mettre une carte horizontale si on avait voulu un composant un peu plus élaboré. Pour mettre, par exemple, comme ça, on peut choisir le niveau de titre et mettre du contenu. Et voilà comment se présente mon contenu quand je l'insère dans une carte. Vous voyez, on peut moduler la façon dont on va apparaître notre texte en fonction du rendu qu'on souhaite en testant plusieurs composants. Cette carte, on peut par exemple mettre une image pour aller avec. Par exemple, si je mets cette image là. Voilà, ça enrichit un peu mon contenu. Je peux gérer le ratio de l'image différemment. Par exemple, si je veux que l'image prenne la moitié de la largeur de l'écran, je la mets en 50/50 et ça apparaît un peu plus grand. Je peux faire en sorte que cette carte soit cliquable, choisir qu'elle redirige par exemple vers une page du site ou qu'elle déclenche le téléchargement d'un document ou qu'elle redirige vers un site externe. Je ne vais pas le faire pour le moment.

Mais sachez qu'il y a beaucoup de façons d'enrichir une carte et de la customiser aussi dans son apparence. Ça, on va dire que c'est le niveau 1 de création de contenu. Vous voyez que quoi que je fasse, quoi que je choisisse comme élément, il va s'afficher sur toute la largeur de ma page. Si je choisis un dernier élément, par exemple un accordéon, ce que vous connaissez bien si parfois vous regardez des FAQ. Ca s'insère comment un accordéon ? On met un titre. En général, c'est une question, mais pas forcément. Et là, la réponse à la question. Et qu'est-ce qu'on voit ? Ça apparaît comme ça. Et puis, si je veux en mettre plus, je peux dupliquer, histoire de pas retaper tout de zéro. Et puis ensuite, tout simplement adapter le contenu. Et donc, voilà mon accordéon qui s'est mis à jour sur la preview avec mes questions et mes réponses. Là, j'ai testé différents blocs pour que vous voyiez à quoi ça ressemble, mais ça reste très basique comme mise en forme, puisque tous mes contenus se sont empilés verticalement. Vous voyez, j'ai d'abord mis mon texte avec mise en forme. Je l'ai tapé, il s'est affiché sur toute la largeur de la page.

Ensuite, j'ai cliqué sur "+" pour ajouter un nouvel élément en dessous de ma carte horizontale. Et puis, une fois que j'avais fini ma carte, tout en bas des paramètres de la carte, j'ai à nouveau cliqué sur "+" pour mettre un accordéon qui a à nouveau pris toute la largeur de la page et donc tout s'est empilé verticalement. Peut-être que j'ai envie de faire quelque chose d'un peu plus élaboré, comme je vous montre, par exemple, sur le site de Sites Faciles, on a fait des sections comme celle-ci où on voit que non seulement on a empilé des blocs, mais on les a aussi imbriqués les uns dans les autres. Je m'explique. Pour faire un bloc comme celui-ci, vous voyez qu'il y a un fond. Il y a un fond bleu. Et donc, pour faire ce fond bleu, il a fallu insérer un fond, un bloc "fond" dans Sites Faciles. Ensuite, sans ce bloc "fond", on a inséré un bloc gris avec quatre colonnes pour que les tuiles qu'on voit ici, ces composants-là, ne prennent pas toute la largeur de la page et s'empilent les uns sur les autres, mais au contraire, prennent seulement un morceau de la page et s'affichent les unes à côté des autres.

Je vais vous montrer comment on peut faire ça. Pour copier ce bloc que je viens de vous montrer, d'abord, on va chercher à créer un fond. Au moment d'appuyer sur le bouton "+", on va regarder un autre type de bloc qu'on n'a pas encore vu, qui sont les blocs qui permettent de structurer la page. Là, vous voyez que c'est des éléments, non pas dans lesquels vous allez insérer du texte ou de l'image, mais des éléments dans lesquels vous allez en insérer d'autres. Là, je choisis un "fond pleine largeur". Je vois que ce fond, il peut être soit une image, soit une couleur. Moi, je vais choisir une couleur. Là, il me propose toutes les couleurs du DSFR. Je vais choisir un "Bleu France". Et vous ne le voyez pas encore après visualisation parce qu'il n'y a pas encore de contenu, mais ça va arriver. Dans ce fond, je vais insérer une grille parce que si je ne mets pas de grille, souvenez-vous, mes composants, ils vont prendre toute la largeur de l'écran et ils vont s'empiler les uns au-dessus des autres. Là, ce n'est pas ce que je veux. Je vais aller chercher dans les blocs de structure la grille. Je peux choisir si c'est une grille en 4/12, en 3/12.

Donc, 3/12, ça veut dire qu'il y aura quatre colonnes dans ma grille, 4/12, c'est-à-dire qu'il y en aura trois, etc. Moi, je vais mettre trois colonnes, par exemple. Ensuite, il suffit de choisir quels éléments je veux insérer dans ma grille. Moi, pour mon exemple, je vais choisir des tuiles. Ça n'apparaît toujours pas, mais quand il y aura du contenu dans mes tuiles, vous verrez que ça va apparaître. Et voilà, c'est apparu. Là, j'ai ma tuile qui s'est créée et vous voyez bien qu'elle prend pas toute la largeur, mais qu'elle prend seulement un tiers de la largeur de l'écran. Je peux rentrer dans ma tuile tous les contenus que je veux. Je peux, par exemple, lui mettre une image, sachant qu'on a intégré déjà tous les pictos du DSFR dans la bibliothèque de Sites Faciles. Comme ça, vous n'avez pas à aller chercher ailleurs. Donc là, pour cet exemple, j'ai mis un petit picto du DSFR. Je peux rendre cette tuile cliquable. Encore une fois, elle peut déclencher le téléchargement d'un document ou rediriger une page interne ou externe. Là, pour l'exemple, je vais choisir que cette tuile déclenche le téléchargement d'un document qui est déjà dans ma bibliothèque du document, mais sinon, je pourrais le transférer depuis mon ordinateur.

Voilà comment ma tuile est devenue cliquable. Si je clique dessus, ça déclenche le téléchargement du document que j'ai choisi. Là, je viens de le faire sur la preview. Et puis, en preview, ça rend pas super. Si, on voit le document. Je sais pas maintenant comment je vais revenir en arrière. J'enregistre mon brouillon pour revenir en arrière. Et donc là, je pense que ma preview va revenir sur ma page et non pas sur mon document. Voilà, parfait. Là, j'ai ma tuile. Je ne vais pas re-cliquer dessus parce que je n'ai pas envie de recommencer. Mais voilà comment ça fonctionne. Maintenant, si je veux remplir ma grille avec d'autres tuiles. Il me suffit de dupliquer cette tuile et d'adapter le contenu si je le souhaite. Et voilà comment ma grille se remplit au fur et à mesure que j'ajoute des éléments. Elle se remplit toute seule. Là, si j'ajoute une quatrième tuile, ça va créer tout simplement une une nouvelle rangée dans ma grille. Et voilà comment ça se met à jour. Là, on voit qu'il y a vraiment un système de poupées russes. J'ai d'abord mis un fond, ensuite, j'ai mis une grille dans le fond et ensuite, j'ai mis des tuiles dans la grille.

Maintenant, imaginons que je sois contente de cette section et que je veuille créer une nouvelle section en dessous Je vais me situer tout en bas de ma grille de tuiles. Et là, pour créer mes nouveaux éléments, il faudra que je choisisse le bon bouton "+" qui se situe donc au bon niveau. Il y a des petits chemins de fer ici pour nous aider à nous y retrouver. Mais il faut bien comprendre que si je clique sur celui-ci, ça va ajouter un nouvel élément dans ma grille. Par exemple, là, je veux créer un bloc de texte. Si je le crée ici, il va se mettre dans ma grille. Il s'est ajouté là. Ce n'est pas ce que je souhaite parce que moi, je souhaite ajouter un bloc de texte en dehors de cette section. Donc, je supprime. Si je le crée ici en cliquant sur ce bouton "+" là, le texte va se placer non pas dans la grille, mais en revanche, toujours dans le fond que j'ai créé, le fond bleu. Ça ne me convient pas non plus parce que moi, je veux que mon texte soit vraiment en dehors de ce fond pour créer vraiment une nouvelle section dans ma page.

Donc, il faut bien se placer sur le bouton le plus extérieur pour que le nouvel élément se place au bon endroit. Et là, on va voir que ça y est, je suis en dehors de mon fond. Et donc, ça me permet de créer l'élément qui va créer une nouvelle section. J'enregistre. Et voilà pour cet exemple-là. Quand je suis contente de mon résultat, il suffit de le publier, mais là, évidemment, je ne vais pas le faire. Et voilà.