Jak zbudować galerię obrazów inspirowaną Airbnb w WordPress

Jesteś użytkownikiem WordPressa i zauważyłeś, jak dobrze wygląda galeria zdjęć używana przez popularną platformę wynajmu Airbnb? Jeśli chcesz powielić to na swojej stronie internetowej, nie szukaj dalej! Możesz szybko odtworzyć go za pomocą odpowiedniego narzędzia i kilku prostych kroków w mniej niż 10 minut.

Niezależnie od tego, czy jesteś doświadczonym użytkownikiem WordPress, czy nowicjuszem, ten samouczek da Ci wszystko, co musisz wiedzieć, aby zacząć działać!

Z tego artykułu dowiesz się, co następuje:

• Jak zainstalować Modulę
• Jak stworzyć galerię zdjęć w Modula
• Jak dostosować galerię obrazów, aby wyglądała jak galeria obrazów Airbnb
• I więcej …

Projekt galerii Airbnb

Zwięzły i mocny projekt strony internetowej ma kluczowe znaczenie dla jej sukcesu w tworzeniu konwersji i przekształcaniu klientów w stałych klientów. I właśnie do tego dąży Airbnb, tworząc galerie zdjęć z ofertami.

Zobaczmy, dlaczego galeria obrazów Airbnb jest hitem:

• Wysokiej jakości profesjonalne zdjęcia lokalizacji
• Prosty, przejrzysty i przyjazny dla użytkownika układ głównych obrazów
• Przejrzyste wyświetlanie całej galerii
• Możliwość łatwego poruszania się po wszystkich zdjęciach za pomocą lightboxa
• Wyświetlanie podpisów lub opisów dla każdego obrazu
• Efekty przejścia obrazu Lightbox
• Opcje udostępniania galerii za pośrednictwem różnych kanałów
• Strzałki nawigacji

Na szczęście możesz łatwo odtworzyć styl galerii Airbnb na WordPressie za pomocą wtyczki Modula. Dostosuj kilka prostych ustawień i to wszystko! Czytaj dalej, a zobaczysz, jak łatwo to zrobić i zamienić swoją galerię zdjęć w galerię zdjęć podobną do Airbnb.

Zbuduj oszałamiającą galerię obrazów, taką jak na Airbnb

Będziesz potrzebować witryny WordPress i dostawcy usług hostingowych, aby skonfigurować galerię obrazów, dlatego ważne jest, aby o tym pamiętać, zanim przejdziesz dalej. Możesz szybko zbudować stronę internetową, jeśli jeszcze jej nie masz, postępując zgodnie z instrukcjami zawartymi w przewodniku instalacji WordPress.

Po uruchomieniu witryny musisz wybrać wtyczkę, która pomoże Ci utworzyć galerię obrazów. Chociaż w repozytorium WordPress istnieją inne wtyczki do galerii obrazów, zalecamy użycie Moduli. Ta wtyczka ma wiele opcji dostosowywania, darmową wersję z podstawowymi funkcjami i jest przyjazna dla użytkownika.

Stworzenie galerii obrazów tego typu wymaga kilku ustawień, które można odblokować, kupując plan Starter za 39 USD. Po dokonaniu zakupu istnieją cztery główne kroki, aby utworzyć i wyświetlić galerię, taką jak na Airbnb.

️ Zainstaluj moduł

Pierwszym krokiem jest instalacja i aktywacja Moduli. Aby to zrobić, przejdź do Pulpit nawigacyjny WordPress > Wtyczki > Dodaj nowy .

W prawym górnym rogu nowo otwartej strony zauważysz pasek wyszukiwania. Gdy wpiszesz „Modula”, szybko pojawi się on w pierwszym wyniku wyszukiwania. Kliknij przycisk Zainstaluj teraz , aby rozpocząć instalację.

️ Utwórz galerię zdjęć

Po zainstalowaniu i aktywacji Moduli nadszedł czas, aby stworzyć swoją galerię podobną do Airbnb. Przejdź do Pulpitu nawigacyjnego WordPress, a następnie wybierz Modula > Galerie .

Stamtąd wybierz Dodaj nowy , aby rozpocząć tworzenie galerii.

Zostaniesz przekierowany do nowego okna, w którym możesz dodać tytuł do swojej galerii i wybrać Prześlij pliki obrazów, jeśli chcesz przesłać nowe obrazy, lub Wybierz z biblioteki , jeśli używasz już zaimportowanych obrazów.

