Gutenberg Blocks by Kadence Blocks – Page Builder Features

Description

This plugin adds custom blocks and options to extend Gutenberg’s editing capabilities so you can create custom layouts and more engaging content. This plugin is meant to be a toolkit that makes the WordPress block editor capable of creating content usually only possible through popular page builder plugins. For example, with the Kadence Row Layout Block you can better control columns for different screen sizes plus it gives you full row editing tools like padding, backgrounds, overlays with gradients, vertical-align and much more.

Try Kadence Blocks

Demo Testing

Custom Blocks Include

  • Row Layout – demo
  • Advanced Gallery – demo
  • Form – demo
  • Advanced Heading – demo
  • Advanced Button – demo
  • Tabs – demo
  • Accordion – demo
  • Testimonials – demo
  • Icon – demo
  • Spacer / Divider – demo
  • Info Box – demo
  • Icon List – demo

Video Tutorial

Key Block Features

The Row Layout block can have 1-6 columns, and any other blocks can be nested inside. So as a single column block, it’s a robust wrapper because you can create very custom backgrounds and define padding, margin, and dividers both for desktop and mobile layouts.

The Advanced Gallery block allows you to add photo galleries in a masonry, grid, carousel, fluid width carousel or slider style. Enjoy four different optional caption locations, each with options to style font, background, etc. Within each gallery, you can define the thumbnail ratio, add an image filter, set a border radius, and add box shadows. You can make each image a custom link to another page or website. Or you can easily enable a built-in lightbox. Plus you can select which image size to use for your thumbnails, and lightbox image for ultimate performance.

The Advanced Heading block provides full control for your headings, including font family (all google fonts), font weight, font style, font size (with tablet and mobile options), line height, color, letter spacing, alignment, and margin. Plus you can define part of the heading as a highlight and style it uniquely.

The Advanced Button block allows you to have up to five buttons side by side. You can control each individually, both with static and hover styles, and each button can have an added icon next to the text. This block even supports video links that open in a popup all built in!

The Tabs block is highly customizable with unique tab title settings for spacing, color, icons, and text. You can set up vertical or horizontal tabs, plus there are options to switch to an accordion setup for mobile. Each tab content is an empty canvas able to contain any other block within it.

The Testimonial block has four built-in preset styles to choose from and allows you to add a carousel or grid of testimonials right into your page or post. You can then customize the colors, fonts, size, border, and shadow to your liking.

The Icon block enables you to add an SVG icon right into your page. There are over 1500 icons to choose from, and with each, you can control the size, color, background, border and add a link.

The Spacer / Divider block allows you to optionally show a divider inside an area with a drag-able height. The divider has style options allowing you to set the width, height, color, line style, and opacity.

The Info Box Block is a box link containing an icon or image and optionally a title, description and “learn more” text. Configure padding, fonts, backgrounds, borders, and style static and hover colors even show a box shadow.

Editor Max Width

One of the challenges with creating column and row layouts in Gutenberg is the width of the editor in your admin. By default, Gutenberg uses a 650px max width for the content editor. When adding text to a sidebar template, this works great, as the max width in the editor is comparable to the content width when using a sidebar. However, for content going into pages where you don’t have a sidebar, it is a poor representation of what you are going to get on the front end of your site. Not to mention, it makes for a cramped space to work in if you are trying to manage a row with three columns.

In an effort to create an easier way to use Gutenberg in a more “page building experience” we created a simple method that allows you to change the default max width for pages and posts, as well as individually through a page by page setting.

Source files

github

Support

We are happy to help as best we can with questions! Please use the support forums.

Screenshots

  • Initial Row Layout editing

  • Example single column Row Layout with gradient Background overlay

  • Three column Row Layout example

  • Icon Block example

  • Advanced Button example

  • Editor Width settings inside Gutenberg

Blocks

This plugin provides 16 blocks.


  • Row Layout

  • Section

  • Advanced Button

  • Advanced Heading

  • Tabs

  • Spacer/Divider

  • Info Box

  • Icon

  • Accordion

  • Icon List

  • Testimonials

  • Advanced Gallery

  • Form

  • Tab

  • Pane

  • Table of Contents

Installation

Install the plugin into the /wp-content/plugins/ folder, and activate it.

Reviews

Very Useful

nikisp
January 9, 2021
This is a very useful block builder that has many tools you can explore and add to your site! Perfect!

Very useful to create nice clean content

themike007
December 28, 2020
No fancy stuff which no one needs. Just solid blocks for better and cleaner content creation.

great plugin

Russell Marwitz
December 9, 2020
I use this plugin with Kadence theme. I wish I had known about Kadence sooner as I have paid for a few other options over the years. I highly recommend Kadence products over the current page builders. Ease of use and flexibility is great! Keep it up Kadence!

Precise

mvxweb
November 3, 2020
As we venture into Gutenberg layouts (coming from E and BB), we could only hope that what we see in the backend is the same as what we would see in the frontend. Every Gutenberg user knows this struggle.

But with Kadence blocks, we’re as confident as if we used E or similar page builders in the back end.

It’s as precise as we could get in the front page.

Yes, it needs some CSS tweaks but not not all the time. Notably, only in complicated overlays.

The ONLY blocks I use

centechautomation
October 5, 2020
After reviewing a good number of block plugins, I tested three, including Kadence Blocks. Once I did, it was the easy winner. It is intuitive yet gives you maximum control over the appearance. I was looking to build the site with only ONE block plugin to keep my site lightweight. Thanks for a great product.

Absolutely BEST Block Plugin Available

Janhooper
September 30, 2020
Kadence Blocks is the BEST design tool for WordPress. Try using the pre-designed blocks. Using the pre-designed blocks is the easiest way to make an absolutely beautiful webpage. There are so many slick pre-designed blocks to choose from. You may not even know they’re there. I suggest going to YouTube and searching under Kadence Blocks and you’ll find several great videos that go into detail about how to find the pre-designed blocks and how to use them.

Kadence also has a new theme that should be available through WordPress in just a week or two. I downloaded it and loaded it onto a new site and it works beautifully. It’s fast too.

Support is terrific, even for the free version.

I use both the Kadence Blocks plug in and the newest Kadence Theme. Strongly recommend them both.