By default, all containers are Published, which is one of the choices in the option. So there’s not much to say about that. It’s the other three that offer some great features, particularly for those with seasonal or temporary content.

The second option is Published Until. If you select this, a date and time picker appears, and here you can select the specific time that the Container is published until. After that time, it reverts to draft status, and is then only visible to logged in users with the capability to publish posts.

This feature is particularly useful to website owners with seasonal or temporary content, as in this way, they can automate the publication of the container, and not have to manually come in to sort it on a particular date.

The next option is Publish After. This is the same in the sense that if you select this, you choose a date and time, after which the container’s status becomes published.

So you can design and set up your container to be published on a particular day and time.

Any time after it’s published, you could edit it again, and this time select Published Until, and set the date for it to be unpublished. Once it reaches that date, the container reverts back to Draft status, and is not visible to the public.

Draft status is also useful if you are updating a live site with a new container, but you don’t get finished. You can just set it to draft, and save your work, and then you can come back another time to complete and publish the container.

OK, these often overlooked options can be very useful for controlling content on a container by container basis.

When using the publishing status options on containers, they are not hidden as they would be with the visibility options. Instead they are treated like conditional rendering is applied. If the container is in draft mode or scheduled for a later date, it won’t render at all, and thus there is no indexing, and also no additional weight on page load.

The Color Tab offers a full color picker with an opacity slider (just click in the color circle), as well as the option to pick from the Global Color Palette (click on the globe icon), to allow for a full choice of background colors for your container or column. In the Image Tab section, there is also a Background Blend Mode, which allows you to control how the background color or gradient can interact with a background image. More on that later.

Containers, by default, have a transparent background, and columns are empty, but both can have any color you like, with any level of opacity.

With the gradient tab, you can add gradient backgrounds to your Container or Column Element, with a range of options for gradient colors, start and stop positions, type and direction. The gradient colors can also have opacity, just like in the Color tab. The default type is Linear, but you can also choose Radial.

To set a gradient, you first choose a Gradient Start Color and a Gradient Stop Color, and then set Gradient Start and End Positions. This controls how the two colours of the gradient blend. Experiment with these to see how this affects the gradient, but the default values of 0 and 100 give you the smoothest gradient.

If you choose Linear as the Gradient Type, the last option is Gradient Angle, and here you can choose from a full 360 degrees. If you choose Radial as the Gradient Type, the last option becomes Radial Direction, and here you can choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, and Center Bottom.

With these options, you can create gradients of almost any type. These gradients can also work in conjunction with the Background Blend Modes, which we will look at in the next tab, Image.

The Image Tab allows you to add a single image to the Container or Column background. Images added as backgrounds fill the holding container or columns in different ways, so let’s look at them individually.

It’s important to note that Containers have no height by default, even with a background image added. The only things that affect the height of a container are the content, the Height Setting (on the General tab) and any padding applied to the container. They do have width however. On the default template of 100% Width, they can be the site width or the full width of the screen, while if you are using the Site Width Template, they fill the Site Width set in the Global Options (Layout > Site Width). So it’s important here that the images added are big enough to show in the container without pixellation. Background images added to containers therefore need to be at least as wide as the site width.

With containers, the image initially shows at the full width of the container, so if the container height grows, whether with content or padding, the full image’s height will eventually be displayed, and then, if the height continues to increase, the full height of the image will remain, and the width will start to crop in as the image has to stretch to fill the container. There are also options to control the image size with the Background Size option on the Image tab.

Columns, on the other hand, increase in size when a background image is added, and by default, show the full background image, so again, it’s important that the images added are big enough to show without pixellation. For example, in a full width column on a site with a Site Width of 1200px, it would be wise for any column background image to also be at least 1200px.

If a column’s height is then increased past the height of the image, either through padding or content, then again, the full height of the image will be shown and the image’s width will start to crop. Please experiment yourself with background images to make sure you understand the implications when adding background images to containers and columns.

On both Containers and Columns, it’s also possible to select a different background image for different screen sizes.

On the Background Tab > Background Type > Images you will see a Responsive icon next the the Background Image Title. Just use this icon to switch to the various screen sizes, where you can upload a specifically sized image to display on the particular screen size.

With the new Background Blend Modes, you now have multiple options with blending background colors or gradients with background images. There are 15 Blend Modes to choose from, and these determine how the image and any background color or background gradients will interact with the image. Experiment with these blend modes to see how they interact with the background images. If you use a blend mode, you can also use opacity in your colors to affect the overall effect.

