Jak tworzyć kolumny i siatki w Gutenbergu: proste kroki

Tworzenie wizualnie atrakcyjnych i uporządkowanych układów jest niezbędne dla każdej witryny. Edytor Gutenberg WordPressa oferuje elastyczną platformę do tworzenia niestandardowych projektów, a kolumny i siatki są podstawowymi elementami składowymi. 

W tym samouczku pokażemy Ci, jak tworzyć kolumny i siatki w Gutenbergu, korzystając z bloku kontenera i bloku siatki wpisów w GutenKit.

Zanurzmy się!

Przegląd: Kolumny i siatki Gutenberga

Gutenberg, intuicyjny edytor bloków dla WordPressa, zrewolucjonizował sposób, w jaki użytkownicy tworzą i zarządzają treścią. Jedną z jego wyróżniających się cech jest możliwość tworzenia skomplikowanych układów przy użyciu kolumn i siatek. Elementy te umożliwiają bardziej ustrukturyzowaną i wizualnie atrakcyjną prezentację treści, zwiększając czytelność i zaangażowanie użytkownika. 

Whether you are designing a simple blog website or creating a complex strona docelowa, zrozumienie, jak efektywnie używać kolumn i siatek, jest kluczowe.

Jednak domyślne bloki WordPress Gutenberg Grid i WordPress Gutenberg Column mają ograniczoną konstrukcję i możliwość dostosowywania. I właśnie tutaj wtyczka Gutenberg, taka jak GutenKit wchodzi.

When to Use Columns vs Grids in Gutenberg

Both columns and grids help organize content into structured layouts. However, they serve slightly different purposes. 

When to Use Columns

Columns are used for simple side-by-side content. They are best suited for placing a small number of elements side by side in a single row. They work well for straightforward layouts where each section contains different types of content.

Here are the common use cases for columns:

• Feature sections – Three columns showing product features with icons and descriptions.
• Image and text layouts – An image on the left and descriptive text on the right.
• Pricing tables – Multiple pricing plans displayed side by side.
• Service highlights – Three or four columns explaining services offered by a business.
  

Columns work best for these use cases because they are easy to set up, ideal for small groups of content, and they keep related information aligned in a single row.

When to Use Grid

Grids are better suited for repeated content layouts and displaying larger collections of similar items. Instead of a single row, grids automatically organize content into multiple rows and columns.

Here are the common use cases for grids:

• Blog post listings – Showing multiple articles in a structured layout.
• Portfolio galleries – Displaying projects or creative work.
• Product listings – Showing items in an online store.
• Team member sections – Presenting employee profiles with images and descriptions.

Jak tworzyć kolumny i siatki w Gutenbergu

Tworzenie kolumn i siatek w Gutenbergu to prosty proces dzięki potężnym narzędziom udostępnianym przez blok kontenerów GutenKit. 

Oto kroki, które należy wykonać, aby zacząć:

Zainstaluj i aktywuj GutenKit:

Log in to your WordPress dashboard and go to “Wtyczki”. Wybierać "Dodaj nową wtyczkę” i wpisz GutenKit w pasku wyszukiwania. Kliknij „Zainstaluj teraz" I "Aktywuj”wtyczka.

Po pomyślnej aktywacji GutenKit pojawi się on teraz w Twoim panelu WordPress. Możesz otworzyć wtyczkę i szybko przejrzeć demo bloku „Container”, aby zobaczyć, jak działa.

Jak tworzyć kolumny w Gutenbergu

Oto rzeczywiste kroki dotyczące korzystania z kolumn w Gutenbergu:

Krok 1: Dodawanie kolumn w WordPress Gutenberg

Zacznij od otwarcia strony lub wpisu, do którego chcesz dodać kolumny i siatki. 

Kliknij ikonę „+” u góry edytora, aby otworzyć bibliotekę bloków. 

Wyszukaj „Pojemnik” zablokuj i dodaj do swojej strony. Upewnij się, że blok ma oznaczenie GutenKitTen blok działa jako podstawa dla Twoich kolumn i siatek.

Przeciągnij blok i upuść go na ekranie edytora lub po prostu kliknij blok, aby przeciągnąć go na ekran edytora.

GutenKit oferuje 6 różnych układów. Wybierz układ, który planujesz dla swojego posta lub strony. W tym samouczku wybierzemy układ 50/50.

