Editor X: informazioni sulla struttura della pagina (elementi parent, child e sibling)
Tempo di lettura: 4 min.
Editor X sta passando a Wix Studio, la nostra nuova piattaforma per agenzie e freelancer.Scopri di più su Wix Studio
Quando strutturi le pagine del tuo sito, stai essenzialmente annidando gli elementi all'interno dei contenitori. Un esempio è rappresentato dall'inserimento di testo in un riquadro contenitore. Questo crea una relazione tra gli elementi e il loro parent container (contenitore padre), derivata dai concetti moderni di HTML e CSS.
In questo articolo, scopriremo questa relazione e come sfruttarla per creare un sito responsivo:
Relazioni padre-figlio tra gli elementi
L'inserimento di un elemento all'interno di un contenitore (ad esempio, una sezione, riquadro contenitore, layouter, ecc.) collega l'elemento e crea una relazione parent-child. Ad esempio, se colleghi il tuo logo all'intestazione, questo si aggancia automaticamente ai bordi più vicini, diventando "child" dell'intestazione.
Analogamente al CSS, il design (ad es. dimensioni, posizione, spaziatura interna, ecc.) di un contenitore parent influenza i suoi elementi children (elementi figli). L'aggiunta di spaziatura interna a un contenitore, ad esempio, rende gli elementi all'interno più piccoli per adattarsi alla modifica.
Nota:
Quando impili gli elementi per controllare il loro ordine verticale, questi vengono posizionati all'interno di un contenitore flex che funge da "parent".
Suggerimento:
Clicca qui per saperne di più sul dimensionamento degli elementi.
Creare la struttura della pagina
Quando pianifichi il design del tuo sito è importante iniziare creando una struttura a più livelli. Ti consigliamo di creare prima i parent container e di aggiungere gli elementi children trascinandoli e rilasciandoli nella posizione desiderata.
I livelli della pagina
Nell'Editor X, la struttura creata si riflette nel pannello Livelli. La struttura del tuo sito è composta dai seguenti livelli:
- Pagina: dal pannello Livelli puoi modificare il colore di sfondo della pagina e aggiungere la spaziatura interna. Clicca sull'icona Mostra altro
accanto a Page (Pagina) per controllare queste impostazioni - Sezioni: ogni pagina è composta da almeno una sezione. Puoi creare tutte le sezioni verticali e orizzontali di cui hai bisogno. Puoi anche creare sezioni Schema mostrate su più pagine
- Contenitori: nidifica gli elementi all'interno dei contenitori per creare facilmente una struttura responsiva e garantire che rimangano in posizione. Aggiungi un riquadro contenitore di base o strumenti di layout intelligenti come Pile, Layouter e Liste dinamiche.
- Elementi: questi sono gli elementi che si aggiungono dal pannello Aggiungi (ad es. Testo, Tasti, Moduli). Puoi ancorare elementi singoli o impilare più elementi per garantire che rimangano nello stesso ordine e che mantengano la stessa spaziatura su schermi di tutte le dimensioni
Importante:
Sebbene le griglie non facciano parte del modello gerarchico, potrebbero comunque influire sul ridimensionamento e sul posizionamento degli elementi. Scopri di più.
Re-parenting degli elementi
Lo spostamento di un child element in un nuovo parent container è chiamato "re-parenting". Per reimpostare un elemento è sufficiente trascinarlo all'interno del nuovo elemento parent.
Trovare il posto di un elemento nella gerarchia
Ogni sezione, contenitore ed elemento della pagina ha dei percorsi di navigazione che ne indicano il suo posto in termini gerarchici. Puoi navigare facilmente tra i livelli della pagina cliccando sui percorsi di navigazione.
Strutturare gli elementi sibling
Gli elementi sibling sono elementi che condividono lo stesso parent diretto. Ad esempio, il testo e il tasto all'interno di questo contenitore sono elementi sibling poiché il contenitore è il parent:
Se gli elementi sibling si trovano in contenitori flexbox (ad esempio, Pile, Layouter e Liste dinamiche, potrebbero influenzare le dimensioni e le posizioni reciproche. Potrebbe essere utile progettare questa relazione per creare un sito responsivo, in quanto è possibile impedire la sovrapposizione degli elementi in schermi di dimensioni inferiori.
L'esempio seguente mostra i margini creati automaticamente tra gli elementi sibling:
Modifiche strutturali tra punti di interruzione
Il pannello Livelli ti consente di vedere la relazione (ovvero la gerarchia) tra elementi, contenitori e sezioni della pagina e spostarli, se necessario.
La gerarchia delle pagine fa parte della struttura HTML del tuo sito, il che significa che le modifiche apportate ad essa si riflettono su tutti i punti di interruzione. Ad esempio, quando si separano elementi parent e child (come un testo e il suo contenitore), tale separazione viene applicata a tutti i punti di interruzione.
Suggerimento:
Per saperne di più sulla progettazione dei punti di interruzione, clicca qui.
Hai trovato utile questo articolo?
|