Elementi - Intestazione
I livelli di intestazione stabiliscono una gerarchia che organizza il contenuto e aiuta i motori di ricerca a indicizzare ogni pagina. Utilizzare il tipo di contenuto Intestazione nella Page Builder fase per aggiungere all'area di visualizzazione un contenitore di testo con un livello di intestazione da H1 a H6. Le intestazioni vengono formattate in base al foglio di stile associato al tema corrente.
Il campo Intestazione contenuto nella sezione Content può essere utilizzato per aggiungere un'intestazione H1 nella parte superiore della pagina. Tuttavia, il campo è legacy rispetto alle versioni precedenti di Commerce ed è fornito per supportare contenuti meno recenti. Questo campo non sfrutta le funzionalità avanzate di Page Builder. È consigliabile lasciare vuoto il campo Intestazione contenuto e utilizzare il tipo di contenuto Intestazione Page Builder per aggiungere alla pagina titoli di qualsiasi livello.
L’esempio seguente mostra come vengono visualizzati l’intestazione di contenuto e il tipo di contenuto Intestazione quando vengono formattati dal tema Luma.
È possibile trascinare un'intestazione dalla sezione Elementi del pannello Page Builder in una riga, colonna o scheda impostata sull'area di visualizzazione. Il livello di intestazione e l'allineamento possono essere controllati dalla barra degli strumenti dell'editor sullo stage o utilizzando il controllo Impostazioni ( {width="20"} ).
Editor titoli
Casella degli strumenti Contenitore intestazione
Come per tutti i contenitori di contenuto, la casella degli strumenti viene visualizzata quando si passa il puntatore del mouse sul contenitore.
Aggiungi un’intestazione
-
Nel pannello Page Builder, espandi Elements e trascina un segnaposto Heading in una riga, colonna o set di schede sull'area di visualizzazione.
{width="600" modal="regular"}
-
Nell'editor, immettere il testo dell'intestazione sopra il segnaposto
Edit Heading Text
.Per impostazione predefinita, al testo dell’intestazione viene assegnato un tipo di intestazione di livello due (H2).
{width="500" modal="regular"}
-
Nella barra degli strumenti, scegli il tipo di intestazione appropriato tra H1 e H6.
-
Se necessario, modificate l'allineamento.
Modifica impostazioni intestazione
-
Passa il puntatore del mouse sul contenitore dell'intestazione per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).
{width="500" modal="regular"}
-
Aggiornare il contenuto dell'intestazione (Heading Type e Heading Text) se necessario.
Puoi anche aggiornare questo contenuto nell’editor delle intestazioni.
-
Aggiornare le impostazioni di Advanced in base alle esigenze.
-
Per controllare il posizionamento dell'intestazione all'interno del contenitore padre, scegliere un Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Opzione Descrizione Default
Applica l'impostazione predefinita di allineamento specificata nel foglio di stile del tema corrente. Left
Allinea l'elenco lungo il bordo sinistro del contenitore principale, tenendo conto di eventuali spaziature specificate. Center
Allinea l'elenco al centro del contenitore padre, tenendo conto di eventuali spaziature specificate. Right
Allinea il blocco lungo il bordo destro del contenitore principale, tenendo conto della spaziatura specificata. -
Imposta lo stile Border applicato a tutti e quattro i lati del contenitore di titoli:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Opzione Descrizione Default
Applica lo stile di bordo predefinito specificato dal foglio di stile associato. None
Non fornisce alcuna indicazione visibile dei bordi del contenitore. Dotted
Il bordo del contenitore viene visualizzato come una linea tratteggiata. Dashed
Il bordo del contenitore viene visualizzato come una linea tratteggiata. Solid
Il bordo del contenitore viene visualizzato come linea continua. Double
Il bordo del contenitore viene visualizzato come una doppia riga. Groove
Il bordo del contenitore viene visualizzato come una linea scanalata. Ridge
Il bordo del contenitore viene visualizzato come una linea scanalata. Inset
Il bordo del contenitore viene visualizzato come una linea interna. Outset
Il bordo del contenitore viene visualizzato come una linea di contorno. -
Se si imposta uno stile di bordo diverso da
None
, completare le opzioni di visualizzazione del bordo:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opzione Descrizione Border Color Specificate il colore scegliendo un campione, facendo clic sul selettore del colore oppure immettendo un nome di colore valido o un valore esadecimale equivalente. Border Width Immettere il numero di pixel per lo spessore della linea del bordo. Border Radius Immettere il numero di pixel per definire la dimensione del raggio utilizzato per arrotondare ogni angolo del bordo. -
(Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore.
Separare più nomi di classe con uno spazio.
-
Immettere i valori, in pixel, per Margins and Padding per determinare i margini esterni e la spaziatura interna del contenitore titoli.
Immettere i valori corrispondenti nel diagramma.
table 0-row-2 1-row-2 2-row-2 layout-auto Area contenitore Descrizione Margins Quantità di spazio vuoto applicata al bordo esterno di tutti i lati del contenitore. Opzioni: Top
/Right
/Bottom
/Left
Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore. Opzioni: Top
/Right
/Bottom
/Left
-
-
Al termine, fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.
Duplicare un’intestazione
Per un titolo formattato con impostazioni specifiche, è più efficiente duplicare l’intestazione, anziché ricominciare con un nuovo segnaposto.
-
Passa il puntatore del mouse sul contenitore dell'intestazione per visualizzare la casella degli strumenti e scegli l'icona Duplica ( {width="20"} ).
Il duplicato viene visualizzato immediatamente sotto l'originale.
{width="500" modal="regular"}
-
Passa il puntatore del mouse sul nuovo contenitore del titolo per visualizzare la casella degli strumenti e scegli l'icona Sposta ( {width="20"} ).
{width="500" modal="regular"}
-
Seleziona e trascina l’intestazione fino a quando la linea guida rossa non contrassegna la nuova posizione.
Durante lo spostamento dell'intestazione, i bordi superiore e inferiore di ogni contenitore vengono visualizzati come linee tratteggiate.
{width="500" modal="regular"}
-
Se si desidera modificare il livello di intestazione, fare clic sul testo dell'intestazione e scegliere il nuovo livello nella barra degli strumenti dell'editor.
{width="500" modal="regular"}