Container widget
Last updated
Last updated
The container widget enables you to add additional widgets in to a specific container or also known as a block.
Adding a container widget to your website. To add a container go to > Widgets and select container
Once you have your container in place. There any many settings that allow you to create and design the perfect section or your page.
Let's take a look closer at the container settings.
Below you will see:
Block settings
Column settings
Block display tab
Add block
Within a container you can edit:
Background colour
Add video
Gradients
Overlays
Shape dividers
Anchor points
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. The image below shows the container/block being split into 3 horizontal columns.
To do this action, simply hover your mouse at the top of the selected container/block. A button will appear which enables you to split the container in to up to 5 columns.
Note: Each column can be resized to the width you require. Additionally you can also add borders and different colours to each column.
In the image below we have added a colour to the columns so you can see visually what we mean.
Before we progress, in to how to use columns for your content, we mentioned about creating vertical columns too. To add a new column which can sit either above or below the 3 columns we have just created. The column we just created and you will see a plus + icon. This will add a new column above for example.
In the image below we have just added a new column above the previous column we just created. This time we created a split of two columns. White and black for reference.
Now we have one container with:
2 columns
3 columns
Global columns help you speed up your design when wanting to use the same block on multiple pages. With the global column setting you can update in one place and the changes will affect every column that has the same global column information.
First select the column you want to make a global column. Then navigate to the settings pop out and select 'This is a global column'
Once selected you will see a drop down menu, if doing this for the first time you will only have one option to select from as shown below:
After you have selected that option, give you column a name and click save. Now your selected column is a global column. Again meaning that if you copy and paste this column to multiple pages on your website, when an edit it made the changes will show on all the other global columns you have selected.
Displayed in the image below is the column we turned into a global column. No other columns here will be affected.
If you need to remove or rename the column you can do so be wither deselecting the option or clicking on the rename text.
Anchor points are sections of your website that you want to move your visitors to when they click a call to action button or link within text 'Anywhere you add a link'
For example: If you have a button on your website that you want visitors to click to take them to a specific section on that page. When they take action, they will be taken straight to the section where the anchor point has been added.
How to add an anchor point:
Go to container settings > select anchor point > label your anchor point for future reference and lastly, where you have the call to action eg a button, add the anchor point link there.
Adding your anchor point from your call to action
Select your originating call to action. In this case we will use a button.
Select anchor point > then select what page/section or even funnel step where your anchor point is located. It will be labeled the same as you labelled it previously.
Note you can have different anchor points across different devices 'Mobile and desktop' if required.
If you cannot see you anchor point in the drop down menu, be sure that you have saved it. Then it will appear in the drop down menu.
Within the container you can control:
Container delay
Hide/make container draft
Block/container positioning
Container delay works exactly the same as all widget delays: You are able to select a time frame when you want that entire container to display when someone visits your website.
Hiding or making container draft will hide the entire container from the website visitors view.
And finally, block/container positioning. This is a fast way to move your containers up and down your page.
