BoldSpan Bento Grid
| 开发者 | boldspan |
|---|---|
| 更新时间 | 2026年10月12日 21:42 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Tiles get an
aria-labelfrom their title, heading levels are yours to choose, and motion respectsprefers-reduced-motion. - Every URL is escaped, CSS values are filtered and numbers are clamped before output.
- Translation-ready (
boldspan-bento-gridtext domain).
- Add the Bento Grid block (or drag the Bento Grid widget in Elementor).
- Pick a layout and the number of tiles, or insert a ready-made pattern from Patterns → Bento Grid.
- Add images, text and links. Click Fill empty tiles to preview the layout with demo content first.
- 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
安装:
- In your dashboard, go to Plugins → Add New, search for BoldSpan Bento Grid, then click Install and Activate. (Or upload the
boldspan-bento-gridfolder to/wp-content/plugins/.) - Open Bento Grid in the admin menu for a 3-step quick start.
- In the block editor, add the Bento Grid block. In Elementor, drag the Bento Grid widget from the BoldSpan Bento category.
屏幕截图:
常见问题:
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. The play button's thumbnail image is loaded from YouTube's image host (i.ytimg.com) when that screen opens; nothing else is requested until you press play. The video itself then plays from youtube-nocookie.com, operated by Google. Nothing is ever loaded on the front end. 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:
- 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.
- 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.
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
更新日志:
- New: a tutorial video on the Overview screen, shown as a large player with a thumbnail preview.
- Improved: the getting-started video is embedded at the top of the plugin's description.
- 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.
- 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_activefilter. - Mobile (<768px) and tablet (768-1024px) responsive breakpoints, applied in the editor and on the front end.
.boldspan-bento-wrapperCSS isolation namespace.- Accessibility: title-based
aria-labels and fullprefers-reduced-motionsupport. - Output hardening:
esc_url()/esc_html()/esc_attr()on all output, CSS-value filtering, and clamped numeric ranges. - Translation-ready (
boldspan-bento-gridtext domain).