Po dodaniu zdjęć do galerii powinieneś zobaczyć je w ten sposób. Od tego momentu możemy zacząć dostosowywać galerię i uczynić ją jak najbardziej zbliżoną do galerii obrazów Airbnb.

️ Edytuj galerię obrazów

Nadchodzi zabawna część. Modula ma różne opcje dostosowywania, więc zbliżenie go do projektu galerii zdjęć Airbnb byłoby całkiem proste.

Po pierwsze, gdy klikniesz ofertę Airbnb, zostaniesz powitany ograniczoną liczbą obrazów – dokładnie pięciu – które po kliknięciu otwierają lightbox zawierający wszystkie obrazy z galerii. Aby to odtworzyć, przewiń w dół w trybie edycji galerii Modula i zobacz wszystkie ustawienia dostosowywania Modula.

Domyślnie typ galerii jest ustawiony na Creative Gallery, ale teraz musimy ustawić go na Custom Grid . Następnie przeciągnij rogi pierwszych pięciu obrazów i rozwiń je tak, aby wypełniły się w ten sposób.

Aby ograniczyć liczbę obrazów, które zobaczysz na pierwszy rzut oka, w zakładce Ogólne znajdziesz sekcję Maksymalna liczba obrazów . Śmiało, ustaw to na pięć.

Następnie zauważamy odstępy między obrazami galerii Airbnb. Aby osiągnąć coś podobnego, zmniejsz wartość opcji Gutter o kilka pikseli. Domyślnie jest ustawiony na 10 pikseli, ale możesz zmniejszyć wartość pulpitu do 8. Możesz także pobawić się wartościami tabletu i telefonu, aby zobaczyć, które z nich są lepsze.

Następnie przejdź do zakładki Lightbox i linki i włącz przycisk Pokaż wszystkie obrazy , aby wyświetlić wszystkie obrazy z galerii po otwarciu lightboxa. Jeśli pominiesz ten krok, Twój lightbox będzie przechodził tylko przez pierwsze pięć obrazów.

Następnie zauważamy przyjemny efekt najechania kursorem myszy na galerie Airbnb. Dzięki Moduli możesz edytować wygląd najechania myszką. Przejdź do karty Efekty najechania kursorem, ustaw kolor najechania na ciemniejszy szary i zmniejsz krycie do 25%.

Możesz także zmienić ikonę kursora, gdy najedziesz myszką na obraz, aby była ikoną wskaźnika, tak jak na Airbnb.

Aby ułatwić przeglądanie obrazów, możesz włączyć następujące ustawienia w sekcji Lightbox i linki: Przycisk miniatur , Automatyczne uruchamianie miniatur , Miniatury u dołu.

Niektóre oferty Airbnb mogą wyświetlać podpisy pod każdym obrazem. Modula umożliwia łatwe ustawianie napisów. Nie zapomnij kliknąć opcji Pokaż podpis obrazu w ustawieniach Lightbox i linki. Możesz nawet ustawić pozycję napisu, który ma być wyświetlany po lewej, prawej lub na środku lightboxa. Na karcie Napisy będziesz mieć więcej opcji edycji napisów. Możesz ustawić kolor, czcionkę, rozmiar czcionki, styl czcionki, a nawet rozmiar czcionki dla wersji mobilnej.

Gdy otworzysz lightbox w galerii Airbnb, zobaczysz przyciski nawigacyjne ułatwiające poruszanie się po galerii zdjęć. Modula oferuje również tę funkcję. Włącz ustawienie Przyciski nawigacyjne na karcie Lightbox i linki.

Jeśli chodzi o lightbox na Airbnb, zauważysz jednolity czarny kolor tła. Możesz to również osiągnąć dzięki Moduli. Na tej samej karcie Lightbox i linki przewiń w dół, aż zobaczysz kolor tła Lightbox . Tutaj możesz ustawić dowolny kolor i określić krycie lub uczynić go jednolitym kolorem.

Airbnb ma przycisk udostępniania na lightboksie, który umożliwia udostępnianie oferty na różnych kanałach społecznościowych. Modula również posiada tę funkcjonalność, oferując dostęp do niektórych najpopularniejszych platform. Na tej samej karcie Lightbox i linki, po włączeniu opcji przycisku Udostępnij , pojawi się sześć nowych opcji udostępniania: Facebook, Twitter, Pinterest, WhatsApp, LinkedIn i E-mail. Możesz indywidualnie wybrać, które z nich mają się pojawić w Twojej galerii.

