Jak korzystać z widżetu siatki Elementor Loop na WordPress z HappyAddons

Projektowanie atrakcyjnych wizualnie i dobrze funkcjonalnych witryn internetowych jest koniecznością dla każdego, kto chce zwiększyć zaangażowanie, przyciągnąć odbiorców i zwiększyć sprzedaż. Aby uprościć ten proces, narzędzia do projektowania stron internetowych, takie jak Elementor i jego dodatki, stale wprowadzają innowacyjne funkcje i moduły.

Loop Grid to nowy widżet, który Elementor i jego dodatki opracowali i wypuścili dla nas niedawno. Innowacyjny widget umożliwia tworzenie i wyświetlanie treści w pięknie zorganizowanych układach siatki.

Nie martw się, jeśli nie wiesz zbyt wiele szczegółów na temat tego widżetu. W tym samouczku omówimy krok po kroku, jak używać widżetu Elementor Loop Grid na WordPress z HappyAddons. Mamy nadzieję, że ten samouczek okaże się zarówno pomocny, jak i interesujący.

Co to jest siatka pętli w Elementorze?

Loop Grid to wielofunkcyjny widżet Elementora, który pozwala tworzyć dynamiczne układy do wyświetlania różnych typów treści w Twojej witrynie i dostosowywać je w dowolnym momencie. Ten widget jest szczególnie przydatny przy wyświetlaniu wpisów na blogu, produktów i treści portfolio w formacie siatki.

Ten widget jest bardzo przydatny do wyświetlania treści dynamicznych. Gdy tylko zostaną opublikowane nowe posty, produkty lub żądane treści, są one automatycznie wyświetlane przez widżet bez konieczności ręcznego wprowadzania danych. Możesz tworzyć unikalne szablony, aby pokazać treść według własnego uznania.

W następnej sekcji wyjaśnimy, jak korzystać z widgetu w WordPress. Czytaj dalej!

Jak korzystać z widżetu siatki pętli Elementor

Aby móc korzystać z tego widgetu na swojej stronie internetowej, musisz mieć zainstalowane następujące wtyczki. Zdobądź je klikając w linki załączone poniżej.

• Elementora
• Szczęśliwe dodatki
• HappyAddons Pro

Gdy będą już gotowe, zacznij wykonywać kroki opisane w samouczku.

Krok 01: Przeciągnij i upuść widżet siatki pętli na swoją stronę

Otwórz stronę, na której chcesz dodać widżet. Następnie wybierz sekcję, w której chcesz dodać widżet.

Wpisz Happy Loop Grid w polu wyszukiwania panelu Elementor. Po wyświetleniu widżetu przeciągnij go i upuść w żądanym obszarze obszaru roboczego.

Krok 02: Utwórz szablon siatki pętli

Po dodaniu widżetu zostaniesz poproszony o wybranie szablonu pętli. Jeśli posiadasz już gotowy szablon, możesz go wybrać. W przeciwnym razie musisz utworzyć go od zera.

Aby utworzyć szablon od zera, kliknij przycisk Utwórz szablon .

Zostaniesz przeniesiony na nową stronę. Kliknij przycisk Dodaj nowy, gdy wybrana jest zakładka Szablon pętli.

Nadaj szablonowi nazwę . Na przykład nazwaliśmy go „Loop Template One”. Następnie naciśnij przycisk Utwórz szablon .

Otworzy się nowe płótno. Tutaj ponownie możesz przeciągać i upuszczać widżety, które chcesz zaprojektować układ szablonu Loop Grid.

Sprawdź ten przewodnik, jak utworzyć wyskakujące okienko na stronach Elementora.

Krok 03: Zaprojektuj układ szablonu siatki pętli

Załóżmy, że utworzymy tę siatkę pętli, aby dynamicznie prezentować nasze posty na blogu. Zatem do stworzenia szablonu użyjemy widżetów postów.

# Opublikuj wyróżniony obraz

Wyświetlanie obrazów obiektów postów jest koniecznością w sekcji siatki postów. Aby to zrobić, znajdź widżet i upuść go na płótnie.

# Informacje o wpisie

Dodając widżet Informacje o wpisie, możesz pokazać autora wpisu, datę publikacji i datę jego publikacji. Lepiej dodać widget pod wyróżnionym obrazem.

Jeśli chcesz usunąć dowolny element widżetu, po prostu kliknij ikonę krzyżyka (x) obok niego. Podobnie, aby dodać nowy element, kliknij przycisk + Dodaj element .

Przejdź do zakładki Styl . Na tej karcie znajdziesz opcje umożliwiające zmianę koloru, grubości i wyrównania tekstów oraz ikon widżetu.

# Tytuł posta

Przeciągnij i upuść widżet Tytuł wpisu poniżej widżetu Informacje o wpisie.

Na karcie Treść dostępne są opcje dostosowania znacznika HTML, jego rozmiaru i wyrównania. W razie potrzeby wprowadź niezbędne zmiany.

