Editor Studio: utilizzare un contenitore per creare una sezione verticale

Tempo di lettura: 5 min.
Le sezioni verticali non sono disponibili nell'Editor Studio. Tuttavia, puoi utilizzare un contenitore in una posizione fissa per ottenere un effetto simile, facendolo sembrare proprio come una sezione della barra laterale.
Esempio di una sezione della barra laterale utilizzata per la navigazione su un sito live creato con l'Editor Studio

Passaggio 1 | Aggiungi un contenitore e applica una griglia

Per prima cosa, aggiungi un contenitore e imposta la sua altezza su 100 vh in modo che occupi l'altezza dell'intero schermo. Poi applica una griglia CSS avanzata con la dimensione della riga impostata su Auto.   

Per aggiungere un contenitore e applicare una griglia

  1. Aggiungi un contenitore dal pannello Aggiungi elementi  nell'Editor Studio
  2. Modifica l'altezza del contenitore a 100 vh:
    1. Clicca sulla freccia Apri Ispezione  in alto a destra dell'Editor
    2. Clicca sull'icona Altre azioni  accanto a Dimensioni
    3. Abilita l'interruttore Dimensioni avanzate
    4. Imposta l'altezza su 100 vh
      Suggerimento: clicca sull'unità di misura corrente (ad esempio %, px) per modificarla
  3. Applica una griglia CSS al contenitore:
    1. (Nel pannello Ispezione) Scorri verso il basso fino a Layout
    2. Clicca su Applica accanto a Griglia CSS avanzata
    3. Clicca su Righe
    4. Clicca sulla misura attuale e seleziona Auto
Impostazione della dimensione della riga della griglia su Auto nel pannello Ispezione

Passaggio 2 | Collega il contenitore all'intestazione

Trascina il contenitore sull'intestazione della pagina corrente per unirlo. Così facendo l'intestazione viene ridimensiona in base al contenitore, ma cambieremo l'altezza nel pannello Ispezione. 
Adesso fissa l'intestazione in modo che il contenitore rimanga visibile quando i visitatori scorrono la pagina verso l'alto e verso il basso.

Per unire il contenitore all'intestazione:

  1. Trascina il contenitore sull'intestazione della pagina per unirli 
  2. Ridimensiona l'intestazione:
    1. Seleziona l'intestazione
    2. Clicca sulla freccia Apri Ispezione  in alto a destra dell'Editor
    3. Clicca sull'icona Altre azioni  accanto a Dimensioni
    4. Abilita l'interruttore Dimensioni avanzate
    5. Imposta l'Altezza sul valore desiderato in px
      Suggerimento: clicca sull'unità di misura corrente (ad esempio %, vh) per modificarla
  3. Scorri verso il basso fino a Posizione
  4. Seleziona Fissa dal menu a tendina Tipo di posizione
Vista affiancata del pannello Ispezione e dell'intestazione con il contenitore collegato

Passaggio 3 | Allinea il contenitore e aggiungi la spaziatura interna alla pagina

Ora è il momento di posizionare il contenitore. A seconda di dove vuoi che appaia, allinea il contenitore in alto a sinistra o in alto a destra.
Il passaggio finale consiste nell'aggiungere la spaziatura interna al lato pertinente della pagina: questo impedisce al contenitore di coprire il contenuto della pagina. 

Per allineare il contenitore e aggiungere la spaziatura interna:

  1. Seleziona il contenitore
  2. (Nel pannello Ispezione) Allinea il contenitore in alto a sinistra o destra:
    1. Clicca sull'icona Allinea in alto 
    2. Clicca sull'icona Allinea a sinistra  o Allinea a destra 
  3. Aggiungi spaziatura interna alla pagina:
    1. Clicca su Pagina nella parte superiore del pannello Ispezione
      Selecting the page in the breadcrumbs at the top of the Inspector panel
    2. Sotto Posizione, imposta la spaziatura interna in modo che abbia la stessa larghezza del contenitore
      Ad esempio, se la larghezza del contenitore è del 20% e si trova sul lato sinistro della pagina, anche la spaziatura interna sinistra deve essere impostata su 20%
      Setting the page padding in the Inspector panel

Passaggio 4 | Personalizza il contenitore

Il contenitore è ora pronto per essere utilizzato come sezione della barra laterale. Aggiungi tutti gli elementi di cui hai bisogno e progetta il contenitore dal pannello Ispezione. Dovrebbe apparire come nell'esempio seguente: collegato all'intestazione e occupando l'intera altezza dello schermo mentre scorri verso l'alto e verso il basso nell'area di lavoro. 
Esempio di un contenitore trasformato in una sezione della barra laterale utilizzando le istruzioni descritte in questo articolo

Hai trovato utile questo articolo?

|