Funkcje edytora

Zaktualizowano: 11 sierpnia, 2020 Autor: Avatar Justyna
share
Spis treści
    share
    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.

      Edytor_PL1

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

      edytor_PL2

      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, po kliknięciu w opcję Edytuj wybranego landing page’a.

      Edytor_PL1 2

      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.

      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 ręcznie;
      13. publikacja landinga online (wraz z zapisem zmian);
      14. pomoc – skróty klawiszowe i baza wiedzy o Landingach.
      menu_edytor
      edytor_automatycznyzapis_PL1

      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
      share

      Czy ta instrukcja była pomocna?