Genesis Blocks & Genesis Custom Blocks Explained

Maddy Osman
Maddy Osman

Published:

Have you ever wanted a faster way to build customized, professional websites? Look no further than Genesis Blocks and Genesis Custom Blocks.

genesis blocks represented by block toys

These cutting-edge tools have taken the WordPress ecosystem by storm. They offer an unprecedented level of design freedom and efficiency. Genesis plugins give users the power to expand the functionality of the WordPress Gutenberg editor.

In this article, we'll unravel the magic behind Genesis Blocks and Genesis Custom Blocks. That includes shedding light on their key features and highlighting their benefits. You'll also learn practical tips for harnessing their full potential.

Grow Your Business With HubSpot's Tools for WordPress Websites

Table of Contents

What are Genesis Blocks?

Genesis Blocks is a library of blocks, sections, and layouts that improves the default editor in WordPress. This allows you to customize a WordPress site without having to code.

Genesis Blocks is available in two versions. We’ll explore both below.

Genesis Blocks (Free)

Genesis Blocks is the free version available on WordPress.org. This version offers 15 dedicated blocks, 27 page sections, and nine page layouts.

Genesis Blocks Pro (Paid)

Genesis Blocks Pro is a paid plugin. It comes automatically with a Genesis Pro subscription priced at $30 per month.

Pro features include everything in the free plugin plus two premium block types. There's also reusable blocks functionality, blocks permissions, and extra page layouts.

The Genesis Pro subscription also includes access to other products in the Genesis Product Suite. Here, you'll find premium themes built on the Genesis Framework used by over 273,327 live websites.

Features of Genesis Blocks

There’s no limit to what you can create with the WordPress Genesis Blocks plugin. This tool provides advanced block types and features that make it easy to design a website.

Let’s explore everything Genesis Blocks offers in the free and pro versions.

Blocks

The free version of the Genesis Blocks plugin supports 15 different types of blocks. Here are the five most notable blocks:

  1. Layouts block.
  2. Call to action block.
  3. Button block.
  4. Sharing block.
  5. Spacer block.

You can view some of the other blocks in the image below.

The free version of the Genesis Blocks plugin supports 15 different types of blocks.

Image Source

The Genesis Blocks Pro plugin includes the Device Mockup and Portfolio blocks. The plugin also adds the ability to create reusable blocks and assign block permissions.

Sections

The Genesis Blocks Pro plugin includes the Device Mockup and Portfolio blocks. The plugin also adds the ability to create reusable blocks and assign block permissions.

Sections are small groups of pre-configured blocks you can add to posts and pages.

Image Source

For example, if you want to design a testimonials section for your site, you need a combination of columns, containers, headings, paragraphs, and images. But when you design with Genesis Blocks, you can add a ready-to-use testimonials section in just a few clicks.

Genesis Blocks offers nine pre-designed sections. Genesis Blocks Pro adds over 150 pre-built sections.

Layouts

Layouts are groups of pre-designed sections that make it easy to design web pages, as they give you a basic foundation for your site. Just add a layout block to a page, customize it, and publish it to your website.

Layouts are groups of pre-designed sections that make it easy to design web pages

Image Source

The free version of Genesis Blocks offers nine unique layouts for different pages, such as the profile, about, home, and contact us pages. The premium version adds several more unique full-page layout designs to that list.

Collections

Collections are groups of page sections and block layouts. These elements share similar color schemes and design aesthetics. They help you create cohesive designs across a website using themed components.

Collections are groups of page sections and block layouts that share similar color schemes or design aesthetics.

Image Source

Genesis Blocks includes a default collection called Slate. Genesis Blocks Pro gives you access to six more collections. You can use them to design a website in a few hours. Add them to your site, customize the content, and you’re good to go.

Now that we have a feel for Genesis Blocks, let’s look at the Genesis Custom Blocks plugin.

Check out more in the article on The 12 Best WordPress Blocks Plugins [+ Which One Is Right for You].

What are Genesis Custom Blocks?

Genesis Custom Blocks is a WordPress plugin that makes it easy to build custom blocks for Gutenberg. The standard approach to building custom blocks in WordPress requires familiarity with React.js and the WordPress Block API.


Image Source

In contrast, Genesis Custom Blocks lets you add extra blocks to WordPress using HTML, CSS, and the default WordPress block editor. You can also mix in some PHP if you want to add logic to your custom blocks.

Genesis Custom Blocks is available in two versions:

  1. Genesis Custom Blocks (Free).
  2. Genesis Custom Blocks Pro (Paid).

Genesis Custom Blocks helps you build blocks using three components — fields, functions, and filters. It supports 13 field types that allow you to add different input fields such as checkbox, number, and text area.

The Genesis Custom Blocks Pro version offers six extra fields, such as user, taxonomy, and post. It also lets you import and export custom blocks to reuse across multiple websites.

How to Use Genesis Custom Blocks

Here’s how you can use Genesis Custom Blocks to build a basic CTA block:

1. Add a new custom block.

Navigate to Custom Blocks > Add New in the WordPress admin.

how to use custom blocks

Image Source

In the Block Builder, enter a name for your custom block.

building a custom block step by step

Image Source

2. Design and configure the block.

Add input fields using the “+” sign and configure the input settings in the right-hand sidebar.

building a custom block step by step

Image Source

3. Build the block template.

Now, click on Template Editor to start building the block and add your custom HTML to add structure to the block in the Markup section.

Then, click CSS and style your block using CSS.

building a custom block step by step

Image Source

Click on Editor Preview to view how the block will appear in the WordPress editor. Add sample content in the input fields to visualize the content.

building a custom block step by step

Image Source

Click Save Draft and preview the block as it would appear on the front end using the Front-end Preview option.

4. Save and publish your custom block.

Click Publish to save the block in your WordPress block library.

building a custom block step by step

Image Source

Using Genesis Blocks and Genesis Custom Blocks

Genesis Blocks and Genesis Custom Blocks are powerful tools for customizing a WordPress website.

While the free versions of these plugins are impressive on their own, the pro versions offer even more advanced features for those. With these tools, the possibilities for creating a unique and dynamic website are endless.

Editor's note: This post was originally published in December 2021 and has been updated for comprehensiveness.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO