Container Widget

The container widget allows you to add other widgets into a designated container or block.

To include a container widget on your website, follow these steps: Go to the Widgets section and choose the container option.

After you have inserted the container widget, you can utilize various settings to produce and design the ideal section for your page. Let's delve deeper into the container settings, which include:

• Block settings

• Column settings

• Block display tab

• Add block

Inside the container, you can also modify:

• Background color

• Video inclusion

• Gradients

• Overlays

• Shape dividers

• Anchor points

Container Elements

Before getting into the specifics, let's look at the key elements of the container. Similar to any container or block, you can generate divisions and establish multiple horizontal and vertical columns. The accompanying image demonstrates the container is divided into three horizontal columns.

To split the container into columns, hover your mouse over the top of the chosen container or block. A button will emerge, allowing you to split the container into up to five columns.

Note that every column can be adjusted to the desired width. Moreover, you have the option to incorporate borders and distinct colors for each column.

In the following image, we have assigned colors to the columns for visual demonstration purposes.

Before proceeding with how to utilize columns for your content, it's worth noting that we previously discussed generating vertical columns as well.

To include a new column, which can be positioned above or below the three existing columns, look for the plus "+" icon located within the column that was just created.

Clicking on this icon will append a new column above or below, depending on your preference.

The following image shows a new column that has been introduced above the previously created column. This time, the column has been divided into two sections, one blue and the other green, for your reference.

Now we have one container with 2 columns in one half and 3 columns in the other half.

Global column

Global columns let you quickly design your website by allowing you to use the same block on multiple pages. With global column settings, you can modify a single column and it will update all columns that share the same global column information. To create a global column, choose the desired column and select "This is a global column" in the settings pop-out menu.

Upon selection, a drop-down menu will appear. If this is your first time creating a global column, you will only have one option to choose from, as displayed below:

After choosing the option, provide a name for your column and save it. Your selected column will now become a global column.

This means that any changes made to this column will appear across all other global columns that you have chosen, even if you copy and paste it to multiple pages on your website.

The image below illustrates the column that has been transformed into a global column, and only this column will be affected.

If you wish to remove or rename the column, you can simply deselect the option or click on the "rename column" text.

Anchor points

Anchor points are specific sections of your website that you can link to using a call to action button or hyperlink.

This allows visitors to be taken directly to that section when they click on the link or button.

For instance, if you have a button on your website that you want visitors to click to go to a specific section on that page, you can use an anchor point to take them directly to that section.

How to add an anchor point:

To create an anchor point, go to the container settings and choose the "anchor point" option.

Give it a name that you can remember for later use.

Then, add the anchor point link to any call-to-action elements such as a button.

To add your anchor point from your call to action, start by selecting your call to action, for example, a button.

Then select the anchor point option and choose the page or section where your anchor point is located.

The anchor point should be labeled the same as you previously named it.

Keep in mind that you can have different anchor points for different devices, such as mobile and desktop.

If you don't see your anchor point in the drop-down menu, make sure you have saved it first, refresh the page, and then it will appear as an option.

Container additional settings

Within the container here's what you can control:

• Container delay To delay the display of a container on your website, you can set a specific time frame, just like with any other widget.

• Hide/make container draft You can hide or make the container draft to prevent visitors from seeing it.

• Block/container positioning You can quickly move your containers up and down the page using block/container positioning.