Kiedy (i jak) korzystać z zaawansowanych układów siatki w WordPressie

Skuteczne wyświetlanie postów na blogu może oznaczać różnicę między odwiedzającym pozostanie na Twojej stronie a kliknięciem. Zaawansowane układy siatek zapewniają większą elastyczność niż tradycyjne siatki, niezależnie od tego, czy potrzebujesz bardziej pomysłowego podejścia, lepszego projektu, czy po prostu możliwości wyświetlania większej liczby postów na stronie.

W tym artykule wyjaśnimy, czym są zaawansowane siatki, dlaczego często są one lepsze niż podstawowe siatki i jak Twoja witryna może z nich skorzystać. Zaczynajmy!

Wprowadzenie do zaawansowanych układów siatki

Kiedy myślisz o siatce, prawdopodobnie wyobrażasz sobie symetryczny zestaw pudełek, jak na szachownicy lub arkuszu kalkulacyjnym. Jednak chociaż standardowa siatka jest znana i może być przydatna do śledzenia elementów gry lub danych księgowych, nie zawsze jest optymalna do projektowania stron internetowych.

Zaawansowane siatki oferują więcej możliwości dostosowania i elastyczności, dzięki czemu możesz ustawić układ dokładnie tak, jak chcesz. Załóżmy na przykład, że masz nieparzystą liczbę produktów, które chcesz wyświetlić na stronie. W tradycyjnej siatce wynikiem jest zwykle martwa przestrzeń:

Chociaż wszyscy jesteśmy do tego przyzwyczajeni na stronach produktów i w wynikach wyszukiwania, zaawansowane siatki oferują lepszy sposób. Załóżmy, że na stronie docelowej chcesz wyświetlić pięć postów na blogu. W przypadku standardowej siatki, twoje opcje to albo rząd 5×1 albo siatka 2×3 z pustą przestrzenią.

Zamiast wybierać lepszą z dwóch podrzędnych opcji, zaawansowana siatka może pozwolić ci stworzyć coś takiego:

Zerwanie z ograniczeniami tradycyjnych układów siatki może poprawić wygląd i funkcjonalność Twojej witryny na wiele sposobów. Lepiej rozplanowane blogi będą bardziej atrakcyjne dla odwiedzających, a skuteczniejsze umieszczanie na stronie produktu może nawet zwiększyć sprzedaż.

A co najlepsze, nie jest to trudne. Chociaż możesz tworzyć zaawansowane siatki za pomocą ręcznego kodowania, możesz również znaleźć narzędzia, które sprawią, że proces będzie niezwykle prosty.

Na przykład nasz własny Beaver Builder dodaje wiele nowych funkcji do edytora WordPress i dostosowywania motywów. Obejmuje to bardziej intuicyjne opcje wierszy i kolumn, które umożliwiają tworzenie bardziej elastycznych, zaawansowanych siatek w każdej sytuacji. Wkrótce pokażemy, jak korzystać z tych opcji.

Zalety zaawansowanych siatek

Zanim zagłębimy się w tworzenie zaawansowanych siatek, porozmawiajmy trochę więcej o ich zaletach i przypadkach użycia. Chociaż zaawansowane siatki są przydatne do przełamywania normalnych ograniczeń tradycyjnych siatek, zalety na tym się nie kończą.

Beaver Builder umożliwia dostosowanie ustawień siatki aż do odstępów i marginesów, dzięki czemu możesz optymalnie wykorzystać swoją cyfrową nieruchomość. Może to oznaczać umieszczenie większej liczby produktów na jednej stronie lub uzupełnienie polecanych obrazów w celu uzyskania bardziej artystycznego wyglądu.

Zaawansowane siatki mogą również usprawnić organizację Twojej witryny, umożliwiając logiczne uporządkowanie treści i bez marnowania miejsca. To, co kiedyś można było zrobić z nudnym menu rozwijanym i linkami, można teraz wykonać w jasny i przyciągający uwagę sposób.

Jeśli Twoja witryna kładzie duży nacisk na elementy wizualne, na przykład butik odzieżowy lub galeria sztuki, zaawansowane siatki mogą również oferować znacznie więcej opcji wyświetlania obrazów. Możesz nawet dodawać animacje do siatek galerii lub funkcji karuzeli z zaawansowanymi ustawieniami.

Jak Twoja witryna może skorzystać z zaawansowanego układu siatki (3 przypadki użycia)

