- #Avada responsive columns containers width mobile how to#
- #Avada responsive columns containers width mobile full#
- #Avada responsive columns containers width mobile series#
OK, so let’s edit the container and look at the options in the first tab of the container element, the general tab.īecause I’m using the latest version of Avada here, this is one of the new flex containers.
#Avada responsive columns containers width mobile full#
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. Understanding how this works is key to full page width design. 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.Īnd when I now mouseover the container, we can see the container is now full width while the column remains at site width. If I want the container to be full width, I need to change the template. Stretching for width etc.Īt 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. In that way, some containers might have background images or colors while others might have their internal content.
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. The new container is then added directly below. 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. We can clone, save, delete or drag containers just like we can columns and other elements. When we mouse over the icons, we can see the full range of control icons. Looking at the container controls, we can see 2 icons, container options, icon and the add containers icon. In the middle is the add Element Button, which only appears when there is a column in the layout. 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. Here it’s basically just an invisible container holding two columns and the various elements within.īut the container can be so much more if you need it to be. 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. We can also add containers that have been saved in the library by going to the library containers tab at the top. For example, if we wanted to drag other columns into a container to separate them from other content.īut usually we add a column element at the same time as we add a container. We can just add an empty container, and this would be useful. So, when I click on the add container button, the dialog that appears allows us to not only add a container element.īut also, a range of container and column combinations. Note how on the starter page there is no option to add columns or elements without first adding a container.Īs it says right here on the page, the building process always starts with the container, then columns, then elements. Let’s look at a blank page on the Avada food website here to see how this works.
So, container element is always the first thing to be added to a page. A container holds columns which then holds elements. The container element, as the name suggests, is a holding element. In case you want to keep using it on preexisting sites. 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. 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.Ĭontainer is also incredibly versatile and can have color gradient, image or video backgrounds and any matter of interior content.Īnd with the release of out of seven containers are even more versatile. Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one.Īnd if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel.
#Avada responsive columns containers width mobile how to#
Today we’re looking at how to use the container element.
#Avada responsive columns containers width mobile series#
Hi everyone in this series of videos we’re looking at how to use the about of design elements. How To Use The Container Element – Transcribed