How to Use Salesforce Experience Builder’s Columns Component Like a Pro

Salesforce Experience Cloud’s page-building tool, Experience Builder, has gone through dramatic improvements since its launch. With the release of the enhanced Lightning Web Runtime (LWR) version in 2022, admins gained more flexibility and control than ever before, surpassing the capabilities of the older Aura version. However, it still lacked the ability to create fully responsive websites. Websites looked fantastic on desktops and laptops but felt lackluster on tablet and mobile devices. Fortunately, this all changed with the Summer ‘24 release.

Experience Builder is equipped with theme settings like colors, fonts, and spacing options, allowing you to maintain consistency across your website. It also offers components, which are like building blocks you can drag and drop to design your pages. Among these components is the Columns component, which lets you create up to six columns (or slots) on a page to display various types of content.

When combined with LWR’s ability to nest components, you can create quite intricate designs. However, a significant limitation was that columns would automatically stack into rows on smaller screens, like tablets and mobile phones. While this ensured responsiveness, it didn’t always provide the best user experience. Enter the Summer ’24 update, which introduces two key features to the Columns component: Column Arrangement and Component Alignment.

Column Arrangement

Previously, the Columns component automatically shifted to rows on smaller screens. The new Column Arrangement feature gives you control over whether your columns stay as columns or switch to rows on different devices. This means you can now create fully responsive websites that look great on all screen sizes.

Component Alignment

The Component Alignment feature may not be as groundbreaking as the Column Arrangement, but it still offers significant enhancements. It allows you to vertically align content at the top, middle, or bottom of your columns, providing greater control over your layout.

Why These Updates Matter

These updates allow you to create sophisticated web designs that previously required custom code or costly third-party apps from the Salesforce AppExchange. Now, you can achieve these designs using Experience Builder’s built-in features, without any coding skills.

In this article, you’ll learn how to use the Columns component and other features unique to enhanced LWR to build common web page layouts seen on modern websites – all without writing a single line of code.

What We’ll Build

This article will demonstrate how to build the following layout examples:

Responsive Footer
3-Column Tile Grid
Bento Box Layout

Our Example: RunBiz Website

To demonstrate these unique layouts, we’ll use a digital experience website for RunBiz, a fictitious technology company. You can view the RunBiz website and adjust your browser’s width to see how the design adapts to different screen sizes.

*View of the hero section of the RunBiz website.*

Creating a Responsive Footer

A footer is essential for any website. Users often look to footers for contact information or links they can’t find elsewhere. A common footer design places the company logo on one side and several columns of useful links next to it. These link columns stack vertically on tablets and mobile screens.

Before the Summer ’24 release, building a feature like this required custom web components. Now, with the new Column Arrangement feature, it’s not only possible but also easy to achieve!

*Animation showing how the footer layout changes transition from desktop to tablet to mobile screens.*

The above screen recording demonstrates how the RunBiz website footer adapts when the browser width changes. On mobile, the logo appears above two columns of links. On tablets, the logo shifts to the left of the two columns. On desktops, the two link columns expand to four.

It may seem complex, but here’s how it’s done:

Multi-Nested Components

Enhanced LWR allows components to be nested within other components. Paired with the Column Arrangement property, you can create layouts that change dynamically with screen sizes.

Here’s the structure of the Footer components in Experience Builder:

Columns Component (A)

Slot One: Company Logo
Slot Two: Second Columns Component (B)

Columns Component (B)

Slot One: Columns Component (C)
Slot Two: Columns Component (D)

Within the slots of Columns Components (C) and (D) are Rich Text Editor components where the links have been added.

Desktop Structure

Each column’s arrangement is set to horizontal, aligning them in a single row.

*Diagram showing the Columns component structure of the footer.*

Tablet Structure

Columns (C) and (D) switch to a vertical arrangement.

*Diagram showing that Columns (C) and (D) have their arrangement changed to vertical on tablet screens.*

Mobile Structure

Columns (A) switches to a vertical layout.

*Diagram showing Columns (A) has its arrangement set to vertical on mobile screens.*

Once you’ve set up the responsive layout, fine-tune the spacing between columns to suit your design.

Building a Three-Column Tile Grid

