Grids vs Gutenberg Essential Blocks – Page Builder for Gutenberg Blocks & Patterns

Bring your creative visions to life with Essential Blocks for Gutenberg, the ultimate Gutenberg blocks library for the WordPress default editor! Enhance your web-building experience with the essential Gutenberg extensions’ 70+ unique blocks and the brand‑new AI feature for image generating & content writing. Add power to the block editor using our easy-to-use blocks, which are designed to make your next WordPress page or post design easier and prettier than ever before. Plus, AI helps you generate rich, high‑quality content instantly with just a few keywords. DESIGN OUTSTANDING WEB PAGES WITH ADVANCED & ESSENTIAL GUTENBERG BLOCKS LIBRARY! See It In Action: Check out all the interactive block demos in one place. 🤖 WRITE WITH AI – POST/PAGE CONTENT INSTANTLY Generate engaging content for pages and posts in seconds with the Write With AI feature of Essential Blocks. Simply enter a few keywords and submit your prompt. Our built‑in AI engine will create rich, high-quality content instantly. ✨ READY AI CONTENT FOR RICH TEXT INPUT Get AI-generated content in one click for all your rich text input blocks. With this global AI feature, you can automatically create, modify, or personalize your text content fields for any Gutenberg block. 🦾 GENERATE IMAGE WITH AI IN WORDPRESS Directly from your Gutenberg editor, generate AI images with your given prompt within a few seconds. To get the best output, customize options like AI model, image type, sizes, etc. Create AI images for Gutenberg blocks in one click. 🧱 BLOCK PLUGIN WITH FULL CUSTOMIZATION Each Gutenberg block comes with a bunch of options to control every possible aspect of your website design on the block editor. You can design your page with endless customization options using this amazing Gutenberg blocks plugin. 🌐 GUTENBERG BLOCKS GLOBAL CONTROL, COLORS & TYPOGRAPHY Now, any block can be saved with customized styling. You can also personalize the colors and typography throughout your entire website. This boosts efficiency, so you do not have to recreate the same styling repeatedly on all pages or posts. ⚡ LIGHT WEIGHT & INSTANT LOADING No extra resources or messy code to slow down your website. Optimized for super-fast loading and instant live editing. 🈸 WPML CERTIFIED GUTENBERG PLUGIN Translate Gutenberg blocks with WPML in your chosen language & offer a multilingual experience to your visitors. ⚙️ GUTENBERG BLOCKS MODULAR CONTROL Enable and disable individual blocks to make your page load faster and smoother. You can deactivate unnecessary blocks to keep the site lightweight. 🚀 ASSET REGENERATION FOR FASTER GUTENBERG PAGES Keep your website’s loading speed fast and secure against heavy scripts and CSS files with the Asset Regeneration feature. 🖊️ COMPATIBILITY WITH GOOGLE FONTS Choose any Google Font you prefer from a collection of 1,000+ font families available using Essential Blocks. Now, you can give your websites a customized look with stunning typography. 👁️ CONTROL BLOCKS VISIBILITY WITH CONDITIONS, LOGICS (PRO) Apply display conditions to the blocks you’ve selected based on a variety of factors, including date and time, query strings, user roles, and browsers. Easily create visibility restrictions for content using the Gutenberg editor. 🛡 UNFILTERED MEDIA FILE UPLOADS Easily upload SVG and JSON files directly to your WordPress Media Library without hitting file type restrictions. This unlocks advanced customization possibilities, empowering you to seamlessly integrate custom animations, illustrations, and data-driven visuals into your Gutenberg experience. 💻 RESPONSIVE ON ALL DEVICES Directly from your Gutenberg block editor, you can control each block’s responsiveness individually. With flexible, responsive customization options, make your website user-friendly for all devices. 💧 LIQUID GLASS EFFECT ON WORDPRESS Add smooth, glossy liquid glassmorphism effects to your WordPress site; no coding is needed. Instantly bring modern and futuristic UI to Gutenberg designs. 💫 INTERACTIVE ANIMATION WITH GSAP FOR PAGE BUILDER (PRO) With our latest exclusive feature, animation, you can design every block with a stunning animated appearance. Add smooth transitions, scroll effects and vibrant animations. Grab users’ attention instantly with eye-catching animations, transitions, and many more. ⚡ DYNAMIC TAGS & ACF SUPPORT (PRO) Enhance the flexibility and customization options of your Gutenberg-built website and easily add custom fields to posts, pages, or custom post types with dynamic placeholders or variables generated from various parameters or data sources. 🔄 TRANSFORM BLOCKS WITH INTERACTIVE EFFECTS Instantly add engaging transform effects to your Gutenberg blocks and create interactive experiences without any coding. Apply hover animations, dynamic transitions, and smooth visual transformations to make your website feel modern, responsive, and visually captivating. 🔒 PASSWORD PROTECT CONTENT & BLOCKS (PRO) Secure any Gutenberg block, section, or content with password protection and control who gets access. Easily restrict premium resources, exclusive content, private pages, or client-only sections directly from the block editor without writing a single line of code. 🎨 IMAGE MASKING & MORPHING (FREEMIUM) Transform ordinary images into captivating visual experiences with advanced masking and morphing effects. Easily apply creative shapes, seamless transitions, and dynamic image transformations to highlight products, showcase portfolios, or create engaging website sections—all directly within the Gutenberg editor without writing a single line of code. 🧭 ONE PAGE NAVIGATION (PRO) Guide visitors through long pages with smooth, customizable one page navigation. Create sticky section menus that let users jump between content effortlessly, improve the browsing experience and keep readers engaged, all within the Gutenberg editor without writing a line of code. 📋 COPY/PASTE STYLE (FREE) Build faster while keeping every page visually consistent. Copy the complete style of any Essential Blocks block and paste it onto another with a single click. Reuse your favorite designs, save time and eliminate repetitive customization, built directly into the Gutenberg editor with no coding required. 🖼️ READY GUTENBERG PATTERNS BUILT WITH BLOCKS Get stunningly designed, ready-to-use Gutenberg block patterns for your WordPress website. Instantly add a block layout to Gutenberg or your site editor to make your website-building experience faster and more effective. 🎯 STUNNING GUTENBERG TEMPLATES FOR WORDPRESS Explore and access Templately’s 3,000+ ready, AI-powered Gutenberg templates created with Essential Blocks. You can easily insert the entire site with a single click, customize the fully responsive templates to your liking, upload the designs to the Templately cloud solution for future use, and easily collaborate with your team. You will find a wide variety of stunning Gutenberg website or web page templates in any niche: – Blog & Magazine – Celebration – Creative – eCommerce – Education – Entertainment – Fashion & Lifestyle – Food & Restaurant – Health & Medical – Multipurpose – NFT & Crypto Currency – Non-profit – Portfolio & Consultancy – Technology – Travel… and many more. 👨‍💻 EXPERT SUPPORT We have a very friendly support team ready to help you out. Ask your questions in the support forum; we will get back to you immediately. 70+ FREE GUTENBERG BLOCKS AND COUNTING Design without limits in WordPress block editor, using 70+ of the most useful Essential Blocks for Gutenberg. Accordion – Collapsible content panels to reduce scrolling Button – Modern buttons with hover effects Call To Action – Eye-catching call-to-action sections Countdown – Countdown timer to boost click-through rates Flipbox – Animated flip boxes to highlight content Infobox – Info boxes from predefined styles Notice – Notice/alert boxes for important information Pricing Table – Pricing tables that convert Social Icons – Share content across social media platforms Team Member – Feature your team members Testimonial – Showcase reviews to build credibility Progress Bar – Display task or skill progress Interactive Promo – Eye-catching promo headings Image Comparison – Interactive before/after image comparisons Wrapper – Group and style any block together Instagram Feed – Display Instagram posts beautifully Filterable Gallery – Image gallery with grid & lightbox Advanced Heading – Headings with extra customization options Dual Button – Two buttons with a text/icon separator Parallax Slider – Fancy slider for teams or galleries Typing Text – Eye-catching typing text effect Toggle Content – Switch content with a toggle switcher Number Counter – Highlight key statistics Row – Row layouts with responsive styling controls Post grid – Interactive grid layout for blog posts Table of Contents – TOC for posts/pages to improve UX Feature List – Display information as a feature list Slider – Image slider with motion effects Advanced Tab – Nested tabs for key information Fluent Forms – Style Fluent Forms containers & fields Advanced Image – Customize images to your exact needs WPForms – Style WPForms with extra controls Woo Product Grid – WooCommerce products in stunning layouts Post Carousel – Animated, dynamic post carousel Advanced Video – Extra styling for video embeds Advanced Navigation – Organized, easy site navigation Popup – Popups that showcase content & trigger actions NFT Gallery – Display NFT items & collections Social Share – One-click social sharing for posts & pages Openverse – Search royalty-free, CC-licensed images Google Maps – Present a fully responsive map on your website with your preferred configurations, styles, etc. Shape Divider – Make your website designs stand out by showcasing different sections with stunning shape dividers Form – Create responsive forms of any type – contact forms, RSVP forms, multi-step forms or subscription forms – in Gutenberg and manage them easily from your WordPress dashboard. Timeline Slider (PRO) – Showcase your posts & pages in an attractive timeline slider and design with stunning presets & styling options Advanced Search (PRO) – Let visitors find any content on your website easily with a customizable, dynamic search bar Data Table (PRO) – Insert an advanced data table on your website without any code and display information in an eye-catching way Woo Product Carousel (PRO) – Display your WooCommerce products with dynamic Product Carousels and designs using limitless styling options News Ticker (PRO) – Show the latest news or highlights on your website with a dynamic ticker in an engaging way that instantly drives attention Fancy Chart (PRO) – Design visually stunning & interactive charts to bring life to dull datasets Multicolumn Pricing Table (PRO) – Use a variety of layouts to impact your customers to choose the pricing best plan by showcasing comparison table by mentioning features, displaying icons, and so on Stacked Cards (PRO) – Display your content in a unique style with the EB Stacked Cards block. With this block, you can easily make your stacked cards sticky in place and provide users an interactive experience when they scroll through your website Testimonial Slider (PRO) – Display engaging and credible customer testimonials, reviews and ratings in a sleek slider format to build trust and encourage conversions Offcanvas (PRO) – Showcase a sidebar menu on your Gutenberg site using the Offcanvas block and grab visitors’ attention with various stunning transitions & effects Breadcrumbs – Make smooth navigation for your posts or pages by adding a Breadcrumbs block. Taxonomy – Display and organize content by categories, tags, product SKUs, etc. to make it easy for users to navigate. Woo Product Details – Display WooCommerce product details with an organized layout that helps grab customers’ attention. Woo Product Price – Display the price of the WooCommerce product and style it using custom colors and typography. Woo Product Rating – Display WooCommerce product ratings to build credibility among visitors and customers. Woo Product Images – Showcase eye-catching WooCommerce product images that draw in customers and are easy to customize. Woo Add to Cart – Display the ‘add to cart’ option for all your WooCommerce products to ensure easy navigation for customers. Post Meta – Attractively showcase your current post metadata like author, date, excerpt & more. Text – Add and customize text content on your website that catches the attention of the visitors. Lottie Animation – Add LottiFiles Animations to your Gutenberg site seamlessly and customize how you want it to appear. Mega Menu (PRO) – Create fully customized & mobile-friendly menu with grid, nested, dropdown, etc. dynamic layouts; add icons, badges, multimedia, etc. Query Loop Builder (PRO) – Easily create advanced, filterable post layouts in Gutenberg with the Query Loop Builder block. Display dynamic content stunningly and hook visitors, no coding required. Business Hours (PRO) – Showcase available opening times in a stylish and interactive table view. Highlight closing days, special days, multi-shift, etc. Flex Container – Create outstanding, complex design layouts in Gutenberg editor and easily handle responsive layouts without coding. Animated Wrapper (PRO) – Design interactive layouts & containers in Gutenberg with dynamic animation effects. Image Hotspots – This block enables you to pin items, products, etc into images with detailed pricing, URL, and description and make them interactive. Timeline – Create an interactive timeline in WordPress to showcase your story or company’s history, achievements, events, and roadmaps. One Page Navigation (PRO) – Create smooth scrolling navigation menus for single page Gutenberg websites. More Gutenberg blocks and demos coming soon for the block visual editor (weekly update) 📄 SUPPORT & DOCUMENTATION If you have any more questions, visit our support on the Plugin’s Forum. Find out how to use each Gutenberg block with our detailed documentation. For information about our features, FAQs and more, check out our website at Essential Blocks for Gutenberg. 🏆 GET ACCESS TO EASY & ESSENTIAL GUTENBERG TUTORIALS Learn from our video tutorials available on our Youtube Channel. LIKED ESSENTIAL BLOCKS? Join our Facebook Group. Or rate us on WordPress. 😊 CONTRIBUTE The full source code is available on GitHub Repository. Feel free to contribute or report an issue. 🔥 WHAT’S NEXT? If you like Essential Blocks, then consider checking out our other WordPress Plugins: 🎨 Templately – Ultimate AI-powered templates cloud for WordPress with thousands of ready Gutenberg website layout designs and unique cloud collaboration features. 🔔 NotificationX– Best social proof and FOMO marketing solution to boost conversions & design stunning WordPress notification bars. 🗒️ BetterDocs – Best AI-powered documentation & knowledge base plugin for WordPress to help you reduce support tickets. ⏰ SchedulePress – Complete solution for managing WordPress content scheduling through an editorial calendar & social share 📌 EmbedPress – Easiest embedding solution for WordPress for embedding 250+ multimedia content sources. 🔗 BetterLinks – Advanced WordPress link management plugin for link shortening, tracking & analyzing with Instant Redirect for Gutenberg.

