Genesis Blocks Pro

Genesis Blocks Pro is a collection of page-building blocks for the WordPress block editor and included in the Genesis Pro design suite.

The Genesis Blocks Pro functionality expands upon the already extensive and free Genesis Blocks library. These additional Genesis page building blocks give you the creative control you need to build dynamic pages that increase engagement and get results for your business. With Genesis Blocks Pro, you can create and launch any kind of site you want – all without knowing how to code.

NOTE: If you used Atomic Blocks Pro in the past, be sure to see our Genesis Blocks Pro migration guide.


Install Genesis Blocks Pro

Before beginning, we recommend copying your live website to a Staging or Development environment. It’s best to change design elements in a testing environment where your active website users will not see the “under construction” phase!

Genesis Blocks Pro is installed as a plugin by an automated process initiated from the WP Engine User Portal.

  1. Log in to the User Portal
  2. Click Tools
  3. Select Genesis Pro
Genesis Pro in the User Portal
  1. Locate the environment where you want to install Genesis Pro
  2. Select Install
  3. Click Enable again on the confirmation window
Genesis Pro installation link in the User Portal

Genesis Blocks Pro will automatically be installed and activated on the selected environment within a few minutes.


Confirm Installation and Activation

To ensure the plugin was successfully installed and activated on your site, log into your WordPress admin dashboard (wp-admin) and go to Plugins > Installed Plugins.

If you see the Genesis Blocks Pro plugin listed but for some reason is not activated, click the Activate link under the plugin name.

Once the plugin is successfully activated you will see the Page Builder option in the WordPress admin menu on the left side of the screen.

Genesis Pro Page Builder in the  WordPress admin

Working with Blocks

Working with the blocks in the Genesis Blocks Pro is just like working with the default WordPress blocks. Blocks offer a quick way to add various types of content to your posts and pages.

Add a Block to a Post or Page

To get started, click any Add block + button and then scroll down and click on the Genesis Blocks Pro option to reveal all the available blocks in this plugin.

You can also use the search box to quickly find and add the block you’d like to use.

The Genesis Blocks Pro block directory can be found here.

Add a Page Builder block in the  WordPress admin

Next, click the individual block you’d like to add to the post or page.

Select a Page Builder block in the WordPress admin

Another easy way to add a block to a post or page is to press Enter to move to a new line and then press the / key to quickly insert a new block.

After pressing /, you’ll see a list of your most recently used blocks that you can choose from, or you can start typing the name of the block.

In the example below, we typed /post to help us quickly locate the Post and Page Grid block.

Search for a Page Builder block in the WordPress admin

Easy Block Navigation

When you have a large number of blocks on the page and several of those blocks are nested within others, it can be challenging to click directly on the block you want to edit.

To help you locate individual blocks easily, click the Block Navigation button at the top of the editor to reveal a list of all the blocks that have been added to the page. 

Use the Block Navigation to locate a block added to a post or page

To reveal all the blocks that are nested within another, click on the parent block.


Change Block Settings

Each block comes with its own settings which can be found in the Inspector. The Inspector is a sidebar panel on the right that shows when you click on any block to bring it into focus.

The settings are unique to each block. Even if you have two of the same block on the same page, the settings applied to a block will only apply to the block in focus. This allows you to create more dynamic layouts because you can reuse the same blocks but with different settings.

In the example below, we’ve added the AB Post and Page Grid block so the Inspector shows options for customizing the grid settings, grid content, and grid markup. Clicking the options will reveal all the settings available for each option.

Use the Block Settings menu to adjust all options for the block

Resources

The Genesis Pro design suite will continue to expand and add features including an ever-growing list of blocks, as well as the ability to create custom blocks.

For more information covering each block, customization and troubleshooting, see the Genesis Pro manual here.


NEXT STEP: Getting started with the Genesis framework and StudioPress themes

Create custom blocks with ease.

Massively reduce the amount and complexity of code needed to create powerful custom blocks for WordPress with Genesis Custom Blocks.