The Container is a containing element that can be used to build page sections and structure your pages by section.
*Note: This element was renamed as the Container element, and was previously known as the Section element
How to Use Containers On Your Pages
Containers are super easy to use. Simply drag one onto your page to get started, you will find the Container element within the left side menu.
Setting The Minimum Height of a Container
Setting the minimum height of your Container element can be a great way of showing off your background images, or just ensuring that your content has all the space that it needs.
When a Container element is dragged onto the editor, it is assigned a default minimum height value of 50px.
This can be set in the right-hand side menu of the editor.
How to Make Your Containers Full Width
If your page is not full width, you can set the Container to Full Width. This will make use of all available horizontal space of the page.
How to Set a Background in a Container
The Container element allows you to set an image, color or video background. This is super helpful for creating backgrounds to your content.
There are two options:
a solid color, which can be accessed by clicking on Color under Background in the right side menu and then Solid.
or a gradient, which can be accessed by clicking on Color under Background in the right side menu and then Gradient.
Applying a color gradient as the background of a container
A color gradient can be applied by adjusting the settings in the image below:
The function of these settings are detailed below:
Color points
Define which color is at a specific point in the gradient. These color points can be shifted left or right, with the leftmost color point representing the color at the top of the gradient. Please note that while 2 color points will show by default clicking anywhere on the gradient strip will create a new color point.
To change the color assigned at a color point simply click on it and then choose the color via the color picker.
Color picker
Allows a color to be assigned to a color point.
*Note: The Color gradient option can only currently be used to create a vertical linear gradient at the moment. The ability to create a horizontal gradient is one our product team is considering.
Setting a Background Image
A Background Image can be applied to a container by clicking on Image under Background in the right side menu and then clicking the Add image (optional) button.
Background Size
The Background Size attribute as the name suggests controls the size of the background image within the container.
There are 3 options for this setting:
Cover
Ensures that your image fills the whole container while while maintaining its aspect ratio. This setting forces the background image to fill the width of the container and that can result in portions of the image being cropped (cut off).
Contain
Ensures that your image fits within the container element without cropping. The entire image will be visible, but there may be space on either side of the container, if the aspect ratios differ.
Custom
Allows for width and height values to be assigned to the background image.
Background Repeat
This setting when enabled fills the container with a collage of multiple instances of the same image, if the image is smaller than the container.
*Note: If the image is the same size or larger than the container only one image will show.
Horizontal & Vertical Position
The horizontal and vertical positioning of the background image can be adjusted using these settings.
Responsive Image
This setting when switched on, improves performance on mobile devices by only downloading images of a resolution that is perceivable on that screen size.
Lazy Loading
The Lazy loading setting on images is a setting that will determine when an image renders. If Lazy loading is enabled on an image it will load only when in view. This setting reduces the amount of effort done on loading the images when the web page is loaded.
The Lazy loading feature has the 3 settings detailed below:
Eager
loads the image as soon as the code allows, but can slow down the page speed. This is how browsers have handled images without lazy loading.
Lazy
images load when they come into view.
Auto
will default to either Eager or Lazy depending on the position of the image on the page. If the cursor is above the fold (the part of the page that shows before scrolling) then the lazy loading defaults to Eager. Otherwise lazy loading is set to Lazy.
Setting a Background Video
Like the Video element, the Container element currently only accepts YouTube or Video links. These can be added by clicking on Video under Background in the right side menu and then adding the video link in the Link field.
Enabling/Disabling Sound on Background Videos
Sound can be enabled or disabled for a container with a Background video. However, whether sound will play may be dependent on your browser. Please review the article linked below to see the restrictions on whether videos will Autoplay with sound depending on the browser being used:
*Note: You may need to enable sound for videos on certain browsers to get sound to play for background videos.
Enabling a Parallax Effect on Your Background
Another setting that can be found under Background in the right side menu is Parallax Effect switch. Enabling a parallax effect on your backgrounds is super easy and causes the Background image to scroll at a slightly different speed to the page. This creates a sense of depth and a cool experience for your page visitors.
Adding Elements into a Container
You can add any element into a Container by simply dragging the element that you would like into the dropzone of the Container element. This is great for adding backgrounds to your content.
Vertically Centering Content in a Container
The Container Element gives you numerous options to align your content vertically: top; bottom; and middle.
Making your Container Element clickable
Making a section of your page clickable is super easy with the Container Element. Simply toggle this on in the settings of the Container Element and insert the link that you would like to direct your user to.
