Jak łatwo umieścić obrazy obok siebie w WordPressie

Kiedy zaczynaliśmy prowadzić bloga, dopasowywanie obrazów często wydawało się bardziej frustrujące niż przyjemne.

Ale szybko zdaliśmy sobie sprawę, że umieszczanie obrazów obok siebie to nie tylko kwestia estetyki – pomaga to czytelnikom lepiej zrozumieć i cieszyć się treścią.

Z czasem opanowaliśmy kilka prostych technik, które ułatwiają ten proces, a umieszczanie wizualizacji obok siebie stało się jednym z naszych ulubionych sposobów na tworzenie pięknych galerii zdjęć.

W tym poradniku przeprowadzimy Cię przez dwie proste metody wyświetlania obrazów obok siebie – jedną przy użyciu wbudowanego edytora bloków WordPress, a drugą za pomocą wtyczki Envira Gallery.

Do końca będziesz w stanie poprawić układ swojej treści i stworzyć bardziej angażujące doświadczenie dla swoich odwiedzających.

Dlaczego dodawać obrazy obok siebie w WordPressie?

Dodawanie obrazów obok siebie może poprawić atrakcyjność wizualną Twojej strony WordPress, tworząc ciekawszy układ.

Obrazy obok siebie mogą również pomóc w efektywnym wykorzystaniu przestrzeni na Twojej stronie, pozwalając zmieścić więcej wizualizacji na ograniczonej powierzchni.

Na przykład, jeśli masz stronę fotograficzną, układanie obrazów obok siebie pomoże Ci w pełni wykorzystać stronę WordPress, wyświetlając zdjęcia w estetyczny sposób.

Dodatkowo, czasami możesz chcieć, aby użytkownicy porównywali dwa obrazy na swoim blogu WordPress. Umieszczenie ich obok siebie ułatwi analizę i zrozumienie różnic między obrazami.

Mając to na uwadze, pokażemy Ci dwa proste sposoby umieszczania obrazów obok siebie. Najlepsza metoda zależy od tego, czego potrzebujesz.

W większości prostych przypadków wbudowany edytor bloków WordPress działa doskonale. Jeśli chcesz tworzyć bardziej zaawansowane galerie zdjęć z dodatkowymi funkcjami, lepszym wyborem będzie użycie wtyczki.

Możesz użyć poniższych linków, aby przejść do preferowanej metody:

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• Dodatek: Wyrównywanie obrazów w WordPressie
• Często zadawane pytania dotyczące dodawania obrazów obok siebie

Metoda 1: Dodawanie obrazów obok siebie w WordPressie za pomocą edytora bloków

Jeśli szukasz prostego sposobu na dodawanie obrazów obok siebie za pomocą edytora bloków Gutenberg, ta metoda jest dla Ciebie.

Edytor bloków oferuje funkcjonalność bloku Galerii, która pozwala łatwo wyświetlać obrazy w wierszach i kolumnach.

Krok 1: Dodaj blok Galeria

Najpierw musisz utworzyć nowy wpis/stronę lub edytować istniejący, aby otworzyć edytor treści. Gdy już tam będziesz, kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu, aby otworzyć menu bloków.

Stąd po prostu zlokalizuj i dodaj blok Galerii do strony lub wpisu.

Krok 2: Prześlij swoje obrazy

Następnie możesz łatwo dodawać obrazy do swojego bloku Galerii z komputera, klikając przycisk „Prześlij”.

Możesz również wybrać obrazy z biblioteki mediów WordPress, klikając przycisk „Biblioteka mediów”.

Jak widać, dodaliśmy 2 obrazy do naszego bloku Galerii, a WordPress automatycznie ustawił je obok siebie.

Jeśli zdecydujesz się dodać trzeci obraz, musisz kliknąć przycisk „Dodaj” z paska narzędzi bloku na górze.

Spowoduje to otwarcie biblioteki mediów, z której możesz dodać trzeci obraz do swojego bloku Galerii. Po wykonaniu tej czynności zobaczysz, że WordPress po prostu przeskalował obrazy, aby automatycznie umieścić je obok siebie.

Krok 3: Dostosuj kolumny galerii

Jednak jeśli zdecydujesz się umieścić czwarty obraz w bloku Galerii, zostanie on umieszczony pod innymi obrazami.

Aby to naprawić, możesz zmienić liczbę kolumn dla swojej galerii. To ustawienie określa, ile obrazów będzie wyświetlanych obok siebie w każdym wierszu.