👉 For more information about the plugin, visit the documentation website. A layout builder is a tool that helps you creating visual structures in your page, from a simple layout made by adjacent columns, to more complex compositions. Grids is entirely based on the WordPress block editor, which means that you’ll be able to use it together with the myriad of content blocks that developers and designers from all around the World are creating. With Grids, we’re bringing a visual structure to the content written with the WordPress Block Editor. 👉 Sections & areas A Section is a portion of the page that aims at being visually distinct from the rest of the content. Sections are usually top-level blocks that you add one after the other; the sequence of sections is what makes your page layout. Each Section that you create is composed by several different Areas. In their most basic form, you can think of Areas as columns, which are nothing else than containers for content blocks. For more elaborated compositions, the Grid Designer allows you to create exactly the grid structure you want within the boundaries of a Section, by using CSS Grid. 👉 Want to know more? Read the plugin documentation! 👉 https://justevolve.it/grids/documentation/ 👉 Still struggling? That may depend on one of the known issues 👉 https://justevolve.it/grids/documentation/known-issues/ 👉 1.3.12 FIX: Prevented admin assets from being enqueued on the frontend. 👉 1.3.11 FIX: Message regarding translations being loaded too early FIX: Styles and scripts correctly load in the editor iframe FIX: Compatibility with WordPress 6.9 👉 1.3.10 FIX: Compatibility issues with WordPress 6.4 👉 1.3.9 FIX: Security fix. 👉 1.3.8 FIX: Fixed display settings functionality for sections and areas. 👉 1.3.7 FIX: Fixed a fallback variable issue for Sections and Areas background. 👉 1.3.6 FIX: Fixed an issue with the margins, paddings association on different media queries. FIX: Fixed background repeat and position default behavior on frontend. 👉 1.3.4 & 1.3.5 FIX: Synced row dimension logic on frontend/backend: empty rows will collapse also on the Block Editor screen. 👉 1.3.3 FIX: Fixed 500 error that occurred when using wide-aligned sections. 👉 1.3.2 FIX: Changed the grid column declaration to minmax(0,1fr) in order to prevent grid blowout. FIX: Fixed nested sections issues. 👉 1.3.1 FIX: Reverted row dimension logic: in Sections created with the advanced editor, empty rows will collapse. 👉 1.3.0 ENHANCEMENT: Added compatibility with the Full Site Editor. ENHANCEMENT: Enhanced compatibility with single page application websites. FIX: Fixed style being applied to nested sections. Updated compatibility to WordPress 5.9. POSSIBLY BREAKING CHANGES: In this version, we have removed the global page setting that allowed for the editor area to be wider when editing a page with the Block Editor. We feel that this should be better handled by the theme itself, especially if it supports the Full Site Editing mode. We have also removed the global page setting that determined the horizontal gutter between areas. This is now handled individually by Section blocks (look for Gap settings). As before, both horizontal and vertical gaps are subject to media queries. We have removed the grids-s-$section_id and grids-a-$area_id classes from their respective elements, since they were no longer needed to generate the element’s style. If you need to specifically identify a section or area, you can use their custom class/anchor controls provided by the Block Editor. 👉 1.2.28 ENHANCEMENT: Added the ability to specify the types of blocks allowed in content areas of a section through the grids/area filter. ENHANCEMENT: Added the ability to specify the size units used in Grids, as well as the default size unit suggested by the editor, through the grids/general filter. FIX: Removed unwanted log to console. Updated compatibility to WordPress 5.7. 👉 1.2.27 FIX: Fixed an issue that occurred when editing custom-created sections and affected previously created areas. FIX: Fixed an issue that prevented post meta to be saved when using Grids with a Custom Post Type. 👉 1.2.26 FIX: Added compatibility with WordPress 5.6 and the latest version of the Gutenberg plugin. 👉 1.2.25 FIX: Minor backend UI fix. FIX: Fixed the dimensioning of blocks in content areas on frontend. 👉 1.2.24 Enhanced support for AJAX-powered content pages. 👉 1.2.23 FIX: Fixed React warnings and errors that occurred when the SCRIPT_DEBUG constant was set to true. FIX: Fixed section styling when in preview mode. FIX: Removed double scrollbar when dragging areas. 👉 1.2.22 FIX: Increased compatibility with WordPress 5.4. 👉 1.2.21 FIX: Fixed a bug that caused section IDs not to be rendered in the page markup. 👉 1.2.20 FIX: Fixed compatibility with Gutenberg 7.3. 👉 1.2.19 FIX: Fixed blocks toolbar issue. 👉 1.2.18 FIX: Fixed reusable block functionality on Sections. FIX: Various minor UI tweaks. FIX: Minor bugs. 👉 1.2.17 FIX: Fixed compatibility with Gutenberg 7.2. FIX: Minor UI tweaks. 👉 1.2.16 FIX: Fixed grid display issues on Internet Explorer 11. Thanks to @amddtim for providing the fixes. 👉 1.2.15 Improved the visualization of units in spacing controls. Added an option to expand the editor width. 👉 1.2.14 FIX: Fixed compatibility with WordPress 5.3. 👉 1.2.13 FIX: Fixed a z-index issue for the area selection highlight. FIX: Fixed an issue that prevented the correct display of duplicated sections. 👉 1.2.12 FIX: Improved the editing of blocks in two vertical adjacent areas in an advanced grid. FIX: Fixed an area width display issue in the block preview. 👉 1.2.11 Added visual feedback to elements when using dimension controls. FIX: Fixed a regression that prevented the correct use of vertical align in Areas. 👉 1.2.10 FIX: Fixed a bug that prevented Sections to be saved correctly when they have an anchor specified. FIX: Minor UI tweaks. 👉 1.2.9 Added anchor support to Sections: you can now add IDs to Section elements on frontend. Various UI tweaks to highlight the grid structure and rendering. Removed the Section block from the Grids section, and made available in the Layout blocks section. Changed the Section and Area block icons to match the plugin brand. FIX: First block selection after inserting a Section in page. FIX: Minor bugs. 👉 1.2.8 FIX: Style alignment for areas when duplicating sections in the Block Editor. 👉 1.2.7 FIX: Restore block insertion mode for newly created areas when using the Gutenberg plugin. FIX: Compatibility fixes with Gutenberg 5.9.0. 👉 1.2.6 FIX: Behavior of content areas when adding lateral spacing. 👉 1.2.5 Added a new “Stretch” option for backgrounds on sections with “wide” alignment. FIX: Minor bugs. 👉 1.2.4 Submitted Grids to the Blocks directory on WordPress.org. Include JS and SCSS source files. 👉 1.2.3 FIX: Fixed an issue that prevented to properly visualize the Block Inserter when the z-index of an area had been tweaked. FIX: Fixed an issue that could cause multiple areas to be added to a section, without using the Grid Designer component. FIX: Minor bug fixes. 👉 1.2.2 FIX: Fixed an issue that prevented custom accent colors to work as intended on the Twenty Nineteen default theme. 👉 1.2.1 FIX: Minor visual tweaks. FIX: Editing of sections composed with the Grid Designer. 👉 1.2 NEW FEATURE: Added page-wide gutter control. ENHANCEMENT: Grid Designer is now available when editing a section, and areas can be rearranged. FIX: CSS style for grids not displaying in loops. FIX: Sections can now be used as reusable blocks. FIX: Minor bugs. 👉 1.1.1 FIX: Translation support. FIX: Issue with blocks toolbar. 👉 1.1.0 NEW FEATURE: Grid Designer. FIX: Translation support. FIX: Minor bugs. 👉 1.0.0 Initial public release.