Zdjęcia na twojej stronie internetowej są jednym z najszybszych sposobów na przyciągnięcie uwagi odwiedzjących twoją witrynę. To czy odwiedzający stronę będą mieli pozytywne czy negatywne odczucie zależy w dużej mierze od tego co widzą. Komunikacja wizualna ma najwyższą moc bezpośredniego połączenia z użytkownikiem.
W tym artykule przeprowadzimy Cię krok po kroku przez proces dodawania, konfigurowania i dostosowywania obrazów za pomocą dwóch widżetów dostępnych w Elementorze: Obraz i Blok z Obrazem. W ostatniej sekcji dowiemy się, jak dodać tekst nakładany na obraz.
Layout - układ strony
W tym artykule pokaże wam jak zrobić prosty układ strony zawierający kilka obrazów.
Układ naszej strony będzie wyglądał tak:
Górna część strony zawiera główny obraz. Będzie to pierwsza rzecz jaką urzytkownik zobaczy po załadowaniu się strony. Poniższe 3 obrazy dodają więcej szczegółów do treści głównego obrazu. Obraz na samym dole zawiera pole zaczęcające czytelnika do działania.
1. Dodawanie obrazu głównego za pomocą widgetu obrazu
Trudno sobie wyobrazić układ strony, który nie zawiera co najmniej jednego obrazu. Dlatego jest to podstawowy widżet, z którego najprawdopodobniej będziesz często korzystać podczas projektowania swojej witryny.
Aby dodać nowy obraz do strony, wystarczy dodać nową, pojedyńczą, sekcję wewnętrzną,
a następnie przeciągnąć “Obraz” z panelu widżetów Elementora do sekcji.
Po przeciągnięciu i widżetu na stronę, po lewej stronie pojawią się zakładki Treść, Styl i Zaawansowane. Kliknij sekcję Treść i wybierz obraz który chcesz aby był umieszczony.
Dostosowywanie stylu
Gdy projektujesz stronę internetową, drobne szczegóły jak: rozmiar obrazu, przezroczystość i wszystkie inne związane z ze stylem, mają duże znaczenie na odczucia odwiedzającego twoją witrynę.
Elementor zapewnia fantastyczne możliwości modyfikacji właściwości obrazu – będziesz mieć ogromną kontrolę nad każdym szczegółem swojego obrazu, oraz będziesz mógł na żywo zobaczyć wynik swojej pracy.
W tym przykładzie nie będziemy zbytnio dostosowywać naszego podstawowego obrazu, jednak ważne jest, aby przejść przez wszystkie ważne opcje , aby być gotowym do użycia ich w następnym projekcie. Poniżej zobaczysz kilka popularnych sposobów dostosowywania obrazów.
Rozmiar obrazu
To jedna z podstawowych funkcji, która umożliwia zmianę rozmiaru obrazu. Skala rozmiaru zaczyna się od 1% do 100% (obraz w pełnym rozmiarze).
W naszym projekcie chcemy, aby nasz obraz był najbardziej widocznym elementem na stronie (pierwszy element, który widzą użytkownicy kiedy wejdą na stronę), dlatego ustawiamy 100% szerokości . Jeśli chcemy, aby obraz obejmował tylko część kolumny, a nie całość, możemy pobawić się jego procentową szerokością wyświetlania. Dodatkowe opcje oprócz szerokości to: maksymalna szerokość oraz wysokość.
Zaletą Elementora jest to, że umożliwia on sprawdzenie, jak obraz wygląda na różnych ekranach. Obecnie użytkownicy odwiedzają Twoją witrynę przy użyciu wielu różnych typów urządzeń i ważne jest, aby upewnić się, że obrazy mają odpowiedni rozmiar na różnych platformach. Za pomocą jednego kliknięcia możesz sprawdzić, jak obraz wygląda na komputerze, tablecie i telefonie komórkowym oraz w razie potrzeby skorygować rozmiar. Kliknij na ikonę w lewym dolnym rogu przedstawiającą monitor i w trybie responsywnym wybierz “Mobilna”,aby sprawdzić jak strona wygląda na telefonie komórkowym.
Wyrównanie
Opcja wyrównania jest dostępna w zakładce Treść. Ta funkcja pozwala wyrównać obraz do lewej, prawej strony lub wyśrokować. Wyrównanie obrazu jest bardzo przydatną funkcją, jeżeli chcesz skierować czytelnika w konkretne miejsce na stronie wymuszając na nim podjęcie decyzji w sposób jaki ty byś chciał aby była podjęta.
Podpis
Dostępność obrazu jest kluczowa, aby Twoja witryna była użyteczna dla jak największej liczby osób. Dlatego wszystkie obrazy zawierające ważne informacje powinny mieć opisowe podpisy zawierające te same informacje co obraz czyli jeśli chcesz podać źródło informacji o obrazie. Dzięki Elementorowi możesz dodać podpis do każdego obrazu.
Przezroczystość
Za pomocą Elementora możesz również dostosować krycie obrazu. Ta właściwość możesz wykożystać, gdy chcesz, aby obraz był mniej widoczny. W naszym przypadku pozostawimy to ustawienie na poziomie 1, czyli 100%.
Animacja po najechania kursorem (Hover Animation)
Dzięki Elementorowi możesz tworzyć interaktywne efekty najechania kursorem przy użyciu różnych typów animacji.
W sekcji 2 tego artykułu, pokaże wam jak zastosować tą funkcję.
Obramowanie
Elementor pozwala na dodanie obramowania do naszego obrazu w różnych kolorach i stylach. Dostępne funkcje to:
- ciągłe
- podwójne
- kropki
- kreski
- groove
Możemy również zaokrąglić nasz obraz (obramowanie), sprawiając, żeby kanciaste rogi obrazka nie męczyły oka czytelnika.
Margines i odstęp
Ludzie często zastanawiają się jaka jest różnica między marginesem i odstępem. Dlatego zanim zagłębimy się w szczegóły, ważne jest, aby zrozumieć różnicę:
Margines odsuwa elementy od innych elementów.
Odstęp przesuwa elementy wewnątrz elementu od jego krawędzi.
Umieszczanie elementów z odpowiednią ilością odstępu między sobą, tworzy jasny i czytelny układ strony.
Isnieją dwa podstawowe powody używania marginesów i odstępów:
aby stworzyć pionowy rytm. Jest to szczególnie ważne, gdy masz stronę internetową z wieloma różnymi elementami i musisz stworzyć solidny, ujednolicający rytm pionowy, aby układ był przyjemniejszy w użyciu.
aby wyrównać elementy w kontenerze. Zobaczymy, jak to działa w praktyce, podczas dostosowywania obrazu w rozdziale 3 tego artykułu.
Z-index
Jestem pewien, że znasz przestrzeń współrzędnych 3D. Mamy oś X, która jest zwykle używana do reprezentowania poziomu, oś Y do reprezentowania pionu i oś z używaną do reprezentowania tego, co dzieje się na stronie i poza nią, lub w naszym przypadku na ekranie.
Nie widzimy dosłownie osi Z, ponieważ ekran jest płaszczyzną 2D. Widzimy to w postaci perspektywy i niektórych elementów pojawiających się przed lub za innymi elementami, gdy dzielą tę samą dwuwymiarową przestrzeń.
Z-index umożliwia wyświetlanie jednego widżetu na drugim w postaci warstw. Na przykład możemy użyć obrazu jako tła i umieścić element nałożony na to tło (taki jak karta w poniższym przykładzie), aby utworzyć układ warstwowy.
Dostosowanie opcji widoczności
Kiedy byśmy chcieli ukryć pewien element np. dla urządzeń mobilnych, programiści zwykle używają języka CSS aby to zrobić.
Używając Elementora, możesz ukryć element jednym kliknięciem. Dzięki responsywnym ustawieniom możesz dostosować ustawienia widoczności swoich elementów w zależności od typu urządzenia – możesz pokazać określony obraz tylko na szerokim ekranie monitora i ukryć go na telefonie komórkowym, gdzie wielkość ekranu jest ograniczona.
2. Dodawanie sekcji obrazów za pomocą widzetu "Obraz" [Elementor]
Nadszedł czas, aby dodać 3 obrazy pod obrazem nagłówka. które dostarczą dodatkowych informacji na dany temat. W tym celu użyjemy widżetu “Blok z Obrazem”. Korzystając z widżetu “Blok z obrazem”, możesz wyświetlać obrazy na swojej stronie wraz z ich tytułami i opisami w ładny, poukładany sposób.
Więc zacznijmy od dodania nowej sekcji z trzema kolumnami.
Następnie przeciągnij widżet “Blok z Obrazem z panelu widżetów Elementora do pierwszej kolumny.
Powinieneś mieć następujący układ:
A teraz przyszedł czas , aby dostosować nasze bloki z obrazem.
Ponieważ większość właściwości widżetu “Blok z Obrazem” jest taka sama jak w przypadku widżetu Obraz, skupimy się tylko na właściwościach, które są ważne dla naszego układu.
Obraz, tytuł, opis, pozycja
Najpierw musimy zdefiniować najważniejsze ustawienia dla naszego widżetu “Blok z Obrazem”. Aby to zrobić ,wybierz: obrazek oraz dodaj tytuł i opis. To wszystko można zrobić w jednym miejscu – w obszarze treści.
Oto, co nam się wyświetli po dodaniu tych rzeczy.
Odnośnik i Animacja po najechania kursorem
Tworzone przez nas Bloki z Obrazem mają nie tylko charakter informacyjny, ale także elementy nawigacyjne. Korzystając z funkcji “Odnośnik” można zdefiniować adres URL, który będzie używany jako miejsce docelowe, gdy użytkownik kliknie n zdjęcie.
Ponieważ każdy Blok z Obrazem jest elementem interaktywnym, możemy dodać efekt animacji po najechaniu kursorem. Przejdź do sekcji Styl i wybierz z rozwijanego menu odpowiadającą Tobie animacje. Nie zapomni pierw przełączyć na funkcję “Po najechaniu”. Zalecam wybranie animacji “Grow” (powiększenia), ponieważ jest ona najbardziej znana użytkownikom.
Teraz, gdy odwiedzający twoją stronę najedzie na obraz, on powiększy się , a użytkownik zrozumie, że jest to element interaktywny.
Przestrzeń między elementami na stronie www.
Prawidłowe użycie przestrzeni między elementami może znacznie zwiększyć zrozumienie informacji. Możesz ustawić odstęp między obrazem a zawartością, używając opcji “Odstęp”w zakładce “Styl”.
Rozmiar obrazu
W zakładce Styl, można dostosować szerokość obrazu. Można wybrać wartość od 5% do 100%.
Elementor jest narzędziem do projektowania w którym możesz ustawić rozmiar obrazu dla różnych urządzeń osobno. W naszym projekcie obraz ma rozmiar 70 dla komputerów i 30 dla urządzeń mobilnych.
Duplikowanie widżetów
Gdy nasz Blok z Obrazem wygląda tak jak byśmy chcieli, możemy zduplikować jego właściwości. Pozwoli ci to zaoszczędzić dużo czasu. Musisz kliknąć prawym przyciskiem myszy, w prawym górnym rogu elementu na ikonkę ołówka i następnie z rozwiniętego menu kliknąć “Duplikuj”.
Zduplikowany widget pojawi się poniżej tego orginalnego , teraz tylko przeciągnij go w pożądane miejsce.
Gdy już poukładasz zduplikowane Bloki z obrazem koło siebie w rzędzie, przyszedł czas aby zmienić obrazek i wpisać inny tekst do każdego z nich.
U mnie po edycji bloków wygląda tak:
3. Dodawanie tekstu nałożonego na obraz.
Na początku dodamy nową sekcję wewnétrzną poniżej sekcji z Blokami z obrazem.
Po dodaniu sekcji w zakładce “Wygląd” ustawimy minimalną wysokość na 200 px. Aby zmienić obraz tła, przechodzimy do sekcji Styl a następnie Tło → Klasyczny i wybieramy teraz obraz z folderu Media.
Gdy nasz obraz jest wiekszy niż nasza sekcja, możemy ustalić która część obrazu bedzie się pojwaiać. Możemy to zmienić w polu “Pozycja”. W naszym przykładzie ustawię na środek.
Dodawanie nakładki tekstowej
Nadszedł teraz czas, aby dodać tekst na nasze tło zawierające obraz. W tym celu przejdziemy do panelu widżetów i wybierzemy widżet Nagłówek.
Po prostu przeciągnij go na sekcje z tłem. Następnie w zakładce “styl” wybierz kolor tekstu, a w zakładce treść wpisz swoj text oraz wybierz rozmiar nagłówka.
Wyrównywanie tekst
Aby ustawić text w pożądanej przez nas pozycji, w zakładce “Treść” ustawimy wyrównanie na środek, a w “edycji kolumny” dodamy 60 pikseli marginesu na dole obrazu. Efekt naszej pracy można zobaczyć na poniższym zrzucie ekranu.
Dodany tekst jest już na miejscu. Teraz możemy poprawić jego czytelność przyciemniając obraz w tle.
Dodawanie nakładki koloru
Jeśli oryginalny obraz nie jest wystarczająco ciemny , możesz pokryć całość półprzezroczystą czernią. W tym celu przejdź do edycji sekcji , w zakładce “Styl” przejdz do pozycji “Nakładka tła” i wybierz Rodzaj tła → Klasyczny i wybierz kolor z przezroczystością 0,5 lub większą.
Oto, co mamy teraz:
Podsumowanie, podgłąd strony.
Pomyślnie dodaliśmy wszystkie obrazy i utworzyłeś wizualną hierarchię zgodnie z modelem szkieletowym. Czas sprawdzić, jak wygląda Twój układ na ekranach o różnych rozmiarach. Możesz użyć do tego funkcji “Tryb responsywny”.
Pamiętaj, aby przetestować układ strony, aby wyświetlał się dobrze na różnych rodzajach urządzeń. Użytkownicy powinni mieć możliwość oglądania głównych treści, w tym obrazów, bez powiększania lub przewijania w poziomie.