Podczas gdy większość witryn może w taki czy inny sposób skorzystać z zaawansowanych układów siatki, istnieje kilka popularnych typów witryn, w których mogą one mieć dramatyczny wpływ. Przyjrzyjmy się trzem najlepszym przypadkom użycia tej funkcji.

1. Blogi z wieloma kategoriami

Duże blogi z wieloma postami mogą cierpieć z powodu tej przytłaczającej ilości treści. Bez skutecznego sposobu wyświetlania i kategoryzowania wszystkiego, większość treści może zostać pochowana i zaniedbana.

Zaawansowany układ siatki pozwala nie tylko wyświetlać więcej postów na stronie i w lepszych układach. Może również umożliwić kreatywne grupowanie i kategoryzowanie postów.

Może to oznaczać zestaw kategorii ułożonych w siatkę, która przeniesie Cię do różnych stron docelowych, lub po prostu posty pogrupowane razem z zakładkami w celu łatwiejszego przeglądania:

Jakkolwiek to robisz, zaawansowane układy siatki znacznie ułatwiają organizowanie treści w sposób logiczny i wydajny.

2. Sklepy internetowe

Jednym z najczęstszych zastosowań siatek są sklepy internetowe. Strony docelowe są często podzielone na rzędy kategorii i produktów, które klienci mogą przeglądać.

Podczas gdy wiele myśli poświęca się stronom poszczególnych produktów, co z przeglądaniem stron, na których prezentowanych jest wiele różnych produktów? Zwykła siatka spełnia swoje zadanie, ale zaawansowane siatki oferują nowe możliwości tworzenia wciągających zakupów.

Na przykład możesz oferować w swojej witrynie produkty lub usługi, które różnią się zakresem lub popularnością. Tradycyjna metoda polega na tym, że każdy wpis wypełnia identyczne miejsce w siatce tymi samymi informacjami. Dzięki zaawansowanej siatce możesz dostosować rozmiar i kształt różnych wpisów, aby wyróżnić bestsellery lub w inny sposób wyróżnić swoje produkty.

Co więcej, nie ogranicza się to tylko do zwykłych produktów. Zaawansowane układy siatki są wspólne dla stron sprzedaży i ofert specjalnych. Dzięki Beaver Builder możesz tworzyć różne układy dla tygodniowych ofert, ofert specjalnych i wyprzedaży świątecznych:

Oferując różnorodne produkty w sklepie internetowym, zaawansowane siatki zapewniają znacznie większą elastyczność w sposobie wyświetlania tych produktów. Ponadto istnieje wiele innych obszarów witryny eCommerce, które mogą korzystać z zaawansowanych układów siatki, takich jak menu i strony docelowe.

3. Galerie

Galerie internetowe mają różne kształty, rozmiary i media. Kiedy myślisz o galeriach, sztuka lub fotografia mogą przyjść na myśl jako pierwsze, ale ta funkcja jest używana w wielu różnych kontekstach.

Na przykład są galerie win, galerie mody, a nawet galerie projektowania stron internetowych! To, co ich łączy, to prezentowanie wielu elementów treści, zwykle z elementem wizualnym. Czy istnieje lepszy sposób wyświetlania obrazów online niż za pomocą zaawansowanego układu siatki?

Podobnie jak ściana galerii, która łączy różne elementy, tworząc intrygującą całość, zaawansowane siatki pozwalają na taką kreatywność podczas projektowania witryny:

Niezależnie od tego, czy jesteś artystą, fotografem, sprzedawcą drobnych towarów, czy projektantem stron internetowych, elastyczność w prezentowaniu swojej pracy w wyjątkowy i interesujący sposób może wzmocnić efekt samej pracy. Zaawansowane układy siatki, takie jak te, które można zaprojektować za pomocą Beaver Builder, umożliwiają odróżnienie projektu witryny od milionów innych witryn WordPress.

Jak zbudować zaawansowany układ siatki dla witryny WordPress (w 3 krokach)

Budowanie zaawansowanego układu siatki jest łatwiejsze niż można by się spodziewać, dzięki intuicyjnym funkcjom Beaver Builder. Jeśli znasz już edytor bloków WordPress, Beaver Builder to potężniejsza alternatywa, która daje nowe opcje i może być zastosowana w większej liczbie obszarów witryny dzięki dodatkowi Beaver Themer.

