Comment réaliser le design de vos sections ?

Le design des sections

Chaque section de votre app a son propre design. Pour chacune de ses pages, vous choisissez un template, puis les couleurs, polices, informations et images. Voici comment.

Dans « My App », ouvrez Structure.

Cliquez sur la section à personnaliser, ici Local, une section d'articles.

Elle comporte deux pages, la liste des articles et l'article lui-même, chacune avec son propre design.

Liste des articles

Pour la liste, cliquez sur « Edit the design ».

Commencez par le template. Celui en cours est coché ; utilisez les flèches pour voir les autres.

Choisissez « Visual Card »… et chaque article devient une grande carte avec sa photo.

Chaque texte a sa police, sa taille et sa couleur. Voici une nouvelle couleur pour les titres… et tous les titres l'adoptent.

Dans Thumbnail, choisissez le format des photos. « Golden ratio »… leur donne une forme plus large et moins haute.

Comme les cartes ont une couleur de fond, les photos peuvent s'étendre bord à bord. Cliquez sur « Disable Edge-to-edge »… et chaque photo s'affiche désormais dans sa carte, avec une marge.

Tokens

Dans Display, choisissez les informations affichées sur chaque carte. Cochez « Info below title »… et un résumé apparaît sous chaque titre.

Regardez ces champs : les mots entre crochets sont des tokens. L'app les remplace par les données de chaque article, ici sa date et son résumé.

Le point d'interrogation les liste tous : titre, auteur, nombre de commentaires, date relative et plus encore, pour chaque type de contenu.

Associez-les à vos propres mots. Ici, « Published », suivi du token de date relative… et chaque carte affiche désormais une date relative au lieu de la date complète.

Page article

Passons à la page article. Revenez à la section… et cliquez sur « Edit the design » sous Article.

La page article a ses propres templates, avec la barre d'outils en bas, en haut ou sur le côté. Choisissez « ToolBar Up »… et la barre d'outils passe en haut.

Dans Content, choisissez l'alignement du titre et de ses informations. « Left alignment »… les place à gauche.

Dans Toolbar, choisissez les actions proposées à vos lecteurs. Décochez « Font size »… et ses deux boutons disparaissent de la barre d'outils.

Pour un contrôle total, le code HTML de la page utilise les mêmes tokens : disposez le titre, la date, l'auteur et le contenu à votre guise.

Publier

À savoir : si vous appliquez des couleurs ou des polices dans « App style », elles remplacent le design de chaque section.

Pour que vos utilisateurs voient ces changements, publiez la mise à jour de votre app depuis le menu Publish.