Jak korzystać z szablonów Gutenberga: szybkie kroki i wskazówki

Tworzenie witryny internetowej za pomocą WordPress może być proste, ale tworzenie pięknych i niepowtarzalnych układów może zająć trochę czasu. I tu właśnie pojawiają się szablony Gutenberga – wstępnie zaprojektowane układy, które usprawniają proces tworzenia treści w edytorze Gutenberga. 

W tym poście na blogu dowiesz się, jak korzystać z szablonów Gutenberga, od zrozumienia ich zalet po dostosowanie ich do konkretnych potrzeb.

Dlaczego warto używać szablonów Gutenberga

Szablony Gutenberga oferują wiele korzyści:

• Oszczędzaj czas: Wstępnie zaprojektowane szablony eliminują potrzebę tworzenia układów od zera, oszczędzając cenne godziny.
• Ulepszony projekt: Uzyskaj dostęp do profesjonalnie wyglądających układów, które podniosą estetykę Twojej witryny.
• Poprawiona spójność: Dzięki gotowym szablonom zachowaj spójny styl wizualny w całej witrynie.
• Zwiększona wydajność: Skoncentruj się na tworzeniu i dostosowywaniu treści, pozostawiając podstawy szablonom.

Kroki korzystania z szablonów Gutenberga

Chociaż istnieją różne opcje szablonów Gutenberga, przyjrzyjmy się użyciu GutenKit, popularnej i przyjaznej dla użytkownika wtyczki. GutenKit to popularna darmowa wtyczka oferująca obszerną bibliotekę szablonów Gutenberga. Ta wtyczka zapewnia łatwość i eliminuje stresujące tworzenie strony internetowej od zera.

Teraz przyjrzyjmy się użyciu GutenKit, aby wykorzystać moc szablonów:

Konfigurowanie i nawigacja w interfejsie GutenKit

GutenKit jest oferowany zarówno w planach darmowych, jak i pro. Podczas gdy plan pro oferuje więcej gotowych szablonów, stron i wzorów, jego darmowy plan może wystarczyć do poznania niesamowitych gotowych szablonów.

Aby rozpocząć korzystanie z GutenKit, wykonaj następujące proste kroki:

1. Zainstaluj i aktywuj wtyczkę GutenKit na swojej stronie WordPress.

Przejdź do panelu WordPress i poszukaj „Wtyczek”. Wybierać "Dodaj nową wtyczkę” i wpisz GutenKit w pasku wyszukiwania. Następnie kliknij "Zainstaluj teraz”. 

Po instalacji aktywuj GutenKit.

2. Po aktywacji w panelu WordPress znajdziesz nową sekcję „GutenKit”.

3. Przejdź do „GutenKit > Biblioteka”, aby zapoznać się z obszerną kolekcją wstępnie zaprojektowanych szablonów.

Aby poruszać się po bibliotece szablonów GutenKit, przejdź do „Strony" I "Dodaj nową stronę”.

Na ekranie edytora znajdziesz bibliotekę szablonów GutenKit.

Po kliknięciu zostaniesz przekierowany na nową stronę, na której możesz znaleźć różne wzory bloków, szablony i strony.

Wybór idealnego szablonu

GutenKit oferuje bibliotekę podzieloną na kategorie, co ułatwia znalezienie szablonu idealnego do Twoich potrzeb. Przeglądaj opcje stron głównych, stron docelowych, sekcji „O nas” i nie tylko.

Oto krótki rzut oka na różne szablony dla każdej sekcji:

Przewiń jedną stronę

Dom

O nas

Cennik

Wykres

Dostosowywanie szablonów GutenKit

Piękno szablonów Gutenberga polega na możliwości ich dostosowywania. Po wybraniu szablonu zaimportuj go na ekran edytora. Następnie możesz łatwo:

• Edytować tekst: Zastąp tekst zastępczy własną treścią.
• Zmień obrazy: Zamień istniejące obrazy na własne.
• Dostosuj układy: Zmień rozmieszczenie bloków w szablonie, aby dopasować je do swoich preferencji.
• Modyfikuj style: Użyj wbudowanych opcji, aby dostosować kolory, czcionki i odstępy.

Na potrzeby tego samouczka jako nasz przykład wybierzemy szablon restauracji. 

Zacznijmy więc go dostosowywać!

Na początek wybierz sekcję lub kontener, który chcesz edytować. Załóżmy, że poniższy obraz przedstawia sekcję szablonu, od której chcesz rozpocząć edycję.

Jeśli klikniesz dowolną część lub kontener sekcji, zauważysz, że pojawi się narzędzie paska bocznego. Na tym pasku narzędzi możesz edytować lub dostosowywać każdy kontener sekcji. 

Tutaj zobaczysz sekcje, a mianowicie: Treść, Układ, Styl i Ustawienia zaawansowane.

Treść – sekcja dostosowywania tekstów.

