Pages

Layout Patterns Intro

Making things simple is what we love to do. All the elements you see in the theme demos are included as block & page patterns within the block editor. With a simple drag and drop, you can arrange them in any way you want and adjust them to perfectly fit your project.

All available block and page patterns are sorted in different categories: Header, Footer, Hero, Page Title, About, Team/Volunteers, Causes, Testimonials, Events, Facts, FAQ, Pricing Table, Contact, Pages, Blog Layout .

You can also easily mix patterns from different categories. No restrictions there.

Once you have added a block pattern to your page, you can start replacing its sample text and images with your own. Every block pattern is very flexible. You can style, delete or duplicate sections of every pattern to suit your needs.

Intro to the WordPress Editor and Block Patterns

With the version 5.9 WordPress entered the new era and introduced from the ground up built and improved editor. There are many new exciting features and block patterns are one of them. Therefore, I would encourage you to learn as much as possible about new WordPress editor and blocks. The following videos are a great place to get started:

• WordPress Block Editor – Getting Started Guide
• Create a WordPress website with a Block (FSE) Theme ( Beginner Friendly )
• How to Create a Header in a Block WordPress Theme (FSE)?
• How to Create a Footer in WordPress (with Blocks)?
• How to Create Columns in WordPress Block Editor (Gutenberg)?

Creating Home Page

Navigate to "Pages > Add New" and add the title of the page, in this case let's name it "Home". Click on the Toogle Block Inserter (blue "+" sign) and click the "Patterns > Explore". Here you'll find all available page and block patterns you can use for creating pages.

In the example below we recreate the home page by inserting the whole page block:

Of course, you can create your home page by adding and customizing various block patterns as demonstrated below:

The same way you can create any other page, by adding complete page blocks or adding block patterns one by one. I'd recommend creating a couple pages and adding some content first before setting up the Header/Menu and Footer part.

Built-in CSS classes

In case you want to hide elements on mobile view.

• On the page, click on the desired block you want to hide on mobile.
• Expand Advanced panel ,on the right-hand side.
• Paste the hide-mobile class there.