Jak utworzyć filtrowaną galerię w Elementorze?

Opublikowany: 2024-12-22

Czy masz dużo zdjęć, które chcesz wyświetlić w zorganizowany sposób? Jeśli tak, Filterable Gallery jest rozwiązaniem, którego szukasz. Funkcja Galerii z filtrowaniem umożliwia grupowanie zdjęć w kategorie. Gdy zdjęcia zostaną pogrupowane w kategorie, możesz użyć ich jako klikalnych filtrów w interfejsie użytkownika. Ten ekscytujący widżet galerii obrazów zawiera wiele opcji i funkcji stylizacji, dzięki czemu tworzenie potężnych galerii w witrynie Elementor jest niezwykle łatwe.

W tym samouczku przyjrzymy się, jak utworzyć filtrowaną galerię w Elementorze za pomocą widżetu Galeria obrazów w dodatkach PowerPack Elementor. Zanim zaczniemy, upewnij się, że masz zainstalowany i aktywowany dodatek Elementor i PowerPack na swojej stronie internetowej. Po zakończeniu możemy rozpocząć nasz proces!

Po co dodawać galerię filtrowaną?

Galerie z możliwością filtrowania są idealne w przypadku witryn internetowych, które muszą wyświetlać dużą liczbę obrazów w zorganizowany sposób. Niezależnie od tego, czy prezentujesz portfolio, produkty e-commerce czy zdjęcia z wydarzeń, galerie z możliwością filtrowania pozwalają użytkownikom szybko i łatwo znaleźć to, czego szukają.

Oto kilka rzeczywistych przypadków użycia:

  • Witryny portfolio: Zaprezentuj swoje projekty podzielone na kategorie według typu, np. projektowanie stron internetowych, projektowanie graficzne lub fotografia.
  • Witryny handlu elektronicznego: Organizuj produkty w kategorie, takie jak odzież, akcesoria lub artykuły sezonowe.
  • Galerie wydarzeń: wyświetlaj zdjęcia pogrupowane według wydarzeń, takich jak wesela, przyjęcia lub imprezy firmowe.

Teraz utwórzmy filtrowaną galerię w Elementorze przy użyciu dodatków PowerPack.

Jak utworzyć filtrowaną galerię w Elementorze?

Krok 1: Dodanie widżetu Galeria obrazów PowerPack

Otwórz stronę, na której chcesz dodać galerię, w edytorze Elementora. Aby to zrobić, przejdź do panelu administracyjnego WP >> Strony i kliknij Edytuj za pomocą Elementora dla odpowiedniej strony.

Po wejściu do edytora przeciągnij i upuść galerię obrazów PowerPack na stronę.

dodaj widżet galerii obrazów Powerpack do Elementora

Krok 2: Dodawanie obrazów do galerii

Teraz będziemy dodawać zdjęcia do galerii w grupach. Te grupy obrazów pomogą nam rozdzielić obrazy.

Aby to zrobić, najpierw kliknij przycisk Dodaj element i nadaj filtrowi odpowiednią nazwę. Pamiętaj, że nazwa ta będzie wyświetlana na przycisku filtrowania nad galerią.

Teraz dodaj żądane obrazy, wybierając je z biblioteki multimediów i klikając przycisk Utwórz nową galerię .

utwórz nową galerię

Powtórz proces i dodaj więcej pojedynczych galerii, klikając przycisk „Dodaj element”.

Krok 3: Dodawanie filtrów do galerii

Aby włączyć opcję filtrowania, kliknij przełącznik znajdujący się pod podsekcją filtrów. Możesz zmienić ustawienie przycisków filtrów na obrazie i zmienić etykietę filtra „Wszystkie” .

włączyć filtry

Krok 4: Dostosowywanie galerii

Teraz przejdź do podsekcji ustawień i tutaj możesz wprowadzić dalsze zmiany w swojej galerii, jak pokazano na obrazku poniżej. Możesz zmienić rozmiar obrazu na żądany. Możesz wybrać układ galerii obrazów spośród Siatka, Mur lub Justified.

Jeśli chcesz, możesz nawet wprowadzić liczbę kolumn, które chcesz umieścić na swojej stronie internetowej. Możesz zmienić kolejność oraz włączyć i dostosować napisy.

Jeśli chcesz powiązać swoją galerię, możesz to również zrobić wybierając opcję „Połącz z” .

Ponadto możesz także skorzystać z funkcji „ Załaduj więcej ” dostępnej w galerii obrazów. Pomoże Ci to utrzymać szybkość witryny, ładując tylko kilka obrazów na raz. Można to zrobić, po prostu włączając przycisk Załaduj więcej .

Krok 5: Stylizacja układu galerii i miniatur z możliwością filtrowania

W układzie galerii możesz zmieniać odstępy między kolumnami i wierszami za pomocą slajdów lub wprowadzając liczbę.

W przypadku miniatur można skalować obrazy i zmieniać przezroczystość obrazów lub miniatur.

Jeśli chcesz dodać filtry kolorów do obrazów, możesz to łatwo zrobić za pomocą opcji filtra obrazu . Możesz także dodać nakładkę na obrazy.

filtry obrazu

Krok 7: Filtry stylizacyjne

Jeśli dodałeś filtry na górze obrazu, możesz je również dostosować. Możesz zmienić typografię, kolor, odstępy, obramowanie i wypełnienie filtrów, korzystając z opcji podanych w podsekcji filtrów.

stylizacja filtrów

Filtrowana galeria jest gotowa!

Po opublikowaniu strony Twoja galeria zdjęć będzie wyglądać tak:


Najlepsze praktyki projektowania galerii z możliwością filtrowania

  • Użyj intuicyjnych filtrów : upewnij się, że Twoje kategorie są jasne i opisowe.
  • Optymalizuj obrazy: użyj skompresowanych obrazów, aby skrócić czas ładowania.
  • Ogranicz filtry: unikaj przytłaczania użytkowników zbyt dużą liczbą opcji filtrów.
  • Spójny projekt: dopasuj style galerii i przycisków do motywu swojej witryny.

Często zadawane pytania: Filtrowana galeria w Elementorze

Jak dodać filtry do galerii Elementora?

Możesz włączyć filtry za pomocą widżetu Galeria PowerPack, przełączając opcję filtra w ustawieniach widżetu i przypisując nazwy filtrów do swoich obrazów.

Co to jest układ murowy w galerii?

Układ murowany układa obrazy w naprzemienną siatkę, zapewniając atrakcyjne wizualnie i kompaktowe wyświetlanie bez przycinania.

Czy mogę używać filtrowanej galerii dla produktów WooCommerce?

Tak! Galeria z możliwością filtrowania doskonale nadaje się do prezentowania produktów w kategoriach, tworząc wciągające doświadczenie zakupowe.

Wypróbuj już dziś!

Za pomocą widżetu galerii z możliwością filtrowania możesz stworzyć wiele niesamowitych projektów i układów . Więcej inspiracji znajdziesz na naszej stronie docelowej.

Jeśli chcesz wypróbować widżet galerii obrazów, możesz go pobrać wraz z ponad 80 innymi kreatywnymi widżetami , dzięki którym proces projektowania będzie wygodniejszy i przyjemniejszy! Pobierz teraz dodatki PowerPack Elementor!

Udostępnij ten artykuł, jeśli uznasz go za przydatny, i daj mi znać, co myślisz o tym widżecie w komentarzach poniżej!

Zdjęcie zespołu redakcyjnego

Zespół redakcyjny

Zostaw komentarz Anuluj odpowiedź

Poprzedni Poprzedni [Jak] Zaprojektować menu z jedzeniem i napojami za pomocą Elementora