About Kadence Blocks – Gutenberg Blocks for 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....

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.

Performance

Memory Usage

Average memory usage is1016.8 KB
This is more than85%plugins

Page Speed

Average page loading time is increased by 0.29 s
This is faster than58%plugins

Speed Test Benchmark Learn more how we collect the data

Before plugin activation
After plugin activation

Benchmark

Change

Average Change

+ 0.29s

/(front page)

- 0.09s

/wp-admin/edit-comments.php

+ 0.01s

/wp-admin/edit-tags.php?taxonomy=category

- 0s

/wp-admin/edit.php

+ 0.01s

/wp-admin/index.php

- 0.06s

/wp-admin/media-new.php

- 0.09s

/wp-admin/options-discussion.php

- 0s

/wp-admin/options-writing.php

+ 0.04s

/wp-admin/post-new.php

+ 1.92s

/wp-admin/post-new.php?post_type=page

+ 1.77s

/wp-admin/upload.php

- 0.34s

MoreLess

Memory Usage Benchmark Learn more how we collect the data

Before plugin activation
After plugin activation

Benchmark

Change

Average Change

+ 1016.8KB

/ (front page)

+ 18.6KB

/wp-admin/edit-comments.php

+ 25.22KB

/wp-admin/edit-tags.php?taxonomy=category

+ 25.36KB

/wp-admin/edit.php

+ 25.44KB

/wp-admin/index.php

+ 25.39KB

/wp-admin/media-new.php

+ 25.25KB

/wp-admin/options-discussion.php

+ 33.28KB

/wp-admin/options-writing.php

+ 30.7KB

/wp-admin/post-new.php

+ 680.74KB

/wp-admin/post-new.php?post_type=page

+ 482.89KB

/wp-admin/upload.php

+ 25.22KB

MoreLess

User Rating of Kadence Blocks – Gutenberg Blocks for Page Builder Features from WP Hive Users

Overall Quality

Measures the overall quality

Ease of Use

How easy it is to use?

Quality of Support

Satisfied or not?

Value for Money

Is it good bang for the buck?

Kadence Blocks – Gutenberg Blocks for Page Builder Features

Version : 2.4.13

Want to write review?

The plugin have some issues.

7M

200K

4 years

0.0%

23

126

00

00