How To Use The Container Element – Transcribed
Hi everyone in this series of videos we’re looking at how to use the about of design elements. Today we’re looking at how to use the container element.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one.
And if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel.
OK, let’s begin.
The container element is a foundational element in Avada, and along with the column element it forms the structural backbone of pages built in about a builder.
Container is also incredibly versatile and can have color gradient, image or video backgrounds and any matter of interior content.
And with the release of out of seven containers are even more versatile. With this release, we reimagined both the container and column elements using flexbox at the same time, we kept our classic setup for containers and columns. In case you want to keep using it on preexisting sites.
The container element, as the name suggests, is a holding element. A container holds columns which then holds elements.
So, container element is always the first thing to be added to a page.
Let’s look at a blank page on the Avada food website here to see how this works.
Note how on the starter page there is no option to add columns or elements without first adding a container.
As it says right here on the page, the building process always starts with the container, then columns, then elements.
So, when I click on the add container button, the dialog that appears allows us to not only add a container element.
But also, a range of container and column combinations.
We can just add an empty container, and this would be useful. For example, if we wanted to drag other columns into a container to separate them from other content.
But usually we add a column element at the same time as we add a container.
We can also add containers that have been saved in the library by going to the library containers tab at the top.
I’ll just add a container I’ve saved in the library here, and we can see a typical example of the container at work.
Here it’s basically just an invisible container holding two columns and the various elements within.
But the container can be so much more if you need it to be.
Let’s delete that and start again.
So now I’ll just add a container with a single full width column and here we can see the element controls for the container on the right.
And the column on the left.
In the middle is the add Element Button, which only appears when there is a column in the layout.
Looking at the container controls, we can see 2 icons, container options, icon and the add containers icon.
When we mouse over the icons, we can see the full range of control icons.
We can clone, save, delete or drag containers just like we can columns and other elements.
To add further containers to the page, we would simply click on the add containers icon and the previously shown select container window opens again, allowing us to choose from our range of empty and populated containers.
The new container is then added directly below.
You can add your entire page content inside one container if you wish, but containers can be used in many versatile ways and you will get the most flexibility with your layout by placing each section of content in its own container.
In that way, some containers might have background images or colors while others might have their internal content. Stretching for width etc.
Let’s look quickly.
At how page templates can affect containers? Right now, this is the default page template and as you can see the container width is the same as the site width.
If I want the container to be full width, I need to change the template.
I’ll just quickly go to the page options panel and in the settings tab, I’ll change this page to use the 100% width template.
The page refreshes.
And when I now mouseover the container, we can see the container is now full width while the column remains at site width.
Understanding how this works is key to full page width design.
With this template you can add borders, background colors, gradients, images or videos to the container that will spread the full width of the page, while the content inside the container is by default site width.
OK, so let’s edit the container and look at the options in the first tab of the container element, the general tab.
Because I’m using the latest version of Avada here, this is one of the new flex containers.
I have legacy support enabled for this example, which we can do in global options about a builder, elements, containers.
And so, we get an option at the very top of the container element called container type.
It’s set to flex, so what we’re seeing here are the flex options for a container.
If I just switch it back to legacy, you will see that several of the options change.
For a rundown on the legacy settings, save the document linked under the video, but for this video we will focus on the flex settings, so I’ll just set this container back to Flex, which is our recommended choice.
If you don’t enable legacy support, you won’t even see this option.
With the 100% width template selected, the next option is called interior content width.
This option gives you control over the interior content in the container.
The default setting for this option is site with.
But if you set it to 100% width.
The interior content will also stretch the full width of the screen.
Minus the default side padding on the container.
For more information on page templates, please see the page templates documentation, also linked under the video.
The next option is called height, which was also revised in about a 7.
It now offers you three choices, auto full height and minimum height.
Auto is the default and with this option the container will basically just grow or shrink with the content.
If you activate full height, the container will be fixed to 100% of the height of the viewport.
This can be used in many ways and perhaps works best with 100% width template.
But this is a useful option for anytime you want your container content to fill the viewport height of the browser.
Let’s have a look at an example of this here on the craft beer demo.
Here you can see the first container on this page is set to full height, which you can see in the builder by the dotted lines.
These give an indication of how much of the image we will see on the front end.
If we have the full height option enabled, we also get a new option called enable 100% height scroll.
This was introduced back in about a 5.3 and is otherwise known as full screen scrolling sections.
With this option you can add this container to a collection of 100% height containers that share scrolling navigation.
This can best be seen on the About a Crypto or adventure demos. For more information on this feature, please follow the links under the video.
The last option is minimum height and if you select this, it then offers you another option to specify a minimum height for the container even when it is empty.
When enough content is added to fill the container, it grows as normal.
Then comes the new flexbox options.
For a run through on all the possible ways to use the new flex features, see the introducing flexbox for container and columns documentation linked under the video.
But if we just quickly look at an example page here, we can see that this container is set to full height and that we have multiple rows.
Row alignment is the first of these flex options, but this shows only if you have minimum height or full height chosen in the height option.
This option allows you to choose how rows are aligned vertically in the container.
You really need to have multiple rows in the container to take full advantage of this option, and so here I can choose to align them to stretch, which they do. If I add more content.
Or space evenly.
The next option is column alignment.
With this option you can select how you want columns to align within rows.
By default, they are aligned to flex start at the top of the container.
Less any container padding, of course.
But with this option I can change the alignment to the center.
Or I can choose stretch, which makes them all the same height and fills the available space.
Then there is column justification.
This allows you to control how the columns will be justified horizontally.
This option won’t work with content that fills 100% of the container width, as in that situation there is no space to align anything horizontally.
But if I delete one of the columns here, we can see how we can align the columns to flex start.
Flex end or with space between.
Or the last option space evenly.
Another simple example of how this might be used is with a single column that’s not full width that is centered in the page.
So, if I align them to the start and delete another column, this is how a container would be by default.
But if I select centered column justification, we can see that 1/3 column now aligns itself to the center of the column without any other columns in the row.
Another new option is column spacing. Here you can set a default amount of column spacing, and this affects all columns in the container.
This can then be overwritten on a column by column basis.
The next option, container HTML tag, is also new.
This enables you to choose the HTML tag. The container will have.
The default is dev, but you can change this to section header, footer, main article aside or NAV.
The next option is the name of menu anchor. This is used to add a CSS ID which is especially useful when using a one-page menu.
Please see the documentation on anchor scrolling for more information on this.
The next option is the container visibility option. Here you can hide or show the container on certain screen sizes.
Which allows you to make, for example, mobile only containers and turn them off for larger screens.
Below this is the container publishing status which allows you to set the publishing status for the container.
Read more about this in the container element documentation linked below. But basically, you can choose for the container to be published until published after or a draft.
If you choose published until or publish after a date selected will appear, the draft option for the container will simply hide it on a published page until you change its status back to published.
OK, the two final element options here are the CSS class and CSS ID which can be used to further customize your containers with CSS.
Let’s go to the about page and look further at the design tab.
I’ll just Scroll down and edit this our achievements container.
And as we can see, the 1st two options control the link and link hover color for this specific container.
They’re both pulling the defaults here, but this is handy if you want to have different color links on certain containers.
And then there is the container border size. This was updated in Avada 7 and so now you can set individually size borders all around the container and choose the color and style for them as well.
Under this, a margin and padding controls. These are extremely useful and can be used in many ways for layout separation.
As we can see here, there has been 6% padding set on the top and the bottom of this container.
See the documentation on how to control spacing in Avada for more information on this.
With about a seven, we saw another addition to columns and containers called responsive option sets.
There are more of these options available in columns, but here in containers they are available in the margins and padding options.
The responsive icons next to their descriptions show us the options that this new feature can be used with and basically what it does is allow us to set individual values for different screen sizes. For these specific options.
For example, I can change the small screen layout either from the responsive options icon or from the responsive tab on the toolbar up here.
And then we could set values in the padding or margins that would just apply when the site was being viewed at that small screen size.
See how the icons in the element options have changed to the small view icon.
This shows us that these values will only apply to this sized layout.
So now, for example, if I just change the top and bottom padding of this container to be 15%.
We can see it has applied that for this layer, but if we return to desktop the previous value is still applied.
Please see the responsive option sets documentation for much more information on this awesome new feature.
As well as typing in values into the element options, you can also use these handles onscreen to adjust both padding and margins.
Again, please see the documentation and videos listed below for more information on margins and Paddings. But in short, the blue controls adjust the padding of the container and the purple ones control the margins.
You can drag both the blue handles on the screen down to add padding to both the top and bottom of the container. Or Alternatively you can add them directly into the options panel.
There are also three new options at the bottom of the design tab. The first of these is box shadow.
This allows you to apply a box shadow around the container.
I’ll just move over to the places page as there’s a good candidate for a box shadow there.
We can say in fact that this is a global container and any changes I make to it will apply to any instances used on other pages.
But this specific container is designed for a site with Page, so that will be fine.
I will just edit the container and head to the design tab and set box shadow to yes as soon as I do this I get a whole range of new options directly under it to control it from box shadow position box, shadow blur, radius box, shadow spread, radius box, shadow color and box shadow style.
I’ll set the box shadow position to zero pixels and zero pixels.
This will create an even shadow all around the container.
As the description says, positive values put the shadow below and right of the box, while negative values put it above and left at the box.
I’ll set both the blur radius and the spread radius to 10 and set a box shadow color here.
I laid the style on outer.
And if I just go to preview?
We can see how it gives the container a more dimensional look.
OK, moving on the last new options, zed index and overflow which are both advanced CSS properties useful for more advanced users.
The Zen index option is a positioning value for the container, and this can be negative or positive.
This specifies the Stack Order of containers, so a higher Z index means that the container will be in front of those with a lower Z Index.
And the overflow option allows you to specify what should happen if the content overflows the container’s box.
It will work when the specified height is set to the container.
You can choose from default visible scroll, hidden or auto.
So now let’s go to the background tab.
In many instances, containers will just be invisible holders for columns and other elements.
But there is much more you can do with containers if you wish.
Here it becomes clear that containers do not have to be invisible under the background option. We can see there are four tabs, color, gradient, image and video.
So, containers can now have a color, either solid or with Opacity. A gradient background, a background image, a video background image, either self-hosted or on Vimeo or YouTube, or even a combination of effects like this one.
To do justice to these amazing options, we have created a separate video on this background tab.
So, for a full rundown on these background effects, please see the how to use the container and column background options documentation.
OK, let’s move on to the final tab. Extras with the virus seven. There are also new options in this tab.
The first one is the position absolute option, which you can turn on to set the container’s position to absolute.
If you enable this, you also get a responsive absolute position, so you have full control over the option for Responsive Design.
Under this you can find the new sticky position option, which of course enables the container to be sticky.
Turn this on and a whole range of new options appear, controlling the responsive sticky position. The sticky container background color, the sticky container offset the sticky container transition offset, and the sticky container hide on scroll option.
These can be used in a variety of Ways and will be most useful, perhaps in custom headers.
So please see the how to work with sticky containers doc for a rundown on how to use this extremely useful and interesting new feature.
The container element also now has the animation type options that you might be familiar with from the column element and a range of other elements to animate the loading of the container.
Finally, there are the filter type options. Very basically, these options allow you to add filters to a container and its contents, and it’s also found in columns.
These filters are much like ones found in Photoshop or other editing programs.
There are eight filters in all use, saturation, brightness, contrast, invert, sepia opacity, and blur.
And there are options to apply these on both the normal and the hover state of the container.
You can apply any or all of the filters concurrently with complete separation between normal and hover state.
To do full justice to this powerful feature, and because it’s available in both the container and the column element, we’ve made a separate video on filter options. For a full rundown of this awesome feature, check out the How to use the container and column filter options video linked under this one.
OK, thanks for staying with me. Containers are the foundational structural element of a bodybuilder. And as you can see, they can either be a simple holding element for columns and elements, or extremely flexible and powerful elements in their own right. Depending on your design needs.
OK, this concludes our video on how to use the container element. Make sure you subscribe to our YouTube channel to keep up with all the latest videos and if you have any questions or need assistance, please create a support ticket and our team will gladly assist you. As always, we want to thank you for choosing Avada.