Aby stworzyć swój pierwszy zaawansowany układ siatki, wykonaj następujące trzy kroki.

Krok 1: Zainstaluj i aktywuj wtyczkę Beaver Builder

Kiedy będziesz gotowy do rozpoczęcia, po prostu wyszukaj Beaver Builder w sekcji Wtyczki na pulpicie WordPress, a następnie zainstaluj i aktywuj go:

Tworząc nową stronę lub post, wybierz Uruchom Beaver Builder, aby otworzyć edytor:

To prawdopodobnie dobry pomysł, aby wziąć udział w wycieczce, aby uzyskać krótką lekcję na temat wszystkiego, co możesz zrobić z Beaver Builder. Krótko mówiąc, możesz spodziewać się bardziej intuicyjnego edytora stron, w którym możesz łatwo dodawać i modyfikować moduły za pomocą interfejsu typu „przeciągnij i upuść”.

Krok 2: Zbuduj swoją zaawansowaną siatkę

Następnie dodaj nowy element do strony za pomocą symbolu plusa w prawym górnym rogu ekranu. Kliknij zakładkę Rzędy , aby zobaczyć asortyment układów kolumn do wyboru:

Stamtąd po prostu przeciągnij i upuść żądane wiersze na swoją stronę, aby utworzyć siatkę. Możesz użyć wielu rzędów pasujących kolumn lub wymieszać je, aby uzyskać bardziej kreatywny wygląd.

Każda sekcja w siatce to miejsce, w którym można umieścić nowe moduły. Mogą to być produkty z Twojego sklepu, obrazy do galerii lub inne elementy.

3. Zapełnij sloty

Teraz, gdy masz już swoją siatkę, czas ją zapełnić. Ponownie przejdź do symbolu plusa, aby dodać nowe moduły do ​​strony. Tym razem wybierz zakładkę Moduły , aby uzyskać dostęp do różnych opcji.

Następnie po prostu przeciągnij i upuść nowe moduły do ​​gniazd w swojej siatce, aby je wypełnić. Mogą to być obrazy, tekst, przyciski, a nawet bardziej zaawansowane opcje, takie jak referencje lub karuzela postów.

Następnie możesz zmodyfikować każdą sekcję tak, jak normalny blok WordPress. Dostępne są dodatkowe opcje, jeśli najedziesz kursorem na element i klikniesz ikonę Edytuj kolumnę :

Nie omówimy tutaj wszystkich opcji dostosowywania, ale jedną ze strategii byłoby wstawienie obrazów do gniazd siatki i powiązanie ich z odpowiednimi stronami produktów. Możesz zrobić to samo w przypadku reklamy sprzedaży lub galerii sztuki:

Po zakończeniu kliknij przycisk Gotowe w prawym górnym rogu ekranu. Stamtąd możesz opublikować lub zapisać stronę jako wersję roboczą, którą możesz następnie wyświetlić podgląd.

To wszystko! Dzięki Beaver Builder odblokujesz znacznie więcej możliwości dostosowania w bardzo przyjaznym dla użytkownika pakiecie. Szybko przekonasz się, że stworzenie zaawansowanego układu siatki może być najlepszym rozwiązaniem dla wielu aspektów projektu Twojej witryny.

Wniosek

Chociaż domyślne układy siatki używane przez wiele witryn WordPress wykonują swoje zadanie, nie są one idealne w każdej sytuacji. Zaawansowane układy siatki zapewniają większą swobodę projektowania strony, jak chcesz, dzięki czemu jest zoptymalizowana pod kątem określonych odbiorców i celów.

Aby stworzyć zaawansowany układ siatki za pomocą Beaver Builder, po prostu wykonaj następujące kroki:

1. Zainstaluj i aktywuj wtyczkę Beaver Builder.
2. Dodaj moduły wierszy/kolumn do strony lub posta, aby utworzyć siatkę.
3. Wypełnij siatkę innymi elementami, takimi jak obrazy i inne media.

Plany premium Beaver Builder dodają korzystanie z wielu witryn, białe etykiety i motyw Beaver Builder, który został zaprojektowany specjalnie do użytku z naszą wtyczką. Oferujemy również inne produkty, w tym Beaver Themer i Assistant Pro, aby jeszcze bardziej ułatwić proces projektowania stron internetowych.

Masz pytania dotyczące zaawansowanych układów siatki? Daj nam znać w sekcji komentarzy poniżej!