Na przykład, jeśli chcesz umieścić dwa obrazy obok siebie, a dwa kolejne pod nimi, możesz ustawić liczbę kolumn na 2.

Możesz również przycinać obrazy, aby się wyrównywały, dostosowywać ich rozmiary, łączyć je z różnymi stronami i zmieniać kolor tła z panelu bloku.

Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat tworzenia galerii obrazów w WordPress.

Krok 4: Opublikuj zmiany

Po zakończeniu nie zapomnij kliknąć przycisku „Zaktualizuj” lub „Opublikuj”, aby zapisać zmiany.

Teraz po prostu odwiedź swoją stronę internetową, aby zobaczyć obrazy obok siebie.

Metoda 2: Umieszczanie obrazów obok siebie w WordPressie za pomocą wtyczki (łatwy sposób)

Chociaż wbudowany blok Galeria jest idealny do prostych układów, będziesz potrzebować wtyczki, jeśli chcesz tworzyć bardziej zaawansowane galerie zdjęć z funkcjami takimi jak piękne lightboxy, albumy i opcje udostępniania w mediach społecznościowych.

W tym celu polecamy Envira Gallery. Jest to najlepsza wtyczka galerii WordPress na rynku, a według naszego doświadczenia jest niezwykle łatwa w użyciu, oferując jednocześnie potężne funkcje.

Aby uzyskać więcej szczegółów na temat jej funkcji, możesz zapoznać się z naszą recenzją Envira Gallery.

Krok 1: Zainstaluj i aktywuj Envira Gallery

Najpierw musisz zainstalować i aktywować wtyczkę Envira Gallery. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Krok 2: Utwórz nową galerię i prześlij obrazy

Po aktywacji przejdź do strony Envira Gallery » Dodaj nową z panelu administracyjnego WordPress.

Gdy już tam będziesz, musisz nadać swojej nowej galerii tytuł. My nazwaliśmy naszą „Przykładowa Galeria”.

Następnie prześlij obrazy, których chcesz użyć, z komputera, klikając przycisk „Wybierz pliki z komputera”.

Aby przesłać obrazy z biblioteki multimediów, kliknij przycisk „Wybierz pliki z innych źródeł”.

Krok 3: Edytuj metadane obrazu (opcjonalnie)

Po przesłaniu obrazów przewiń w dół do sekcji Galeria, aby je wyświetlić.

Tutaj możesz nadać swoim obrazom tytuł i tekst alternatywny.

Tytuł pojawia się, gdy użytkownik najeżdża kursorem na obraz, a także wyświetla się poniżej obrazu w lightboxie, czyli widoku pełnoekranowym.

Aby edytować tytuł i tekst alternatywny, kliknij przycisk „Edytuj” przy obrazie w galerii.

Następnie możesz zmienić tytuł swojego obrazu i wprowadzić tekst alternatywny, który jest pomocny dla SEO Twojej witryny WordPress.

Jeśli Twój tytuł opisuje obraz, możesz po prostu powtórzyć go w tekście alternatywnym.

Po zakończeniu upewnij się, że kliknąłeś przycisk „Zapisz metadane” przed zamknięciem okna.

Jeśli tego nie zrobisz, wszelkie wprowadzone zmiany nie zostaną zapisane w galerii.

Krok 4: Opublikuj swoją galerię

Na koniec przewiń z powrotem na górę strony i kliknij przycisk „Opublikuj”, aby zapisać właśnie utworzoną galerię obrazów.

Następnie przejdź do strony lub wpisu w WordPress, gdzie chcesz ją dodać.

Krok 5: Dodaj blok Envira Gallery do wpisu lub strony

Gdy już tam będziesz, kliknij przycisk „Dodaj blok” (+) w lewym górnym rogu ekranu, aby otworzyć menu bloków.

Stąd znajdź i dodaj blok Envira Gallery do strony/wpisu.

Następnie będziesz musiał wybrać galerię, którą utworzyłeś, z menu rozwijanego w samym bloku.

Krok 6: Skonfiguruj układ i opublikuj

Aby wyświetlić obrazy w galerii obok siebie, przejdź do panelu bloków w prawym rogu ekranu.

Stąd przewiń w dół do sekcji „Wybierz układ” i wybierz liczbę kolumn z menu rozwijanego. Twoje obrazy będą teraz wyświetlane obok siebie na stronie WordPress.

