Wordpress plugins
Kadence Blocks – Gutenberg Page Builder Toolkit

Kadence Blocks – Gutenberg Page Builder Toolkit

Version : 1.1.2
Tested up to : 4.9.8
Number of download : 20
Average rating : 5 / 5 on 11 votes 11 votes, 5 avg.rating

Screenshots

Kadence Blocks – Gutenberg Page Builder Toolkit
Kadence Blocks – Gutenberg Page Builder Toolkit
Kadence Blocks – Gutenberg Page Builder Toolkit
Kadence Blocks – Gutenberg Page Builder Toolkit

This plugin adds custom blocks to extend Gutenberg’s editing capabilities to better build custom layouts and make Gutenberg able to do more closely what popular page builders can do. 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 Heading – demo Advanced Button – demo Tabs – demo Icon – demo Spacer / Divider – demo 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 powerful wrapper because you can create very custom backgrounds and define padding and margin both for desktop and mobile layouts. The Advanced Heading block provides full control for your heading, including font family (all google fonts), font weight, font style, font size (with tablet and mobile control), line height, color, letter spacing, alignment and margin. The Advanced Button block allows you to have up to 5 buttons side by side. Plus, you can control each individually, both with static and hover styles, and each button can have an added icon next to the text. 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 Icon block allows you to add an SVG icon right into you 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. Editor Max Width One of the challenges with creating custom 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 actually 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 way that allows you to change the default max width for pages and for posts as well as individually change that through a page by page setting. Less Margin Another challenge with Gutenberg is not having an exact representation of how your content is going to look on the font end of your site. Gutenberg does not quite give you this becuase it’s not a front end editor and therefor doesn’t include all the css that your theme and other plugins add to style your content. Much of this can be reconciled as theme authors add support for Gutenberg and add key styling from the theme into Gutenberg. We’ve already done this with our themes and it greatly improves the editing experience. But Gutenberg adds in spacing between blocks that simply doesn’t exist on the front end. This spacing can negatively effect the way you design your content because it doesn’t represent how your page will look on the font end of your site. This is especially true as you start to use Gutenberg for more advanced page building. We’ve added in an optional less margin setting that removes a lot of this extra spacing to give a more accurate representation of how your content will look on the front end. We think it helps a great deal with the overall experience in Gutenberg and encourage you to try it out. Source files github Support We are happy to help as best we can with questions! Please use the support forums.

Download now