Il riquadro Outliner fornisce una visualizzazione ad albero degli elementi e dei clip nel documento. Attiva/disattiva il riquadro Outliner nel menu Finestra.
La scheda degli elementi nel riquadro Outliner ha alcune delle stesse funzionalità degli elementi sullo stage. Ad esempio, puoi fare clic sugli elementi nel riquadro Outliner per selezionarli, fare clic con il pulsante destro del mouse sugli elementi per visualizzare un menu popup di comandi specifici per tali elementi e fare doppio clic sui componenti che hanno una finestra di dialogo di modifica per aprire la finestra.
Organizzazione
Per gli annunci HTML5 e i documenti HTML con pagine, il riquadro Outliner organizza gli elementi sotto ogni pagina nel documento. In modalità di modifica del gruppo vengono mostrati soltanto gli elementi del gruppo.
Per impostazione predefinita, il riquadro Outliner elenca gli elementi nello stesso ordine dei livelli nella sequenza temporale della modalità Avanzata. Puoi passare all'ordine DOM nelle preferenze della Vista struttura.
Espandi o comprimi un elemento: fai clic sulla freccia accanto a un elemento nel riquadro Outliner per mostrare o nascondere gli elementi nidificati.
Espandi o comprimi tutti gli elementi nidificati: fai doppio clic sulla freccia accanto a un elemento per espandere o comprimere tutti gli elementi elencati sotto quell'elemento. Puoi anche tenere premuto il tasto Ctrl (Windows) oppure ⌘ o Alt (Mac) mentre fai clic sulla freccia per ottenere lo stesso risultato.
Riordina elementi: trascina un elemento dove preferisci all'interno della scheda. Viene mostrata una linea gialla nel punto in cui verrà spostato l'elemento. Puoi anche trascinare un elemento secondario in un elemento principale diverso.
Nidifica elementi: puoi nidificare un elemento all'interno di un altro elemento trascinandolo sul nuovo elemento principale. Appare un riquadro giallo attorno all'elemento principale potenziale.
Selezione
Se selezioni un elemento nello stage, viene selezionato anche nella sequenza temporale in modalità avanzata e nel riquadro Outliner. Lo stesso vale se selezioni un elemento in una di queste altre posizioni. Google Web Designer passa a diversi livelli all'interno di elementi nidificati o a pagine differenti, secondo la necessità. L'etichetta dell'elemento principale corrente viene visualizzata in giallo.
Seleziona un elemento: fai clic su un elemento per selezionarlo.
Seleziona più elementi: puoi selezionare più elementi se hanno lo stesso elemento principale.
- Tieni premuto il tasto Ctrl (Windows) o ⌘ (Mac) mentre fai clic sugli elementi da aggiungere alla selezione.
- Per selezionare un intervallo di elementi, fai clic sul primo elemento, quindi tieni premuto Maiusc mentre fai clic sull'ultimo elemento.
Deseleziona un elemento: tieni premuto il tasto Ctrl (Windows) o ⌘ (Mac) mentre fai clic sull'elemento da rimuovere dalla selezione.
Vai a un elemento: fai doppio clic su un elemento per farlo diventare l'elemento principale corrente. È possibile modificare elementi secondari esistenti o nidificare nuovi elementi nell'elemento principale. Se l'elemento è un componente con una finestra di dialogo di modifica, puoi fare doppio clic sopra per aprire la finestra.
Tipo di elemento e stato
Per ogni elemento, nel riquadro Outliner viene visualizzata un'icona che rappresenta il tipo di elemento e vengono indicati ID dell'elemento, nome o contenuti testuali, se presenti. Nel riquadro Outliner vengono visualizzate anche le seguenti icone di stato:
- Un'icona a forma di rombo indica quando un elemento ha un'associazione di dati dinamica.
- I livelli guida hanno un'icona su cui puoi fare clic per convertirli in elementi standard.
- Gli elementi nascosti e bloccati sono indicati da icone di stato su cui puoi fare clic per mostrarli o sbloccarli. Passa il mouse sopra un elemento visibile o sbloccato per visualizzare le icone che consentono di nasconderlo o bloccarlo.
Icone per ogni tipo di elemento
Pagine
| Pagina principale | |
| Pagina |
Elementi
| Gruppo | |
| Div | |
| Immagine | |
| amp-img (immagine in un documento AMP) | |
| Elemento Video | |
| Contenitore di testo | |
| Elenco ordinato | |
| Elenco puntato | |
| Link |
Forme
| Percorso (disegnato dallo strumento Penna) | |
| Rettangolo | |
| Ovale | |
| Linea |
Componenti
| Componente Gesto | |
| Componente Pulsante immagine | |
| Componente Parallasse | |
| Componente Area tocco | |
| Componente Tocca per chiamare/inviare SMS | |
| Componente Galleria a 360° | |
| Componente Galleria con vista a sequenza | |
| Componente Navigazione Galleria | |
| Componente Galleria a scorrimento | |
| Componente Galleria con transizione | |
| Componente amp-carousel | |
| Componente Audio | |
| Componente Video | |
| Componente YouTube | |
| Componente Visualizzatore modello 3D | |
| Componente Effetto immagine | |
| Componente Effetti delle particelle | |
| Componente Foglio Sprite | |
| Componente Girandola | |
| Componente Pulsante | |
| Componente Casella di controllo | |
| Componente Menu a discesa | |
| Componente Etichetta | |
| Componente Immissione numero | |
| Componente Pulsante di opzione | |
| Componente Dispositivo di scorrimento | |
| Componente Campo di testo | |
| Componente Aggiungi al calendario | |
| Componente Date Swap | |
| Componente mappa | |
| Componente Street View | |
| Componente iframe | |
| Componente Valutazioni a stelle |
Elementi di sfondo
| Forma sfondo rettangolare | |
| Forma sfondo ovale | |
| Forma sfondo poligonale |
Clip
| Clip audio | |
| Clip video o immagine |
Icone di stato
| Ha un'associazione dinamica o di variante | |
| Livello guida | |
| Nascosto/mostrato (visualizzato al passaggio del mouse) | |
| Bloccato/Sbloccato (visualizzato al passaggio del mouse) |
Filtri
Puoi filtrare l'elenco degli elementi visibili nel riquadro Outliner. Se un elemento corrisponde a un filtro, vengono visualizzati anche l'elemento principale e gli altri elementi predecessori in modo da poter vedere dove si trova l'elemento corrispondente nella struttura del documento.
Filtra gli elementi facendo clic sullo spazio accanto all'icona a forma di lente d'ingrandimento nella parte superiore del riquadro Outliner e digitando parte di un ID elemento, del valore di una proprietà nome, del nome di un tag o di un gruppo. Il filtro cerca anche nei contenuti testuali degli elementi di testo. Se inserisci il nome di un asset, verranno mostrati i componenti che utilizzano tale asset.
Puoi anche usare i filtri dei tipi di elementi.
Filtri dei tipi di elementi
Nel riquadro Outliner sono disponibili filtri che consentono di mostrare solo determinati tipi di elementi, ad esempio testo o forme. Nella parte superiore del riquadro Outliner, fai clic sulle icone relative ai tipi di elementi che vuoi vedere al suo interno. Quando sono attivi diversi filtri dei tipi di elementi, vengono visualizzati elementi che corrispondono a uno qualsiasi dei filtri attivi.
Icone dei filtri dei tipi di elementi
| Mostra immagini e video | |
| Mostra componenti | |
| Mostra testo | |
| Mostra forme |