Lightbox na Airbnb ma widoczny przycisk zamykania, który użytkownicy mogą kliknąć, aby zamknąć galerię lightbox. Możesz również wyświetlić przycisk zamykania za pomocą Moduli.

Na koniec nie zapomnij kliknąć Aktualizuj galerię, aby zapisać ustawienia.

Gdy klikniesz na jedno z pięciu wiodących zdjęć wyświetlanych na Airbnb, zostaniesz przekierowany do całej galerii zdjęć. Dopiero po ponownym kliknięciu na jeden z obrazów pojawi się lightbox. Aby to osiągnąć dzięki Moduli, możesz przejść do Galerii i wybrać Duplikat galerii na tej, którą właśnie utworzyłeś. Pojawi się nowy, a następnie możemy go dostosować.

W nowo utworzonej galerii śmiało baw się niestandardową siatką, aż uzyskasz układ, który Ci się podoba.

Nie zapomnij przewinąć w dół do ustawień ogólnych i usunąć 5 w maksymalnej liczbie obrazów . Zapisz nowo edytowaną galerię i skopiuj krótki kod po prawej stronie.

️ Wyświetl swoją galerię

Pierwszym pokazem, który zrobimy, będzie pełna galeria.

Przejdź do pulpitu nawigacyjnego WordPress i wybierz Strony > Dodaj nowy . Ta strona będzie służyć do wyświetlania pełnej galerii zdjęć. Nadaj mu sugestywny tytuł i wklej krótki kod w bloku Krótki kod .

Następnie naciśnij przycisk Publikuj lub Aktualizuj . Następnie skopiuj adres URL tej strony. Za chwilę będziemy potrzebować tego adresu URL.

Przejdź na stronę, na której chcesz wyświetlić galerię obrazów podobną do Airbnb, i wklej krótki kod pierwszej galerii, którą utworzyliśmy.

Ostatnią rzeczą, którą musimy zrobić, to połączyć te dwie galerie. Przejdź do Modula > Galerie i wybierz pierwszą utworzoną przez nas galerię. Kliknij ikonę ołówka, aby edytować pierwszy obraz.

W sekcji edycji wklej adres URL pełnej strony galerii w polu adresu URL. Kliknij przycisk Zapisz i zamknij.

Powtórz ten proces z następującymi czterema obrazami i nie zapomnij kliknąć przycisku Aktualizuj galerię.

Przejdź na swoją stronę i zobacz swoją nowo utworzoną galerię zdjęć podobną do Airbnb

Ostateczne rezultaty

Jak widzisz, dzięki Moduli możesz bardzo zbliżyć się do projektu galerii obrazów Airbnb. Od układu pięciu obrazów z niewielkimi odstępami pomiędzy nimi, po lightbox z podpisami, strzałkami nawigacyjnymi, przyciskami udostępniania w mediach społecznościowych, a nawet stronę pośrednią, która zawiera wszystkie obrazy wyświetlane w niestandardowej siatce.

Modula to wszechstronna wtyczka do galerii obrazów, która oferuje jeszcze więcej funkcji i ustawień, aby przenieść Twoją galerię obrazów na wyższy poziom.

Końcowe przemyślenia

Dobrze zaprojektowana strona internetowa może znacząco wpłynąć na to, ilu odwiedzających dokona konwersji i ponownie skorzysta z Twoich usług. Dzięki odpowiedniej wtyczce i kilku łatwym krokom możesz szybko stworzyć galerię obrazów WordPress inspirowaną Airbnb. Tego rodzaju galeria to świetny sposób na pokazanie wysokiej jakości obrazów i zapewnienie użytkownikom witryny przyjaznego doświadczenia.

Niezależnie od tego, czy używasz swojej galerii do wynajmu wakacyjnego, ofert nieruchomości, czy z jakiegokolwiek innego powodu, Modula jest najlepszą wtyczką WordPress do tworzenia galerii obrazów inspirowanych Airbnb, która przyciąga i angażuje odwiedzających Twoją witrynę.

Pobierz Modulę już dziś i zacznij dostosowywać swoje galerie zdjęć!