GutenKit Pro

Build site layouts in Gutenberg

GutenKit Pro extends the WordPress block editor with utilities for pages, landing pages, and full-site layouts. It includes 65+ blocks, 20+ modules, and 900+ pre-designed templates and patterns in Gutenberg’s drag-and-drop editor. Full Site Editing compatibility lets you use its blocks, patterns, and templates in the site editor.

Adjust layouts for various screens

Responsive settings are available inside the editor. Along with mobile, desktop, and tablet views, you can configure six additional custom breakpoints for mobile, desktop, laptop, tablet, wide-screen, and landscape layouts. Adjust blocks at each breakpoint, then review the styling across screen sizes. GutenKit is described as responsive across devices and tested for cross-browser compatibility.

Set up navigation and page structure

The Mega Menu Builder makes multi-level dropdown menus with submenus linked to existing site pages. Flexible containers support full-width layouts and inline editing. Motion effects add animation to blocks, and copy-and-paste styles apply an existing block design to other blocks.

Display posts and dynamic content

The Query Loop Builder displays WordPress posts and filters them by post type, taxonomy, meta query, date query, author, post status, and other criteria. Dynamic Content inserts values such as post tags, site titles, author names, and visitor information through block settings. Set a fallback value for cases where selected data is unavailable.

Display Conditions control block visibility according to configured criteria, so content appears when those conditions are met.

Use templates and manage page assets

Templates and patterns provide starting layouts for page and site projects. GutenKit states that it loads CSS and JavaScript only for blocks used on each page and loads individual icons instead of the entire icon library. It also supports Block API Version 3.

Get started

1. Install and activate GutenKit Pro in your WordPress site.
2. Open the Gutenberg block editor and pick GutenKit blocks, modules, templates, or patterns.
3. Build a layout with flexible containers, then adjust responsive settings for the screens you need.
4. Add dynamic content, query-based displays, menus, or show conditions where appropriate.

Review the layout at the selected breakpoints before publishing the page or site layout.