• Menu
  • Skip to right header navigation
  • Skip to main content
  • Skip to primary sidebar

Before Header

Why Genesis is the Foundation of Any Smart WordPress Design ↴

Flagship Content

Web design tutorials for service business owners.

  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page
  • Search
  • Home
  • Start Here
  • Content
    • About
    • Flagship Content: How is it different to cornerstone content?
    • Homepage Content Blueprint
    • Content needed for a Service Business website
  • DIY Page Layouts
    • Start Here
    • Atomic Blocks Layouts
      • View The Layouts
      • Using Layouts
      • Adding blocks to an Atomic Blocks layout
      • Tips For Using Layouts
      • Problems and Solutions
    • Examples of Atomic Blocks
    • List of Atomic Blocks
    • List of WordPress Blocks
    • Block Navigation
    • Eye Candy
    • Tips for New Users
    • Blocks that Serve a Specific Purpose
  • Navigator Page

Atomic Blocks Newbie Tutorial

WordPress has many blocks already built in. The Atomic Blocks plugin adds more blocks that are especially useful for service businesses.

You are here: Home / Uncategorized / Atomic Blocks Newbie Tutorial

Who is this Atomic Blocks newbie tutorial for…

If you use a StudioPress theme, or any other theme for that matter, this Atomic Blocks newbie tutorial is for you.

I built this web page for StudioPress users who want to stop using widgetized homepages. And start using the new blocks based homepage layouts.

Learn the basics of the WordPress Block Editor.

You can download this video free from Vimeo.

Download Video

What’s covered in this Atomic Blocks newbie tutorial?

  • How do I get the blocks on to my page?
  • Where do I find the settings for blocks?
  • The down arrows, and why you must click them.
  • If you can’t select a block, use the Block Navigation button.
  • Examples of live blocks on a real web page.
  • A list of Atomic Blocks to jog your memory.
  • The styling depends on your theme.

Skill level

When StudioPress customers login to my.studiopress.com. They can watch the basic wp101 videos. To follow along with this video I’ll expect you to have already watched those basic videos. Or be at a similar skill level.

If you’re a competent WordPress user, you’re ready to follow my Atomic Blocks newbie tutorial.

How do I get the blocks onto my page?

Start writing or type / to choose a block.

Where you see the text above, just place your cursor in the page and write.

The forward slash /

Searching for Atomic Blocks.
Type a forward slash to see these options.

Or hover your cursor to the left of the text and click the Add Block plus icon.

Adding a new block in our Atomic Blocks newbie tutorial page.

Clicking the Add Block plus icon gives you the most options.

Clicking the plus icon opens the most used blocks dialogue.
Clicking the plus icon opens the most used blocks dialogue.

Close the most used “down arrow” to show the other block options.

Click the Atomic Blocks tab down arrow. Then carry on with this Atomic Blocks newbie tutorial.

In this Atomic Blocks newbie tutorial we’re using the Atomic Blocks tab, so click that down arrow to see all of the Atomic Blocks.

After opening the Atomic Blocks tab, click any icon to place one of the blocks on your page. Such as the Atomic Blocks Call To Action block.

The Call To Action icon in the Atomic Blocks tab.
The Call To Action icon in the Atomic Blocks tab.

Where do I find settings for blocks?

When you select any block, and make it active, a toolbar appears above the block.

Using the block toolbar in this atomic Blocks newbie tutorial.
The toolbar displays above any selected block.

The main block settings are in the post editor sidebar. Make sure you have the Block tab selected. NOT the Document tab..

The Atomic Blocks testimonial block settings.

The Down arrows and why you must click (open) them

The two screenshots below both show the settings for the paragraph block. The first screenshot has the down arrows closed. The second screenshots has the down arrows open.

If you don’t open the down arrows, you won’t see all of the options.

It’s important that anyone following this Atomic Blocks newbie tutorial remembers to click the down arrows to reveal all of the extra options available.

Block settings down arrows closed.
The down arrows are closed. So you don’t see all of the options and settings.
Block settings down arrows open.
The down arrows are open so you can see all of the settings and options that are available for the paragraph block.

If you can’t select a block, use the Block Navigation button

Most blocks are easy to select. Just double click to select a word, or triple click to select a whole paragraph.

But container and column blocks can be more difficult to select. So you might need the Block Navigation button.

First select a block in your page…

I selected this paragraph text then clicked the block navigation button.
Selecting a block first helps narrow down your search when using the block navigation button.

Then click the Block Navigation button.

The block navigation button
The Block Navigation button is in the top left hand cornet of the post editor.

You then see a tree structure of either…

  • your whole page
  • or the container block you selected in the previous step

The image below shows the tree structure of a container block and it’s contents. You can click any icon or element to see the settings for that specific part of your layout.

Click the block navigation button to show a tree structure of the container, columns and blocks.
Click any of these icons or elements to open the settings dialogue for that specific page element.

Without using the Block Navigation button it can be very difficult to select specific container and column blocks. And if you can’t select the container or column you need, you can’t change it’s settings.


Some extra Atomic Blocks newbie tutorial tips…

Examples of live blocks on a real web page

I made a web page where you can see all of the Atomic Blocks in use. Click here to see them.

Example Blocks

A list of Atomic Blocks to jog your memory

When you’ve used blocks for a while you’ll know what each block does. You’ll just need a quick reference guide, you’ll find that here.

Quick List

The styling depends on your theme

Some of the Atomic Blocks, such as the Call To Action block, look the same in most themes. Other blocks, such as the pull quote block can look very different in one theme to another.

Did you enjoy this Atomic Blocks newbie tutorial?

If you like Atomic Blocks, you’ll love using Atomic Blocks Layouts. You can see some Atomic Blocks Layouts here.

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Get Premium WordPress ThemesChoose Your Theme

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Get Genesis Framework & StudioPress Themes free.Free themes with hosting

High Quality Hosting

Filed Under: Uncategorized

Previous Post: « Block Navigation: Selecting and navigating container, columns & pricing blocks
Next Post: Blocks that add visual appeal to your page »

Site Footer

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Copyright © 2023 · Mai Law Pro on Genesis Framework · WordPress · Log in