Have you ever wanted a faster way to build customized, professional websites? Look no further than Genesis Blocks and Genesis Custom Blocks.
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.
Table of Contents
- What are Genesis Blocks?
- Features of Genesis Blocks
- What are Genesis Custom Blocks?
- How to Use Genesis Custom Blocks
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:
- Layouts block.
- Call to action block.
- Button block.
- Sharing block.
- Spacer block.
You can view some of the other blocks in the image below.
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.
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.
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.
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.
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:
- Genesis Custom Blocks (Free).
- 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.
In the Block Builder, enter a name for your custom block.
2. Design and configure the block.
Add input fields using the “+” sign and configure the input settings in the right-hand sidebar.
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.
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.
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.
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.
