How to Use the Bento Grid in Elementor?

What is the Bento Grid Marquee?

The Bento Grid is a 12-column, responsive layout for building modular card grids. Each item can span custom columns and rows, with controls for image position, content, and per-item or global styling. Use it to showcase features, categories, portfolios, or promos—clean, flexible, and code-free.

Common use case

Build a 12-column modular grid where key items span more columns/rows to draw attention—perfect for highlighting featured categories, products, or portfolio pieces in a clean, responsive layout.

Additional use cases

• Feature showcase — Present core product features with mixed-size cards.
• Category hub — Visual navigation to collections or services.
• Portfolio gallery — Spotlight hero projects with larger spans.
• Promo grid — Mix announcements, offers, and CTAs with varied emphasis.

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 are divided into three main tabs: Content, Style, and Advanced.

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

How do I make a card larger than others?

Open the card → Layout → set Column Span and Row Span.

---

My image is cropped—how do I change that?

In the item’s Layout → Background Type (Classic), adjust Position, Repeat, and Display Size (Cover/Contain).

---

Why does a background show on every card?

You set it in Style → Card (Global). Add a per-card background/overlay in the item to override it.