內容簡介
BoldSpan Bento Grid 是一款幫助您在 WordPress 中建立便當格佈局的外掛，適合用於產品和 SaaS 網站。它作為 Gutenberg 區塊和 Elementor 小工具運作，無需撰寫 CSS，即可輕鬆創建現代化的網頁設計。
【主要功能】
• 提供 9 種現成的便當佈局選擇
• 支援在圖片上放置文字，並保持可讀性
• 可為每個格子添加微妙的懸停效果
• 自適應設計，確保在編輯器和實際網站上顯示一致
• 適合各類型網站，如部落格、產品展示等
外掛標籤
開發者團隊
原文外掛簡介
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
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.
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 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 [email protected].
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 18+ and npm, with
@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.