Możesz również zmienić marginesy galerii, włączyć piękny efekt filtrowania z animacją (znany jako Isotope) i skonfigurować ustawienia lightboxa z panelu bloku.

Po zakończeniu nie zapomnij kliknąć przycisku „Opublikuj” lub „Zaktualizuj”, aby zapisać swoje ustawienia.

Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć obrazy wyświetlane obok siebie.

Użytkownik może teraz kliknąć dowolny obraz, aby zobaczyć wersję w pełnym rozmiarze w lightbox.

Ponadto, mogą oni również przeglądać obrazy za pomocą lightbox.

Jeśli chcesz dodać więcej obrazów do swojej galerii, możesz do niej wrócić, odwiedzając stronę Envira Gallery » Wszystkie galerie w swoim panelu WordPress.

Gdy już tam będziesz, po prostu kliknij nazwę swojej galerii, aby ją edytować.

Wszelkie zmiany wprowadzone w galerii pojawią się wszędzie tam, gdzie ją umieściłeś w swoich postach, stronach lub paskach bocznych. Nie musisz dodawać jej ponownie.

Dodatek: Wyrównywanie obrazów w WordPressie

Kiedy umieszczasz dwa obrazy obok siebie, muszą one być wyrównane, aby stworzyć spójny i atrakcyjny wizualnie wygląd.

Nawet jeśli dodajesz pojedynczy obraz do swojego bloga WordPress, nadal będziesz chciał go wyrównać z treścią, aby stworzyć równowagę wizualną.

Możesz łatwo wyrównać obrazy w edytorze blokowym WordPress, klikając przycisk „Wyrównaj” na pasku narzędzi nad blokiem.

Spowoduje to otwarcie opcji, z których możesz przesunąć obraz w prawo lub w lewo, nadać mu taką samą szerokość jak kontener lub użyć opcji pełnej szerokości, aby szerokość obrazu była taka sama jak reszty strony.

Poza tym możesz również użyć bloku Kolumna, aby wyrównać obraz z treścią. Aby to zrobić, musisz wybrać wariant 50/50.

Gdy to zrobisz, możesz dodać blok obrazu, który idealnie wyrówna się z Twoją treścią.

Dodatkowo, możesz również otoczyć tekst obrazem, użyć bloku grupującego, dodać blok przykrywający, lub zrobić znacznie więcej, aby wyrównać obrazy razem lub osobno.

Więcej informacji znajdziesz w naszym przewodniku dla początkujących na temat jak wyrównywać obrazy w edytorze bloków WordPress.

Często zadawane pytania dotyczące dodawania obrazów obok siebie

Oto kilka pytań, które nasi czytelnicy często zadawali na temat dodawania obrazów obok siebie w WordPressie:

Jak umieścić obraz i tekst obok siebie w WordPressie?

Najlepszym sposobem na umieszczenie obrazu obok tekstu jest użycie bloku Kolumny.

Najpierw dodaj blok Kolumny i wybierz układ, na przykład 50/50. Następnie możesz dodać blok Obraz do jednej kolumny i blok Akapit do drugiej. Daje to czysty, obok siebie układ.

Jaki jest najlepszy sposób na wyrównanie obok siebie obrazów o różnych rozmiarach?

Chociaż blok Galeria jest świetny do jednolitych obrazów, blok Kolumny oferuje większą elastyczność w przypadku różnych rozmiarów. Możesz go użyć do tworzenia układów 70/30 lub innych niestandardowych układów.

Aby uzyskać bardziej zaawansowaną kontrolę, wtyczka taka jak Envira Gallery pozwala tworzyć niestandardowe siatki, które płynnie obsługują różne wymiary obrazów.

Czy moje obrazy obok siebie pozostaną obok siebie na urządzeniach mobilnych?

Zazwyczaj nie. Większość nowoczesnych motywów WordPress jest responsywna, co oznacza, że bloki obrazów umieszczone obok siebie na komputerze stacjonarnym zostaną automatycznie ułożone pionowo na mniejszych ekranach.

Robi się to, aby zapewnić, że obrazy są wystarczająco duże, aby były wyraźnie widoczne na telefonie, zapewniając lepsze wrażenia użytkownika.

Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się, jak umieszczać obrazy obok siebie w WordPressie. Możesz również zapoznać się z naszym przewodnikiem na temat jak zmieniać wysokość i szerokość bloków w WordPressie oraz naszym przewodnikiem na temat dodawania tabel w postach i stronach WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.