← Back to Help Centre

How to create pages with the block editor

All of our Snug themes come with custom blocks for the WordPress block editor that allow you to easily build and customise your pages. Our custom blocks can be used alongside the default blocks in WordPress.

Our blocks can be used on pages, blog posts and custom post types, including in our built-in Portfolio posts. One of the many benefits of using these blocks is that you can preview what your page will look like in the editor before you make your changes live.

In order to use this functionality, your website must be running WordPress 5.0 or higher, and you must not have the Classic Editor plugin activated.

Each theme comes with different custom blocks. You can find out more about the blocks available with each theme and how to use them by clicking the links below:

Thrive | Shine | Flourish | Bloom | Amplify | Aspire

How to use our custom blocks

To use our blocks, open up the page, blog post or portfolio post that you would like to edit.

There are two ways to add blocks to the page. You can either click the + icon in the top-left hand corner of the screen, on you can click the + icon on the right-hand side of the editor.

Once you have clicked on one of these + icons, you’ll be able to see add the blocks available to use. All the custom blocks that come with your theme can be found under the Snug Blocks tab. You can easily tell which block is a custom block as it will have a pink S icon above it.

Simply click on the block you would like to use to add it to the page.

You’ll now be able to see your block on the page, and on the right-hand side of the screen you’ll be able to see all the options available for this particular block. For example, I’ve selected the “Full-width image and text” block that comes with our Thrive theme, and on the right-hand side of the screen you can see the options to choose the title and text, upload the image, etc.

Once you start filling in the fields and selecting your options on the right-hand side of the screen, you will see the changes being made in real-time on the left-hand side of the screen.

For example, this is what the “Full-width image and text” block that comes with our Thrive theme looks like once I’ve added in my content.

If you would prefer to see the settings and options for each block in a larger view, just click on the pencil icon above the block to switch the block to editing mode.

This is what editing mode looks like:

To switch back to preview mode, just click the eye icon.

Once you are happy with your block and you can add other blocks to the page. You can add more of our custom blocks, or you can mix in some of the default WordPress blocks.

How to rearrange the blocks

Once you have added your blocks to the page, you can rearrange them if you wish.

To move a block, simply click on it, and then use the arrows on the left-hand side to move it up or down.

Alternately, you can drag and drop the block into place by grabbing the block using the 6 dots in the middle of the arrows.

How to change the background colour of the blocks

Some of our themes come with the option to change the background colour of the blocks.

If a block has the option to change the colour, you will see an option that looks like this:

When you click on it, you’ll be able to preview the colours from your colour scheme that you can select for the background of that block.

If you choose a dark colour for the background, the text colour will automatically be changed to be a lighter colour so it is readable against the background colour.