How to use the Container widget

Adding a container widget to your website. To add a container go to > Widgets and select container

Settings

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

The block/container settings enable you to:

Choose your background:

  • Image
  • Video (YouTube)
  • Colour
  • Gradient
  • Shape dividers
  • Anchor points
  • CSS

Adding an image

Adding an image to the container. You can display your container image in multiple ways and variations to suit your website look.

Start by selecting your image from your files manager. Once an image is added, you are presented with more options.

  • Parallax
  • Image position

Add a background colour to your image by opening the colour selector


Shape Divider

Adding shape dividers to your container add amazing visual appeal and breaks up your containers. Select from multiple shape divider options.


Column settings

Column settings enable you to add more rows and columns to your container.

Adding more columns to your container. You can add up to 5 columns per container to enable you to modify each one.

Each column has its own settings display. You are able to modify the size of each container to suit your layout.

Global Column

If you want to make any column a 'Global column' then that is possible individually too. Global columns allow you to speed up design and also make changes throughout every page or column that use the Global column option.

For example, You have a pricing or download column you want to display on all pages. The global column setting allows you to make changes to one column and will change all text, images, videos, and more which also share the same global column.

Simply select Global column > label it and save. It will be added to the global columns menu for you to select when using again on another page or section of your website.

Anchor point

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 the 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 labeled it previously.

Note you can have different anchor points across different devices 'Mobile and desktop' if required.

If you cannot see your anchor point in the drop-down menu, be sure that you have saved it. Then it will appear in the drop-down menu.

Container additional settings

Within the container you can control:

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

Container delay

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.