Aggiunta di un contenitore di livelli posizionati.
Usa i Livelli posizionati quando vuoi che gli elementi si sovrappongano o stiano in un punto esatto, cosa che righe e colonne non possono fare. Ottieni una tela su cui trascini ogni elemento dove vuoi, come un titolo sopra una foto. L’esempio sovrappone il titolo bianco di un open day a un’immagine. Per contenuti ordinari fianco a fianco, righe e colonne sono più facili da tenere in ordine sui telefoni.
Aggiungi un contenitore di livelli posizionati
- Passa sopra alla colonna e fai clic su + nella sua barra dei controlli, o sul + al centro di una colonna vuota, per aprire il selettore di elementi.
- Nella scheda Layout fai clic su Positioned layers.
- Si aprono prima le sue impostazioni. Imposta Height così ci sta il tuo livello più alto, poi fai clic su Save. Compare una tela vuota.
- Passa sopra alla tela e fai clic su + nella sua barra dei controlli per aggiungere un elemento, come Text o un’Image. Ogni elemento aggiunto diventa un livello che puoi posizionare.
Cosa vedi
La tela conserva l’altezza impostata e ogni livello sta dove l’hai messo, sopra o sotto gli altri. I visitatori vedono la composizione come appare nell’editor. Le posizioni sono salvate come quota della tela, così un livello mantiene il suo posto quando la tela si restringe. Il testo conserva la sua dimensione a meno che tu non attivi Responsive.
Configura i tuoi livelli posizionati
Apri le impostazioni da More > Settings nella barra dei controlli di Positioned layers.
| Impostazione | Cosa fa | Valore predefinito |
|---|---|---|
| Width | Larghezza della tela, per esempio 100% o 600px | 100% |
| Height | Altezza della tela in pixel | 500 |
| Responsive | Ridimensiona l’altezza della tela e il testo con la larghezza della tela, così la composizione mantiene le proporzioni sugli schermi piccoli | Off |
Posizionare i livelli
- Selezionare: fai clic su un livello. Maniglie compaiono sui suoi angoli e bordi.
- Spostare: trascina il livello dal suo nome nella sua barra dei controlli, per esempio Text o Image. I livelli restano dentro la tela.
- Ridimensionare: trascina una maniglia del livello selezionato.
- Aggiungere in un punto: fai doppio clic su una parte vuota della tela. Si apre il selettore di elementi e il nuovo elemento arriva dove hai fatto clic.
Il menu More di ogni livello ha quattro voci in più. 100% width e 100% height allungano il livello su tutta la tela. Bring forward e Send backward lo spostano sopra o sotto gli altri livelli.
Se non lo vedi
- Un livello non si muove quando lo trascini. I livelli si muovono solo dalla maniglia con il loro nome nella barra dei controlli. Passa sopra al livello e trascina quella maniglia.
- Un livello si nasconde dietro un altro. Sta più in basso nella pila. Apri il menu More del livello e scegli Bring forward.
- I livelli si sovrappongono o escono sui telefoni. Responsive è spento, quindi l’altezza della tela e il testo conservano la loro dimensione. Attiva Responsive nelle impostazioni di Positioned layers.
- Positioned layers manca dal selettore dentro una tela. Una tela non può contenere un’altra tela. Aggiungi il nuovo elemento Positioned layers a una colonna.
- Positioned layers manca dal selettore ovunque. Il tuo profilo utente DXPR Builder lo esclude. Un amministratore seleziona Layers in Elements nel tuo profilo in
/admin/dxpr_studio/dxpr_builder/profile.
E adesso?
- Sezioni: dai all’area intorno alla tela un colore o un’immagine di sfondo.
- Annidamento: combina livelli con righe e colonne in layout più complessi.
- Scheda di animazione: fai apparire ogni livello con il suo effetto di entrata.