Układ i styl – różni się w zależności od wybranego kontenera.

Układ:

Możesz dostosować szerokość kontenera, szerokość zawartości i wysokość. Możesz także dostosować elementy kontenera, takie jak kierunek, zawartość, wyrównanie itp.

Styl:

Ustaw tło (normalne lub umieszczone po najechaniu), nakładkę tła i obramowanie.

Zaawansowane ustawienia – zawiera różne elementy sterujące, w tym:

• Układ
• Pozycja
• Tło
• Granica
• Widoczność
• Efekty ruchu
• Morfizm szkła
• Transformacja CSS
• Zaawansowana podpowiedź
• Lepki
• Zaawansowany

Aby edytować tekst sekcji lub kontenera, po prostu kliknij tekst i zacznij go zastępować. Istnieją teksty, których nie można zastąpić bezpośrednio na ekranie edytora. Aby zastąpić ten tekst, po prostu najedź kursorem na narzędzie na pasku bocznym i wybierz sekcję treści. Na poniższym obrazku „Kategorię żywności” można edytować wyłącznie za pomocą narzędzia na pasku bocznym.

Następnie zamieńmy ikonę nagłówka. W tym celu należy kliknąć na pierwszy pojemnik z napisem „Zdrowa żywność”. Na pasku bocznym zauważysz, że w sekcji treści znajduje się plik Dodaj ikonę przycisk. Włącz przycisk, aby móc dodać preferowany obraz lub zmienić istniejący obraz w szablonie. 

Jeśli nie chcesz włączać ikony, ikona w pierwszym kontenerze zniknie. 

Aby zmienić ikonę, kliknij przycisk Ikona nagłówka Sekcja. Możesz przesłać plik SVG lub wybrać go z biblioteki ikon.

Aby nadać styl swojej sekcji, przejdź do Styl i zacznij dostosowywać wyrównanie treści, kolor, marginesy, typografię itp. Możesz także dodać animację najechania i animację tła najechania. 

Na koniec możesz jeszcze bardziej poprawić atrakcyjność lub wygląd swojej sekcji, przechodząc do Zaawansowane ustawienia. Możesz ustawić tło kontenera, dostosować jego obramowanie, dodać efekty ruchu itp.

Kilka wskazówek dotyczących wyboru szablonu

Oto kilka wskazówek, jak wybrać najlepszy szablon do tworzenia strony za pomocą Gutenberga:

• Dopasuj styl swojej witryny: Wybierz szablon pasujący do ogólnej estetyki Twojej witryny.
• Rozważ funkcjonalność: Wybierz szablon, który obsługuje konkretną treść, którą chcesz wyświetlić.
• Skoncentruj się na responsywności: Upewnij się, że szablon jest responsywny i dobrze wyświetla się na wszystkich urządzeniach.

👉 👉 Przeczytaj tego bloga, aby przebuduj swoją stronę internetową w Gutenbergu.

Jak korzystać z szablonów Gutenberga [kilka wskazówek]

Oto kilka dodatkowych wskazówek, jak zmaksymalizować doświadczenie szablonu Gutenberg:

• Zacznij od szablonu podstawowego: Jeśli dopiero zaczynasz przygodę z Gutenbergiem, zacznij od prostszych szablonów i stopniowo przechodź do bardziej złożonych.
• Sprawdź podgląd na żywo: sprawdź podgląd szablonu na żywo, aby zobaczyć, jak będzie wyglądać Twoja strona.
• Nie bój się eksperymentować: Poeksperymentuj z różnymi szablonami i układami, aby odkryć, który najlepiej sprawdza się w przypadku Twojej witryny.
• Wykorzystaj bloki wielokrotnego użytku: Twórz własne bloki wielokrotnego użytku dla często używanych elementów, takich jak sekcje wezwań do działania lub formularze kontaktowe.
• Zachowaj spójność marki: Upewnij się, że wszelkie dostosowania są zgodne z paletą kolorów i czcionkami Twojej marki.

Końcowe przemyślenia

Szablony Gutenberga Ci to umożliwiają twórz wspaniałe i funkcjonalne strony internetowe z łatwością. Wykorzystując ich moc i postępując zgodnie z tymi wskazówkami, możesz usprawnić przepływ pracy i zbudować naprawdę wyróżniającą się witrynę internetową. 

Nie zapominaj, że możesz używać tylko tych niesamowitych szablonów od GutenKit. Dlaczego więc GutenKit?

• Czysty kod i minimalny wpływ na wydajność witryny.
• Z bardzo przyjaznym dla użytkownika interfejsem i importem szablonów.
• Skoncentruj się na projektowaniu opartym na blokach.
• Oferuje obszerną bibliotekę wstępnie zaprojektowanych szablonów w wersji bezpłatnej i profesjonalnej.
• Wysoce konfigurowalny.

Wypróbuj więc te niesamowite szablony Gutenberga i doświadcz bezproblemowego tworzenia stron!