LWR introduced a new component category called a Repeater, which includes grid and list components. The Grid component allows you to display a grid of elements with data sourced from Salesforce CMS or other Salesforce products.

While functional, the Grid component lacks precise control over how the grid displays on various screens. Setting three columns for a desktop view also results in three columns for tablets, then defaulting to a single column on mobile.

Animation showing how the Tile Grid’s layout changes on different screen sizes when using the standard Grid component. It goes from three columns on desktop and tablet screens to one column on mobile screens.

This may be fine for most cases, but for the RunBiz website, the design requires two columns on tablet layouts instead of three. Here’s how to achieve that using the Columns component…

Columns to the Rescue

Using the Columns component instead of the Grid component provides more detailed layout control. However, it requires additional setup.

Animation showing how the Tile Grid’s layout changes using the updated method of Columns components. It starts at three columns on the desktop, goes to two columns on the tablet, and to one column on mobile.

Key Strategy: Visibility Settings

A vital technique for this layout is utilizing component visibility settings, an enhanced LWR feature found under a component’s Visibility tab. This feature lets you hide components under specific conditions.

In the below screenshot of Experience Builder’s Builder Mode, darkened components represent components hidden for specific screen sizes. You might also notice duplicated tiles for tiles three and four. This duplication is essential for achieving the desired layout.

*Builder view of the Tile Grid components.*

The diagrams below show the structure of this section in Experience Builder.

First Row – Columns (A)

Single Columns component with two slots:
- Slot One: Columns Component (B), which contains Tile 1 and Tile 2
- Slot Two: Tile 3

Second Row – Columns (C)

Slot One: Hidden duplicate of Tile 3 (only visible on tablet)
Slot Two: Hidden duplicate of Tile 4 (only visible on tablet)

Third Row – Columns (D)

Single Columns component with two slots:
- Slot One: Tile 4
- Slot Two: Columns Component (E), which contains Tile 5 and Tile 6

Desktop Layout

On a desktop screen, it looks like there are three columns and two rows.

*Diagram showing the structure of the Tile Grid components.*

Tablet Layout

Columns (A) and (D) switch to vertical. Tiles 3 and 4 become hidden, revealing the middle Columns (C), which shows duplicated Tiles 3 and 4.

*Diagram showing that on tablet screens, Columns (A) and (D) have their arrangement switched to vertical.*

Mobile Layout

Columns (C) is hidden again, and Columns (A), (B), (D), and (E) are switched to a vertical arrangement, which stacks all tiles into a single column.

*Diagram showing on mobile screens Columns (B) and (E) have their arrangement switched to vertical.*

While this approach is more involved than using the Grid component itself, it offers the control necessary for RunBiz’s specific design requirements. Hopefully, future Experience Cloud updates will allow setting different column numbers for various screen sizes for the Grid component. Until then, this method provides the best solution.

Crafting a Bento Box Layout

Bento Box refers to a website layout where content sections of varying sizes fit together like a puzzle, similar to how a bento box organizes food. While many variations exist, a common example looks like this:

*Diagram showing a basic Bento Box layout.*

For the RunBiz website, we’ll use this layout to showcase client testimonials. On desktop screens, the design calls for two columns and two rows with offset widths. On tablets, the columns have equal widths, while on mobile, there’s a single column with four rows.

The finished feature works like this:

*Animation showing how the Bento Box layout changes when the screen width changes.*

Addressing Column Width Limitations

The current Columns component lets you set column widths, but these settings don’t change with screen sizes. For instance, if you set the component’s column distribution to have slot widths of seven and five for desktops, those widths remain on tablets as well. A different strategy is needed to achieve equal widths on tablets.

*Salesforce Columns component property showing a column distribution of seven and five.*

Solution: Visibility Settings

We’ll use visibility settings again, along with columns within columns and duplicated content, to build this layout.

Here’s the structure in Experience Builder:

*Builder view showing the component structure of the Bento Box grid. Two banner components are grayed out.*

Columns Component (A)

Slot One: Testimonial Banner 1
Slot Two: Columns Component (B) – two equal slots

Columns Component (B)

Slot One: Hidden duplicate of Banner 1 on desktop
Slot Two: Banner 2