Une page d'Aurora n'est pas un bloc de texte dans lequel on insère des images. C'est une grille de 48 colonnes sur laquelle on pose des zones, et dont on tire les bords à la souris. La page que vous lisez a été composée comme ça.
La grille d'une page, zone par zone
L'onglet Contenu d'une publication : chaque zone de la grille, sa taille et ce qu'elle contient, d'un coup d'œil. On ajoute, déplace et redimensionne sans écrire de code.
La grille et sa palette de zones
Chaque zone prend sa largeur par taille d'écran, tirée à la souris, avec un décalage pour laisser respirer, et peut sortir de la colonne pour traverser l'écran. En bas, la palette range les 45 types de zone par usage : texte, image, publication, vidéo, formulaire, sommaire, pile ; l'œil à côté de chaque type ouvre son exemple. La disposition est écrite une seule fois et vaut pour toutes les langues du site.
Le plan du document : ce qui reste à écrire
Au-dessus de la grille, le plan d'un modèle d'audit liste ses quinze sections et compte, pour chacune, les passages entre crochets qui restent à remplacer. Chaque tuile montre son titre et ses réglages, comme « En relief » ou « Téléphone ».
Insérer une section toute prête
Dans la Bibliothèque, l'onglet « Sections » propose une dizaine d'arrangements prêts, dessinés à l'échelle de leurs zones : carte et téléphone, quatre cartes en carré, trois comptes comparés, à garder et à éviter. Les sections qu'on a enregistrées attendent dans l'onglet « Mes sections ».
Un exemple pour chaque zone
L'onglet « Zones » de la Bibliothèque montre chacun des 45 types à l'œuvre, dessiné par le serveur dans le thème du site, avec ses propres images. « Insérer cet exemple » le pose dans la page, ses textes entre crochets à remplacer.
Et pour chaque bloc de texte
L'onglet « Blocs » fait de même pour les dix-huit blocs de l'éditeur, du paragraphe à la liste à icônes. Ouvert depuis un texte, par le bouton « Exemples » ou le menu d'un bloc, l'exemple arrive dans ce texte, juste après le curseur.
L'aperçu : la vraie page, en largeur de téléphone
L'onglet Aperçu remplace la grille par la vraie page, dans le thème du site, à la largeur d'un ordinateur, d'une tablette ou d'un téléphone. Cliquer une zone dans l'aperçu la souligne et ouvre ses réglages dans le panneau d'à côté. Sur téléphone, les zones passent l'une sous l'autre, dans l'ordre où elles ont été posées.
Une zone ouverte : sa place et son allure
Cliquer une zone de la grille ouvre ses réglages dans le panneau d'à côté, la grille toujours en vue : son type, sa largeur par taille d'écran, son décalage, une nouvelle ligne, son fond, un thème clair ou sombre forcé, sa couleur d'accent et son effet d'apparition. Ce qui est réglé ici ne vaut que pour elle. Une barre d'outils se pose sur la zone elle-même : monter, descendre, dupliquer, copier, l'enregistrer pour la réutiliser, la supprimer, avec de quoi annuler la suppression.
Quatre onglets : Contenu, Disposition, Style, Visibilité
Les réglages d'une zone sont rangés en quatre onglets. Disposition dit où elle se pose : sa largeur sur les 48 colonnes, son décalage, son alignement vertical, l'air au-dessus, si elle reste en place au défilement ou traverse toute la largeur de l'écran.
Le style d'une zone
L'onglet Style habille la zone : un fond (carte, relief, teinte, accent ou personnalisé), un thème clair ou sombre imposé, la couleur des survols et des repères, et son effet d'apparition.
Qui voit la zone, et quand
L'onglet Visibilité programme une zone entre deux dates, la réserve aux membres connectés, la masque sur téléphone ou sur ordinateur, et lui donne un point d'ancrage pour qu'un lien y mène directement.
Un panneau large pour écrire
Pour un texte, le panneau s'élargit d'un clic et l'éditeur prend la place qu'il lui faut ; la largeur choisie est retenue pour la fois suivante. La grille reste à côté, la zone en cours surlignée.
Du HTML écrit dans un vrai éditeur de code
Quand aucun bloc ne fait ce qu'il faut, le bloc HTML laisse écrire la mise en page à la main. Il s'écrit dans un éditeur de code : couleurs, numéros de ligne, indentation à la touche Tab, balises refermées toutes seules. Ici, la fiche de la prochaine session, en trois cartes.
Le code à gauche, la page à droite
En plein écran, le bloc s'affiche tel que le site le dessinera, mis à jour pendant la frappe : même nettoyage, même thème. On le regarde en ordinateur, tablette ou téléphone, en mode clair ou sombre, sans enregistrer ni ouvrir la page.
Un extrait de code coloré dans son langage
La zone Code montre un extrait sur la page, tel quel, en terminal animé ou en avant / après. Il s'écrit avec le même éditeur, coloré dans le langage choisi parmi onze, et chaque langue du site garde ses propres commentaires.
Sur téléphone, une feuille qui monte
Sur un petit écran, le même panneau devient une feuille qui monte du bas sur la grille. On la tire par sa poignée pour la déplier, et le geste retour la referme.
Une liste, treize présentations
La zone Liste tient des entrées (un titre, un texte, une image, un lien) et les montre au choix en étapes numérotées, chiffres clés, questions fréquentes, témoignages, logos, chronologie, cartes d'offres, équipe, récit en images, liste éditoriale, frise horizontale, cartes à picto ou vitrine en images. Changer de présentation ne perd rien de ce qui est écrit.
Les 45 types de zone et ce qu'une zone sait faire
- Texte et images : texte riche (titres, listes, citations, encadrés, tableaux, titres en couleur), image seule ou dans un cadre d'ordinateur, de téléphone ou de navigateur, galerie, avant / après à faire glisser.
- Médias, code et graphiques : vidéo, mur de vidéos, audio avec ses chapitres, document à télécharger, code coloré avec ses numéros de ligne, intégration d'un service extérieur, graphique en barres, courbe, anneau ou progression.
- Publications et navigation : une publication choisie à la main, ou une liste automatique choisie par règle, qui se met à jour toute seule ; une liste libre, les termes d'une taxonomie, un sommaire construit à partir des titres, une recherche dans le site.
- Pour structurer la page : des onglets, un bouton, un séparateur (trait, espace, vague, diagonale ou biseau), un en-tête au milieu de la page, un bloc partagé (écrit une fois, posé sur plusieurs pages, corrigé partout d'un coup) et une pile, une zone qui en contient d'autres pour une image haute à côté de deux zones empilées.
- Ce que le visiteur remplit : un formulaire du site, un sondage, une prise de rendez-vous sur des créneaux, un simulateur de devis, les commentaires de la page, l'inscription à la newsletter et sa mention RGPD.
- Les informations pratiques : les horaires d'ouverture et les fermetures à venir, une disponibilité, un compte à rebours, une carte de visite qui s'enregistre dans les contacts, une adresse avec son itinéraire, une carte et ses tarifs, un QR code.
- Les réseaux et les intégrations : une publication façon réseau social, le fil Instagram, les avis Google, l'activité GitHub, la dernière activité du site, une carte de voyage étape par étape, un calendrier éditorial, une présentation.
- Une zone peut devenir un bandeau qui défile plus lentement que la page, ou rester en place pendant que sa voisine défile.
- Un fond (carte, teinté, couleur d'accent, ou une couleur, un dégradé ou une image choisis), son propre contraste, sa couleur d'accent et celle de ses survols, par-dessus ceux de la page.
- Une apparition au défilement : fondu, glissé depuis le bas ou un côté, zoom ou flou.
- S'afficher seulement entre deux dates, ou seulement pour les membres connectés, et un point d'ancrage pour qu'un lien y mène directement.