Innym sposobem dodania bloku kontenera do ekranu edytora jest kliknięcie ikona plusa (+) na ekranie edytora.

Krok 2: Skonfiguruj blok kontenera

Kiedy blok kontenerowy jest na miejscu, możesz skonfigurować jego ustawienia, aby odpowiadały Twoim potrzebom projektowym. Dostosuj szerokość, wypełnienie i marginesy, aby utworzyć pożądaną przestrzeń układu.

W sekcji układu możesz dostosować następujące elementy:

• Szerokość kontenera
• Kierunek
• Wyrównanie
• Odstęp między kolumnami i wierszami
• Styl przepełnienia
• Znacznik HTML

Sekcja Styl umożliwia ustawienie następujących opcji:

• Tło
• Nakładka tła
• Granica

For some personality you can design the sections with a background . Creating a background image in Gutenberg is easy with GutenKit. Just add a container block, go to the Style tab, choose “Image” as the background type, upload your image, and adjust as needed. It’s a quick way to reflect your brand’s style and make your content stand out to visitors.

Teraz, jeśli chcesz udoskonalić wygląd kolumn i siatek, przejdź do ustawień zaawansowanych, które umożliwiają skonfigurowanie następujących opcji:

• Układ 
• Pozycja
• Widoczność
• Efekty ruchu
• Morfizm szkła
• Transformacja CSS
• Zaawansowana podpowiedź
• Lepki
• Paralaksa
• Dodatkowa klasa CSS

Krok 3: Dostosuj zawartość kolumny

A teraz nadchodzi ekscytująca część! Dodawanie obrazy, ikony, tekstyi itp. do swoich kolumn.

Każda kolumna może być teraz wypełniona różnymi blokami, takimi jak tekst, obrazy lub przyciski. Wystarczy kliknąć w kolumnie i dodać żądany blok treści z biblioteki. Ułóż i wystylizuj każdy blok, aby stworzyć spójny projekt.

W każdym kontenerze znajduje się ikona plusa. Kliknij tę ikonę, aby dodać nowy blok. Powiedzmy, że chcesz wyświetlić obraz żywności i jej opis.

Wybierz kontener, do którego chcesz dodać opis i dodaj blok akapitu.

Teraz w kolejnym kontenerze dodaj blok obrazu, aby wyświetlić obraz.

Oto jak wyglądają Twoje kolumny:

Wygląda nudno, prawda? Bez obaw! Możesz poprawić jego wygląd, dostosowując styl tekstu, rozmiar czcionki i kolor tła. Po prostu kliknij pierwszy kontener i przejdź do narzędzia paska bocznego. Baw się ustawieniami, aż będziesz zadowolony z rezultatu. Możesz również wrócić do ustawień bloku kontenera, aby dodać tło itp.

Aby utworzyć więcej kolumn, wystarczy powtórzyć proces od dodania bloku kontenera do dostosowania zawartości kolumny.

Możesz turn the static column content into dynamic content in Gutenberg block editor. Instead of manually updating content every time something changes, you can automate it by connecting your column blocks to real-time data.

The Dynamic Content module in GutenKit lets you pull content directly inside the Gutenberg editor from custom fields, post metadata, user info, and more.

Jak tworzyć siatki w Gutenbergu

GutenKit Blok Post Grid umożliwia prezentowanie postów w przyciągającym wzrok układzie siatki. Oferuje rozbudowane opcje dostosowywania, pozwalając dostosować liczbę kolumn, rozmiary obrazów i odstępy między postami do preferencji projektowych.

Oto prosty sposób, aby to zrobić:

Iść do Strony i wybierz Dodaj nową stronę lub możesz otworzyć istniejący post lub stronę i edytować za pomocą edytora bloków. Znajdź „+” po prawej stronie lub na górze ekranu edytora i kliknij na nią. W wyświetlonym menu bloków wyszukaj „Siatka pocztowa”. Gdy już znajdziesz tę jedyną, Odznaka GutenKit, kliknij na niego lub przeciągnij i upuść na ekranie edytora bloków.

Na pasku narzędzi bocznym zobaczysz następujące elementy:

Wybierz Kategorie: Wybierz kategorie postów, które chcesz wyświetlić, korzystając z tej opcji.

Ilość postów: Określ liczbę postów, które chcesz tutaj zaprezentować.

Przytnij tytuł według słów: Jeśli chcesz skrócić tytuły wpisów, włącz tę opcję, aby dostosować liczbę słów podczas przycinania.

