Funkcje edytora

Zaktualizowano: 11 sierpnia, 2020 Autor:

Justyna

Spis treści

W platformie Landingi tworzysz swoje landing page’e za pomocą edytora – w tym artykule przyjrzymy się jego podstawowym funkcjom.

1. Jak przejść do edytora?

Aby przejść do edytora landingowego, najpierw zaloguj się na swoje konto w platformie i przejdź do zakładki Landingi. Następnie kliknij w przycisk Stwórz nowy landing.

W oknie wyboru, które się pojawi, możesz wybrać jedną z trzech opcji.

Na początek radzimy wybrać opcję Wybierz szablon.

Zostaniesz przeniesiony do biblioteki, z której możesz wybrać pusty szablon albo jeden z gotowych szablonów. W menu po lewej możesz wyszukiwać szablony ze względu na cel landinga albo branżę.

Po kliknięciu w wybrany szablon, zostaniesz przeniesiony od razu do głównego okna edytora.

Za każdym kolejnym razem, będziesz mógł wejść w edycję landinga bezpośrednio z zakładki Landingi, po kliknięciu w opcję Edytuj wybranego landing page’a.

2. Edytor

2.1 Widgety – lewa kolumna

Widgety możesz dodać do projektu za pomocą funkcji drag & drop (przeciągnij i upuść) – kliknij w wybraną ikonę i przeciągnij ją w porządane miejsce.

sekcja landinga;
pole tekstowe;
obrazek;
ikona;
box;
przycisk;
formularz;
wideo;
licznik;
własny kod html.

2.2 Górna część edytora

koniec pracy w edytorze – powrót do aplikacji;
cofnięcie oraz ponowienie wykonanego kroku;
zmiana położenia warstwy;
duplikacja elementu;
skopiowanie elementu do innego landing page;
widok desktopowy/główny;
widok mobilny – ikonka kosza pozwala na usunięcie wybranego widoku;
zakładka strony głównej;
zakładka strony podziękowania;
historia strony (umożliwia przywrócenie wcześniejszej, zapisanej wersji);
podgląd (bez publikacji);
zapisanie zmian ręcznie;
publikacja landinga online (wraz z zapisem zmian);
pomoc – skróty klawiszowe i baza wiedzy o Landingach.

2.3 Panel opcji widgetów

Ten panel służy do zarządzania widgetami, warstwami oraz ustawieniami
Za pomocą strzałek możesz go ukryć lub wysunąć, tak jak na screenach poniżej.

panel rozwinięty;

panel ukryty.

2.4 Opcje widgetu

Każdy element możesz skopiować i wkleić np. na innym landingu. Możesz do tego użyć kombinacji klawiszy Ctrl+c aby skopiować i Ctrl+v by wkleić w odpowiednie miejsce.
Aby dokonać zmian w wyglądzie widgetu, zaznacz go za pomocą kliknięcia. Jeśli żaden widget nie jest zaznaczony, zauważysz informację: „Zaznacz jeden element aby edytować jego wygląd”.
W zależności od tego, jaki widget mamy zaznaczony, takie pojawiają się opcje jego edycji.

Opcje widgetu Box:

zmiana rozmiaru i położenia elementu;
pola z ID i klasą (opcjonalnie);
widoczność na wybranych widokach (desktop i mobilny);
dostosowanie wyglądu.

Opcje widgetu Tekst:

zmiana rozmiaru i położenia elementu;
pola z ID i klasą (opcjonalnie);
widoczność na wybranych widokach (desktop i mobilny);
dostosowanie wyglądu tekstu (kolor, rozmiar czcionki, interlinia, wybór czcionki, pogrubienie/kursywa, dodanie cienia, etc.);
tagi, jak np. nagłówki H1 czy H2;
dodanie cienia.

Opcje widgetu Przycisk:

zmiana rozmiaru i położenia elementu;
treść wyświetlana na przycisku;
pola z ID i klasą (opcjonalnie);
widoczność na wybranych widokach (desktop i mobilny);
dostosowanie tekstu na przycisku (kolor, rozmiar czcionki, interlinia, wybór czcionki, pogrubienie/kursywa etc.);
pozostałe opcje do zastosowania: tło (pełny kolor, gradient, obraz), obramowanie, zaokrąglone rogi, cień tekstu, cień przycisku).

Opcje widgetu Sekcja:

zmiana wysokości sekcji;
pola z ID i klasą (opcjonalnie);
widoczność na wybranych widokach (desktop i mobilny);
dostosowanie wyglądu tekstu (tło, obramowanie, zaokrąglone rogi).

Opcje widgetu Obrazek:

zmiana rozmiaru i położenia elementu;
pola z ID i klasą (opcjonalnie);
widoczność na wybranych widokach (desktop i mobilny);
wybór zdarzenia po kliknięciu w obrazek (brak, link, link do sekcji, pokaż popup, lightbox);
zmiany wyglądu obrazka (obramowanie, zaokrąglone rogi, cień).

Opcje widgetu Formularz:

zmiana rozmiaru i położenia elementu;
przeniesienie do okna z ustawieniami;
ustawienie odstępów pomiędzy polami formularza;
włączenie wyświetlania etykiet (tekst opisującego pole);
widoczność na wybranych widokach (desktop i mobilny);
dostosowanie wyglądu tekstu (tło, obramowanie, zaokrąglone rogi, cień).

Analogiczne opcje, do wymienionych w powyższych widgetach napotkasz przy dodaniu ikony, wideo, licznika lub własnego kodu html.

2.5 Elementy

Panel warstw to miejsce gdzie możesz zarządzać położeniem każdego elementu.
W górze kolumny widzisz część główną, którą jest „Strona”, a na nią składają się kolejno: sekcje, kolumny oraz elementy – wszystkie, jakie dodasz:) Mogą nimi być boxy, pola tekstowe, przyciski, formularze etc. Wszystkie te elementy możemy dowolnie przenosić (drag&drop). Za pomocą ikon przy elemencie możesz je także: