The Multi tabs Columns section allows you to organize multiple sets of columns within the same screen area by placing them under tabs. This helps you present structured information in a clear and visual way, while allowing visitors to switch between different content groups without scrolling through multiple sections.

Use this section when you want to display column-based content across multiple categories, such as product groups, value propositions, team members, use cases, solutions, or event tracks.

Here are a few ways to use the Multi tabs Columns section:

• Add multiple product categories, with each tab showing a different set of product columns.

• Present value propositions by persona, industry, or use case.

• Introduce account team members grouped by role or region.

• Display event agenda tracks, with each tab showing relevant sessions.

• Organize solution benefits across different business challenges.

 

Before you begin

Choose images to use in your Multi tabs Columns section.

The maximum file size for images is 25 MB.

The following image file types are supported: png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp.

For icons, we recommend using circles or squares, because rectangles may cut the icon.

The recommended sizes for your column images are:

• Rectangle: Ratio 3:2; image size no smaller than 750px × 500px.

• Circle/Square: Ratio 1:1; image size no smaller than 750px × 750px.

The icon size in the tab is fixed at 50x50 pixels.

 

---

 

Designing a Multi tabs Columns section

You can design the different elements of the Multi tabs Columns section to suit your own personal style.

1. Select the board on which you wish to add a Multi tabs Columns section and open the Designer tab.

2. Hover over the border between sections where you want to add the section and click Add Section.
   The Section Gallery opens and displays the section types.

3. Select Multi tabs from the section menu.

4. Select the Multi tabs Columns template.

5. Click Add Section.

6.  
   The new Multi tabs Columns section appears on your board for you to design.

7. To design the section, choose one of the section editors.

• Multi tabs section editor - design the overall look and behavior of the tabs.

• Tabs editor - design each tab separately, including the columns displayed in that tab.

• Text editor - edit the section title and subtitle.

• Background editor - edit background settings, including images, video and padding.

 

---

 

Using the Multi tabs section editor

Using the Multi tabs section editor, you can design the overall tab behavior, including tab visibility, alignment, style, navigation, and animation.

1. To open the Multi tabs section editor, click the edit button on the section toolbar.

2. To hide the Title or Subtitle, disable the eye icon next to it.

3. Set the Alignment of the title and subtitle.

4. Under Tabs, configure the following settings:
   a. Enable Icon visibility. If enabled, an icon appears on the tab.
   b. Set the Tabs alignment on the page.
   c. Choose a tab Style.
   d. To add additional tabs, click Add Tab.
   e. To remove a tab, click the X button next to the tab.
   f. To rearrange the order of tabs, hover over the tabs and move the cursor.

5. To hide labels, toggle on the setting.

6. To enable Arrow navigation, toggle on the setting. This is ideal when you have a large number of tabs and want to ensure they are easily accessible to visitors.

7. To activate the Animation settings, select the checkbox, then choose the animation speed: slow, medium, or fast.

The animation activates automatic transition between tabs and can be seen only on a live board.

 

 

---

 

Editing the tabs

Each tab contains its own set of columns. You can edit each tab separately and define the content, layout, and column settings for that tab.

1. To edit a tab, hover over the tab you wish to design and click the tab edit button or double-click the tab.

2. To choose an icon image for the tab, open the Image gallery.

3. Enter text for the label button.

4. Under Columns, add or delete columns for the selected tab.

5. To add a column, click Add Column.

6. To remove a column, click the X button next to the column.

7. To rearrange the order of columns, hover over the columns and move the cursor.

---

 

Configuring column settings inside a tab

 

Under Settings, configure the following settings for the columns in the selected tab:

a. Set the Columns Alignment to align the columns relative to the page.
b. Set the Content Alignment to align the text inside each column.
c. Set the Icon Alignment to align the icon inside each column.
d. Select the maximum number of columns per row.
e. Use the slider to set the size of the icons on the columns from small to large.
f. Select the icon shape. Preferably, choose the circle or square shape for icons.
g. Choose a button style from the dropdown list.
h. Use Show shadows to show or hide shadows if shadows are defined in the theme object.

---

 

Configuring text settings for columns

Under Text, configure the following text settings for the columns. These settings apply to the columns in the selected tab.

a. For Title, show or hide the title. If you selected to show the title, select the font size, font type, and color.
b. For Subtitle, show or hide the subtitle. If you selected to show the subtitle, select the font size, font type, and color.
c. For Paragraph, show or hide the paragraph text. If you selected to show the text, select the font size, font type, and color.
d. Choose a Background Color for the columns.

---

 

Designing an individual column

You can design each individual column in the selected tab by adding an icon image and adjusting its settings.

Additionally, you can edit the text for the title, subtitle, short paragraph, and button on each individual column. For example, you can change the color of a title, add a link, or add a bullet or numbered list to the paragraph text of one column only.

1. To edit a column, hover over the column you wish to design and click the column edit button or double-click the column.

2. To choose an icon image, open the Image gallery.

3. Use the Fit/Fill button to automatically adjust the image:
   a. Fill - adjust the image so that the icon shape is filled and the image ratio is maintained.
   b. Fit - adjust the image so that the entire image fits in the icon shape.

4. Use the editing toolbar to edit the text for the Title, Subtitle, and Paragraph.
   For example, you can make a title bold or italic, add a link, or change its color.

5. Enter text for the Button.

6. To choose an action to be taken when clicking the button on the column, click Actions.

You can only edit the text if you made it visible in the section widget editor.

---

 

Editing the section title and subtitle

You can use the text editor to edit the Multi tabs Columns section title and subtitle.

1. To open the text editor, hover over the text of the title or subtitle in the section and click the text edit button.

2. To format the text elements, see the article Using the Text Editor.

---

 

Designing a call-to-action button

You can design the CTA button displayed on the Multi tabs Columns section, including the button style and the type of action taken when it is used.

1. Hover over the CTA button and click the edit button or double-click the button.

2. To style the button elements, see the article Designing buttons and forms.

 

---

 

Designing the section background

You can design the background with a unique background color, image or video and update padding settings.

1. To open the background editor, click the background edit button on the Multi tabs Columns section toolbar.

2. To edit background elements, see the article Using the Background Editor.

Configuring the Video floating section

Configure the following settings:

1. To set the position of the Video floating section on the board, use the grid layout.

2. Under Source, click Select Item and choose a video to display.

3. Under Settings, use the slider to adjust the Video Size from small to large.

4. To have the video Autoplay, enable the toggle.

5. To set a cover image for the video, select or upload an image to display before the video is played.

Analytics

When a user views a video section, it is marked as a viewed item. The video name and watch time are listed in the Pulse tab activity bar and in the report center.

If autoplay is enabled, the item view action is recorded only when the lead unmutes the video. If the lead does not unmute the video, it is not considered a viewed item.

Previewing the Video floating section

To preview the board with the Video floating section, click Preview on the top menu bar and confirm that the video position, size, autoplay behavior, cover image, and animation appear as expected.