Edytor – przegląd opcji

05.02.2019

Przyjrzyjmy się podstawowym funkcjom edytora w Landingi.

I Aplikacja Landingi

Aby przejść do edytora landingowego, najpierw zaloguj się na swoje konto w aplikacji Landingi.  Przed Tobą pojawi się główne okno panelu aplikacji.
W prawym górnym rogu ekranu, znajdziesz przycisk Stwórz nowy landing.

landingi_aplikacja

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

stwórz_nowy_landing

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żę.

wybierz_szablon

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 w aplikacji -> po kliknięciu w opcję Edytuj wybranego landinga.

edytuj_landinga

2. Witamy w edytorze

Na każdym etapie możesz skorzystać z ikony chatu widocznej w prawym dole ekranu i napisać do naszego supportu 🙂

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.

widgety
  1. sekcja landinga;
  2. pole tekstowe;
  3. obrazek;
  4. ikona;
  5. box;
  6. przycisk;
  7. formularz;
  8. wideo;
  9. licznik;
  10. własny kod html.

2.2 Górna część edytora

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

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_opcji_widgetów
  • panel ukryty.
panel_opcji_widgetów_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: 

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

Opcje widgetu Tekst:

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

Opcje widgetu Przycisk:

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

Opcje widgetu Sekcja:

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

Opcje widgetu Obrazek:

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

Opcje widgetu Formularz:

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

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:

  • ukryć (oko);
  • usunąć (kosz).
elementy

2.6. Ustawienia strony

W panelu „Ustawienia strony” możesz dokonać następujących akcji:

  1. ustawienie szerokości strony;
  2. wybór domyślnego fontu;
  3. przejście do okna „Dodatkowe opcje”;
  4. wybór tła.
ustawienia_strony

Po kliknięciu w przycisk „Dodatkowe opcje”, pojawi się okno z nowymi zakładkami:

  • SEO – dostęp do ustawień landing page pod kątem pozycjonowania,
  • Opcje udostępniania – dodawanie tytułu oraz opisu strony i miniaturki,
  • Inne – ustawienia języka landing page i faviconu
  • Własne style – miejsce na dodanie własnych stylów CSS.
dodatkowe_opcje1

To tyle, jeśli chodzi o podstawy poruszania się po edytorze w Landingach.

Czy ten artykuł był dla Ciebie pomocny?

Powiązane tagi:

pierwsze kroki

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.