Container widget

Containers help organize content and structure layouts efficiently.

• Go to Widgets – Open the Widgets panel in your editor.
• Select “Container” – Find the Container widget and add it to your page.

This allows you to group elements, improve spacing, and enhance design flexibility, ensuring a clean, structured look! Once your container is set up, there are many settings available to help you create and design the perfect section for your page.

​

Container settings.

Within a container you can edit:

• Background colour
• Add video background
• Gradients
• Overlays
• Background pattern
• Shape dividers
• Anchor points
• Slider mode
• Block visibility
• CSS area

​

Container Elements

Before we get in to the finer details let’s take a look at the main container elements. Like any container/block you can make divisions and create multiple horizontal columns and also vertical columns. To split the container into up to 5 columns, hover your mouse at the top of the selected container or block. A button will appear to perform the split. In the image below we have dropped a video testimonial widget into 2 of the 3 columns so you can see visually what we mean.

---

​

Column Settings

Once you have created your columns you can edit the column settinsg if required. In the column pill you will see the settings cog to open the column settings: When selected a new panel will display, here you can:

• Add a background colour
• Column Gutters
• Border
• Shadow
• Glass blur
• Slider Mode
• Tabs

---

​

:burst-new: Column Tabs

Column tabs are a great way to display clickable animations to your columns where required. To create a column tab, select Tabs Mode. At the top of the column you will now see a tab displayed, and at the bottom is where you can configure the tabs and it’s behaviour.

​

Tab Settings

Open the tab settings by clicking the cog icon: Within the tab settings you can: Select your tab style:

• Pills
• Underline
• Minimal
• Outline

Once you have selected your tab style, go ahead and add a tab title, icon and badge if needed. Then configure the styling from the tabs background to the hover modes.

​

How tabs work

When you add multiple tabs, it allows you to create different content that is displayed within the container, just how the Slider mode works. When a tab is selected it will display the content you have created or duplicated in the container.

---

​

Global column

Global columns streamline your design process by allowing you to use the same block on multiple pages. With the global column setting, you can update one location, and the changes will automatically apply to all columns sharing the same global column information. To create a global column, first select the desired column. Then, navigate to the settings pop-out and select ‘This is a global column’. After selection, a drop-down menu will appear. For first-time users, only one option will be available, as illustrated below: After selecting the option, name your column and click save. Now, your column is global. This means that if you copy and paste this column to multiple pages on your website, any edits made will reflect on all instances of the global column. The image below shows the column we converted into a global column. No other columns will be affected.

---

​

Anchor points

Anchor points are specific sections of your website that you direct visitors to when they click on a call-to-action button or a link within the text. If you have a button on your website that you want visitors to click, you can link it to a specific section on the same page. When clicked, it will take users directly to the section where the anchor point is placed. How to add an anchor point:

1. Navigate to Container Settings.
2. Select Anchor Point.
3. Label your anchor point for future reference.
4. Add the anchor point link to the call to action (e.g., a button).

Adding your anchor point from your call to action Select your originating call to action. In this case we will use a button. Select the anchor point, then choose the page, section, or funnel step where your anchor point is located. It will have the same label you assigned earlier. Make sure you have saved your anchor point if it does not appear in the drop-down menu. Once saved, it will be listed.

​

Container additional settings

Within the container you can control:

• Container delay
• Hide/make container draft
• Block/container positioning

Container Delay functions just like any widget delay: You can choose a specific time frame for the whole container to appear when a visitor views your website. Hiding or marking a container as a draft will make it invisible to website visitors. Finally, block/container positioning allows you to quickly move your containers up and down the page.

---

​

:burst-new: Background Pattern

In your container settings you can add a background pattern to that container. Simply select your background pattern, adjust the spacing and add some colour.

​

Patterns:

• Horizontal lines
• Vertical lines
• Diagonal lines
• Grid
• Dots

​

Add Gradient ‘Updated’

Along with adding a gradient to your container, you can now add animations to the gradient, giving you an amazing animated background effect. Choose your animation style:

• Flowing gradient
• Aurora mesh

Then select your animation speed.

---

​

:burst-new: Slider Mode

Upon turning Slider Mode on, you will see a new pill display which controls your slider. The numbers denote the amount of slides created, and the cog is the settings control. To create your first slider, click the + button as shown. Or you can duplicate the full container to make your editing faster, by selecting the duplicate icon.

​

Slider Settings:

Here you can display navigation arrows, bullets and add animations to your slides. You can add multiple slides to the container, each having their own design, animation and more.

​

Column Slider Settings

Just like the container slider mode, each column can have it’s own slider mode also. Simply click the column settings cog and enable slider mode. The settings and animation are the same as the slider mode settings.

---

​

:burst-new: Block Visibility

Block visibility allows you to display certain content to certain people, you’ll be able to stack rules which help you target specific people, locations and more. To view the block visibility click on the contain settings cog and the side panel will display.

​

Adding visibility rules:

There are 6 base visibility options to choose from:

• Everyone
• Logged in members
• Specific membership groups
• After time on page
• Specific date and time
• Specific countries

Here is an example of stacking multiple rules to configure a containers visibility rules: In this example we are only displaying this container on a specific date ‘time frame’ to certain members of a selected membership group.

---