Elementi - Divisore
Utilizza il tipo di contenuto Divider per aggiungere una regola come interruzione visiva tra sezioni di contenuto in Page Builder stage. È possibile specificare il colore, lo spessore e la larghezza della linea del divisore. È inoltre possibile controllare l'allineamento, impostare i margini e la spaziatura interna e il formato del bordo del contenitore. Per impostazione predefinita, il divisore è una regola per i capelli che estende l’intera larghezza del contenitore, con tolleranza per la spaziatura interna.
Anche se la maggior parte dei contenitori divisore sono invisibili, l'esempio seguente visualizza il contenitore con un bordo tratteggiato rosso in modo da visualizzare la relazione tra il divisore, la spaziatura interna e il contenitore. Potete regolare la spaziatura interna nella parte superiore e inferiore del divisore per controllare la spaziatura tra gli elementi.
Casella degli strumenti Divisore
Aggiungi un divisore
-
Nel pannello Page Builder, espandi Elements e trascina un segnaposto Divider in una riga, colonna o set di schede sull'area di visualizzazione.
Utilizza la linea guida rossa come riferimento quando posizioni il divisore prima o dopo un altro contenitore di contenuto sullo stage.
{width="600" modal="regular"}
Nell'esempio seguente, il divisore indica l'inizio di una nuova sezione di testo.
{width="500" modal="regular"}
-
Per specificare le impostazioni del nuovo divisore, attenersi alla procedura seguente.
Modificare le impostazioni del divisore
-
Passa il puntatore del mouse sul contenitore del divisore per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).
{width="500" modal="regular"}
-
Modificare il divisore Line Color utilizzando uno dei metodi seguenti:
- Immettere un nome di colore HTML valido. Ad esempio,
Teal
. - Immetti il valore esadecimale del colore. Ad esempio,
#008080
.
Al termine, fare clic su Apply.
{width="600" modal="regular"}
- Immettere un nome di colore HTML valido. Ad esempio,
-
Immetti Line Thickness in pixel.
-
Per indicare l'unità di misura, immettere Line Width seguito da
px
o%
.{width="600" modal="regular"}
-
Aggiornare le impostazioni di Advanced in base alle esigenze.
-
Per controllare il posizionamento del divisore all'interno del contenitore principale, scegliere 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. Nell'esempio seguente, le opzioni sono impostate in modo da utilizzare un allineamento centrale per il divisore.
{width="600" modal="regular"}
-
Impostare lo stile Border applicato a tutti e quattro i lati del contenitore divisore:
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 divisore.
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.
{width="500" modal="regular"}
Duplicare un divisore
Per un divisore formattato con impostazioni specifiche, è più efficiente creare un duplicato, anziché ricominciare con un nuovo segnaposto.
-
Passa il puntatore del mouse sul contenitore del divisore per visualizzare la casella degli strumenti e scegli l'icona Duplica ( {width="20"} ).
Il contenitore del divisore duplicato viene visualizzato immediatamente sotto l'originale.
{width="500" modal="regular"}
-
Passa il puntatore del mouse sul nuovo contenitore del divisore per visualizzare la casella degli strumenti e scegli l'icona Sposta ( {width="20"} ).
{width="500" modal="regular"}
-
Selezionate e trascinate il divisore finché la linea guida rossa non contrassegna la nuova posizione.
Durante lo spostamento del divisore, i bordi superiore e inferiore di ciascun contenitore vengono visualizzati come linee tratteggiate.
{width="500" modal="regular"}