Bento Grid Module

Bento Grid Module

What is the Bento Grid Module?

The Bento Grid Module is a flexible layout system that allows you to create custom content arrangements on your HubSpot CMS pages. Built on a 12-column grid structure, it enables you to design unique layouts with multiple content types and styling options.

Key feature: Mix different content types (text, images, buttons, forms) within a single, customizable grid layout.

---

How Does This Module Affect Page Speed?

Module Performance Impact

Impact Level: Low to Medium

The Bento Grid Module itself has minimal impact on page speed. However, performance depends on the content you add inside it.

Low Impact:

• The module structure uses optimized code
• Minimal resources required for the grid framework

Medium Impact:

• Large images and videos increase load times
• CTAs and Menus require additional HubSpot scripts
• Forms add tracking code that affects performance

Warning: Using the module in or near the viewport may cause Content Layout Shift (CLS).

How Can I Optimize Performance?

Follow these best practices to maintain fast page speeds:

• Convert images to WebP format for next-gen image standards
• Compress images using TinyPNG for JPG, PNG, and WebP files
• Use SVG images for logos and icons to minimize file sizes
• Limit CTA usage as each CTA adds HubSpot tracking scripts

Performance Tip: Review the complete performance guide to optimize your POWER theme for speed.

See also: Image optimization best practices

---

How Do I Set Up the Module Header?

What is the Intro to Title?

The Intro to Title is smaller text that appears above your main heading. This is optional and can be left blank to hide it from the page.

Example use: "Featured Content" or "Our Services"

How Do I Configure the Main Title?

Title field: Enter your main heading text. Leave blank to hide the title entirely.

Title - Header Type: Choose the semantic heading level:

• H1 (primary page heading)
• H2 (main section heading)
• H3 (subsection heading)
• H4 (minor heading)

Important: This setting controls how Google interprets your heading structure, not the visual appearance. Adjust the visual size separately under Style → Title Size.

Can I Add Description Text?

Yes, the Description field accepts any amount of body text. You can include multiple paragraphs or leave it blank to hide this section.

See also: Title styling options

---

How Does the 12-Column Grid Work?

Understanding the Grid System

The Bento Grid Module uses a 12-column layout system for maximum flexibility.

Think of it like a spreadsheet: Imagine 12 vertical columns that you can divide and combine to create your desired layout.

How Do I Divide Columns?

You can split the 12 columns in multiple ways. Here are common two-column examples:

• 3 and 9: Narrow sidebar with wide content area
• 4 and 8: Standard sidebar layout
• 6 and 6: Equal split (50/50)
• 8 and 4: Wide content with narrow sidebar
• 9 and 3: Asymmetric layout with thin sidebar

Key concept: The numbers always add up to 12 or less.

How Do Columns Adjust to Screen Sizes?

The grid automatically adapts to different devices:

• Large desktops: 12 columns wide
• Smaller desktops: 9 columns wide
• Tablets: 6 columns wide
• Mobile: 3 columns wide (default)

Note: Final width depends on your settings and whether "Auto Fill Gaps" is enabled.

See also: Column span settings

---

What Are the Module Components?

Understanding the Hierarchy

The Bento Grid Module has three main components that work together:

1. Bento Grid Module (Outer Container)

• The overall structure within HubSpot CMS
• Controls placement on your page
• Sets global styling and background

2. Wrapper(s) (Content Groups)

• Groups content within columns
• Determines how content splits across the module
• Applies unified styling to grouped items
• Contains one or more content pieces

3. Content(s) (Individual Items)

• Individual pieces like icons, images, text, buttons
• At least one required per wrapper
• Mix different content types in the same wrapper

Relationship: Module → Column(s) → Wrapper(s) → Content(s)

What Can I Put in Each Component?

Wrappers can contain:

• Multiple content items
• Different content types together
• Style and layout settings for the group

Columns can contain:

• Multiple wrappers
• Each wrapper creates a new row or continues the current row

See also: Wrapper configuration guide

How Do I Configure the Module Layout?

Setting Column Numbers

Control how many columns appear on different screen sizes:

1. Go to Bento Grid Module → Layout → Columns
2. Set specific columns for:
   • Desktop
   • Small Desktop
   • Tablet
   • Mobile

Example: Use 3 columns on desktop, 2 on tablet, 1 on mobile for a responsive design.

What Does Auto Fill Gaps Do?

Auto Fill Gaps option: When enabled, the last content item in a column or row expands to fill remaining blank space.

Use case: Prevent awkward white space in your layout by automatically stretching content to fit.

How Do I Control Spacing Between Elements?

Grid Gaps setting: Defines the horizontal spacing between content elements.

Tip: Increase gaps for breathing room, decrease for tighter layouts.

Should I Use Content Width or Full Width?

Content Width:

• Module spans only the content area width
• Maintains consistent margins with other page content

Full Width:

• Module spans the entire window width
• Creates edge-to-edge designs

How Do I Adjust Module Spacing?

Padding vs. Margin: What's the Difference?

Padding (Top & Bottom):

• Space inside the module
• Creates breathing room within the module boundaries

Margin (Top & Bottom):

• Space outside the module
• Controls distance from other page elements

Configure both in Bento Grid Module → Layout.

How Does the Show More Feature Work?

What is the Show More Button?

The Show More feature lets you hide content behind a collapsible button. This is useful for long sections that you want to keep compact initially.

Enable it: Check Show More in the Layout settings.

How Do I Configure Collapsed Height?

The collapsed height determines how much content displays before the Show More button appears.

Settings available:

1. Set different collapsed heights for:
   • Desktop
   • Tablet
   • Mobile

Example: Show 500px on desktop, 300px on tablet, 200px on mobile.

Can I Customize the Button Style?

Yes, choose from:

• Standard theme button styles
• Your custom button styles

Configure in Show More Options section.

How Do I Style the Bento Grid Module?

Choosing a Color Scheme

Select a color scheme defined in your theme settings:

Bento Grid Module → Style → Color Scheme

Important: Color schemes control text and element colors to maintain proper contrast with your background.

How Do I Style the Title?

Title Styles - Text:

• Default: Inherits theme settings
• Custom: Choose specific color or gradient

Title Style - Background:

• Add a background color or gradient behind your title

Title Styles/Sizes:

• Set style, background, and size (h1, h2, h3) for each title
• Control visual appearance separately from semantic heading level

 

How Do I Add Visual Effects?

What Does Section Box Shadow Do?

The Section Box Shadow adds a shadow around the entire module, creating visual depth and separation from the page.

Enable it: Configure in Bento Grid Module → Style → Section Box Shadow.

Can I Add Rounded Corners to Wrappers?

Yes, use the Wrapper Border Radius setting:

1. Check the box to enable rounded corners
2. Enter pixel value (higher = more curved)

Example: 8px for subtle rounding, 20px for pronounced curves.

Note: You can override this per individual wrapper.

How Do I Add Shadows to Wrappers?

The Wrapper Box Shadow setting adds shadows to individual wrapper sections.

Control levels:

• Module level (applies to all wrappers)
• Individual wrapper level (override per wrapper)

See also: Wrapper styling options

How Do I Set Module Backgrounds?

What Background Options Are Available?

Choose from four background types:

1. Background Color: Solid color fill
2. Background Image/Video: Visual media background
3. Background Gradient: Color gradient effect
4. Transparent: No background (shows underlying content)

Configure in Bento Grid Module → Style → Background.

 

How Do I Create and Configure Wrappers?

What is a Wrapper?

A wrapper groups content items within a column and allows you to apply styling to the entire group. Think of it as a container that holds related content together.

Requirements:

• At least one wrapper required per column
• Multiple wrappers allowed per column

Behavior: Wrappers sit next to each other until the row fills, then new rows automatically create.

How Do I Name Wrappers?

Internal Name field: Add a descriptive name for organization.

Default naming: If left blank, wrappers auto-name as "Wrapper(s) 1", "Wrapper(s) 2", etc.

Best practice: Use descriptive names like "Hero Content" or "CTA Section" for easier management.

Can I Link an Entire Wrapper?

Yes, the Wrapper Link setting makes the entire wrapper section clickable.