If Background Blend Modes are disabled, however, then a background image will always show on top of a background color, regardless if that background color has opacity or not. (In the past, we automatically set a blend mode of overlay if the alpha of the background color was less than 1). But gradients are a type of background image, and so gradients with opacity will still show as overlays on top of background images.

See the video at the top of the page for visual examples of this.

The Slider Tab allows you to add multiple images to the background of your container or column, just like a mini slider. Simply select your images from the media library, and set the options.

You can control the background position of the images, Skip Lazy Loading if the container or column is in the viewport upon load, loop the images, set pause on hover, set the speed of the slider, set an animation transition effect and speed as well as being able to use the Blend Mode in conjunction with background color and gradient.

See the Slider Images on Containers and Columns in Avada video for a quick rundown on this effect.

The Video Tab can be used to add a video background to a container. Videos of course can be added in many ways, with any of the three video elements, into a container or column, but adding a background video can sometimes be a useful tool.

The mp4 format is the only required file type, although there are two other optional file types for full browser compatability. You can also add a YouTube or Vimeo video instead. You can control the aspect ratio, loop and mute the video, and there is also a field for a fallback preview image for older browsers.

Like images, it’s important to remember that containers have no inherent size, and so don’t automatically resize to a video’s dimension. So the best user case for background videos is for videos that act in a background capacity, rather than being the main content. There are ways to resize the container to closer fit the video, but it’s not really designed for that. See the video at the top of the page for more information on the various ways you can use video backgrounds.

The Pattern tab allows you to add a pattern above other background elements. There are a range of preset patterns as well as a custom options where you can allow you to upload an svg pattern.

There are also a number of options to control the pattern, from Pattern Color, Pattern Style, Pattern Opacity, Pattern Size, and Pattern Blend mode.

The Mask tab allows you to add a mask over your container. A mask is intended to hide certain parts of the container, so it can only work with containers that have background colors, gradients, images etc. There are a range of preset masks as well as custom options where you can allow you to upload an svg mask.

There are also a number of options to control the mask, from Mask Color, Mask Style, Mask Opacity, Transform options, and a Mask Blend Mode.

The Saturation and Opacity Sliders are also very powerful. If you reduce the Saturation slider, your colors will become more pastel. If you reduce the saturation to zero, then your color picker will only display tones, from white to pure black and everywhere in between.

If instead, you reduce the Opacity Slider, the Hexadecimal code will be replaced by an RGBA value. This value notates the Red, Green and Blue values of the color, as well as the Alpha value (opacity). This makes the color picker very powerful indeed, and in this way, you can choose from millions of colors for your website.

An individual typography set consists of eight options, as you can see below – the Typography Set Name, the Font Family, the Backup Font, the Variant, the Font Size, the Line Height, the Letter Spacing, and Text Transform. So the idea here is that you create Typography Sets for various typographic styles, and then you apply the set to other Global and Element options. Additionally, you can easily override every single setting of a typography set if needed, so you have full freedom.

Let’s look at a few examples to see how this feature can be used. Let’s say you make a Typography set called Headings and then apply the set to the Global Options all H1 – H6 Headings. At this point, all headings would be the same, but then you could differentiate the H1 – H6 Global Options each with a different font size. In that scenario, you would then only need to change the Font Family or Line Height or any of the individual options in the Global Typography Set, and this would ripple through the site to every Heading on the site, all at once. You can also apply these Typography Sets to any Elements that have fonts included, such as the Title Element, the Text Block Element etc.

You can also create different sets for different purposes. As another example, suppose you have set your “H1 Headings” to the “Headings” set and your “H2 Headings” to “Subheadings” set. On a specific page now, you already have your H1 heading tag, and further down the page you create a CTA. SEO-wise, it would likely make sense to use an h2 tag. But of course, you want the typography to stand out. So you use the Title Element, write your CTA text, set the heading tag to H2, but then you set the typography field to use the “Headings” set. With just one single click, it will just look like your H1.

Finally, below, lets’s look at a real world implementation of this feature. On the Handyman Demo, let’s look at the HI Headings Typography options. A Global set has been applied, but then certain parts of the set have been overridden for the H1 Heading. All options that are greyed out signify that their values are coming from a Global Typography Set, whereas the ones in white have been set in this option. This is similar to example 1. With global typography sets, you can apply a full set or just part of it. When you mouseover the Font Size, or any of the individual options, you will also see asmall globe. When that globe is blue, it also signifies that the value is coming from a typography set. We can also see below that a Global Color has been applied to the H1 Heading, but as the H1 font on the screen is white, this means it has been overridden at the Element level.

It will take a little while to truly appreciate the power of this system, but play around with it, and you will find it gives you a very powerful global, yet granular control over your site’s typography.