The Genesis Pro Page Builder plugin is a collection of page-building blocks for the WordPress block editor and will be part of the full Genesis Pro design suite. These 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 Page Builder, 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 Pro migration guide.
Install Genesis Pro Page Builder
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 Pro is installed as a plugin by an automated process initiated from the WP Engine User Portal.
- Log in to the User Portal
- Click Tools
- Select Genesis Pro
- Locate the environment where you want to install Genesis Pro
- Select Install
- Click Enable again on the confirmation window
Genesis 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 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.
Working with Genesis Blocks
Working with the blocks in the Genesis Page Builder 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 Page Builder 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.
Next, click the individual block you’d like to add to the post or page.
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.
/, 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.
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.
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.
Genesis Pro 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.