Jak tworzyć sekcje witryny Hero w Gutenbergu z motywem Total

Motyw Total WordPress zawiera całą gamę narzędzi, których strona biznesowa może kiedykolwiek potrzebować.

Motyw oferuje edycję wizualną za pomocą narzędzia WordPress Customizer i szybki import danych demonstracyjnych, które są szczególnie przydatne przy tworzeniu wyjątkowej strony głównej.

Jak widać, bezpłatna wersja Total nie blokuje Cię żadnymi dodatkowymi narzędziami do tworzenia stron WordPress, ale raczej daje natywny sposób projektowania witryny WordPress.

Wraz z pojawieniem się Gutenberga, edytora WordPress opartego na blokach, każdy motyw WordPress, w tym Total, można znacznie bardziej dostosować. Wybór elementów treści (bloków) daje nam swobodę dostosowywania, jakiej nigdy wcześniej nie widzieliśmy w rdzeniu WordPressa, trudno temu zaprzeczyć.

Niektóre ustawienia stylizacji bloków są jednak nadal bardzo ograniczone w domyślnym edytorze. Jeśli więc korzystasz z nowego edytora Gutenberg i Total , który chcesz tworzyć i projektować lepsze treści, w tym samouczku znajdziesz kilka pomocnych wskazówek.

Aby być bardziej precyzyjnym, w tym poście chcielibyśmy pokazać kilka przykładów, jak budować i dostosowywać tak kluczowe elementy witryny, jak sekcje hero, subhero i call-to-action w Gutenbergu. Te, które zwykle pomagają firmom:

• Utwórz sekcje wprowadzające/powitalne
• Promuj kluczowe produkty lub wydarzenia
• Skoncentruj się na określonych pozycjach portfela lub usługach itp.

Aby zwiększyć możliwości dostosowywania Gutenberga, użyjemy wtyczki Getwid WordPress Blocks, którą zalecamy użytkownikom motywu Total. Jesteśmy pewni, że niektórzy użytkownicy Total spróbowali już swoich sił w Getwid.

Ale dla tych, którzy zastanawiają się, czym jest Getwid, poniżej znajduje się krótki opis.

Krótko mówiąc, jest to darmowy dodatek natywny dla Gutenberga, który zawiera największą jak dotąd bibliotekę bloków typu premium oraz kolekcję projektów typu „wybierz i wklej ” dla Gutenberga . To nie jedyny powód, dla którego go polecamy.

Szczególnie podoba nam się ta wtyczka, ponieważ dobrze łączy się z domyślnym stylem Total, pozwala wyłączyć dowolny blok, którego nie potrzebujesz i jest naprawdę bogata w funkcje.

Wtyczka pojawia się jako zalecana po aktywacji Total – jest to tymczasowe rozwiązanie, aby sprawdzić, czy odpowiada naszym klientom.

Ale cóż, musisz sam spróbować, aby zobaczyć, czy to twoje rozwiązanie. Tymczasem przejrzyjmy przykłady, które udało nam się stworzyć.

Przykłady sekcji bohaterów i wezwania do działania stworzone za pomocą Getwid w Total

Przeprowadziliśmy te testy w bezpłatnej wersji motywu Total i możemy śmiało powiedzieć, że nie było prawie żadnych ograniczeń.

Jednak opcje całkowitej szerokości kontenera witryny są ograniczone, więc jeśli szukasz wciągających układów na pełnym ekranie, możesz pomyśleć o Total Plus.

Przede wszystkim prawie zawsze będziesz musiał użyć bloku sekcji według bloków Getwid WordPress. To kontener, który może obsłużyć dowolną liczbę innych bloków. W ten sposób sekcje bohaterów mogą wyświetlać dowolny rodzaj treści.

Inną ważną cechą kontenera sekcji jest to, że oferuje wiele typów tła: obraz, kolor, wideo (z biblioteki WP Media Library lub YouTube), gradient wielokolorowy i inne.

Więc głównymi zadaniami podczas projektowania obszarów witryny z blokiem sekcji są:

• Wybierz i dostosuj typ tła, aby treść na nim była czytelna i wyraźna.
• Włóż potrzebne klocki w preferowanej kolejności.
• Dostosuj odstępy (istnieją kąty, które można przeciągać, tak jak w wizualnych konstruktorach, aby ustawić wewnętrzne i zewnętrzne przestrzenie).
• Opcjonalnie: dodaj animację, przekładki kształtów i inne elementy dekoracji.

Przejdźmy teraz do przykładów.

Przykład 1. Prezentacja produktu

Wszystkie bloki w tym przykładzie są umieszczone wewnątrz bloku sekcji:

1. Zaawansowany kurs
2. Zaawansowany kurs
3. Zaawansowany kurs
4. Grupa przycisków
5. Tło sekcji: obraz (Pozycjonowanie > U góry po prawej; Rozmiar > Auto)

Blok nagłówka pozwala na użycie dowolnej czcionki Google, rozmiaru tekstu, grubości czcionki itp. Istnieje również kilka stylów przycisków (wypełnienie lub kontur).

Największym wyzwaniem, jakie może się przydarzyć, jest znalezienie odpowiedniego obrazu tła i wybranie odpowiedniej pozycji obrazu, ponieważ jego rozmiar jest automatycznie zmieniany w oparciu o widoczny obszar.

Przykład 2. Ekstrakt z portfela

