Building better pages with Gutenberg and Kadence Blocks

Gutenberg is a touchy subject for many WordPress users. But truthfully WordPress was in desperate need of a baked in page builder that could be extended by third party developers. The key here is that Gutenberg is built into WordPress core code. It will be developed and updated as long as it is the default builder for WordPress. Don’t get me wrong, Gutenberg has its fair share of issues and bugs but those will be resolved in time. It’s important to remember Gutenberg is brand new!

One thing that might be frustrating people using Gutenberg is learning how to use the new block-based builder and how to create custom looking pages. However, let me assure you, we can create beautiful, custom, and stable pages with Gutenberg. Let’s dive in.

Extend Gutenberg with Kadence Blocks

Out of the box Gutenberg blocks are solid but frankly pretty basic. The default blocks are great for creating basic pages and post but for custom layouts and elements the default blocks can only take you so far. This is where a third party block plugin comes in and I would suggest Kadence Blocks. Let’s explore why Kadence Blocks is a good option for extending Gutenberg.

  1. There are free and paid options (this is a must for continued development and support)
  2. It is simple yet powerful
  3. It has pre-built templates
  4. It is flexible
  5. It has the most powerful block I’ve every used – the row block!

The magic that Kadence Blocks brings is with the row block. This block allows you to make custom sections with advanced layouts, backgrounds, overlays, dividers, and so much more. The homepage of Kaolin Creative is built entirely with Kadence Blocks!

Let’s take a look at a few examples of the row block below.

Create Amazing Content with Gutenberg

Kadence Blocks – Gutenberg Page Builder Toolkit

Responsive Settings

Kadence Blocks provides a powerful row/layout block that makes building dynamic responsive layouts possible with Gutenberg! Build with powerful backgrounds, overlays, and row dividers.

Custom Heading Fonts

Kadence Blocks provides a unique advanced heading block that allows you to assign any google font right in Gutenberg. Plus you can adjust sizing and control it responsively based on screen size.

1500+ SVG Icons

Kadence Blocks provides a smart icons block that allows you to choose from over 1500 icons. You can set the size and style  then add inline so you’re only ever loading the icons you use on the front end.

Awesome Feature

New Feature

Sed aliquam vulputate magna, in tempor lorem ornare id. Fusce mollis, magna non vestibulum pharetra, lacus nibh pellentesque augue, in tincidunt orci turpis sed odio.

Awesome Feature

Exciting Feature

Sed aliquam vulputate magna, in tempor lorem ornare id. Fusce mollis, magna non vestibulum pharetra, lacus nibh pellentesque augue, in tincidunt orci turpis sed odio.

Awesome Feature

Brilliant Feature

Sed aliquam vulputate magna, in tempor lorem ornare id. Fusce mollis, magna non vestibulum pharetra, lacus nibh pellentesque augue, in tincidunt orci turpis sed odio.

Quisque id lectus vitae tortor ultrices lobortis. Aenean purus nibh, rhoncus sed arcu at, sagittis ullamcorper purus. Sed eu velit elementum, accumsan nunc nec, bibendum tellus. Ut mollis malesuada est, at gravida odio feugiat non. Morbi eget tincidunt erat. Sed neque enim, hendrerit eu neque id, bibendum ornare felis. Ut placerat enim odio, sit amet sollicitudin tortor feugiat ut. Aenean sit amet mi lacus.

Sed mollis elit vel ante maximus placerat. Donec venenatis mollis condimentum. Nulla iaculis tellus ac tortor varius lacinia. Sed ac dui at tellus rhoncus tincidunt sed quis lacus. Nullam commodo sem ut turpis rutrum accumsan. Morbi iaculis aliquet imperdiet. Pellentesque dictum sagittis est, id dapibus leo gravida eget. Curabitur scelerisque arcu sed venenatis fringilla. Nullam cursus lobortis metus, feugiat ultrices tellus mollis vitae.

Quisque id lectus vitae tortor ultrices lobortis. Aenean purus nibh, rhoncus sed arcu at, sagittis ullamcorper purus. Sed eu velit elementum, accumsan nunc nec, bibendum tellus. Ut mollis malesuada est, at gravida odio feugiat non. Morbi eget tincidunt erat. Sed neque enim, hendrerit eu neque id, bibendum ornare felis. Ut placerat enim odio, sit amet sollicitudin tortor feugiat ut. Aenean sit amet mi lacus.

Sed mollis elit vel ante maximus placerat. Donec venenatis mollis condimentum. Nulla iaculis tellus ac tortor varius lacinia. Sed ac dui at tellus rhoncus tincidunt sed quis lacus. Nullam commodo sem ut turpis rutrum accumsan. Morbi iaculis aliquet imperdiet. Pellentesque dictum sagittis est, id dapibus leo gravida eget. Curabitur scelerisque arcu sed venenatis fringilla. Nullam cursus lobortis metus, feugiat ultrices tellus mollis vitae.

Quisque id lectus vitae tortor ultrices lobortis. Aenean purus nibh, rhoncus sed arcu at, sagittis ullamcorper purus. Sed eu velit elementum, accumsan nunc nec, bibendum tellus. Ut mollis malesuada est, at gravida odio feugiat non. Morbi eget tincidunt erat. Sed neque enim, hendrerit eu neque id, bibendum ornare felis. Ut placerat enim odio, sit amet sollicitudin tortor feugiat ut. Aenean sit amet mi lacus.

Sed mollis elit vel ante maximus placerat. Donec venenatis mollis condimentum. Nulla iaculis tellus ac tortor varius lacinia. Sed ac dui at tellus rhoncus tincidunt sed quis lacus. Nullam commodo sem ut turpis rutrum accumsan. Morbi iaculis aliquet imperdiet. Pellentesque dictum sagittis est, id dapibus leo gravida eget. Curabitur scelerisque arcu sed venenatis fringilla. Nullam cursus lobortis metus, feugiat ultrices tellus mollis vitae.


Pretty amazing right!? All the above blocks were inserted from the pre-built templates using the Kadence Blocks row block. Notice how you can easily create full width sections with custom backgrounds, layouts, columns, tabs, etc. And the best part? It’s all built within the default WordPress builder. Another huge plus? It is all theme independent so you can start building pages like this on any theme!

This blog post isn’t an in depth tutorial on using Kadence Blocks but rather to let you know there are powerful options to turn Gutenberg into the powerful page builder it was meant to be.

If you have any questions or need help implementing Gutenberg on your own website feel free to contact us!

Built with Kadence Blocks and GeneratePress.

Leave a Comment