Dokumentacja użytkowania
Edytor działa lokalnie w przeglądarce: wczytujesz pliki strony, modyfikujesz je w podglądzie, a na końcu pobierasz gotowy ZIP.
1. Start pracy
- Użyj „Wczytaj folder”, aby załadować całą stronę razem z CSS, JS, obrazami i podfolderami.
- Użyj „Wczytaj pliki”, jeśli chcesz dodać pojedyncze pliki HTML/CSS/JS lub obrazy.
- W sekcji „Strona” wybierz plik HTML, który ma być edytowany i widoczny w podglądzie.
- Możesz też przeciągnąć pliki bezpośrednio na okno edytora.
2. Edycja treści
- Kliknij element w podglądzie albo wybierz go z listy warstw po lewej.
- Tekst zmienisz w polu „Tekst”. Jeśli element ma zagnieżdżone dzieci, edycja tekstu jest blokowana, żeby nie nadpisać struktury HTML.
- Atrybuty HTML, takie jak href, alt, target lub class, edytujesz w sekcji „Atrybuty”.
- Dla obrazków możesz wybrać inny plik z projektu albo wczytać nowy obraz.
- Sekcja „Dodaj element” pozwala wstawić nagłówek, tekst, obraz, przycisk, kontener lub większą sekcję.
3. Style i responsywność
- Zmiany w „Style (override)” zapisują się jako ręczne nadpisania CSS dla zaznaczonego elementu.
- Włącz „Tylko ten widok”, aby style trafiły wyłącznie do aktywnego widoku Desktop, Tablet albo Mobile.
- Przełączniki Desktop/Tablet/Mobile pokazują, jak strona zachowuje się na różnych szerokościach.
- Zakładka „Reguły CSS” pokazuje reguły stylujące wybrany element i pozwala edytować proste reguły z plików CSS.
- Zakładka „Pliki CSS” służy do ręcznej edycji całych plików CSS.
4. Warstwy i układ
- Lista „Warstwy” pokazuje strukturę elementów body i pozwala szybko zaznaczać, ukrywać albo blokować elementy.
- Shift/Cmd/Ctrl+klik dodaje element do zaznaczenia grupowego.
- Przeciągnij zaznaczony element, żeby zmienić pozycję; przeciągnij uchwyt, żeby zmienić rozmiar.
- Alt+przeciągnięcie przenosi element w strukturze DOM, a Alt+Shift+przeciągnięcie tworzy kopię w nowym miejscu.
- Opcje Grid i Snap pomagają wyrównywać pozycję i rozmiary elementów do siatki.
5. Zapis i eksport
- Autosave zapisuje stan edycji lokalnie w przeglądarce, ale nie zastępuje eksportu projektu.
- Kliknij „Pobierz ZIP”, aby pobrać aktualny projekt razem z wprowadzonymi zmianami.
- Cofnij i przywróć działają dla zmian wykonanych w edytorze w bieżącej sesji.
Skróty klawiaturowe
- Cmd/Ctrl + Z
- Cofnij zmianę
- Cmd/Ctrl + Shift + Z
- Przywróć zmianę
- Delete
- Usuń zaznaczony element
- Cmd/Ctrl + D
- Duplikuj zaznaczony element
- Cmd/Ctrl + ↑/↓
- Przenieś element nad lub pod spód
- Esc
- Wyczyść zaznaczenie