Title: BoldSpan Bento Grid Author: BoldSpan Technologies Published: 17 di Setembar dal 2026 Last modified: 3 di Otubar dal 2026 --- Search plugins ![](https://ps.w.org/boldspan-bento-grid/assets/banner-772x250.png?rev=3699801) ![](https://ps.w.org/boldspan-bento-grid/assets/icon-256x256.gif?rev=3699801) # BoldSpan Bento Grid By [BoldSpan Technologies](https://profiles.wordpress.org/boldspan/) [Download](https://downloads.wordpress.org/plugin/boldspan-bento-grid.1.0.2.zip) * [Details](https://fur.wordpress.org/plugins/boldspan-bento-grid/#description) * [Reviews](https://fur.wordpress.org/plugins/boldspan-bento-grid/#reviews) * [Installation](https://fur.wordpress.org/plugins/boldspan-bento-grid/#installation) * [Development](https://fur.wordpress.org/plugins/boldspan-bento-grid/#developers) [Support](https://wordpress.org/support/plugin/boldspan-bento-grid/) ## Description **BoldSpan Bento Grid** helps you build bento grid layouts in WordPress: the clean, boxy, modern sections you see on product and SaaS websites. It works as a **Gutenberg block** and an **Elementor widget**, and you don’t need to write any CSS. Pick a layout, drop in your images and text, and publish. The grid is responsive, lightweight, and looks the same in the editor as on your live site. ### Want a clean, modern website without hiring a designer? Most page sections end up as rows of equal columns. A bento grid mixes large and small tiles, so the most important content stands out and the page feels designed, not assembled. BoldSpan Bento Grid gives you that look in a few clicks: * Choose from **9 ready-made bento layouts** for 2 to 5 tiles. * Start from **9 designed patterns** that look finished before you add a single image. * Put text in any of **9 positions** over an image. A soft shade follows the text so it stays readable. * Add subtle **hover effects** (lift, image zoom, glow) to one tile or to every tile at once. ### What is a bento grid? A bento grid is a layout of rectangular tiles of different sizes, arranged like the compartments of a Japanese bento box. It is a popular web design trend because it shows several pieces of content at once while keeping a clear visual hierarchy: one hero tile, a few supporting tiles, all aligned on one grid. ### What you can build * **Homepage hero sections** with one large feature tile and smaller highlights * **Image galleries** and **photography portfolios** * **Feature grids** for SaaS, apps and product launches * **Services sections** for agencies, freelancers and local businesses * **Blog and magazine layouts** that highlight featured posts * **Product highlights** for online stores * **Team, testimonial and “about us” sections** * **Landing page sections** that convert better than plain columns ### Who it is for Bloggers, designers, photographers, freelancers, agencies, small businesses, store owners and anyone building with the block editor or Elementor. Beginners get sensible defaults; designers get control over spacing, colours, borders and typography levels. ### Key features **Layouts** * 9 curated presets: Split 50/50, Asymmetric 70/30, Hero Focus, Triple Row, Balanced Quad, Showcase 4, Feature 5, Asymmetric 5 and Strip 5. * Change the number of tiles with one slider; the preset list follows the count. * Row height control, with an option to let a tile with more text grow its row instead of clipping. * Padding and margin for the grid, linked or per side. * One 12-column CSS Grid engine shared by the editor and the front end. **Tiles** * **Image & text** tiles with an overlay shade, or **custom blocks** for anything else (buttons, lists, icons, embeds). * Text position on a 3 × 3 grid: top, middle or bottom, left, centre or right. * Background colour or CSS gradient, text colour, border width and colour per tile. * Title heading level (H2 to H6, or a paragraph) to keep your page outline and SEO structure correct. * Links make the **whole tile clickable**, with “open in new tab” and `rel="nofollow"` options. **Hover effects** * Combine effects per tile: a motion (lift), image zoom and a glow highlight. * Set one hover style for **all tiles** from the grid, or fine-tune tiles one by one. * Pure CSS, and switched off automatically for visitors who prefer reduced motion. **Responsive by default** * Under 768px every layout stacks into a single column. * Between 768px and 1024px the 4- and 5-tile layouts step down to two columns. * The editor canvas uses the same breakpoints, so what you see is what you publish. **Fast and lightweight** * No jQuery and no page-builder framework. Layout and free hover effects are pure CSS. * Styles load **only on pages that contain a grid**, never site-wide. * Static block markup: your content is saved as plain HTML, so pages stay fast and cache-friendly. **Works with your theme** * Inherits your theme’s fonts and colours, while gap, padding and sizing stay locked so themes can’t distort the grid. * Works with block themes, classic themes and Elementor. * The Elementor widget outputs the same HTML as the block, from the same stylesheet. **Accessible, secure, translation-ready** * Tiles get an `aria-label` from their title, heading levels are yours to choose, and motion respects `prefers-reduced-motion`. * Every URL is escaped, CSS values are filtered and numbers are clamped before output. * Translation-ready (`boldspan-bento-grid` text domain). ### How it works 1. Add the **Bento Grid** block (or drag the **Bento Grid** widget in Elementor). 2. Pick a layout and the number of tiles, or insert a ready-made pattern from **Patterns Bento Grid**. 3. Add images, text and links. Click **Fill empty tiles** to preview the layout with demo content first. ### Gutenberg and Elementor Use whichever editor you like. In the block editor, the grid is a native block with its own tile blocks. In Elementor, the widget lives under the **BoldSpan Bento** category and has the same layouts, tile options and hover effects. The front-end output is identical. ### Bento Grid Pro (optional) The free plugin is complete on its own. If you want more, the separate **[Bento Grid Pro](https://bentogrid.boldspan.tech/)** add-on adds: * 17 more layouts and **up to 12 tiles** per grid * **3D tilt**, hover caption reveal, animated gradient border and a cursor **spotlight** * **Glass** (frosted blur) tiles * **Scroll reveal** animations: fade, slide and zoom Pro options appear in the editor with a small lock badge so you can see what they do. If a Pro licence ever expires, your published pages keep their Pro layouts and effects. Nothing on your site breaks. ### Support Questions, bugs or ideas? Post in the support forum here on WordPress.org, or email** bentogrid@boldspan.tech**. ### Source Code This plugin ships compiled JavaScript and CSS in the `build/` directory. The human- readable sources – TypeScript and SCSS under `src/`, the block metadata, and the full build pipeline – live in the public development repository: https://github.com/boldspantechnologies/Bold-Bento-Grid Build tools: [Node.js](https://nodejs.org/) 18+ and npm, with [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts)( webpack). * `npm install` – install the build toolchain. * `npm run build` – compile `src/` into `build/` (`boldspan-bento/grid` block, tile block, front-end runtime, stylesheet). * `npm run package` – clean, build, and produce `dist/boldspan-bento-grid.zip` containing only the files WordPress needs. The text domain is `boldspan-bento-grid` throughout (plugin header, every `__()`/ _e() call, both `block.json` files, and `wp_set_script_translations()`). Translations are handled by translate.wordpress.org. ## Screenshots [⌊The Bento Grid block in the editor with the visual layout picker.⌉⌊The Bento Grid block in the editor with the visual layout picker.⌉[ The Bento Grid block in the editor with the visual layout picker. [⌊A four-tile "Showcase" bento layout on the front end.⌉⌊A four-tile "Showcase" bento layout on the front end.⌉[ A four-tile “Showcase” bento layout on the front end. [⌊Tile settings: content, text position, hover effects, colours and borders.⌉⌊Tile settings: content, text position, hover effects, colours and borders.⌉[ Tile settings: content, text position, hover effects, colours and borders. [⌊The same grid stacking into a single column on mobile.⌉⌊The same grid stacking into a single column on mobile.⌉[ The same grid stacking into a single column on mobile. ## Blocks This plugin provides 2 blocks. * Bento Grid A minimal, modern Bento-style grid layout block. * Bento Tile A single image or content tile inside a Bento Grid. ## Installation 1. In your dashboard, go to **Plugins Add New**, search for **BoldSpan Bento Grid**, then click **Install** and **Activate**. (Or upload the `boldspan-bento-grid` folder to `/wp-content/plugins/`.) 2. Open **Bento Grid** in the admin menu for a 3-step quick start. 3. In the block editor, add the **Bento Grid** block. In Elementor, drag the **Bento Grid** widget from the **BoldSpan Bento** category. ## FAQ ### Is BoldSpan Bento Grid free? Yes. The plugin is free and fully functional, with 9 layouts, patterns, tile styling and hover effects. Bento Grid Pro is an optional paid add-on for more layouts and motion. ### What is a bento grid layout? A grid of tiles in different sizes, like the compartments of a bento box. It shows several pieces of content at once with a clear hierarchy, which is why it has become a popular modern web design style. ### Do I need Elementor? No. The plugin works in the standard WordPress block editor (Gutenberg) on its own. If you use Elementor, you also get a Bento Grid widget with the same features. ### Does it work with my theme? Yes. It works with block themes and classic themes. Tiles take your theme’s font and colours, while the grid’s spacing is protected so theme styles can’t break the layout. ### Is it mobile responsive? Yes. Every layout stacks into one column on phones and steps down to two columns on tablets, automatically. ### Will it slow down my site? No. Layout and free hover effects are pure CSS, there is no jQuery, and the stylesheet loads only on pages that contain a grid. ### Can I use it as an image gallery or portfolio? Yes. Use image tiles with a title and caption, choose where the text sits, and link each tile to a project, post or larger image. The whole tile is clickable. ### How many tiles can a grid have? Two to five in the free plugin, with a layout for every count. Bento Grid Pro allows up to 12. ### Can I put buttons or other blocks inside a tile? Yes. Switch the tile to **Custom blocks** and add any blocks you like: buttons, lists, icons, embeds and more. ### Is it good for SEO? The grid outputs clean, static HTML, lets you choose each tile’s heading level so your page outline stays correct, and supports `nofollow` links and descriptive alt text on images. ### Does it work with WooCommerce? You can build product highlight sections with images and links today. Automatic product and post grids are on the roadmap. ### Does it support reduced motion? Yes. When a visitor’s device asks for reduced motion, all hover transitions and transforms are turned off. ### What happens if my Pro licence expires? Your site never breaks. Published grids keep their Pro layouts and effects. Only the Pro options in the editor lock until you renew. ### How do I get help? Post in the plugin’s support forum on WordPress.org, or email bentogrid@boldspan. tech. Questions about Pro, licences and billing go to the same address. ### Does the plugin load a video from YouTube? Only if a tutorial video is set on the Overview screen, and only when you press its play button. Nothing is requested from YouTube before that, and never on the front end. The video then plays from youtube-nocookie.com, operated by Google. Privacy policy: https://policies.google.com/privacy ### Does the plugin send anything to an external service? Only when you take an action that says it will, and never from the front end. Two actions contact Discord, where the BoldSpan team receives them: 1. Pressing “Start setup” on the welcome screen sends your site name and site URL. This happens once per site so we know an install happened. 2. Deactivating the plugin sends your site name, your site URL, and whether you had pressed “Start setup”, so we can see what is not working for people. That is the whole list. No version numbers, no server details, no environment report. Nothing is sent on page loads, on activation, or from visitor-facing pages, and no data about your visitors or your content ever leaves the site. The first needs a logged-in editor and a valid nonce; the second runs inside the deactivation request WordPress has already authorised. Site owners who want all of it switched off can return false from the `boldspan_bento_grid_notifications_enabled` filter. The service is Discord, operated by Discord Inc. Terms: https://discord.com/terms Privacy policy: https://discord.com/privacy ## Reviews There are no reviews for this plugin. ## Contributors & Developers “BoldSpan Bento Grid” is open source software. The following people have contributed to this plugin. Contributors * [ BoldSpan Technologies ](https://profiles.wordpress.org/boldspan/) [Translate “BoldSpan Bento Grid” into your language.](https://translate.wordpress.org/projects/wp-plugins/boldspan-bento-grid) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/boldspan-bento-grid/), check out the [SVN repository](https://plugins.svn.wordpress.org/boldspan-bento-grid/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/boldspan-bento-grid/) by [RSS](https://plugins.trac.wordpress.org/log/boldspan-bento-grid/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.2 * New: “Bento Grid” admin menu with an Overview screen and a Free vs Pro comparison screen. * New: place overlay text in any of 9 positions; the readability shade follows the text. * New: combine hover effects (lift, image zoom, glow) and set one hover style for all tiles from the grid. * New: links make the whole tile clickable. * New: support for the Bento Grid Pro add-on (more layouts, up to 12 tiles, glass tiles, scroll reveals, more hover motion). * Improved: published Elementor grids keep their Pro layouts and effects if a Pro licence lapses, and the block editor no longer swaps an existing Pro layout when it opens. * Improved: a grid saved with a layout the free plugin does not include falls back to an even grid instead of narrow columns. * Improved: upgrade buttons and a compact Free vs Pro panel in the block editor. * Added support contact: bentogrid@boldspan.tech. #### 1.0.0 * Initial release. * “Get started” screen with block-editor and Elementor instructions, reachable from the Plugins screen and from a dismissible activation notice. * CSS Grid engine with nine curated presets (2-5 tiles) shared between the block editor and the front end. * Gutenberg block (`boldspan-bento/grid` + `boldspan-bento/tile`) with a static save renderer. * Elementor widget producing byte-identical markup. * Per-tile content modes, design controls, and opt-in hover effects (lift, image zoom, glow). * Grid padding and margin controls in both editors, with the grid background filling the padding. * Nine block patterns in a “Bento Grid” category, plus a “Fill with demo content” button on an empty grid. * Row height control with optional content-driven growth. * Per-tile heading level (H2-H6 or paragraph), and new-tab / nofollow link options. * Pro features shown in-editor with lock badges and an upgrade path, gated behind the `boldspan_bento_grid_is_pro_active` filter. * Mobile (<768px) and tablet (768-1024px) responsive breakpoints, applied in the editor and on the front end. * `.boldspan-bento-wrapper` CSS isolation namespace. * Accessibility: title-based `aria-label`s and full `prefers-reduced-motion` support. * Output hardening: `esc_url()` / `esc_html()` / `esc_attr()` on all output, CSS- value filtering, and clamped numeric ranges. * Translation-ready (`boldspan-bento-grid` text domain). ## Meta * Version **1.0.2** * Last updated **4 dîs ago** * Active installations **Fewer than 10** * WordPress version ** 6.4 or higher ** * Tested up to **7.1.3** * PHP version ** 7.4 or higher ** * Language * [English (US)](https://wordpress.org/plugins/boldspan-bento-grid/) * Tags * [bento grid](https://fur.wordpress.org/plugins/tags/bento-grid/)[elementor](https://fur.wordpress.org/plugins/tags/elementor/) [gallery](https://fur.wordpress.org/plugins/tags/gallery/)[grid layout](https://fur.wordpress.org/plugins/tags/grid-layout/) [gutenberg](https://fur.wordpress.org/plugins/tags/gutenberg/) * [Advanced View](https://fur.wordpress.org/plugins/boldspan-bento-grid/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/boldspan-bento-grid/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/boldspan-bento-grid/reviews/) ## Contributors * [ BoldSpan Technologies ](https://profiles.wordpress.org/boldspan/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/boldspan-bento-grid/)