Jak wyświetlać obrazy w WordPress za pomocą Elementora: kreatywne sposoby

Nie jest tajemnicą, że obrazy są ważnym elementem każdej witryny internetowej. Poprawia atrakcyjność wizualną witryny i zaangażowanie. W WordPressie wstawianie obrazów do postów i stron jest dość łatwe. 

Jednym ze sposobów wyświetlania obrazów jest proste dodanie multimediów w Edytorze klasycznym. Innym sposobem jest użycie bloków obrazu w edytorze Gutenberga. W obu przypadkach style są predefiniowane w motywie.

Jednak Elementor zapewnia elastyczność wyświetlania obrazów w WordPress. Oferuje wiele kreatywnych sposobów wyświetlania obrazów w witrynie. Co ważniejsze, każdy element obrazu można indywidualnie dostosować.

Używanie elementów takich jak Pudełka na obrazy, Galerie obrazów, Maskowanie obrazu
możesz tworzyć oszałamiająco wyglądające sekcje obrazów.

Przy odrobinie kreatywności i dbałości o szczegóły możesz dzięki tym elementom wyróżnić swoją witrynę z tłumu.

W tym artykule dowiesz się, jak wyświetlać obrazy w WordPress za pomocą Elementora, aby zaprojektować intuicyjny i przyjazny dla użytkownika interfejs do wyświetlania obrazów w Twojej witrynie.

Dlaczego obrazy są ważne dla treści internetowych

Kiedy widzimy obraz, ludzki mózg automatycznie zaczyna analizować i kategoryzować otrzymywane informacje wizualne, bez świadomego wysiłku. Dzięki temu procesowi treść jest łatwiejsza do zapamiętania i przypomnienia.

Poza tym zdjęcia mogą sprawić, że Twoje treści będą bardziej wciągające i chwytliwe dla odwiedzających, poprawiając atrakcyjność wizualną witryny. 

Oto kilka powodów, dla których obrazy są ważne w treściach internetowych:

• Łatwo przyciąga uwagę: Obrazy można wykorzystać, aby przyciągnąć uwagę odwiedzającego i przyciągnąć go do treści. Jest to szczególnie ważne w przypadku witryn internetowych, których celem jest sprzedaż produktów lub usług.
• Szybko przekazuj informacje: Czasami obraz może przekazywać informacje szybciej i skuteczniej niż tekst. Na przykład infografika może w prosty sposób przekazywać złożone informacje.
• Przełamuje monotonię: Czytanie dużych bloków tekstu może być nudne i monotonne. Obrazy mogą pomóc w podzieleniu długiego tekstu i zwróceniu uwagi na treść.
• Pozostawia trwały ślad w pamięci: Ludzki mózg może przetwarzać informacje wizualne znacznie szybciej niż informacje tekstowe lub werbalne i może je przechowywać przez dłuższy czas.
• Sprawia, że Twoje treści są bardziej udostępniane: Platformy mediów społecznościowych, takie jak Facebook i Instagram, są bardzo wizualne, a zdjęcia są często łatwiejsze do udostępnienia niż sam tekst. Umieszczając na swojej stronie wysokiej jakości obrazy, możesz zwiększyć prawdopodobieństwo, że odwiedzający będą udostępniać Twoje treści w mediach społecznościowych.
• Świadomość marki: Obrazy mogą pomóc we wzmocnieniu marki, przedstawiając logo lub inne elementy wizualne powiązane z Twoją marką.

Jak dodawać obrazy w WordPress (metoda podstawowa)

Bardzo prostym sposobem wyświetlania obrazów w WordPressie jest dodanie obrazu do biblioteki multimediów i wyświetlenie go w domyślnych stylach.

Aby dodać obraz do biblioteki multimediów WordPress:

Zaloguj się do swojego WordPressa, przejdź do Multimedia > Dodaj nowei wybierz obraz z komputera, który chcesz przesłać do biblioteki multimediów.

Teraz wyświetlanie obrazów w WordPress zależy od tego, jakiego domyślnego edytora używasz.

Redaktor Gutenberga:

W domyślnym WordPressie Gutenberg, czyli edytor bloków, możesz wyświetlać obrazy za pomocą bloków obrazów. W tym celu otwórz edytor i dodaj blok obrazu w żądanej pozycji, aby wyświetlić obraz. Następnie prześlij lub wybierz obraz z biblioteki multimediów.

Klasyczny edytor:

Jeśli używasz starego, klasycznego edytora, otwórz stronę lub post w edytorze, a następnie umieść kursor myszy na poście/stronie, na której chcesz wyświetlić obraz. Następnie kliknij przycisk Dodaj multimedia i wybierz obraz z biblioteki multimediów.

