Elementi - Divisore

Utilizza il Divisore tipo di contenuto per aggiungere una regola come interruzione visiva tra sezioni di contenuto nel Page Builder fase. È 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.

w-500 modal-image
Divisore predefinito in un contenitore senza bordo

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.

w-500 modal-image
Divisore con riempimento nel contenitore con bordo tratteggiato
NOTE
Se stai apportando modifiche significative a Page Builder è consigliabile aumentare il Durata sessione amministratore per evitare il timeout della sessione mentre si lavora.

Casella degli strumenti Divisore

Strumento
Icona
Descrizione
Sposta
img-md
w-25
Icona Sposta
Sposta il contenitore del divisore in un altro punto valido della pagina.
(etichetta)
DIVISORE
Identifica il contenitore corrente come elemento divisore.
Impostazioni
img-md
w-25
Icona Impostazioni
Apre la pagina Modifica divisore, in cui è possibile modificare le proprietà del divisore e del relativo contenitore.
Nascondi
img-md
w-25
Nascondi icona
Nasconde il contenitore divisore.
Spettacolo
img-md
w-25
Mostra icona
Mostra il contenitore divisore nascosto.
Duplica
img-md
w-25
Icona Duplica
Crea una copia del contenitore del divisore.
Rimuovi
img-md
w-25
Icona Rimuovi
Elimina dall'area di visualizzazione il contenitore del divisore e il relativo contenuto.
NOTE
Gli elementi nascosti vengono memorizzati nel database e invisibili ai clienti. Tuttavia, questi elementi sono visibili ai motori di ricerca e ad altri bot che eseguono la ricerca per indicizzazione del sito. Vengono inoltre restituiti come parte del contenuto se richiesto tramite una chiamata API con un attributo di invisibilità, a meno che non vengano rimossi dall’area di visualizzazione.

Aggiungi un divisore

  1. In Page Builder pannello, espandere Elements e trascina un Divider segnaposto per una riga, colonna o gruppo di schede sullo stage.

    Utilizza la linea guida rossa come riferimento quando posizioni il divisore prima o dopo un altro contenitore di contenuto sullo stage.

    img-md
    w-600 modal-image
    Trascinamento di un divisore sullo stage

    Nell'esempio seguente, il divisore indica l'inizio di una nuova sezione di testo.

    img-md
    w-500 modal-image
    Divisore che separa le sezioni di testo
  2. Per specificare le impostazioni del nuovo divisore, attenersi alla procedura seguente.

Modificare le impostazioni del divisore

  1. Passa il puntatore del mouse sul contenitore del divisore per visualizzare la casella degli strumenti e scegli Impostazioni (+-------------------------------+ | img-md | +===============================+ | w-20 | +-------------------------------+ | Icona Impostazioni | +-------------------------------+).

    img-md
    w-500 modal-image
    Casella degli strumenti Divisore
  2. Cambia il divisore Line Color utilizzando uno dei seguenti metodi:

    • Immetti un valore valido Nome colore HTML. Ad esempio, Teal.
    • Immetti il valore esadecimale del colore. Ad esempio, #008080.

    Al termine, fai clic su Apply.

    img-md
    w-600 modal-image
    Impostazione del colore della linea
  3. Inserisci il Line Thickness in pixel.

  4. Per indicare l'unità di misura, immettere Line Width seguito da px o %.

    img-md
    w-600 modal-image
    Impostazione del colore, dello spessore e della larghezza delle linee
  5. Aggiornare il Advanced ​in base alle esigenze.

    • Per controllare il posizionamento del divisore all'interno del contenitore principale, scegliete 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.

      img-md
      w-600 modal-image
      Divisore con allineamento al centro
    • Imposta il Border stile 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) Specifica i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore.

      Separare più nomi di classe con uno spazio.

    • Immetti i valori, in pixel, per il 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
  6. Al termine, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

    img-md
    w-500 modal-image
    Divisore centrato in una riga

Duplicare un divisore

Per un divisore formattato con impostazioni specifiche, è più efficiente creare un duplicato, anziché ricominciare con un nuovo segnaposto.

  1. Passa il puntatore del mouse sul contenitore del divisore per visualizzare la casella degli strumenti e scegli Duplica (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Icona Duplica | +--------------------------+).

    Il contenitore del divisore duplicato viene visualizzato immediatamente sotto l'originale.

    img-md
    w-500 modal-image
    Divisore duplicato
  2. Passa il puntatore del mouse sul nuovo contenitore divisore per visualizzare la casella degli strumenti e scegli Sposta (+-------------------------+ | img-md | +=========================+ | w-20 | +-------------------------+ | Icona Sposta | +-------------------------+).

    img-md
    w-500 modal-image
    Spostamento di un divisore
  3. 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.

    img-md
    w-500 modal-image
    Spostamento del divisore duplicato nella posizione
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d