Opcje widgetu obrazek

Zaktualizowano: 17 września, 2021 Autor: Avatar Justyna
share
Spis treści
share
Spis treści

Z tej instrukcji dowiesz się, jak efektywnie wykorzystać widget Obrazek. Opcje obrazu pozwalają dostosować jego wielkość, położenie, wygląd, a także ustawić przekierowania lub akcje po kliknięciu.

Zobacz wideo tutorial (EN):

Dodawanie obrazka

Po lewej stronie edytora odszukaj widget Obrazek, następnie przeciągnij go i upuść w obszar aktywny Twojego landing page’a.

Po dodaniu obrazka otworzy się okno ustawień. Możesz także wejść w ustawienia, klikając dwukrotnie w obszar widgetu. 

Ustawienia obrazka

W ustawieniach obrazka masz do wyboru cztery zakładki. Pamiętaj, aby zapisywać wprowadzone tutaj zmiany.

Galeria

1. Dodaj swoje obrazy. Kliknij w Wyślij obrazki lub Nowy folder. Po załadowaniu obrazek pojawi się w galerii.

2. Aby dodać obrazek do landing page'a, kliknij w niego dwa razy lub kliknij raz i wybierz Zapisz i zamknij.

Unsplash

Kliknij Wybierz obrazy z Unsplash lub otwórz zakładkę Unsplash.

Unsplash to platforma z darmowymi obrazami w wysokiej rozdzielczości. Pobieranie, używanie, kopiowanie i modyfikowanie obrazów jest całkowicie bezpłatne. Możesz wykorzystać je do wszystkich swoich projektów, zarówno komercyjnych, jak i niekomercyjnych. 

Więcej o galerii darmowych obrazów Unsplash dowiesz się tutaj.

Po kliknięciu

Tutaj ustaw akcję, która ma się uaktywnić po kliknięciu w obrazek umieszczony na Twoim landing page'u.

  1. Brak – brak akcji.
  2. Link przekierowanie na dowolny link.
  3. Link do sekcji – strona płynnie przewinie się do wybranej sekcji.
  4. Galeria obrazów – obrazek zostanie wyświetlony w formie galerii

Ustawienia

W tym miejscu możesz nadać tytuł obrazka oraz umieścić tekst alternatywny, który będzie wyświetlany, jeśli załadowanie obrazka będzie niemożliwe. Ustawienie tytułu i tekstu alternatywnego poprawia SEO strony.

Edycja obrazka

Kliknij w widget, aby rozpocząć edycję. Wyświetli się jego menu podręczne (1) oraz uaktywni panel boczny po prawej stronie edytora (2).

Menu podręczne

Klikając w punkty na obramowaniu, możesz zmieniać dowolnie rozmiar obrazka (1). Pozostałe ikony menu podręcznego umożliwiają zmianę położenia widgetu (2), wejście w jego ustawienia i zmianę obrazka (3), zduplikowanie go (4), przesunięcie na wierzch/pod spód (5) oraz usunięcie obrazka (6).

Panel boczny (toolbar)

W panelu bocznym możesz przejść do ustawień i zmiany obrazka, dostosować jego widoczność (obrazek jest domyślnie widoczny zarówno na widoku desktopowym, jak i mobilnym) i zmienić jego rozmiar.

Poniżej znajdują się zakładki z dodatkowymi opcjami. Każdą z nich – z wyjątkiem zakładek Akcja po kliknięciu oraz Inne – możesz włączyć lub wyłączyć za pomocą suwaka, który znajduje się w prawym rogu każdej zakładki.

  • Akcja po kliknięciu – wybierz akcję po kliknięciu w obrazek: podlinkuj do URL, przewiń do sekcji, pokaż lightbox, galeria obrazów.
  • Obramowanie – dostosuj parametry obramowania: grubość, styl linii i kolor.
  • Zaokrąglone rogi – ustaw wartość zaokrąglenia rogów (wartość może być taka sama dla wszystkich rogów lub inna dla każdego).
  • Cień – ustaw wartości dla cienia obrazka.
  • Inne – dostosuj pozycję obrazka, skopiuj jego ID i nadaj klasę.

Optymalizacja obrazków, rekomendowane rozmiary i formaty

Każdy obrazek jest optymalizowany automatycznie w momencie publikacji landing page'a, po kliknięciu przycisku Publikuj, co nie opóźnia jego ładowania.

Aby edycja landing page’a z wykorzystaniem plików graficznych przebiegała sprawnie, warto pamiętać o ich specyfikacji:

  • Grafika jako tło landing page’a: preferowany rozmiar to ok. 1200x1400px (pamiętaj, aby najważniejsze elementy tła znajdowały się w proponowanej szerokości 1200px).
  • Pliki graficzne (tj. widgety obrazki): rozmiar 1:1 (taki, jaki ma być wyświetlany na ekranie).
  • Format: dla obrazków są to .jpg i .png, natomiast ikony mogą występować w formacie .svg.
share

Czy ta instrukcja była pomocna?