Elementor – widżet Obraz

Odsłony: 255

 Drugim obok tekstu najczęściej spotykanym elementem treści blogu są obrazki. Elementor oferuje kilka specjalnych widżetów do obsługi ilustracji. Najważniejszym jest naturalnie Obraz, który pozwala wstawić grafikę i sformatować ją na najróżniejsze sposoby. Pokażemy to na żywych przykładach..

Po przeciągnięciu ikony widżetu na pole widżetów w lewym panelu ukazuje się interfejs służący do formatowania.

Na karcie Treść jest grupa poleceń Obraz. Kliknięcie Choose Your Image pozwala wybrać ilustrację z okna Załaduj media i wstawić ją do widżetu.

Polecenie Rozmiar obrazu pozwala wybrać pożądaną wielkość ilustracji, od miniatury do pełnego rozmiaru. Zauważ jeszcze, że oprócz wymiarów zdefiniowanych w Elementorze, do dyspozycji mamy też rozmiary predefiniowane w używanym aktualnie motywie blogu.

Wyrównanie pozwala umieścić ilustrację po lewej lub prawej stronie widżetu lub też na środku.

Podpis pozwala wstawić podpis ilustracji (uwaga, z niejasnych powodów wstawienie podpisu koliduje z wyborem predefiniowanej wielkości, ale można to poprawić na karcie Styl).

Odnośnik do pozwala wstawić odnośnik do pliku multimedialnego (np. z miniatury do większego zdjęcia) albo adres URL z możliwością otwarcia adresu na osobnej karcie (w opcjach Otwórz w nowym oknie)

Kamkorder

Na karcie Styl możemy określić szereg dodatkowych parametrów wyświetlania ilustracji.

Styl ilustracji

Szerokość umożliwia zdefiniowanie szerokości ilustracji. Domyślną miarą jest procent szerokości widżetu, ale można też wybrać piksele.

Maksymalna szerokość określa w procentach szerokości oryginału maksymalny rozmiar ilustracji (nie więcej niż…).

Przezroczystość określa przezroczystość ilustracji w przedziale od 0,1 (maksymalna) do 1 (brak). Mam wątpliwość, czy nie powinno się użyć – z uwagi na skalę wartości – określenia nieprzezroczystość.

Filtry CSS pozwalają zdefiniować rozmazanie, jasność, kontrast i nasycenie. Warto tu poeksperymentować, korzystając z suwaków.

Rodzaj obramowania to pięć wariantów ramki wokół obrazka.

Zaokrąglenie obramowania pozwala wybrać wielkość zaokrąglenia rogów ramki.

Boks z cieniem umożliwia utworzenie efektu trójwymiarowego – złudzenia, że ramka znajduje się nad stroną. Definiujemy tu kolor, rozmiar w pionie i poziomie, rozmazanie oraz ewentualne rozszerzenie cienia na wszystkie strony ilustracji.

Jeśli na karcie Treść wprowadziliśmy podpis, to na karcie Styl  pojawia się grupa poleceń Podpis, gdzie możemy określić poziome wyrównanie podpisu, kolor tekstu, parametry czcionki oraz odstęp między podpisem a ilustracją.

Przykład zastosowania kilku parametrów wyświetlania ilustracji – przezroczystości, rozmazania, obramowania, zaokrąglenia, cienia, podpisu, linku pod ilustracją.

Tygrys - jeden z największych kotów na Ziemi

I ostatnia karta, Zaawansowane, służy  do zdefiniowania bezpośredniego otoczenia ilustracji, podobnie jak w przypadku widżetu tekstowego.

W grupie Zaawansowane możemy zmienić wielkość zewnętrznych marginesów ramki w stosunku do otoczenia, a także wewnętrznego odstępu między ilustracją a ramką.

Animacja wejścia pozwala wybrać z listy animację, określić czas jej trwania oraz opóźnienie jej startu (w milisekundach).

W grupie Tło możemy wybrać rodzaj tła dla ramki – dla normalnego widoku ramki po wczytaniu strony lub po najechaniu myszą na ilustrację.

Możemy wybrać z palety jednolity kolor, ale możliwe jest też wybranie gradientu, gdzie określamy kolory krańcowe, rodzaj linearny lub radialny oraz kąt.

Grupa Obramowanie pozwala wybrać rodzaj obramowania, szerokość obramowania (czyli jego grubość) oraz wielkość zaokrąglenia.

Po kliknięciu opcji Boks z cieniem możemy jeszcze zdefiniować cień ramki, a więc wielkość cienia w poziomie i pionie, jego kolor, rozmycie i pozycję. 

W grupie Responsywne możemy ukryć ramkę w jednym z urządzeń – na komputerze, w tablecie lub smartfonie. Może się to przydać, gdy któreś z urządzeń ma kłopot z wyświetleniem danej zawartości. Naturalnie ramka pozostaje we wpisie, a jedynie jest ukrywana przed czytelnikiem.

Grupa spersonalizowany CSS jest zastrzeżona dla wersji Elementor Pro.

W kolejnym odcinku powiemy o kilku widżetach specjalnych dla ilustracji.

0 0 votes
Article Rating
Subscribe
Powiadom o
guest
0 komentarzy
Inline Feedbacks
View all comments