A Guide to the Gutenberg Module and Patterns Patterns for Quick Typography Homepage (05)

In the last installment, we discussed the WordPressDefault theme with Gutenberg editor header settings. This installment will take you through how to quickly layout your homepage with Gutenberg. If you find it too tedious to add modules one by one (such as title, text, buttons, images, etc.), then this post will teach you how to do it with the help of Gutenberg'sPatternsto quickly layout and simplify the design process. Whether you have a personal blog site or an e-commerce site, you can find the right layout to instantly give your site a new look!

If we don't want to add individual modules one by one, such as headers, text, buttons, images, etc., we also have to consider adding containers before going to the layout (as in the picture above)

The upper legs are some of the containers that are often used

Columns: the layout of how many columns are in a row

Group: in fact, and the above is almost the same, but he is divided into several of the kind of layout, we can see the actual situation to

Row: that is, horizontally arranged to add

Stack: that is, vertically arranged to add

Grid: is the grid

It's all very understandable, you can try to add it in practice, so you can understand it better.

So how do I add it quickly without all the hassle?

As shown above, we find Patterns (patterns) here are more than templates

Find a suitable template, drag and drop it to the right side of the home page, and then you can go ahead and replace the text as well as the buttons and images as follows

Is the effect quick and refreshing

If we want to add a gallery, we can choose Gallery, and on the right side, choose one that suits you, the mode is also known as a module, and just drag and drop it

Like the others, you can just add them according to the translation and the actual effect you need.

If you're an e-commerce website that does

Then you need to install the WooCommerce plugin? Then your Patterns Patterns will have a separate pattern for WooCommerce as shown below. He will automatically match a lot of patterns according to the site, you choose the one you need!

Then select one and drag and drop it to the home page on the right, as follows

Then set up the layout and size of the module, as well as the background, and so on.

Of course you can manually set the product display as follows

Then after dragging and dropping it to the home page, go ahead and set up the layout and what content you want to display, as well as filtering by category, all in the settings area on the right (below)

Well, by this point you'll basically be able to quickly typeset the front page, if you don't know theGutenberg BlockHow to set it up, check out the previous posts

Here's one more bit of knowledge

If you are previously using another theme, but you want the template content of the previous theme

You can find it here

summarize

With this article, you've learned how to quickly layout your homepage using Patterns in the Gutenberg editor. Whether it's a photo gallery display or a product layout for an e-commerce site, it can be done quickly with the Patterns module. If you are interested inGutenberg Blocksettings are unfamiliar, you can refer to our previous articles for more detailed tutorials. If you encounter problems during the layout process, please feel free to contact or leave a message in the comment section, and we'll bring you more tips on using the default theme with Gutenberg in the next installment!