Przejdź do zakładki Styl . Możesz stylizować kolor tytułu i typografię według własnego uznania.

# Fragment postu

Dodając w szablonie widżet Fragment postu, możesz wyświetlić podsumowanie lub fragment odpowiednich postów w sekcji Siatka pętli. Znajdź i dodaj widżet Fragment postu pod tytułem.

W ten sam sposób, jak pokazano powyżej, możesz dostosować kolor tekstu i typografię na karcie Styl .

Krok 04: Zoptymalizuj układ szablonu dla urządzeń mobilnych

Musisz zoptymalizować układ szablonu dla wszystkich typów urządzeń (tablety i telefony komórkowe), a także komputerów stacjonarnych. W przeciwnym razie użytkownicy innych urządzeń nie będą mieli dobrego doświadczenia podczas przeglądania tego widżetu na urządzeniach mobilnych i tabletach.

Aby więc zoptymalizować układ szablonu, kliknij opcję Tryb responsywny w stopce panelu Elementora. Na szablonie pojawi się górny pasek z możliwością przełączania pomiędzy różnymi trybami urządzenia (komputer stacjonarny, tablet i telefon komórkowy).

Teraz przełącz się na różne tryby urządzenia i sprawdź, czy układ szablonu jest idealny dla różnych konkretnych urządzeń. Jeśli nie jest idealny, zmień rozmiar i dostosuj elementy szablonu według potrzeb.

Mamy nadzieję, że dzięki temu szablon będzie responsywny dla wszystkich rozmiarów ekranu.

Oto przewodnik na temat kwestii, które należy wziąć pod uwagę podczas dostosowywania witryny do urządzeń mobilnych.

# Opublikuj szablon

Po zakończeniu opublikuj szablon , klikając przycisk Publikuj w panelu Elementora.

Krok 04: Przejdź do głównego obszaru roboczego i wybierz szablon pętli

Przejdź do głównego płótna Elementora. Wybierz sekcję Siatka pętli . W sekcji Układ znajdziesz opcję Wybierz szablon pętli .

Wpisz nazwę, pod jaką zapiszesz szablon. Po wpisaniu szablon pojawi się w czasie rzeczywistym. Kliknij szablon, aby wyświetlić go na płótnie.

Po wybraniu szablonu Loop Grid opublikowane posty zostaną wyświetlone w formacie siatki, jak na obrazku poniżej.

Siatka może wyglądać niezręcznie, ponieważ ma ustawienia domyślne. Możesz teraz jeszcze bardziej dostosować jego układ.

Krok 05: Dostosuj i stylizuj sekcję siatki pętli

W sekcji Układ wybierasz numer kolumny, post na stronę i równą wysokość . W razie potrzeby wykonaj niezbędną konfigurację.

W tym samouczku zachowaliśmy trzy kolumny i trzy posty na stronę.

# Skonfiguruj zapytanie

Następnie przejdź do sekcji Zapytania .

W widżecie Loop Grid możesz wyświetlać treści z różnych źródeł. Domyślnie posty są wyświetlane w formacie siatki. Ale jeśli chcesz, możesz wyświetlić strony lub strony docelowe.

Kliknij ikonę rozwijaną obok opcji Typ postu. Wybierz żądany typ zawartości.

Musisz zapisać każdy post z tagiem lub kategorią. Jeśli chcesz wyświetlić tylko treść od określonego autora, tagu lub kategorii, kliknij ikonę + plus poniżej Uwzględnij według.

Wybierz Autorzy lub Terminy . Możesz także wybrać jedno i drugie.

Po wybraniu opcji Uwzględnij według wpisz nazwiska autorów i terminy w odpowiednich polach. Treść zostanie natychmiast przefiltrowana i w siatce pętli wyświetli się tylko treść tego konkretnego autora i terminu.

Skonfiguruj inne opcje zapytań według własnego uznania. Mam nadzieję, że potrafisz je zrobić sam.

Krok 06: Skonfiguruj opcję paginacji dla sekcji siatki pętli

Rozwiń sekcję Paginacja i ładowanie więcej .

Kliknij ikonę rozwijaną obok Paginacja . Wybierz żądaną opcję.

Wybraliśmy Liczby + Poprzedni/Następny . Na obrazku widać, że pod widżetem została wyświetlona taka opcja paginacji.

Krok 07: Stylizuj układ widżetu siatki pętli

Przejdź do zakładki Style . Znajdziesz opcje dostosowywania i stylizowania układu, pola elementu i paginacji widżetu.

Najpierw rozwińmy sekcję Układ . Umożliwi to skonfigurowanie odstępu między kolumnami i odstępami między wierszami . Zrób to w razie potrzeby.

W podobny sposób rozwiń sekcję Pudełko na przedmiot . Możesz dodać Dopełnienie , Typ tła (kolor lub obraz), Cień ramki, Typy obramowania i Promień obramowania .

