How to Use the Bento Grid in Elementor?

What is the Bento Grid Marquee?

The Bento Grid for Elementor allows you to organize diverse content into a modern, modular layout within a single container. Inspired by the iconic design language of Apple and Microsoft, this widget is the ultimate tool for presenting varied information; images, text, and interactive features; in a visually balanced, asymmetric grid. It elevates the user experience by transforming static designs into a clean, scannable, and high-converting interface that adapts perfectly to any screen size.

• A Bento Grid layout in Elementor for modern UI
• Responsive Bento Grid that adapts perfectly on all devices
• No-code grid builder for Elementor templates
• Advanced grid span and hover control settings

Improve your Elementor designs with a Bento Grid layout using the powerful widget from Marquee Addons. Whether you want an Apple-style feature section, a creative portfolio, or a high-converting landing page, our widget provides total control over your layout.

Common use case

A common use case for the Bento Grid widget is to display Core Product Features on a homepage or landing page. By utilizing a grid, you can emphasize your “hero” feature in a larger cell while placing secondary benefits in smaller, surrounding cells. This creates a clear visual hierarchy that guides the user’s eye to your most important value proposition without overwhelming them with long paragraphs.

Additional use cases

• Portfolio Showcases: Group project images, client names, and brief descriptions into a sleek, masonry-style layout that looks custom-coded.
• Service Overviews: Instead of simple icons, use the grid to provide a “snapshot” of each service with unique background colors or subtle hover effects.
• Link Trees & Dashboards: Use the grid as a navigation hub on mobile or “link in bio” pages to direct users to various social channels and resources.

Requirements and Installation

To use the Button Marquee, you must meet the following requirements:

• You need the Marquee Addons and Marquee Addons Pro plugin installed and activated on your website.
• You can find detailed installation instructions in our dedicated installation blog post.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.

Add the widget

To add the Button Marquee to your Elementor-powered website, follow these simple steps:

1. Navigate to the Elementor editor for the page you want to edit.
2. In the widgets panel, search for the Bento Grid.
3. Drag the widget to your desired location on the page.

Settings for the Bento Grid

The customization options for the Bento Grid addons are divided into three main tabs: Content, Style, and Advanced.

Bento Grid Content Tab

The Content tab is where you add bento cards, set their content (image, title, description, CTA), and control layout—column/row span, image position, alignments—along with grid basics like row height and gaps.

Items: Manage the grid cards and base layout settings.

1. Add Item: Create a new grid card (use the list to duplicate or delete existing items).
2. Text Alignment: Align item text Left / Center / Right.
3. Heading Tag: Choose the tag for item titles (H1–H6, etc.) to match your hierarchy.
4. Row Height: Set the base row height for the grid.
5. Gaps: Define Column and Row gaps between cards.

Grid Item → Content

Configure the content for each bento card.

1. Image: Select the card image.
2. Image Resolution: Choose the image size to load.
3. Heading: Enter the card title.
4. Description: Add a short paragraph.
5. CTA Text: Button label.
6. CTA Link: URL or anchor.
7. CTA Icon: Pick an optional icon for the button.

Grid Item → Layout

Control how this card sits in the bento grid and how its content is positioned.

1. Column Span: Set how many columns this card spans.
2. Row Span: Set how many rows this card spans.
3. Image Position: Choose how the image is positioned inside the card (top/bottom/left/right).
4. Vertical Alignment: Align inner content Top / Middle / Bottom.
5. Horizontal Alignment: Align inner content Left / Center / Right.
6. Background Type: Choose Classic or Gradient for the card background.
   • Classic (Image/Color): Set a color or pick an image, then configure Image Resolution, Position, Attachment, Repeat, and Display Size.
   • Gradient: Set gradient colors, type, and angle.
7. Overlay: Add an overlay color above the content; adjust color/opacity as needed.

Note: Vertical Alignment and Horizontal Alignment controls appear only when Image Position is set to Left or Right.

Style Tab

The Style tab controls the overall look of the Bento Grid—set global card backgrounds, borders, radius, and padding, then style each card’s image, text (title/description), and CTA (including icon position, color, size, and gap).

Card: Sets the default style for all cards in the grid.

1. Background Type: Choose Classic or Gradient for the card background. This image will be applied for every bento Card of this layout.
   • Classic (Image/Color): Set a color or pick an image, then configure Image Resolution, Position, Attachment, Repeat, and Display Size.
   • Gradient: Set gradient colors, type, and angle.
2. Overlay: Add a color/opacity overlay above the background.
3. Border Type: Choose Default, None, Solid, Double, Dotted, Dashed, or Groove; then set border width and color.
4. Border Radius: Round the card corners.
5. Padding: Set padding for all cards.

Image

Styles the main image inside each card.

1. Border Type: Choose Default, None, Solid, Double, Dotted, Dashed, or Groove; then set border width and color.
2. Border Radius: Round the image corners.
3. Spacing: Set space around the image inside the card).

Content

Style the text inside each card.

1. Title:
   • Typography — Font family, size, weight, line-height, spacing.
   • Color — Title color.
   • Spacing — Margin below the title (responsive).
2. Description:
   • Typography — Body text controls.
   • Color — Description color.
   • Spacing — Margin below the description (responsive).

CTA

Style the call-to-action button inside each card.

1. Typography: Font family, size, weight, line-height, letter spacing.
2. Color: Button text color for Normal and Hover.
3. Background Type: Classic or Gradient per state.
4. Box Shadow: Shadow for depth (Normal/Hover).
5. Padding: Inner spacing of the button.
6. Border Type: Choose Default, None, Solid, Double, Dotted, Dashed, or Groove; set border width and color.
7. Border Radius: Round the button corners.
8. Icon
   • Position: Place the icon before or after the label.
   • Color: Set icon color for Normal and Hover.
   • Size: Define the icon size.
   • Gap: Adjust spacing between icon and text.

Advanced tab

The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s Layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for bespoke styling.

Frequently Asked Questions

Does this widget slow down my site?

No. The Bento Grid widget is engineered for lightweight performance. It uses clean HTML/CSS output, ensuring that your page speed remains optimal even with complex grid structures.

---

Is the Bento Grid mobile-friendly?

Yes! These are fully responsive tabs for Elementor. You can define how many columns the grid should collapse into on tablets and mobile devices to ensure readability.

Can I use custom icons/images?

Absolutely. Every cell in the grid is fully customizable, allowing you to upload your own SVGs, high-res images, or even use Elementor icons to match your brand.

How do I create a Bento Grid in Elementor without CSS?

Our widget handles all the complex CSS Grid math for you. You can create sophisticated, asymmetric layouts using simple drag-and-drop sliders and settings.

---