Come impostare il design delle tue sezioni

Il design delle sezioni

Ogni sezione dell'app ha il suo design. Per ogni sua pagina scegli un template, poi colori, font, informazioni e immagini da mostrare. Ecco come fare.

In «My App», apri Structure.

Clicca sulla sezione da personalizzare, qui Local, una sezione di articoli.

Ha due pagine, l'elenco degli articoli e l'articolo stesso, ognuna con il proprio design.

Elenco degli articoli

Per l'elenco, clicca su «Edit the design».

Inizia dal template. Il segno di spunta indica quello in uso; usa le frecce per vedere gli altri.

Scegli «Visual Card»… e ogni articolo diventa una grande card con la sua foto.

Ogni testo ha il suo font, la sua dimensione e il suo colore. Qui un nuovo colore per i titoli… e ogni titolo lo adotta.

Scegli il formato delle foto in Thumbnail. «Golden ratio»… le rende più larghe e più basse.

Poiché le card hanno un colore di sfondo, le foto possono arrivare fino ai bordi. Clicca su «Disable Edge-to-edge»… e ora ogni foto sta dentro la sua card, con un margine.

Token

In Display, scegli quali informazioni mostra ogni card. Seleziona «Info below title»… e sotto ogni titolo compare un sommario.

Guarda questi campi: le parole tra parentesi quadre sono token. L'app li sostituisce con i dati propri di ogni articolo, qui la data e il sommario.

Il punto interrogativo li elenca tutti: titolo, autore, numero di commenti, una data relativa e altro ancora, per ciascun tipo di contenuto.

Combinali con parole tue. Qui, «Published» seguito dal token della data relativa… e ora ogni card mostra una data relativa al posto di quella completa.

Pagina dell'articolo

Passiamo ora alla pagina dell'articolo. Torna alla sezione… e clicca su «Edit the design» di Article.

La pagina dell'articolo ha altri template, con la barra degli strumenti in basso, in alto o di lato. Scegli «ToolBar Up»… e la barra degli strumenti passa in alto.

In Content, scegli come si allineano titolo e informazioni. «Left alignment»… li sposta a sinistra.

In Toolbar, scegli le azioni disponibili per i tuoi lettori. Deseleziona «Font size»… e i due pulsanti spariscono dalla barra.

Per un controllo totale, il codice HTML della pagina usa gli stessi token: disponi titolo, data, autore e contenuto come preferisci.

Pubblicazione

Una cosa da sapere: applicare colori o font in «App style» sostituisce il design di ogni sezione.

Perché i tuoi utenti vedano le modifiche, pubblica l'aggiornamento della tua app dal menu Publish.