header-logo
Scopri come creare il sito per la tua attività con Wix.
Progetta il tuo sito con le funzionalità intuitive di Wix.
Gestisci abbonamenti, pacchetti e fatture.
Gestisci la tua attività e comunica con i tuoi membri.
Acquista, trasferisci e collega un dominio al tuo sito.
Fai crescere la tua attività online con gli strumenti giusti.
Aumenta la visibilità del tuo sito con il marketing e la SEO.
Lavora in modo efficace con le funzionalità più avanzate.
Scopri i problemi noti, trova soluzioni o contattaci.
placeholder-preview-image
Diventa un esperto con i nostri corsi e tutorial.
Scopri i consigli per web design, marketing e molto altro.
Scopri come far crescere il traffico organico del tuo sito.
Crea il tuo sito con la nostra piattaforma full stack.
Trova un esperto che ti aiuti a raggiungere i tuoi obiettivi.
placeholder-preview-image

Editor Studio: informazioni sulla struttura di una pagina (elementi Parent, Child e Sibling)

4 min
In questo articolo
  • Relazioni parent-child tra gli elementi
  • Creare la struttura di una pagina
  • Livelli su una pagina
  • Re-parenting degli elementi
  • Trovare il posto di un elemento nella gerarchia
  • Strutturare gli elementi sibling
  • Modifiche strutturali tra i punti di interruzione
Quando si strutturano le pagine del sito, si inseriscono essenzialmente gli elementi all'interno di sezioni e/o contenitori e strumenti di layout. Ad esempio, posizionare il testo all'interno di un riquadro contenitore crea una relazione tra il testo e il contenitore, derivata da moderni HTML e concetti CSS. 
Usa questo articolo per saperne di più sulla struttura della pagina, incluse le relazioni parent-child tra elementi, livelli e altro ancora.

Relazioni parent-child tra gli elementi

Quando posizioni un elemento all'interno di un contenitore o di uno strumento di layout, questo viene collegato a quello strumento o contenitore. Questo crea una relazione parent-child. Ad esempio, l'aggiunta di un logo a un'intestazione rende il logo "child" e l'intestazione "parent".  
Analogamente ai CSS, il design (es. dimensioni, posizione, spaziatura interna, ecc.) di un contenitore parent influenza i suoi elementi child. L'aggiunta della spaziatura interna a un contenitore, ad esempio, rimpicciolisce gli elementi al suo interno per adattarsi alla modifica. Scopri di più sulle dimensioni degli elementi.
Lo sapevi che:
  • I nuovi elementi agganciati vengono automaticamente ancorati in alto e a sinistra/destra dell'elemento parent. Puoi disabilitare l'aggancio automatico per regolare manualmente la posizione dell'elemento child
  • Quando impili gli elementi, vengono posizionati all'interno di un flexbox che funge da parent

Creare la struttura di una pagina

Quando pianifichi il design di un sito, è importante iniziare creando una struttura a più livelli. Ti consigliamo di creare prima i contenitori parent, quindi di aggiungere gli elementi child trascinandoli nel posto giusto. 
Un tasto posizionato in una cella di sezione. Viene visualizzato il messaggio Unisci

Livelli su una pagina

Nell'Editor Studio, la struttura creata si riflette nel pannello Livelli. I seguenti livelli compongono la struttura del sito:
  • Pagina: dal pannello Livelli, puoi modificare il colore di sfondo della pagina e aggiungere la spaziatura interna. Clicca sull'icona Altre azioni  accanto al nome della pagina per controllare queste impostazioni 
  • Sezioni: ogni pagina è composta da almeno una sezione e puoi crearne tutte quelle di cui il tuo cliente ha bisogno La maggior parte delle sezioni contiene strumenti di layout e contenitori (es. celle, pile, ecc.)
  • Contenitori e strumenti di layout: inserisci gli elementi all'interno dei contenitori per creare facilmente una struttura responsiva e assicurarti che rimangano al loro posto. Aggiungi contenitori o strumenti di layout come liste dinamiche e flexbox
  • Elementi: questi sono gli elementi che aggiungi dal pannello Aggiungi elementi (es. testo, tasti, contenuti multimediali, ecc.). Aggancia singoli elementi o impila più elementi per garantire ordine e spaziatura coerenti su tutte le dimensioni dello schermo  
Il pannello Livelli nell'Editor La sezione di benvenuto è stata selezionata

Re-parenting degli elementi

Lo spostamento di un elemento child in un nuovo elemento parent è noto come "re-parenting". Per reimpostare il parenting di un elemento, trascinalo all'interno del nuovo elemento parent. 

Trovare il posto di un elemento nella gerarchia

Ogni sezione, contenitore ed elemento di una pagina ha breadcrumb che indicano la sua posizione nella gerarchia. Puoi navigare facilmente tra questi livelli cliccando sui breadcrumb nell'area di lavoro. 
Un tasto del menu a tre linee nell'area di lavoro. Il breadcrumb è in evidenza

Strutturare gli elementi sibling

I sibling sono elementi che condividono lo stesso parent diretto. Ad esempio, il testo e la grafica vettoriale nell'immagine qui sotto sono sibling, con il contenitore come parent: 
Un contenitore con diversi elementi sibling come testo e grafica vettoriale nell'Editor Studio
Se gli elementi sibling si trovano in determinati strumenti di layout (es. pile, liste dinamiche, ecc.), potrebbero influire sulle dimensioni e sulla posizione degli altri. Progettare questa relazione può essere utile nella creazione di un sito responsivo, in quanto puoi impedire la sovrapposizione degli elementi su schermi di dimensioni ridotte.  
L'esempio seguente mostra i margini creati automaticamente tra elementi sibling:
GIF che mostra un contenitore trascinato nell'Editor. La grafica vettoriale allegata si muove con esso

Modifiche strutturali tra i punti di interruzione

Il pannello Livelli mostra la gerarchia del contenuto di una pagina (sezioni, contenitori/strumenti di layout ed elementi) e ti consente di modificarli in base alle tue esigenze.
La gerarchia delle pagine fa parte della struttura HTML del sito, il che significa che le modifiche apportate si riflettono in tutti i punti di interruzione. Ad esempio, quando separi un elemento parent e un elemento child (es. il testo e il suo contenitore), la separazione si applica a tutti i punti di interruzione. Scopri di più sulla progettazione tra più punti di interruzione.
Un tasto posizionato in una cella di sezione. Viene visualizzato il messaggio Unisci
Il pannello Livelli nell'Editor La sezione di benvenuto è stata selezionata
Un tasto del menu a tre linee nell'area di lavoro. Il breadcrumb è in evidenza
Un contenitore con diversi elementi sibling come testo e grafica vettoriale nell'Editor Studio
GIF che mostra un contenitore trascinato nell'Editor. La grafica vettoriale allegata si muove con esso