Costruire una pagina

Crea una pagina, aggiungi sezioni e preset, modifica testi e immagini dove stanno, controlla ogni schermo e sappi quando il lavoro è salvato.

Aggiornato il

Crei la pagina, la riempi di sezioni dal pannello Aggiungi, cambi testi e immagini direttamente nell'anteprima e la controlli a misura di telefono e di desktop. Ogni modifica si salva da sola; online non va niente finché non pubblichi.

Prima di iniziare #

  • Ti serve il ruolo Editor di contenuti o superiore sul sito. Un Autore dei contenuti può cambiare testi e immagini, ma non aggiungere sezioni né toccare gli stili.
  • Il sito esiste e ha il suo design system (vedi Il tuo primo sito). I preset ne prendono colori e tipografia, quindi una pagina sembra finita appena ne inserisci uno.

Crea la pagina #

  1. Nella barra laterale del sito, sotto Contenuti, apri Pagine.
  2. Scegli Aggiungi pagina. Si apre il pannello Crea una pagina.
  3. Compila Titolo della pagina, per esempio "Studio". Il Percorso URL si riempie dal titolo (studio); accorcialo se vuoi. Potrai cambiarlo in seguito.
  4. In Cosa vuoi creare? lascia Statica (Pagina semplice). Home del blog elenca gli articoli; Articolo sta sotto una Home del blog.
  5. Lascia Pagina superiore su Livello principale, a meno che la pagina non vada sotto un'altra. L'indirizzo di una pagina figlia unisce i due percorsi: /studio/team.
  6. Se il sito ha più modelli, scegline uno in Modello, oppure tieni Usa il modello predefinito.
  7. In Stato scegli:
    • Pubblicata: Va online con la prossima pubblicazione del sito.
    • Bozza: Resta offline finché non pubblichi la pagina stessa.
  8. Scegli Crea la pagina. Compare l'avviso Pagina creata.
  9. Nella riga della pagina scegli Apri nell'editor.

Aggiungi le sezioni #

Una pagina nuova è vuota. Livelli dice: Questa pagina non ha ancora sezioni. Usa Aggiungi sezione per iniziare.

  1. Nella barra di sinistra, nella scheda Livelli, scegli Aggiungi sezione. Il pannello Aggiungi si apre sopra l'anteprima e in alto dice dove finirà il nuovo elemento: In fondo alla pagina.
  2. Scegli una categoria, oppure scrivi in Cerca elementi e preset. La ricerca legge le etichette in tutte le lingue dell'admin: "apertura", "hero" e "banner" trovano gli stessi preset.
    • Preset di layout: sezioni complete e già impaginate, come Apertura con media a destra, Due colonne: testo e media o Domande e risposte.
    • Preset di elementi: pezzi più piccoli, come Immagine con didascalia o Titolo di sezione.
    • Sezioni: Sezione vuota, una fascia bianca da costruire tu.
    • Componenti, Elementi di base, Componenti del sito e Preset del sito contengono i mattoni e i pezzi che il sito ha già salvato.
  3. Scegli una voce. Viene inserita e selezionata, e il pannello si chiude. Un preset si legge nella lingua principale del sito: su un sito italiano un titolo di sezione appena inserito dice "Titolo di sezione".
  4. Per la sezione successiva passa sopra l'anteprima: compare un + sul bordo superiore e inferiore della sezione sotto il puntatore, e prima e dopo l'elemento selezionato. Sceglilo e il pannello Aggiungi si apre lì. In Livelli, lo stesso + compare passando sopra lo spazio sottile sotto una riga.

Per aggiungere dentro l'elemento selezionato, scegli Inserisci in Livelli. Il selettore Dove aggiungere passa da Dopo (o Prima) a Dentro.

Nota: alcune voci non possono stare nel punto in cui stai aggiungendo. Restano nascoste finché non spunti Mostra non disponibili (N); allora ognuna mostra il motivo, per esempio Solo nell'intestazione o nel piè di pagina. Un elemento che ha bisogno di una sezione intorno compare con In una nuova sezione sotto il nome: sceglierlo aggiunge entrambe le cose in un colpo.

Cambia testi e immagini #

  • Testo: fai doppio clic su un testo nell'anteprima e scrivi. In un testo su una riga, Invio o un clic altrove salvano, Esc annulla. In un testo formattato Invio va a capo con un nuovo paragrafo e ⌘ Invio (Ctrl Invio su Windows) salva. Con un testo selezionato, anche Invio apre la modifica.
  • Immagine: un'immagine vuota mostra un riquadro tratteggiato con il pulsante Scegli immagine (Scegli video per un video), che apre la libreria media. Per cambiare un'immagine che c'è già, selezionala e usa Sostituisci… nella scheda Impostazioni dell'ispettore. Lì scrivi anche il Testo alternativo.
  • Allineamento e adattamento: la scheda Impostazioni inizia con i comandi rapidi: Allineamento (Sinistra, Centro, Destra) per i testi, Adattamento (Riempi, Contieni) e Proporzioni per le immagini, Colonne per un contenitore.

L'ispettore a destra ha tre schede: Impostazioni (contenuti e opzioni), Stili (layout, spaziature e il resto, vedi Livelli e canvas) e Movimento (vedi Scene e ricette).

Controlla ogni dimensione dello schermo #

  1. Sopra l'anteprima usa i pulsanti dei dispositivi (desktop, laptop, tablet, telefono: 1440, 1280, 820 e 390 px di larghezza) o il menu Larghezza…, che raggruppa le larghezze per punto di interruzione. Puoi anche scrivere una larghezza qualsiasi tra 320 e 2560 px.
  2. La barra dice quale punto di interruzione vale a quella larghezza: Punto di interruzione attivo a 390 px: Telefono.
  3. Passa la Modalità di anteprima tra Modifica (seleziona e modifica; parte del movimento resta ferma) e Dal vivo (la pagina come la vede un visitatore, con tutto il movimento).

La larghezza dell'anteprima non cambia mai dove si applicano i tuoi stili: quello lo decide la barra degli ambiti nella scheda Stili.

Il salvataggio #

La pagina non ha un pulsante Salva. Lo stato nella barra in alto dice Salvataggio… e poi Tutte le modifiche salvate. Se dice Salvataggio non riuscito, scegli Riprova; se il server ha rifiutato una modifica, questa viene annullata e il motivo compare sull'elemento. ⌘ Z annulla, ⌘ Maiusc Z ripete.

Cosa vedi #

  • La nuova sezione selezionata in Livelli e contornata di blu nell'anteprima.
  • Il pulsante Controlli · N nella barra in alto, che conta errori e avvisi della pagina (un testo alternativo mancante, un campo obbligatorio vuoto, un contrasto basso). ⌘ Maiusc A apre l'elenco. Le voci con blocca la pubblicazione vanno corrette prima di pubblicare.
  • La pagina in Pagine con il suo stato: Bozza o Pubblicata.

Errori comuni #

Attenzione: "Pubblicata" nel pannello di creazione non mette la pagina online. La segna per andare online con la prossima pubblicazione del sito, dal pulsante Pubblica in alto.

  • Un testo non si modifica sul posto. L'avviso spiega perché: L'elemento è bloccato. Sbloccalo in Livelli per modificarlo., oppure Questo testo mostra i dati della pagina. Modificalo dove si modificano i dati. (per esempio un titolo collegato al titolo della pagina).
  • Modifiche nella lingua sbagliata. In un sito multilingua la modifica va nella lingua che stai modificando, non in quella sullo schermo. Se l'anteprima sta ancora cambiando lingua, la modifica viene rifiutata: L'anteprima sta ancora cambiando lingua.
  • Campi obbligatori vuoti. Alcuni componenti arrivano apposta con un campo obbligatorio vuoto, come il nome accessibile di un carosello o il testo alternativo di un'immagine. I controlli li elencano e la pubblicazione aspetta le tue parole.
  • Il percorso è uguale in tutte le lingue. Lo slug della pagina non cambia da una lingua all'altra (Uguale per tutte le lingue.).

Vedi anche #

Qualcosa non va in questa pagina? Scrivi a docs@librettocms.com.

Guida di Libretto

Colophon. Questa guida è un sito Libretto: 68 pagine in due lingue, 20 pagine della guida importate da Markdown e 41 pagine di riferimento generate dal registro delle operazioni. Composta in Softcore, il codice in IBM Plex Mono. La sua struttura:

/it/ Guida di Libretto /it/start Per iniziare /it/start/request-access Richiedere l'accesso /it/start/workspace Il tuo spazio di lavoro /it/start/first-site Il tuo primo sito /it/start/invite-a-client Invitare un cliente /it/start/connect-claude Connettere Claude a Libretto /it/build Costruire /it/build/first-page Costruire una pagina /it/build/layers-and-canvas Livelli e canvas /it/build/site-components Componenti del sito /it/design-system Design system /it/design-system/tokens Colori, spazi e temi /it/design-system/components Componenti e varianti /it/design-system/fonts Tipografia e font /it/motion Movimento /it/motion/scenes Scene e ricette /it/motion/image-sequences Sequenze di immagini /it/motion/reduced-motion Movimento ridotto /it/publish Pubblicazione /it/publish/languages Le lingue del sito /it/publish/versions Pubblicazione e versioni /it/publish/members-and-forms Iscritti e moduli /it/publish/domains Domini /it/handover Consegnare un sito al cliente /it/glossary Glossario /it/agents Agenti e API /it/agents/mcp Server MCP /it/agents/cli CLI /it/agents/batches Batch /it/agents/errors Errori e segnalazioni /it/agents/operations Operazioni /it/search Cerca