Wszystkie bloki są umieszczone wewnątrz bloku sekcji:

1. Zaawansowany kurs
2. Zaawansowany kurs
3. Trzy kolumny (akapit, obraz, obraz, obraz)
4. Tło sekcji: gradient

Możesz również umieścić przycisk wezwania do działania, aby połączyć się z pełną stroną portfolio.

Przykład 3. Karta funkcji lub wydarzenia

W takiej sekcji bohatera możesz zaprezentować produkt, wydarzenie, usługę, rzecz, osobę itp.

Blok Zaawansowany nagłówek pozwala wybrać dowolną czcionkę:

W tym przykładzie użyliśmy tła gradientowego i dzielnika kształtu dolnego tła (Waves Multilayered).

1. Dwa zaawansowane nagłówki
2. Ustęp
3. Przycisk
4. Obraz
5. Tło sekcji: gradient + dzielniki kształtu

Przykład 4. Sekcja wezwania do działania

Ponownie musisz zacząć od bloku sekcji. Aby umieścić nagłówki, jak w poniższym przykładzie, możesz użyć szablonu z Biblioteki szablonów Getwid lub stworzyć wzór od podstaw.

To bardzo prosta sekcja z obrazem tła, kilkoma nagłówkami i scentralizowanym przyciskiem.

1. Trzy zaawansowane bloki kursu
2. Blok przycisku
3. Tło sekcji: obraz z kryciem (Rozmiar > okładka)

Spodoba ci się również łatwość dostosowania wyrównania zawartości za pomocą przeciąganych kątów:

Jest to również trend do tworzenia układów offsetowych poprzez umieszczanie nagłówków nad obrazami:

W Getwid możesz to osiągnąć, ustawiając odpowiedni obraz tła z pustą przestrzenią na linię tekstu.

Przykład 5. Sekcje sub-bohatera

Dość często sekcje z podbohaterami zawierają więcej informacji o projekcie lub osobie. Nadaje się do prezentacji biografii, historii lub kluczowych celów.

Jako element wizualny użyliśmy bloku Image Stack Gallery firmy Getwid, który zawiera kilka stylów. Możesz jednak zastąpić go obrazem, filmem lub dowolnym innym elementem treści.

1. Dwa zaawansowane nagłówki
2. Ustęp
3. Przycisk
4. Blok galerii stosu obrazów
5. Tło sekcji: jednolity kolor

Przykład 6. Akcenty wizualne

Galerie obrazów, suwaki i filmy to bardzo popularne wizualne narzędzia do tworzenia przyciągających uwagę sekcji.

Na przykład możesz użyć bloku Media & Text Slider firmy Getwid, aby zbudować pokaz slajdów z opcjonalną zawartością tekstową:

1. Suwak multimediów i tekstu
2. Tło sekcji: gradient + górne i dolne przegrody o niestandardowej wysokości

Istnieje również wiele bloków Getwid post-based, które można zaprezentować w suwaku (zostaną one automatycznie pobrane z zawartości Twojej witryny). Chcesz zaprezentować najnowsze lub ręcznie wybrane posty w formacie suwaka lub siatki/listy? Jest na to blokada.

Przykład 7. Banery

Getwid jest dostarczany z poręcznym blokiem banerowym, który oferuje domyślne kontenery graficzne i tekstowe. Posiada również wybór efektów animacji, dzięki czemu sekcje z banerami są bardziej dynamiczne.

Blok doskonale sprawdza się zarówno w przypadku wyprzedaży czasowych, jak i stałych imprez.

1. Transparent
2. Tło przekroju: gradient monochromatyczny

Przykład 8. Sekcje informacyjne

Jeśli chcesz pokazać więcej informacji w uporządkowany i zwięzły sposób, Getwid oferuje do tego celu trzy dedykowane bloki: Tabs, Accordion i Toggle.

Oto dwukolumnowy układ z blokiem Accordion i obrazem obok niego:

Unikalną cechą tych bloków jest możliwość umieszczenia dowolnego bloku wewnątrz widżetów z zakładkami. Oznacza to, że oprócz tekstu możesz dodawać obrazy, listy, filmy, galerie, suwaki do zakładek.

Istnieje wiele innych bloków, które mogą dodać unikalne funkcje do sekcji marketingowych, np. Image Hotspot do tworzenia sekcji informacyjnych z obrazami, Icon Box dla usług, kanał galerii na Instagramie w czasie rzeczywistym i wiele innych.

Możesz tworzyć i projektować podobne sekcje z pustej strony Gutenberga, wybierając wymagany układ strony w ustawieniach strony Razem.

Owinąć

Czy wiesz, co jest najlepsze w korzystaniu z kombinacji Gutenberga i Getwida w darmowym motywie Total? Nie, liczy się nie tylko liczba bloków.

Co ważniejsze, nie trzeba mieć oka projektanta (ani umiejętności programisty), aby tworzyć dobrze wyglądające treści. Jest tak wiele gotowych skórek, wzorów blokowych i gotowych projektów, które mogą ci pomóc. Bloki WordPress Getwid są również dobrą alternatywą dla kreatorów stron dla tych, którzy pozostają z darmową wersją Total.

Dopóki edytor bloków nie jest wystarczająco dojrzały, dodatkowy natywny dodatek Gutenberga może być świetnym punktem wyjścia.

Czy próbowałeś Gutenberga lub Getwida? Daj nam znać w komentarzach.