Szkicownik udostępnia widok drzewa elementów i klipów w dokumencie. Panel Szkicownik możesz włączyć w menu Okno.
Na liście elementów w Szkicowniku dostępne są niektóre funkcje takie same jak w przypadku elementów na scenie. Możesz na przykład kliknąć elementy w Szkicowniku, aby je wybrać, kliknąć prawym przyciskiem myszy elementy, aby wyświetlić wyskakujące menu poleceń dla danego elementu, i kliknąć dwukrotnie komponenty z oknem edycji, aby otworzyć to okno.
Organizowanie
W przypadku reklam HTML5 i dokumentów HTML ze stronami Szkicownik pozwala na organizowanie elementów każdej strony w dokumencie. W trybie edycji grupy pokazują się tylko elementy z danej grupy.
Domyślnie Szkicownik pokazuje elementy w tej samej kolejności co warstwy na osi czasu w trybie zaawansowanym. Możesz się przełączyć na kolejność DOM, korzystając z ustawień widoku projektu.
Rozwijanie lub zwijanie elementu: kliknij strzałkę obok elementu w Szkicowniku, by pokazać lub ukryć zagnieżdżone elementy.
Rozwijanie lub zwijanie wszystkich zagnieżdżonych elementów: kliknij dwukrotnie strzałkę obok elementu, aby rozwinąć lub zwinąć wszystkie pozycje danego elementu. Ten sam efekt możesz też uzyskać, przytrzymując podczas klikania strzałki klawisz Ctrl (Windows) lub ⌘ albo Alt (macOS).
Zmienianie kolejności elementów: przeciągnij element w wybrane miejsce na liście. W miejscu, do którego zostanie przeniesiony element, pojawi się żółta linia. Możesz też przeciągnąć element podrzędny do innego elementu nadrzędnego.
Zagnieżdżanie elementów: możesz zagnieździć element w innym elemencie, przeciągając go na nowy element nadrzędny. Wokół potencjalnego elementu nadrzędnego wyświetli się żółta ramka.
Zaznaczenie
Wybór jest powielany między sceną a osią czasu Trybu zaawansowanego oraz Szkicownikiem. Oznacza to, że wybranie elementu w jednym miejscu powoduje jego wybranie w drugim. Google Web Designer przełącza się między różnymi poziomami zagnieżdżonych elementów lub różnymi stronami w zależności od potrzeby. Etykieta bieżącego elementu nadrzędnego wyświetla się na żółto.
Wybieranie elementu: kliknij element, by go zaznaczyć.
Wybieranie wielu elementów: możesz wybrać wiele elementów, jeśli mają wspólny element nadrzędny.
- Klikając elementy, które chcesz dodać do zaznaczenia, przytrzymaj klawisz Ctrl (Windows) lub ⌘ (macOS).
- Aby wybrać zakres elementów, kliknij pierwszy z nich, a potem przytrzymaj Shift i kliknij ostatni element.
Usuwanie wyboru elementu: przytrzymaj Ctrl (Windows) lub ⌘ (macOS) i kliknij element, którego zaznaczenie chcesz anulować.
Przechodzenie do elementu wewnętrznego: kliknij dwukrotnie element, aby wyświetlić go jako bieżący element nadrzędny. W widoku elementu nadrzędnego możesz edytować istniejące elementy podrzędne lub zagnieżdżać nowe elementy. Jeśli element jest komponentem z oknem edycji, dwukrotne kliknięcie otwiera okno.
Typ i stan elementu
Dla każdego elementu Szkicownik wyświetla ikonę, która wskazuje jego typ, a także identyfikator, nazwę i zawartość tekstową (jeśli jest dostępna). Szkicownik wyświetla też te ikony stanu:
- Ikona rombu wskazuje, kiedy element ma dynamiczne wiązanie danych.
- Warstwy pomocnicze mają ikonę, którą możesz kliknąć, by przekonwertować taką warstwę z powrotem na zwykły element.
- Ukryte i zablokowane elementy są oznaczone ikonami stanu, które możesz kliknąć, aby pokazać lub odblokować element. Najedź kursorem na widoczny lub odblokowany element, aby zobaczyć ikony umożliwiające jego ukrycie lub zablokowanie.
Ikony każdego z typów elementów
Strony
| Strona podstawowa | |
| Strona |
Elementy
| Grupa | |
| Div | |
| Obraz | |
| amp-img (obraz w dokumencie AMP) | |
| Element wideo | |
| Kontener tekstu | |
| Lista numerowana | |
| Lista punktowana | |
| Link |
Kształty
| Ścieżka (rysowana narzędziem Pióro) | |
| Prostokąt | |
| Owal | |
| Linia |
Komponenty
| Komponent Gest | |
| Komponent Przycisk Obraz | |
| Komponent Paralaksa | |
| Komponent Obszar kliknięcia | |
| Komponent Kliknij, by zadzwonić / wysłać SMS-a | |
| Komponent Galeria 360° | |
| Komponent Galeria obrotowa | |
| Komponent Nawigacja po galeriach | |
| Komponent Galeria przesuwana | |
| Komponent Galeria przejść | |
| Komponent amp-carousel | |
| Komponent Dźwięk | |
| Komponent wideo | |
| Komponent YouTube | |
| Komponent Przeglądarka modeli 3D | |
| Komponent Efekt graficzny | |
| Komponent Efekty cząstek | |
| Komponent Arkusz sprite | |
| Komponent Wir | |
| Komponent Przycisk | |
| Komponent Pole wyboru | |
| Komponent Menu rozwijane | |
| Komponent Etykieta | |
| Komponent Dane wejściowe – liczba | |
| Komponent Opcja | |
| Komponent Suwak | |
| Komponent Pole tekstowe | |
| Komponent Dodaj do kalendarza | |
| Komponent Wybór daty | |
| Komponent Mapa | |
| Komponent Street View | |
| Komponent iFrame | |
| Komponent Oceny w gwiazdkach |
Elementy tła
| Tło w kształcie prostokąta | |
| Tło w kształcie owalu | |
| Tło w kształcie wielokąta |
Klipy
| Klip audio | |
| Klip wideo lub klip obrazu |
Ikony stanu
| Zawiera wiązanie dynamiczne lub wiązanie wariantu | |
| Warstwa pomocnicza | |
| Ukryte/pokazane (wyświetlane po najechaniu kursorem) | |
| Zablokowane/odblokowane (wyświetlane po najechaniu kursorem) |
Filtrowanie
Elementy widoczne na liście w Szkicowniku możesz filtrować. Jeśli element pasuje do filtra, pokazuje się również jego element nadrzędny i inne elementy nadrzędne, dzięki czemu możesz zobaczyć, gdzie w strukturze dokumentu znajduje się dany element.
Aby odfiltrować elementy, u góry panelu Szkicownik kliknij miejsce obok ikony lupy i wpisz fragment identyfikatora elementu, wartości właściwości nazwy, nazwy tagu lub nazwy grupy. Dopasowane zostaną również elementy tekstowe (na podstawie zawartości tekstowej). Jeśli wpiszesz nazwę zasobu, zostaną dopasowane komponenty, które go używają.
Możesz też skorzystać z filtrów typów elementów.
Filtry typów elementów
Szkicownik zawiera filtry, które pozwalają pokazywać tylko określone typy elementów, np. tekst lub kształty. Jeśli chcesz zobaczyć w Szkicowniku wybrane typy elementów, kliknij ich ikony u góry panelu. Gdy aktywnych jest wiele filtrów typów elementów, pokazują się elementy, które pasują do dowolnych z aktywnych filtrów.
Ikony filtrów typów elementów
| Pokaż obrazy i filmy | |
| Pokaż komponenty | |
| Pokaż tekst | |
| Pokaż kształty |