Link options:

• External URL
• HubSpot Content
• Files
• Email addresses
• Phone numbers
• HubSpot Pop-up CTA
• HubSpot Blog post

Critical: If you add a wrapper link, do NOT add individual content links inside. HTML doesn't allow nested links and will break your layout.

Anchor links: Enter anchor tags (e.g., #contact) in the "Use Internal URL instead" field to link to page sections.

How Do I Control Wrapper Layout?

What is Column Span?

Column Span determines how many columns your wrapper occupies horizontally.

Range: 2-12 columns

Examples for desktop (12 columns available):

• Span of 12 = Full width
• Span of 6 = Half width
• Span of 4 = One third width
• Span of 3 = One quarter width

Remember: Default column widths vary by device (12 desktop, 9 tablet, 3 mobile).

What is Row Span?

Row Span controls the vertical space your wrapper occupies.

How it works:

• Determined by your chosen grid and wrapper count
• Only affects layouts with multiple rows
• Allows wrappers to span multiple row heights

Use case: Create taller sections that span 2-3 rows while other content flows around them.

When Should I Use Custom Height?

Custom Height overrides automatic row height with a fixed pixel value.

Use cases:

• Background image wrappers without content
• Full-width decorative sections
• Maintaining specific proportions

Warning: Custom heights can create empty spaces in your layout. Use Row Span whenever possible and reserve Custom Height for special cases.

How Do I Align Content Within Wrappers?

Horizontal Alignment Options

Choose how content aligns horizontally within the wrapper:

• Left: Content aligns to the left edge
• Center: Content centers horizontally
• Right: Content aligns to the right edge

Vertical Alignment Options

Choose how content aligns vertically within the wrapper:

• Top: Content aligns to the top
• Middle: Content centers vertically
• Bottom: Content aligns to the bottom

Configure both in Wrapper → Layout → Alignment Horizontal/Vertical.

Tip: Combine vertical and horizontal alignment for precise content positioning (e.g., bottom-right).

 

How Do I Style Individual Wrappers?

Understanding Style Layers

Styles cascade in this order (back to front):

1. Bento Grid Module Style (furthest back)
2. Column styles (middle layer)
3. Wrapper Style (top layer)

Key concept: Wrapper styles override module and column styles. Each wrapper can have independent styling.

Setting Wrapper Color Schemes

Options:

• Light: Light background with dark text
• Dark: Dark background with light text
• Inherit: Use the module's color scheme

Important: Select the appropriate scheme based on your background color to ensure text remains readable.

Configure in Wrapper → Style → Color Scheme.

How Do I Add Padding Inside Wrappers?

Add inner padding checkbox: Enables padding inside the wrapper without increasing its overall size.

When enabled, set:

• Padding top & bottom
• Padding left & right

Use case: Create space between wrapper edges and content for better visual balance.

Can I Override Module-Level Styling?

Border Radius Override

Three options:

• Inherit: Use module's border radius setting
• True: Set specific border radius for this wrapper
• False: Disable border radius on this wrapper only

Box Shadow Override

Three options:

• Inherit: Use module's box shadow setting
• True: Set specific box shadow for this wrapper
• False: Disable all box shadows on this wrapper only

Configure both in Wrapper → Style.

How Do I Set Wrapper Backgrounds?

What Background Types Are Available?

Choose from five background options:

1. Background Color: Solid color fill
2. Background Image: Image as background
3. Background Gradient: Color gradient effect
4. Glassmorphism/Blur: Frosted glass effect
5. Transparent: No background (shows column behind)

How Do I Configure Background Colors?

Background Color settings:

• Enter hex code (e.g., #0066CC)
• Use HubSpot's color picker
• Adjust opacity for transparency effects

Transparency tip: Lower opacity creates subtle overlay effects.

How Do I Set Background Images?

Image configuration steps:

1. Select an image for the wrapper background
2. Choose Background Position:
   • Bottom
   • Center
   • Left
   • Right
   • Top

Focal point: Position determines which part of the image remains visible when cropped.

Can I Add Image Overlays?

Yes, use Background Image Overlay to add a color or gradient layer over your image.

Configuration:

• Choose single color or gradient overlay
• Set opacity to see image through overlay
• For gradients: Set opacity per color or overall

Use case: Darken images to improve text readability.

How Do I Create Background Gradients?

Setting Gradient Direction

Choose from four gradient directions:

• Horizontal: Left to Right
• Vertical: Top to Bottom
• Diagonal: Top Left to Bottom Right
• Diagonal: Bottom Left to Top Right

Configuring Gradient Colors

For each gradient color:

1. Enter hex code or use HubSpot's color picker
2. Set individual opacity per color
3. Adjust color positions for custom effects

Tip: Use complementary colors for smooth, professional gradients.

What is Glassmorphism/Blur?

Understanding the Effect

Glassmorphism creates a frosted glass effect with background blur. This modern design technique is popular for overlay cards and panels.

Configuration:

1. Choose background color using hex code or color picker
2. Adjust opacity for desired transparency
3. Blur intensity is automatic

Browser compatibility: Browsers without blur support display a non-blur version automatically.

Use case: Create modern, layered designs with depth.

When Should I Use Transparent Backgrounds?

Use Transparent backgrounds when you want the column's background to show through the wrapper.

Best for:

• Layered designs
• Content that should blend with surroundings
• Minimal visual separation

Can I Add Hover Effects to Wrappers?

What is Custom Hover Background?

The Custom Hover Background setting displays a different background when users hover over the wrapper with their cursor.

Configuration:

• Set in Wrapper → Style → Custom Hover Background
• Choose any background type (color, image, gradient)
• Smooth transition on hover

Use case: Create interactive cards that change appearance on hover to indicate clickability.

How Do I Add Custom CSS to Wrappers?

Using Custom Classes

Custom Class field: Add a CSS class name to target this specific wrapper with custom stylesheets.

Steps:

1. Enter class name in Wrapper → Style → Custom Class
2. Create custom CSS in your stylesheet
3. Target the class with your styles

Use case: Apply unique styles beyond the module's built-in options.

Important: Requires CSS knowledge and access to custom stylesheets such as your child.css file. 

What Content Types Can I Add?

Available Content Options

You can add these content types to any wrapper:

• Button/Link: Clickable buttons or text links
• CTA: Conversion tracking button
• Icon: Single icon graphic
• Icon with Text: Icon paired with text and optional button
• Image: Static image
• Intro Title: Small text above headings
• Line: Horizontal divider line
• Logo: Company or brand logo
• Menu: Series of navigation links
• Rich Text Field: Formatted text content
• Social Icons: Social media links
• Spacer: Vertical spacing element
• Title: Heading text
• Form: HubSpot form integration

Flexibility: Mix multiple content types within the same wrapper.

How Do I Add Titles to Wrappers?

Using the Title Content Type

Title content: Adds a heading using your default theme style.

Limitation: Uses default styling only.

Alternative: Use the Rich Text Field content type for custom title styling and formatting options.

When to use Title vs. Rich Text:

• Title: Quick, consistently styled headings
• Rich Text: Custom formatting, colors, and styles needed

How Do I Add Menus to Wrappers?

What is the Menu Content Type?

The Menu content type adds a series of navigation links similar to a traditional website menu.

Setup:

1. Select Menu content type
2. Click Create new to configure
3. Add links and customize appearance

Use case: Create vertical or horizontal navigation within your Bento Grid layout.

What's the Difference Between Button/Link and CTA?

Button/Link Content Type

Best for: General clickable elements without conversion tracking.

Features:

• Style using any CTA/Button Style
• Includes Link style option
• Minimal performance impact

Use case: Navigation buttons, download links, external site links.

CTA Content Type

Best for: Tracking conversions and marketing goals.

Features:

• Style using any CTA/Button Style
• HubSpot conversion tracking
• Detailed analytics

Warning: Multiple CTAs impact page speed due to additional HubSpot tracking code.

Recommendation: Use Button/Link when conversion tracking isn't needed to maintain optimal performance.

See also: Performance optimization tips

How Do I Add Forms to Wrappers?

Form Content Type

Add HubSpot forms directly into your Bento Grid layout.

Styling options:

• Form styles from theme settings
• Button styles from theme settings
• Configure in Bento Grid Module → Style → Form Style

What's the Performance Impact?

⚠️ Important: HubSpot forms significantly impact page speed.

Best practices:

• Avoid forms on SEO-sensitive pages
• Use forms sparingly
• Consider form placement carefully

Alternative: Link to a dedicated form page for important landing pages.

How Do I Work with Icons?

Icon Content Type

Add standalone icons to your wrapper.

Icon sources:

• Built-in icon library
• Upload custom image icons

Image requirements: Use 30x30px or 60x60px for retina displays.

Configuration options:

• Icon Size: Set size in pixels
• Icon Color: Choose color using hex code or color picker

Icon with Text Content Type

Combine icons with text and optional buttons for rich content blocks.

Icon options:

• Image upload
• Font Awesome Free icons
• Font Awesome Pro icons (if available)

Configuration settings:

• Icon/image size (pixels)
• Icon color
• Content title and text
• Optional button with title and link
• CTA/Button style from theme
• Button size (regular, long, small, large, full width)
• Icon style (square or circular)
• Icon position (left or right of text)
• Gap between icon and text (spacing)
• Vertical alignment within module

Use case: Feature blocks, service listings, benefit highlights.

How Do I Use the Line Content Type?

Adding Divider Lines

The Line content type creates horizontal divider lines to separate content sections.

Configuration options:

• Line color
• Opacity
• Height (thickness)
• Padding top and bottom

Use case: Visually separate content groups within wrappers or create subtle section breaks.

What is the Rich Text Field?

Most Flexible Content Option

The Rich Text Field is the most versatile content type in the Bento Grid Module.

Capabilities:

• Full text formatting options
• Custom styling
• Links and buttons
• Lists and tables
• Images within text
• HTML editing

When to use Rich Text:

• Complex content layouts
• Custom text styling needed
• Mixed content types in one field
• Long-form content

Tip: Rich Text Field provides maximum creative control but requires more configuration time.

How Do I Use the Spacer Content Type?

Adding Vertical Space

The Spacer content type adds vertical spacing to separate content or align elements.

Configuration:

• Set height in pixels
• Add anywhere within wrapper

Use cases:

• Create breathing room between content items
• Vertically align content with other columns
• Push content to specific positions

Alternative: Adjust wrapper padding for overall spacing.

How Do I Name Content Items?

Internal Name Organization

Each content item has an Internal Name field for organization.

Default naming: If left blank, items auto-name as "Content(s) 1", "Content(s) 2", etc.

Best practice: Add descriptive names like "Hero Button" or "Feature Icon" for easier content management, especially in complex layouts.

Tip: Clear naming helps when returning to edit the module later.

 

Common Questions

Why is my content layout shifting?

Content Layout Shift (CLS) can occur when the Bento Grid Module loads in or near the viewport. This happens as the browser calculates and renders the grid structure.

Solutions:

• Optimize image sizes and formats
• Set explicit dimensions on content
• Use lazy loading for below-fold content

How many wrappers should I use?

Use as many wrappers as needed to logically group your content. However, excessive wrappers can make the module harder to manage.

Guideline: Start with fewer wrappers and add more as your design requires.

Can I nest Bento Grid Modules?

No, you cannot nest Bento Grid Modules inside each other. Each module is independent.

Alternative: Use multiple wrappers and content types within a single module to create complex layouts.

What happens if my column spans exceed 12?

The grid system will automatically wrap excess columns to the next row. Design your spans to total 12 or less per row for predictable layouts.

Should I use wrapper links or content links?

Use wrapper links when:

• The entire card/section should be clickable
• You have one primary call-to-action

Use content links when:

• Multiple clickable elements needed in one wrapper
• Different links within the same section

Never: Mix wrapper links with content links (HTML doesn't allow nested links).

How do I optimize images in the Bento Grid?

Follow these optimization steps:

1. Resize images to required dimensions
2. Convert to WebP format
3. Compress using TinyPNG
4. Use SVG for logos and icons
5. Set appropriate quality settings

Module Options