Un layout definisce la struttura e il design di tutte le pagine di un gruppo di pagine. Eredita gli stili globali del tuo sito, ma puoi anche personalizzare il design delle singole sezioni cambiando tipo di carattere, colori e mappature di contenuto a livello di sezione. Ogni gruppo di pagine ha un layout e ogni entità di quel gruppo lo utilizza.
Nota: stai modificando un modello di layout. Le modifiche che apporti si applicano a ogni pagina del gruppo di pagine, non solo a quella in anteprima.
Accedi all'editor di layout
Dalla schermata Gruppi di pagine, fai clic su Modifica layout accanto al gruppo di pagine che vuoi modificare.
L'editor di layout. I richiami numerati sono citati in tutto questo articolo.
| # | Area | A cosa serve |
| 1 | Pannello destro | Modifica le proprietà della sezione, mappa il contenuto ai campi dell'entità, imposta valori statici, cambia tipo di carattere e colori |
| 2 | Anteprima pagina | Anteprima in tempo reale delle modifiche; fai clic su una qualsiasi sezione per selezionarla |
| 3 | Riquadro sinistro | Visualizza le sezioni disponibili e la scaletta del layout; trascina le sezioni nell'anteprima da qui |
| 4 | Attiva/disattiva gruppo/entità della pagina | Passa tra gruppi di pagine, entità e lingue per visualizzare in anteprima |
| 5 | Interruttore dei campi entità | Evidenzia dove i campi del Knowledge Graph vengono utilizzati nel layout |
| 6 | Attivazione/disattivazione pannelli | Comprimi o espandi i pannelli sinistro e destro per avere più spazio di lavoro |
| 7 | Controlli del viewport | Passa tra le visualizzazioni desktop, tablet e mobile; ingrandisci e riduci |
| 8 | Modifica i controlli | Annulla, rifai, scarta o pubblica le tue modifiche |
| 9 | Anteprima / link attivi | Apri un'anteprima condivisibile o il tuo sito live in una nuova scheda |
| 10 | Aggiorna la libreria | Aggiorna automaticamente con le ultime novità del prodotto (compare solo quando non sei aggiornato) |
Le modifiche vengono salvate automaticamente mentre lavori, quindi puoi uscire e tornare senza perdere i progressi.
Aggiungere, riordinare e rimuovere sezioni
Le sezioni sono gli elementi costitutivi di un layout. Il pannello sinistro (3) mostra tutte le sezioni disponibili nel pannello delle sezioni e una panoramica degli elementi attualmente presenti nel layout.
Per aggiungere una sezione: trascina una sezione dal pannello delle sezioni sull'anteprima (2) nella posizione desiderata.
Per riordinare le sezioni: trascina e rilascia le sezioni nell'anteprima (2) o nella struttura del pannello sinistro (3).
Per rimuovere una sezione: fare clic sulla sezione nell'anteprima o nello schema per selezionarla, quindi sull'icona del cestino nella barra delle azioni che appare.
Utilizza il pulsante Mostra etichette per visualizzare a colpo d'occhio l'origine del contenuto (statica o Knowledge Graph) di ogni elemento del layout corrente.
Nota: le sezioni disponibili nel pannello di sinistra provengono dalla libreria del tuo sito. Se ti mancano delle sezioni che ti aspetti di vedere, potrebbe essere necessario aggiornare la tua libreria. Consulta Aggiorna la tua libreria.
Modificare le proprietà della sezione
Fai clic su qualsiasi sezione nell'anteprima (2) o nella struttura (3) per selezionarla. Le sue proprietà vengono visualizzate nel pannello destro (1). Le azioni comuni includono:
- Mappatura del contenuto in un campo entità del Knowledge Graph o impostazione di un valore statico (vedi Proprietà della sezione della mappa)
- Modificare tipo di carattere e colori a livello di sezione per sovrascrivere gli stili globali
- Mostrare o nascondere elementi all'interno di una sezione
Utilizza l'interruttore dei campi entità (5) per evidenziare quali campi sul layout vengono estratti dal Knowledge Graph. Questo è utile per verificare che le mappature dei contenuti siano impostate correttamente.
Aggiungi codice personalizzato
Il componente Codice personalizzato consente di aggiungere codice HTML, CSS e JavaScript personalizzato direttamente a una pagina. Utilizzalo quando hai bisogno di funzionalità non disponibili nelle sezioni predefinite.
Per incorporare i valori dei campi del Knowledge Graph in codice personalizzato, usa la notazione Handlebars:
<div class="custom-banner">
<h2>Ti diamo il benvenuto su {{name}}</h2>
<p>Vieni a visitarci su {{address.line1}}, {{address.city}}</p>
<p>Chiamaci: {{mainPhone}}</p>
</div>Procedure consigliate per la gestione di codice personalizzato:
- Laddove possibile, è preferibile utilizzare HTML e CSS rispetto a JavaScript. I contenuti statici sono indicizzati in modo più affidabile dai motori di ricerca e dai crawler IA. Le implementazioni che utilizzano JavaScript potrebbero non essere indicizzate correttamente.
- Usa prima le sezioni integrate. Le sezioni fornite da Yext sono gestite da Yext e ottimizzate per l'accessibilità e la SEO. Utilizza il codice personalizzato solo per le funzionalità non coperte dalle sezioni predefinite.
Copia e incolla sezioni
Se hai più gruppi di pagine con sezioni condivise, come un'intestazione o un piè di pagina che deve apparire uguale ovunque, puoi copiare una sezione completamente configurata da un layout e incollarla in un altro invece di riconfigurarla da zero.
Per copiare e incollare una sezione:
- Dalla schermata Gruppi di pagine, fai clic su Modifica layout accanto al gruppo di pagine che contiene la sezione che desideri copiare.
- Fai clic sulla sezione nell'anteprima o nella struttura. Appare una barra delle azioni sopra la sezione.
- Fai clic sull'icona di copia (prima icona nella barra delle azioni).
- Ritorna alla schermata Gruppi di pagine e fai clic su Modifica layout accanto al gruppo di pagine di destinazione.
- Se la sezione non è già nel layout, trascinala dal pannello sinistro. Quindi fai clic sopra di essa per selezionarla.
- Fai clic sull'icona incolla (seconda icona nella barra delle azioni).
Tutte le proprietà vengono copiate, incluse le traduzioni localizzate. Anteprima, modifica e pubblica come al solito.
Visualizza l'anteprima delle modifiche
Prima di pubblicare, valida le tue modifiche tra diverse entità e viewport.
- Anteprima della pagina (2) — Le modifiche appaiono in tempo reale nell'anteprima mentre le apporti.
- Interruttore entità (in alto nell'editor) — Passa tra le entità nel gruppo di pagine per confermare che il layout appaia corretto con contenuti diversi.
- Controlla viewport (7) — Verifica le visualizzazioni desktop, tablet e mobile.
- Anteprima delle modifiche (9) — Genera un link di anteprima condivisibile, relativo a un determinato momento, con tutte le modifiche locali. Nota che questo snapshot non si aggiornerà per riflettere le modifiche successive: genera una nuova anteprima per vederle.
Pubblica le modifiche
Fai clic su Pubblica nei controlli di modifica (8) per rendere attivi gli aggiornamenti del layout per tutte le pagine del gruppo contemporaneamente. Se le tue pagine sono già online, questo pulsante riporta la dicitura Aggiorna # Pages.
Per verificare, apri il sito live (9) e aggiorna per confermare che gli aggiornamenti siano visibili.
Nota: il pulsante Pubblica è disattivato mentre è in corso una distribuzione o il sito presenta degli errori. Puoi ancora apportare e salvare le modifiche in locale; saranno pronte per la pubblicazione una volta completata la distribuzione o risolto l'errore. Consulta Visualizza pagine e indaga sugli errori per maggiori dettagli.