Karty Add, Navigator i Style w Weblify tworzą i edytują strony internetowe jako edytowalne warstwy w Figmie. Wygenerowane warstwy zachowują metadane Weblify, więc wtyczka może je podglądać, sprawdzać i eksportować jako statyczną stronę internetową.
Tworzenie strony
- Otwórz kartę Navigator, wpisz nazwę w polu New page name i wybierz Add page. Możesz też otworzyć kartę Add, wybrać Templates i kliknąć szablon, aby dodać go jako nową stronę o nazwie szablonu.
- Zanim dodasz treść, zaznacz wygenerowaną stronę na płótnie w Figmie lub wybierz ją w Navigator.
Jeśli nic nie jest zaznaczone, Weblify użyje pierwszej znalezionej strony Weblify albo utworzy stronę o nazwie Home. Wiersz pod filtrami na karcie Add pokazuje, gdzie zostanie wstawiona nowa treść.
Dodawanie sekcji i elementów
Karta Add to jedna biblioteka z wyszukiwarką. Użyj filtrów Templates, Sections, Elements i Layouts albo wyszukaj po nazwie. Sections służą do kompletnych obszarów strony, takich jak nawigacja, sekcja hero, treść, cennik, formularze i stopki. Elements służą do pojedynczych komponentów. Wybierz pozycję, aby ją wstawić.
Przed wstawieniem pozycji zaznacz stronę, sekcję lub kolumnę Weblify. Dzięki temu Weblify ma przewidywalny element nadrzędny, a struktura eksportu pozostaje nienaruszona.
Oznacz pozycję gwiazdką, aby dodać ją do Favourites. Aby ponownie użyć własnej sekcji, otwórz jej menu ⋯ w Navigator i wybierz Save to My sections; sekcja pojawi się wtedy w My sections na karcie Add.
Edycja struktury
Karta Navigator zawiera listę Twoich stron i sekcji na bieżącej stronie. Możesz:
- Dodawać strony, przeciągać strony i sekcje, aby zmienić ich kolejność, oraz w menu ⋯ zmieniać ich nazwy, duplikować je, ukrywać, usuwać lub ustawiać stronę główną.
- Wybrać przycisk ⚙ obok strony, aby edytować jej URL i metadane dla wyszukiwarek, a następnie wybrać Save page.
- W menu ⋯ sekcji ustawić ją jako nagłówek lub stopkę wyświetlane na każdej stronie.
Metadane strony obejmują tytuł, opis, kanoniczny URL, pola do udostępniania w mediach społecznościowych, favicon, typ karty Twittera i ustawienie dla wyszukiwarek.
Aby ustawić, jak zaznaczona sekcja, wiersz, siatka lub kolumna dopasowuje się do tabletów i telefonów, otwórz kartę Style i rozwiń Responsive.
Style i obrazy
Otwórz kartę Style i rozwiń Brand styles, aby przejrzeć motywy, kolory, typografię i promień zaokrąglenia rogów używane w generowanej treści. Rozwiń Images, aby wyświetlić listę obrazów zastępczych i przed eksportem zastąpić je adresami URL prawdziwych obrazów.
Otwórz kartę Preview, aby sprawdzić bieżącą stronę bez opuszczania wtyczki.