GutenKit Pro for Full Site Design in Gutenberg

Build pages and website layouts with Gutenberg

GutenKit Pro adds page-building tools to the WordPress block editor for pages, landing pages, and full-website designs. It includes 65+ blocks, 20+ modules, and more than 900 pre-designed templates and patterns. Its blocks, templates, and patterns work with Full Site Editing, so you can use them in the site editor as well as when editing pages.

The drag-and-drop process, flexible containers, responsive controls, and reusable styles help you shape complex layouts in Gutenberg without coding expertise.

Responsive breakpoints adapt layouts to screens

Set responsive breakpoints inside the Gutenberg editor as you styling. Alongside mobile, desktop, and tablet views, the system supports six additional custom breakpoints for mobile, desktop, laptop, tablet, wide-screen, and landscape layouts. Adjust blocks for the screen sizes you need, then review the layout across devices. GutenKit is described as responsive across devices and tested for cross-browser compatibility.

Containers and menus organize page structure

The full-width flexible container supports inline editing for page sections. Containers can use full-width or boxed layouts, with settings for background and padding. Motion effects and parallax styles add movement to blocks, while copy-and-paste styles let you apply an existing design treatment to other blocks.

The Mega Menu Builder creates multi-level dropdown menus with submenus. Add submenu entries and link them to existing site pages, then create the menu in the block editor.

Query filters and dynamic content draw on WordPress data

The Query Loop Builder displays WordPress posts based on criteria such as post type, taxonomy, meta query, date query, author, and post status. Use its visual controls to choose the content to show without writing code.

Dynamic Content can insert post tags, site titles, author names, and visitor information through a block’s settings. Set a fallback value to show default content when the selected data is unavailable. The Display Conditions module controls block visibility according to configured criteria.

Templates and selective assets support page building

Templates and patterns offer starting points for page and website projects. For asset loading, GutenKit loads CSS and JavaScript for the blocks used on each page and loads individual icons instead of the entire icon library. It supports Block API Version 3, locally loaded Google Fonts, and a codebase with no jQuery dependency.

Get started in the block editor

1. Install and activate GutenKit Pro on your WordPress site.
2. Open the Gutenberg block editor and choose 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.

Refine the design in the Gutenberg editor, review the responsive breakpoints, and publish the page or site layout.