Atomic Blocks is a free collection of page-building blocks for the WordPress block editor. These blocks give you the creative control you need to build dynamic pages that increase engagement and get results for your business. With Atomic Blocks, you can create and launch any kind of site you want – all without knowing how to code.
Genesis Pro Page Builder is a paid upgrade that now expands on the already extensive library of blocks, with new blocks continually rolling out. Genesis Pro also includes the ability to control your creative process even further through the creation of custom reusable blocks.
Atomic Blocks Requirements
Atomic Blocks requires WordPress 5.0+ and the Gutenberg block editor enabled.
Any properly developed WordPress theme will work with Atomic Blocks. If you’re looking for a high-quality theme, check out our StudioPress themes. Or get the Genesis Framework & 35+ StudioPress theme packages free with a WP Engine plan.
Atomic Blocks as a Page Builder
Atomic Blocks adds a useful collection of page-building blocks like calls-to-action, post and page grids, pricing tables, customizable buttons, and more. You can see the growing list of blocks in the section below.
With the powerful Layouts Block, you can easily add beautiful pre-designed sections and full-page layouts to your pages. Just choose the section or layout that matches the goal of the page you’re creating and then customize it according to your needs.
- Accordion Block: Add an accordion text toggle with a title and description. View block demo.
- Advanced Columns Block: Build custom, full-page layouts for your posts and pages. View block demo.
- Author Profile Block: Add a user profile box to your page that includes an avatar, name, title, profile text, and social media links. View block demo.
- Button Block: Add a customizable button to your posts or pages. View block demo.
- Call-to-Action Block: Add a compact, wide, or full-width call-to-action section to your site. View block demo.
- Container Block: Gather several individual blocks into a parent container, which helps you create differently styled sections of content on your posts and pages. View block demo.
- Drop Cap Block: Add a stylized drop cap letter to the beginning of a paragraph. View block demo.
- Layouts Block: Add pre-designed sections and layouts to your posts and pages. View block demo.
- Newsletter Block: Quickly add Mailchimp email subscription forms to a post or page. View block demo.
- Notice Block: Add an inline notice box to your post or page which can be used to highlight some information or draw attention to a special message. View block demo.
- Post and Page Grid Block: Add a beautiful list of posts or pages in either a grid-style or list-style format. It includes the option to display featured images, author names, dates, excerpts, and continue reading links. View block demo.
- Pricing Table Block: Build beautiful, dynamic, responsive pricing tables. View block demo.
- Sharing Block: Add social media sharing icons anywhere on your post or page. View block demo.
- Spacer Block: Add an adjustable spacer between your blocks with an optional divider that includes styling options to change the height, color and style of divider. View block demo.
- Testimonial Block: Add a testimonial box to your page with testimonial text, a citation name, a title, and an avatar. View block demo.
Install Atomic Blocks
The quickest way to use Atomic Blocks is to install it from your WordPress admin. Go to Plugins > Add New, search for Atomic Blocks, and then install it.
Add a Block
Click the Add block + button and then scroll down and click on the Atomic Blocks option to reveal all the available blocks.
You can also use the search box to quickly find and add the block you’d like to use.
Each block comes with its own settings which can be found in the sidebar panel that appears when you click on the block. As seen in the example below, there are several different options that can be configured for each block.
These settings are unique to each block which means that even if a page includes two of the same block, the settings will only be applied to the block in focus. This allows you to reuse the same blocks within a post or page, but apply different settings to them so you can create more dynamic layouts.
Some blocks also have inline alignment and formatting options available in the upper left corner of the block itself, as seen in the example below. Similarly, these options are unique to each block which means that even if a page includes two of the same block, the settings will only be applied to the block in focus.