1. Podstawy pracy z obrazkami

  • Aby dodać obrazek przeciągnij element "Obrazek" i upuść go w edytorze,
  • W edytorze pojawi się puste pole bez obrazka. Aby dodać obrazek w pole, wybierz ikonę ołówka z niebieskiej wstążki nad elementem lub kliknij dwukrotnie w pusty obrazek,
  • Otworzy się okno galerii obrazków (u początkujących użytkowników galeria będzie pusta). Aby wgrać do galerii obrazek, kliknij ikonę chmury. Po wgraniu, obrazek pojawi się w galerii. Aby dodać wybrany obrazek w pustą ramkę na landing page należy kliknąć w niego dwukrotnie lub raz, a następnie kliknąć  "Zapisz i zamknij" w prawym górnym rogu okna,
  • Rozmiar obrazka możesz zmieniać przytrzymując jeden z punktów zaczepu. Jeśli w tym celu używasz właśnie tych narożnych punktów, pozwala to zachować jego proporcje,
  • Aby skopiować obrazek, przytrzymaj klawisze Ctrl+c, a następnie Ctrl+v lub kliknij w przycisk "Duplikuj" znajdujący się na górnej belce edytora,
  • Obrazki możesz grupować, przytrzymując lewy Ctrl i klikając w obrazki myszką. Wówczas, zostają otoczone niebieską ramką bez zaczepów. Takie zgrupowane obrazki, możesz kopiować i przesuwać,

2. Panel opcji obrazka

  • Po zaznaczeniu wybranego obrazka, po prawej stronie okna pojawia się panel opcji obrazka. W panelu możesz zmienić nazwę obrazka (1), jego szerokość i wysokość oraz położenie z dokładnością do 1 px (2), przypisać mu akcję 'On click' (3) czy też dokonać podstawowej edycji jego wyglądu np. poprzez dodanie ramki (4),

3. Zaawansowane funkcje obrazków

1. Karta 'On click' w ustawieniach obrazka (ikona ołówka przy obrazku), pozwala ustawić akcję on click (po kliknięciu) dla danego obrazka. Ustawienia te możesz zmienić również z poziomu edytora (patrz powyżej):

  • Link - obrazek przekierowuje na wybrany link (wymagany URL),
  • Link do sekcji - obrazek przekierowuje do wybranej sekcji na landing page,
  • Lightbox - przypisanie obrazka do galerii lightbox (więcej na ten temat w osobnym artykule "Galeria lightbox"),

2. W karcie "Ustawienia" możesz też dodać tytuł obrazka oraz tekst alternatywny,

3. Wracając do panelu opcji obrazka po prawej stronie okna edytora, po wejściu
w przycisk "Zaawansowane", pojawią się wcześniej ukryte informacje o obrazku - możesz pobrać ID obrazka, przypisać mu klasę JavaScript oraz włączyć i wyłączyć
w jakich widokach ma być widoczny obrazek (monitor, tablet, smartphone, wszystkie na raz, żaden. Więcej na temat widoków mobilnych znajduje się w artykule "Widoki mobilne").

4. Rekomendowane rozmiary i formaty plików graficznych

Aby edycja landing page z wykorzystaniem plików graficznych przebiegała sprawnie, warto jest dostosować dodawane pliki graficzne. Specyfikacja takich plików przedstawia się następująco:

  • grafika jak tło landing page - preferowany rozmiar ok. 1200x1400px (pamiętaj, by najważniejsze elementy tła znajdowały się w proponowanej szerokości 1200px)
  • pliki graficzne = widgety obrazek - rozmiar 1:1, jaki ma być wyświetlany finalnie,
  • format - .jpg/.png; widgety ikona mogą występować w formacie .svg. 

5. Optymalizacja obrazków


Żeby uniknąć problemów związanych ze zbyt długim ładowaniem się obrazków lub niepotrzebnym zwiększeniem objętości strony, warto optymalizować obrazki dodawanie do landing page'a.
W tym celu może okazać się przydatne proste rozwiązanie online do kompresji obrazów, w którym łatwo załadujesz i później pobierzesz skompresowane zdjęcie.


Jeśli pojawią się pytania lub problemy, napisz do nas na support@landingi.com lub skorzystaj z czatu - czekamy na Ciebie!

Did this answer your question?