Wybierz Kolumna: Użyj tego ustawienia, aby określić liczbę wyświetlanych kolumn.

Kiedy idziesz do Styl sekcji zobaczysz następujące parametry:

Siatka: Dostosuj wysokość i odstęp za pomocą dostępnych suwaków.

Tytuł: Dostosuj typografię, kolor, kolor najechania kursorem i margines za pomocą udostępnionych opcji stylizacji.

Jeśli chcesz poprawić wygląd swojej siatki, skorzystaj z ustawień zaawansowanych, które umożliwiają dostosowanie następujących elementów:

• Układ 
• Pozycja 
• Tło 
• Granica 
• Widoczność 
• Efekty ruchu

i tak dalej……

I voila! Twoja siatka jest gotowa!

Another easy way to design grids in the block editor is by using the pre-designed patterns. To use the Gutenberg templates, just click on the Biblioteka szablonów GutenKit button in the block editor.

Once the library opens, head over to the Wzory tab. There, you’ll find a collection of ready-made post grid patterns. Pick the one that fits your layout, then simply change the content and customize the styling to match your brand.

It’s a quick and efficient way to build visually appealing sections without starting from scratch. Plus, it helps maintain consistency across your site with just a few clicks.

Common Problems and Fixes When Creating Columns and Grids in Gutenberg

Creating columns and grids is generally straightforward, but you may occasionally encounter layout issues. These problems often happen due to theme styles, spacing settings, or responsive design adjustments. 

Below are some common problems and practical solutions to help you fix them quickly.

1. Columns Stack Incorrectly on Mobile

Columns look perfect on desktop but appear misaligned on mobile devices. If this happens, simply adjust the responsive settings so columns stack vertically on smaller screens.

So, when adding columns, make sure you:

• Reduce the number of columns for mobile devices.
• Enable stacking options if available.
• Use the tablet and mobile preview modes in the editor to test layouts.

This ensures your layout remains readable and user-friendly across all devices.

2. Too Much Space Between Columns

Large gaps appear between columns, making the layout look unbalanced. Simply, modify the column spacing or gap settings by:

• Reducing the column gap value.
• Adjusting padding inside the columns.
• Checking if the theme is adding extra margins.

3. Grid Items Are Not Aligned Properly

If grid items appear uneven, with different heights or misaligned elements, make sure each grid item follows the same structure. Here are some things you can do to have a properly aligned grid:

• Use images with the same dimensions.
• Keep text lengths similar.
• Apply equal padding to all grid items.

Some blocks also include an equal height option, which can help maintain consistent alignment.

4. Content Overflows Outside Columns

If images or long text extend beyond the column boundaries, it requires optimization within columns by:

• Resizing large images before uploading.
• Using responsive image settings.
• Adjusting column width or container padding.
• Breaking long text into smaller paragraphs.

5. Columns Look Different After Changing Themes

After switching themes, column layouts may shift, spacing may change, or alignment may break. Check the container width settings, column alignment, and theme-specific spacing styles. Then adjust the layout settings within the editor. 

6. Columns Don’t Stay Equal Width

If columns appear uneven, you only need to manually set column widths or reset the column structure. You can do this by:

• Select the Columns block.
• Adjust width percentages for each column.

Ensure all columns have equal width settings if needed.

Często zadawane pytania

Use these columns and grids to build high-converting popups that drive results. Learn how to create WordPress popups in Gutenberg with custom designs and smart display conditions.

Podsumowanie

Opanowanie korzystania z kolumn i siatek w Gutenbergu może znacznie poprawić atrakcyjność wizualną i funkcjonalność Twojej witryny WordPress. Postępując zgodnie z tymi prostymi krokami i wykorzystując blok kontenera GutenKit, możesz z łatwością tworzyć profesjonalne i angażujące układy. 

Dlaczego GutenKit?

• A Kreator stron Gutenberga kolumna.
• W pełni konfigurowalne siatki i kolumny w WordPress Gutenberg.
• Interfejs typu „przeciągnij i upuść”.
• Przyjazny użytkownikowi interfejs, idealny dla początkujących.

Eksperymentuj z różnymi konfiguracjami i stylami, aby znaleźć idealny projekt dla swojej treści. Dzięki praktyce będziesz w stanie tworzyć oszałamiające strony, które oczarują odbiorców i wzniosą Twoją witrynę na nowe wyżyny.