Jak wyświetlać obrazy w WordPress przy użyciu Elementora (metody zaawansowane)

Teraz, jeśli potrzebujesz bardziej zaawansowanych sposobów wyświetlania elementów wizualnych, możesz przejść do narzędzia do tworzenia stron Elementor. Dzięki Elementorowi możesz używać widżetów graficznych do kreatywnego prezentowania obrazów stron internetowych. 

Przenosząc rzeczy na wyższy poziom, dodatek ElementsKit Elementor zawiera szereg widżetów, które pozwalają stylowo wyświetlać obrazy z najbardziej konfigurowalnymi funkcjami. ElementsKit zawiera widżety, takie jak Elementor Image Box, Galeria obrazów, Zamiana obrazów i tak dalej. Te widżety dają różnorodne możliwości stylowego prezentowania zdjęć. 

Poniżej znajduje się demonstracja, w jaki sposób można wykorzystać te widżety do wyświetlania obrazów w WordPress i ożywiania witryny.

Zainstaluj ElementsKit

Aby korzystać z zaawansowanych funkcji obrazu, musisz zainstalować wtyczki ElementsKit Lite i ElementsKit Pro na swojej stronie WordPress.

Oto dokumentacja dotycząca instalowania wtyczek ElementsKit

Po zainstalowaniu wtyczek możesz przejść dalej z widżetami do wyświetlania obrazów w WordPress.

Metoda 1: Pokaż zdjęcia w stylowym pudełku z obrazami

Korzystając z widżetu Image Box ElementsKit, możesz wyróżnić sekcję zawierającą kombinację obrazu i tekstu. Umożliwia wyświetlenie obrazu z tekstem, takim jak nagłówek i opis. Style te są często używane do wyróżnienia flagowego produktu, usługi lub funkcji.

Aby skorzystać z tej funkcji: włącz widżet Image Box w ElementsKit > Widget

Oto jak używać widżetu Image Box ElementsKit dla Elementora:

Obraz

W sekcji obrazu możesz dostosować obraz i jego wygląd.

1. Wybierz obraz: Wybierz obraz z biblioteki multimediów lub prześlij go.
2. Rozmiar obrazu: Ustaw rozmiar obrazu.
3. Obszar treści: Możesz wybrać styl obszaru zawartości spośród podanych opcji.
4. Równa wysokość: Włącz lub wyłącz jednakową wysokość obrazu i obszaru zawartości.
5. Włącz łącze: Możesz użyć obrazu jako sekcji zakotwiczonej, włączając link. Po włączeniu dodaj link do obrazu.

Ciało

W sekcji treści możesz dodać cały tekst do pola obrazu Elementora. Obejmuje to nagłówek, opis, tag HTML tytułu i wyrównanie tekstu.

1. Tytuł: Dodaj tekst nagłówka w tym polu.
2. Tytułowy znacznik HTML: Wybierz znacznik HTML dla nagłówka (H1, H2, H3, div, span, akapit itp.)
3. Opis: W tym polu dodaj krótki opis treści.
4. Wyrównanie: Ustaw wyrównanie tekstu obrazu, nagłówka, opisu i przycisku.

Przycisk

Masz możliwość dodania przycisku CTA w polu obrazu Elementora. Za to,

1. Włącz przycisk: Aby dodać przycisk w polu obrazu, włącz tę opcję.
2. Etykieta: Dodaj etykietę przycisku (tekst), która wskazuje cel wezwania do działania.
3. Adres URL: Wpisz link do strony, którą chcesz przekierować odwiedzającego po kliknięciu.
4. Dodaj ikonę: Jeśli chcesz wyświetlać ikonę z etykietą przycisku, włącz tę funkcję.
5. Ikona: Wybierz ikonę z biblioteki ikon Elementora.
6. Pozycja ikony: Wybierz, czy ikona będzie przed czy po tekście przycisku.

Następnie na karcie Styl możesz dostosować wygląd pola obrazu Elementora, w tym kolory, tło, typografię i tak dalej.

w Klasyczne krzywe sekcji, możesz dostosować szerokość i margines obszaru zawartości. Następnie wystylizuj obraz, zmieniając wypełnienie i krycie. 

Poza tym możesz dostosować wygląd nagłówka i tekstu opisu, zmieniając kolor, typografię, kolor tła i tak dalej. Ponadto dostosuj style przycisków i ich ikon za pomocą ich atrybutów.

Obejrzyj film, aby uzyskać bardziej szczegółową wiedzę na temat widżetu ElementsKit Image Box.

