How does a CONTAINER WIDGET work?

Follow

A container is a very powerful page component that is used to house other page components.  In other words, you can place any page component inside of a container.  

  • Containers can be resized, reshaped, made wider, or narrower.  You can change the background image, or color, set borders, padding, shadows and even animation for a container.  
  • To add a simple container to your page, simply drag over a version from the container component category in the [Add New] tab.

 

2 Very Important Features of a Container:

  1. The ability to make any content mobile responsive
  2. The ability to divide a section into grid-like layouts

Screenshot_073117_025659_PM.jpg

 

If you're building a page from scratch using a blank template, using containers are extremely important, if you start adding objects to a page without adding a base container (1-column container), the contents of your page may not be mobile responsive.

 

1. Add multiple base containers (1-column containers) into the canvas. If you want to have different sections in your page, like the example below, to have the ability to change the background color or add an background image for a section. 

Screenshot_090717_051654_PM.jpg

It is recommended to add multiple base containers as it gets difficult to add it later on after you've already added the objects into your page. Click the [duplicate] button from the sidebar settings to add multiple base containers.

 

 

 

 

2. You can drag multiple-column containers that allow you to create grid-like layouts.  

Screenshot_090717_050205_PM.jpg

 

 

 

3. Change the background color or use a background image for the container through the sidebar.

 

4. Use the auto-adjust option at the sidebar to ensure that the container will auto-adjust when viewed on mobile or other devices.

 

 

5. If you're using a background image

IMPORTANT: Containers will adjust to the size depending on what object/s it has inside. If you don't intend to use objects inside that container, but want to show the full background image, a TRICK is to add a [blank text object] and drag it down the container to extend it's height.

 

 

6. When adding Images or Videos

  • Place an image or video inside a container to easily adjust the size of the image or video.
  • Use the wide / narrow option of the container to gradually adjust the size of the object inside it.
  • Using the shrink / grow option for image and video may sometimes limit your choices to small, medium or large.
  • TIP: You must add a container first, and then drag a new image or video widget from the sidebar. It may not work if you drag an existing image or video in the page to your container.

 

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk