Componenti del sito

Un componente del sito è una parte che costruisci una volta sola, come la scheda di un progetto, un invito all'azione o una riga del team, e che puoi mettere su qualsiasi pagina. Ogni copia piazzata è un'istanza: segue il componente, quindi una modifica al componente arriva su tutte le pagine, mentre ogni istanza tiene i propri testi, link e immagini nei campi che decidi di esporre.

Prima di iniziare #

• Ti serve il ruolo Editor di contenuti o superiore.
• Prima costruisci e impagina la parte, su una pagina qualsiasi, finché non ha l'aspetto che dovranno avere tutte le copie. Il componente copia l'elemento selezionato con tutto quello che contiene.
• Un componente non è un preset. Un preset si copia una volta e poi vive per conto suo; un'istanza resta legata al suo componente.

Crea un componente da un livello #

1. In Livelli apri il menu … sulla riga della parte e scegli Crea componente…. Il menu dice quanti campi esporrà: Campi esposti: N.
2. Il modulo propone:
   • il nome del componente, a partire dal nome del livello;
   • un campo per ogni contenuto che un'istanza vorrà cambiare, ognuno chiamato con il suo ruolo: Titolo, Testo, Etichetta pulsante, Link, Immagine ("Titolo 2" per un secondo titolo).
3. Rinomina i campi che vuoi in Nome del campo. È il nome che chi modifica legge nella scheda Impostazioni dell'istanza: meglio "Nome del progetto" che "Titolo".
4. Scegli Crea.

Sulla pagina, la parte viene sostituita da un'istanza del nuovo componente. In Livelli diventa una riga sola con l'etichetta Componente, che porta il nome del componente.

Puoi farlo anche dalla barra laterale: seleziona la parte, apri la scheda Componenti accanto a Livelli, scegli Nuovo componente dalla selezione, scrivi il Nome del componente e scegli Crea. I campi esposti sono gli stessi.

Metti un'istanza su una pagina #

1. Apri il pannello Aggiungi nel punto giusto (Aggiungi sezione, Inserisci o un + nell'anteprima).
2. Scegli la categoria Componenti del sito, o cerca il nome del componente.
3. Scegli il componente. L'istanza viene inserita e selezionata.
4. Nella scheda Impostazioni dell'ispettore compila i campi esposti per questa copia. Un campo lasciato vuoto mostra il valore del componente.

Cambia una sola istanza #

I campi esposti bastano per quasi tutto. Per il resto, dentro l'istanza:

1. Seleziona l'elemento interno nell'anteprima. Il primo clic seleziona l'istanza; un secondo clic seleziona l'elemento sotto il puntatore. Con ⌘ + clic (Ctrl + clic su Windows e Linux) lo selezioni subito.
2. L'ispettore avvisa: Le modifiche qui valgono solo per questa istanza. Modifica il campo.
3. L'elemento mostra Modificato. Ripristina dal componente toglie la modifica e l'elemento torna a seguire il componente.

Cambia tutte le istanze #

1. Seleziona un'istanza e scegli Modifica componente nella barra in cima all'ispettore. Oppure apri la scheda Componenti e scegli Apri accanto al componente.
2. Il componente si apre sulla sua tela. Modificalo come una pagina qualsiasi: testi, layout, stili, movimento.
3. Tutte le istanze, su tutte le pagine, si aggiornano. Le modifiche delle singole istanze e i valori dei campi esposti restano come sono.

Decidi cosa può cambiare un'istanza #

Con il componente aperto, la scheda Componenti mostra Proprietà esposte sotto l'elenco:

1. Aggiungi proprietà aggiunge una riga.
2. Dalle un Nome del campo e in Compila scegli quale campo di quale elemento interno va a scrivere, per esempio il testo del titolo o l'immagine. Oltre ai contenuti puoi esporre il Tema del componente o la Variante di una sua parte: così un'istanza può passare dal chiaro allo scuro o scegliere un altro stile di pulsante tra quelli del design system.
3. Se vuoi, indica un Predefinito.
4. Rimuovi (×) toglie una riga. Poi scegli Salva proprietà.

Se non esponi nessuna proprietà, la scheda Impostazioni dell'istanza dice Questo componente non espone proprietà: modificalo sulla sua tela.

Scollega un'istanza #

Scollega, nella barra dell'istanza, la sostituisce con una copia semplice di ciò che mostra, con le sue modifiche già applicate. La copia non segue più il componente, e il movimento del componente non la segue.

Cosa vedi #

• In Livelli un'istanza è una riga sola con l'etichetta Componente; i suoi elementi interni lì non compaiono.
• Nella scheda Componenti, i componenti del sito con Cerca componenti, oppure Ancora nessun componente.
• Nell'ispettore di un'istanza, il nome del componente, Modifica componente e Scollega, poi i campi esposti.

Errori comuni #

• Nel menu manca Crea componente…. Compare su un elemento di una pagina, non su un'istanza e non dentro la tela di un componente.
• Contenuti collegati. Crea componente… viene rifiutato se la parte contiene un elemento che mostra dati della pagina, del sito o di un elemento di raccolta (un titolo collegato al titolo della pagina, una scheda scelta dentro l'elenco di una raccolta): fuori dalla sua pagina la copia non può tenere il collegamento. L'admin mostra un errore, in inglese, e il componente non viene creato.
• Componenti di intestazione e piè di pagina. Un componente fatto da una parte dell'intestazione o del piè di pagina, come la barra di navigazione, si può mettere solo nell'intestazione o nel piè di pagina.
• Annidamento. Un'istanza dentro un componente funziona, ma da una pagina modifichi un livello solo. L'elenco di una raccolta (ripetitore) dentro un componente non è ancora supportato.
• Scollegare non si recupera dal componente. Una volta scollegata, la copia non riceve più le modifiche del componente. Se hai scollegato per errore, annulla subito.
• Il movimento parte per ogni istanza. Una scena sul componente si ripete una volta per ogni istanza della pagina: tre schede con un'entrata entrano tre volte.

Vedi anche #

• Costruire una pagina
• Livelli e canvas
• Componenti e varianti (i componenti del design system, un'altra cosa)
• Consegnare un sito al cliente