BoldSpan Bento Grid
| 开发者 | boldspan |
|---|---|
| 更新时间 | 2026年9月17日 22:11 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
BoldSpan Bento Grid is a free WordPress bento grid plugin for building modern, responsive websites in Gutenberg and Elementor. Create magazine-style homepages, image galleries, portfolios, blog sections, service grids, team sections, product highlights, and landing page layouts without writing CSS.
Choose a professional bento box layout, add your content, and publish a polished responsive grid in minutes. The same lightweight CSS Grid engine powers the editor preview and the front end, so your layout looks the way you designed it.
Unlike a generic column block, this responsive grid plugin gives you curated bento layouts, per-tile content controls, image overlays, typography-friendly heading levels, and optional hover effects in one focused interface.
It is made for freelancers, agencies, bloggers, photographers, designers, creators, small businesses, online stores, and anyone who wants a more visual WordPress website layout without hiring a developer.
Why site owners choose BoldSpan Bento Grid
- Build a responsive bento grid directly in the WordPress block editor or Elementor.
- Start with nine professionally arranged layouts instead of designing every column from scratch.
- Create an image gallery, portfolio, product highlights, services section, or editorial feature grid.
- Keep pages fast with CSS-based layout and hover effects, without a front-end JavaScript dependency.
- Make changes visually with controls that are approachable for beginners and useful for designers.
- Nine ready-made patterns - one per layout - in the inserter under Patterns > Bento Grid. Each drops in a finished section built from gradients and text, so it looks designed before you add a single image.
- Or add the block and hit Fill with demo content to populate the empty tiles. Tiles you have already edited are left alone.
- Nine curated presets for 2 to 5 tiles: Split 50/50, Asymmetric 70/30, Hero Focus, Triple Row, Balanced Quad, Showcase 4, Feature 5, Asymmetric 5, and Strip 5.
- The preset list follows the tile count, and the number of tiles is controlled with a single slider.
- Padding and margin controls for the grid container, linked or set per side (top, right, bottom, left).
- Row height slider, with an option to let a tile with more text stretch its row instead of clipping.
- One 12-column CSS Grid engine - no per-block inline layout hacks.
- Content modes: image overlay (with an adjustable shadow that keeps overlaid text readable), text on top, text below, or custom inner blocks.
- Per-tile design controls: background colour or CSS gradient, text colour, border width and colour.
- Opt-in hover micro-interactions: lift, image zoom, and glow - all pure CSS, no runtime cost.
- Choose the title heading level (H2-H6, or a paragraph) so the page outline stays in order.
- Link options: open in a new tab, and rel="nofollow".
- Under 768px every layout collapses to a single stacked column.
- Between 768px and 1024px the 4- and 5-tile presets step down to two columns.
- The same breakpoints apply inside the editor canvas, so what you see is what you publish.
- Works identically in the Gutenberg block editor and the Elementor page builder (widget lives under the "BoldSpan Bento" category).
- All markup is wrapped in a
.boldspan-bento-wrappernamespace so active themes and Elementor global styles cannot override the grid gap, tile padding, or typography. - Accessibility: tiles expose an
aria-labelfrom their title, the title heading level is author-controlled, and all motion respectsprefers-reduced-motion. - Security-first: every URL is passed through
esc_url(), CSS values are filtered, and numeric ranges are clamped before output. - Translation-ready with the
boldspan-bento-gridtext domain.
安装:
- Upload the
boldspan-bento-gridfolder to/wp-content/plugins/, or install the plugin through the Plugins > Add New screen. - Activate BoldSpan Bento Grid through the Plugins screen.
- Open the Get started link in the plugin's row on the Plugins screen for a short walkthrough covering both the block editor and Elementor. The same link is offered in a dismissible notice after activation.
- In the block editor, add the Bento Grid block. In Elementor, drag the Bento Grid widget from the BoldSpan Bento category.
屏幕截图:
常见问题:
How many tiles can a grid have?
Two to five, with a curated preset for every count. A separate commercial add-on, BoldSpan Bento Grid Pro (https://bentogrid.boldspan.tech), lifts the tile cap and adds six more presets, glassmorphism, advanced hover motion, and dynamic WooCommerce/query grids. Those extras are shown in the editor with a lock badge so you can see what they do; this plugin is fully functional on its own without them.
Will it match my theme?
Yes. Tiles inherit your theme's font family and body colour, but the grid gap, tile padding, and heading/caption sizing are locked to the plugin's own values inside the .boldspan-bento-wrapper namespace so theme rules can't distort the layout.
Is the Elementor output the same as the block output?
Yes - both produce the same HTML wrapper, classes, and data-bento-grid attribute, and share one stylesheet.
Does it support reduced motion?
Yes. When the operating system requests reduced motion, all hover transitions and transforms are disabled.
Does the plugin load anything on pages that don't use a grid?
No. The front-end stylesheet and runtime are only enqueued on requests that actually render a Bento Grid block or widget.
Does the plugin send anything to an external service?
Only when you press a button that says it will, and never from the front end. Three 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.
- Submitting the "Get early access" form sends the email address you type, the feature area you pick, and the same site name and URL, so we can tell you when Pro is released.
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
更新日志:
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_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).