Adding an Atomic Blocks layout to your page

You can easily build a great looking homepage for your site by adding an Atomic Blocks layout to your page. See the demo pages.

First you need to choose the page layout you want to use.

Then add a new page or post to your site by clicking: New > Page

Applying a template to your new page

Click the Layouts button at the top of the screen.

You then see the layout selector screen

We want the middle tab, the Layouts tab

The Layouts tab shows full page layouts. The Sections tab shows individual page sections. Such as a testimonials section and a hero page header section.

Just click the layout you want to use

After you click a layout, WordPress will build your page from that template.

Use a wide page template, when you add an Atomic Blocks Layout to your page

If you’re using one of the most modern StudioPress themes, you may have a blocks template.

1. Look under the Page Attributes, Templates section.
2. If you don’t have a Blocks page template. Look below the post editor for the Layout Settings. Make sure you use a layout that does not have sidebars.

What’s next?

Your web page should now look just like the layout template you selected. But you still need to replace the text, images and links etc.

Editing the text

Double click a word or triple click a sentence to select it. Then type your own text , to replace the template’s text with yours.

Editing the button text, and link

• Triple click the button text to select it.
• Type your own text to replace the button text.
• Type or paste the URL (web page link) in the box below the button.

Replacing the template images with your own images

We will replace two types of images…

• Images in image blocks.
• Background images.

First, click the image and look to see if a pencil icon appears.

If you do see a pencil icon, click the pencil icon to open the replace image dialogue. Then select a new image, replacing the image in the template with your own image.

Replacing background images in Atomic Blocks layouts

If you click an image and do not see the pencil icon, the image is probably a background image.

To replace a background image in an Atomic Blocks template

1. Click the image (NOT the text!)
2. Look to see if there is a pencil icon. If there is no pencil icon…
3. Find the background options in the post editor sidebar. Click the down arrow to open the dialogue and show the settings.
4. Click “Select image”. You can choose a replacement image from your image library, or upload a new image.

Recommended image sizes

• Hero Header images 1600×900 px.
• Large square images 1024×1024 px.
• Small square images 600×600 px.

These image sizes are just a guide. If you find image sizes that work better in your layout, use them.

Always remember to save your work!

After you publish your page, the button changes to an update button. Make sure you click update to save any changes you make to your page.

What do the Atomic Blocks page Layouts look like?

I have built some pages using Atomic Blocks page Layouts. You can see them here.