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, About, Team, Testimonials, FAQ, Contact, E-Commerce, 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 of the demo 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

Avalon theme comes with several built-in CSS classes for the animations and to hide elements on mobile view.

• On the page, click on the desired block you want to add animation.
• Expand Advanced panel ,on the right-hand side.
• Paste the name of the class there. You can add multiple classes, separated by space.

Classes that can be used:

• hide-mobile - hide element on mobile view
• image-animation-from-top - images with this class will animate when they enter the viewport. Animation is reveal, from the top.
• image-animation-from-left - images with this class will animate when they enter the viewport. Animation is reveal, from the left.
• image-animation-from-right - images with this class will animate when they enter the viewport. Animation is reveal, from the right.
• animate-from-top - element with this class will animate from the top, when it comes into the viewport.
• animate-from-bottom - element with this class will animate from the bottom, when it comes into the viewport.
• animate-from-left - element with this class will animate from the left, when it comes into the viewport.
• animate-from-right - element with this class will animate from the right, when it comes into the viewport.