Opcje obrazków/zdjęć

12.02.2019

1. Podstawy pracy z obrazkami

  • Aby dodać obrazek przeciągnij element „Obrazek” i upuść go w edytorze.
Image options
  • 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.
Image options
  • 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.
Image options
  • 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.
Image options
  • 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.
Image options
  • 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ć.
Image options

2. Panel opcji obrazka

Po kliknięciu w wybrany obrazek, po prawej stronie okna pojawia się panel opcji.
W panelu możesz zmienić nazwę obrazka (1), jego szerokość i wysokość oraz położenie z dokładnością do 1 px (2), widoczność na wybranym widoku (3), przypisać mu akcję ‚On click’ (4), czy też dokonać podstawowej edycji jego wyglądu np. poprzez dodanie ramki (5).

Opcje obrazków/zdjęć

Dodatkową możliwością w tym panelu, jest jeszcze pobranie ID obrazka, lub nadanie mu klasy (często potrzebnej do wykorzystania go w zewnętrznym skrypcie).

3. Zaawansowane funkcje obrazków

1. Po wejściu w ustawienia obrazka. W pierwszych zakładkach ustawień, znajdziesz galerię, do której możesz dodać swoje zdjęcia, domyślną galerię, a także darmową bazę zdjęć.

Opcje obrazków/zdjęć
Opcje obrazków/zdjęć

2. Karta ‚Po kliknięciu’ w ustawieniach obrazka, pozwala ustawić akcję on click (po kliknięciu) dla danego zdjęcia. Ustawienia te możesz zmienić również z poziomu edycji obrazka.

  • Link – obrazek przekierowuje na wybrany link (wymagany URL).
Opcje obrazków/zdjęć
  • Link do sekcji – obrazek przekierowuje do wybranej sekcji na landing page.
Opcje obrazków/zdjęć
  • Lightbox – przypisanie obrazka do galerii lightbox (więcej na ten temat w osobnym artykule „Galeria lightbox„).
Opcje obrazków/zdjęć

3. W karcie „Ustawienia” możesz też dodać tytuł obrazka oraz tekst alternatywny.

Opcje obrazków/zdjęć

4. Optymalizacja obrazków, rekomendowane rozmiary i formaty

Aby edycja landing page z wykorzystaniem plików graficznych przebiegała sprawnie, warto jest dostosować dodawane pliki graficzne.

Możesz zoptymalizować swoje zdjęcia ładowane do landing page’a, w tym celu polecam włączyć opcję „Optymalizacja obrazków” z poziomu zakładki „Labs” w panelu konta.

Opcje obrazków/zdjęć
PAMIĘTAJ

Jeśli już włączysz tę opcję, pamiętaj aby opublikować ponownie landing page tak, ażeby obrazy będące już wewnątrz edytora, zostały zoptymalizowane.

Specyfikacja plików graficznych 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.
Czy ten artykuł był dla Ciebie pomocny?

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.