Metoda 2: Wyświetl dwa obrazy z animacjami zamiany

Zamiana obrazów to stylowy sposób na pokazanie dwóch alternatywnych obrazów w jednym miejscu, które zamieniają się po najechaniu myszką lub kliknięciu obrazu. Widget ElementsKit Image Swap zawiera kilkadziesiąt oszałamiających efektów, które czynią Twoją witrynę jeszcze bardziej atrakcyjną wizualnie.

Możesz użyć tej funkcji, na przykład użyć pierwszego obrazu jako obrazu okładki, który przyciąga uwagę, a drugiego obrazu, aby dostarczyć niezbędnych informacji.

Aby skorzystać z tej funkcji: włącz widżet Zamiana obrazu w ElementsKit > Widget

Oto jak używać widżetu Zamiana obrazu ElementsKit dla Elementora:

1. Obraz z przodu: Jest to obraz, który domyślnie pojawia się po załadowaniu strony w przeglądarce internetowej.
2. Obraz z tyłu: To jest obraz, który pojawia się po wykonaniu akcji, np. odwiedzający najedzie kursorem na obraz lub kliknie go.
3. Rozmiar obrazu: Ustaw rozmiar obrazu dla obu obrazów.
4. Zmień styl: W widgecie ElementsKit Image Swap dostępnych jest 21 różnych efektów zamiany, które mogą pomóc w uatrakcyjnieniu projektu witryny internetowej dla odwiedzających.

5. Tygrys: Tutaj możesz wybrać czynność najechania lub kliknięcia, aby uruchomić zamianę obrazów.
6. Wskaźniki: Działa to jak nawigator, który wskazuje, który obraz znajduje się w programie, a który jest tłem.
7. Połączyć: Jeśli chcesz, możesz połączyć obrazy ze stroną.

Na karcie stylu możesz dostosować wysokość obrazu i czas trwania animacji zamiany. A jeśli włączysz wskaźnik, możesz zmienić ich położenie oraz dostosować ich rozmiar i kolory.

Metoda 3: Nadaj obrazom witryny unikalne kształty za pomocą maskowania obrazu

To wyjątkowy sposób na ożywienie Twojej witryny internetowej obrazami o unikalnych kształtach. Funkcje maskowania obrazu przekształcają obrazy o tradycyjnym kształcie w bardziej wciągające. W WordPressie maskowanie jest dość łatwe dzięki Elementorowi.

Zestaw ElementsKit dla Elementora zawiera moduł maskowania obrazów. Moduł jest dostępny dla dowolnych elementów w Elementorze, które zawierają obraz. W edytorze Elementora włącz maskowanie ElementsKit i wybierz kształt spośród wstępnie załadowanych. Możesz także dodać niestandardowy kształt do obrazów.

Metoda 4: Zaprezentuj obrazy w galerii

Elementor to świetny sposób na zaprezentowanie wielu obrazów w eleganckiej galerii. Widżet Galeria podstawowa Elemntor działa w oparciu o tradycyjne podejście, w którym możesz dodawać obrazy, ustawiać rozmiar obrazu i dostosowywać podstawowe elementy, takie jak odstępy i obramowania obrazu.

Jednakże ElementsKit Widżet galerii obrazów zawiera bardziej elastyczne opcje. Za pomocą widżetu możesz dostosować układ za pomocą opisów, dodać filtry do galerii i indywidualnie każdy aspekt miniatury, overly, obrazu i filtrów.

Dowiedz się więcej o widżecie Galeria obrazów i o tym, jak może ulepszyć wygląd Twojej witryny internetowej, z naszego bloga.

Zakończyć

Ogólnie rzecz biorąc, Elementor oferuje kilka sposobów wyświetlania obrazów w WordPress. Aby w pełni wykorzystać możliwości Elementora, świetnym dodatkiem może być ElementsKit.

ElementsKit ma różne sposoby i style: Pole obrazu pokazujące obraz z nagłówkiem i opisem; Zamień obraz, aby wyświetlać naprzemiennie dwa obrazy; Dostępne są także widżety Galeria obrazów i Maskowanie obrazów, które zapewniają więcej opcji.

Każdy z tych elementów oferuje unikalne funkcje i opcje dostosowywania, dzięki czemu możesz tworzyć angażujące i atrakcyjne wizualnie treści dla swojej witryny.

Jeśli uznasz to za przydatne, w ElementsKit znajdziesz więcej. Ten Dodatki do Elementora zawiera dziesiątki innych elementów, które mogą pomóc w stworzeniu i zaprojektowaniu witryny internetowej z największą liczbą funkcji i opcji.