W tym samouczku dodaliśmy dopełnienie, promień i kolor tła. Zrób to samo sam.

W ten sam sposób możesz stylizować opcje koloru, typografii, dopełnienia, promienia, odstępu i paginacji widżetu.

Uwaga: wygląda trochę krzycząco, prawda? Na tym etapie projektowania może się okazać, że szablon siatki pętli wymaga nieco większej stylizacji i dostosowania. Ale jak to zrobić? Zostanie to pokazane w następnym kroku.

Krok 08: Dostosuj ponownie szablon siatki pętli

Najpierw musisz znaleźć szablon. Jak zaprojektowałeś w HappyAddons, przejdź do panelu WordPress . Następnie przejdź do HappyAddons > Kreator motywów > Szablon pętli .

Znajdź szablon i otwórz go za pomocą opcji Edytuj za pomocą Elementora .

Na przykład zmieniliśmy typografię tekstu Czytaj dalej >> .

Po zakończeniu zaktualizuj zmiany.

Krok 09: Podgląd zmian

Przejdź ponownie do głównego płótna. Wybierz ikonę rozwijaną . Następnie kliknij opcję Zapisz wersję roboczą .

Po zapisaniu wersji roboczej załaduj ponownie płótno . Zmiany wprowadzone na szablonie zobaczysz na stronie.

Dzięki temu możesz w dowolnym momencie dostosować szablon Loop Grid.

Krok 10: Opublikuj projekt siatki pętli

Mamy nadzieję, że sekcja Loop Grid jest już gotowa do opublikowania. Kliknij przycisk Publikuj u dołu panelu Elementora.

Uwaga: upewnij się, że widżet jest idealnie zoptymalizowany pod kątem responsywności na urządzeniach mobilnych, jak pokazaliśmy powyżej podczas optymalizacji szablonu Loop Grid. Tutaj również proces będzie taki sam.

Typowe przypadki użycia widżetu siatki pętli Elementor

Do tej pory opisaliśmy czym jest widżet Loop Grid i jak go używać na stronach Elementora. Przyjrzyjmy się teraz kilku kluczowym przypadkom użycia widżetu, w których może on zrobić nieocenione wrażenie.

1. Układy bloga

Elementor Loop Grid upraszcza układy blogów, ponieważ umożliwia renderowanie postów w dynamicznej i przyjemnej siatce. Możesz dostosować sposób wyświetlania treści (postów lub stron), włączając w to tytuły postów, fragmenty, obrazy, metadane i inne elementy, aby zapewnić spójny wygląd.

Dowiedz się, jak zaprojektować szablon wpisu na blogu za pomocą Elementora.

2. Siatki produktów

Loop Grid jest nieoceniony w witrynach eCommerce, ponieważ umożliwia wyświetlanie produktów w schludnej i uporządkowanej siatce. Umożliwia wyświetlanie zdjęć produktów, cen i opisów, dzięki czemu klienci mogą cieszyć się dobrymi doświadczeniami podczas przeglądania produktów w Twojej witrynie.

3. Prezentacja portfolio

Widżet Loop Grid umożliwia uporządkowanie rysunków, artykułów, studiów przypadków i fragmentów portfolio w atrakcyjny sposób. Możesz nawet zmienić siatkę, aby pasowała do Twojej marki, aby Twoje portfolio mogło zostać wyróżnione wśród klientów i pracowników.

Dowiedz się, jak utworzyć witrynę portfolio.

4. Listy wydarzeń

Dzięki Loop Grid możesz organizować swoje wydarzenia w formie graficznej. Umożliwia wizualne wyświetlanie informacji o wydarzeniach, takich jak daty, miejsca i opisy, dzięki czemu ludzie mogą szybko dowiedzieć się, co się zbliża.

5. Listy usług

Możesz także oferować swoje usługi w formacie siatki z opcjami stylizacji. Możesz pokazać kluczowe elementy, takie jak tytuły usług, opisy i zdjęcia, aby klienci mogli łatwo i szybko zobaczyć, co masz do zaoferowania.

Zamykanie

Mamy nadzieję, że znasz już tajniki widżetu Elementor Loop Grid. Kiedy już wiesz, jak dobrze korzystać z widżetu, możesz stworzyć nieograniczone możliwości projektowania swojej witryny internetowej. Dzięki intuicyjnym funkcjom i przyjazności dla użytkownika możesz wywrzeć profesjonalny wpływ na swoją witrynę internetową, aby przyciągnąć odwiedzających.

Dołożyliśmy wszelkich starań, aby omówić wszystko, czego możesz szukać w tym poście. Jeśli zauważysz, że coś przeoczyliśmy, daj nam znać w polu komentarza poniżej. Jeśli chcesz dowiedzieć się więcej o naszym produkcie, możesz także zostawić czat w polu wsparcia.

Na koniec dziękujemy za poświęcony czas i bycie z nami do końca. Miłej lektury!