Opcje widgetu obrazek

Z tej instrukcji dowiesz się jak efektywnie wykorzystać widget Obrazek.

Zobacz wideo tutorial (EN):

I. Podstawy pracy z widgetem obrazek

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

2. Po dodaniu obrazka otworzy się okno ustawień. Możesz także wejść w ustawienia klikając dwukrotnie w obszar widgetu. Masz do wyboru cztery zakładki.

Galeria

Tutaj możesz dodawać swoje obrazy. Kliknij w Wyślij obrazki (1) lub Nowy folder (2). Po załadowaniu obrazek pojawi się w galerii. Zapisz i zamknij (3).

Galeria darmowych obrazów 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. 

Zakładkę Unsplash (1) znajdziesz po lewej stronie panelu oraz w sekcji Galeria, klikając w Wybierz obrazy z Unsplash (2). Możesz utworzyć nowy folder (3), aby posegregować swoje obrazy.

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. Więcej dowiesz się tutaj.

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.

3. Rozmiar obrazka możesz zmieniać przeciągając punkty obramowania uzyskując pożądaną wielkość. Ten sposób umożliwi Ci zachowanie odpowiednich proporcji obrazka.

4. Kliknij w widget. Wyświetli się jego menu podręczne (1) oraz uaktywni panel boczny po prawej stronie edytora (2). Możesz kopiować i wklejać elementy ze strony głównej (pojedynczo i grupowo) za pomocą kombinacji klawiszy Kopiuj (Ctrl+C) i Wklej (Ctrl+V). 

Używając opcji menu podręcznego (1) możesz zmienić, duplikować lub usunąć obraz oraz zmienić warstwę.

II. Panel boczny z opcjami widgetu obrazek

W opcjach widgetu obrazek masz do dyspozycji poniższe ustawienia:

1. Zmiana rozmiaru i położenie obrazka.
2. Przejście do galerii i ustawień.
3. Skopiowanie ID widgetu (może Ci się przydać do niektórych, dodatkowych skryptów) lub dodanie klasy.
4. Ukrywanie widgetu na którymś z widoków, więcej tutaj. Obrazy jest domyślnie widoczny zarówno na widoku desktopowym, jak i mobilnym.
5. Wybór akcji po kliknięciu w obrazek.

W kolejnej części panelu znajdują się zakładki z dodatkowymi opcjami. Każdą z nich możesz włączyć lub wyłączyć za pomocą suwaka, który znajduje się w prawym górnym rogu każdej zakładki.

1. Zaokrąglone rogi – ustaw wartość zaokrąglenia rogów. Wartość może być taka sama dla wszystkich rogów lub inna dla każdego wybranego.
2. Obramowanie – dostosuj parametry obramowania: grubość, styl linii i kolor.
3. Cień – ustaw wartości dla cienia widgetu obrazek.

III. 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.