The transform options are found under the Extras tab, in Columns, and Nested Columns. There are ten transform options, and they can be applied on both the normal and the hover state of the columm. Let’s go through them one at a time to see what they do.

The motions effects are found near the bottom of the Extras tab, in Columns, and Nested Columns. Note how there is also a related option (Apply Motion Scroll Effects On) to set which screen sizes to apply the Motion Effects to. Let’s have a look at the various effects.

With Infinite Animation, there are four types of animation you can apply to your columns. As with the other options, when you select an animation style, you will get specific options for that style.

The filter options are found under the Extras tab, in Containers, Columns, and Nested Columns. There are eight in all, and they can be applied on both the normal and the hover state of the container or columm. Let’s go through them one at a time to see what they do.

With Containers, you have a selection of sixteen preset masks and the ability to upload your own custom mask (in svg format). Selecting a mask then reveals all the other options, with which to modify the mask.

Once you have selected the mask, there is an option for mask size. The possible selections here are Fit, Fill, or Custom.

Fit is the default and allows the full mask to display as large as possible while at the same time making sure the full mask stays within the boundaries of the image.

Fill however, will make the mask as big as possible, so either on the left/right or on top/bottom the mask will get cut off at the boundary of the image, depending on whether the image is landscape or portrait.

Custom triggers a new option called Custom Size, which allows you to specify a size (any valid CSS unit) for the mask. The example below on the right is set to 70%.

Fit

Fill

Custom > 70%

Mask Position is the next option, which positions the mask over the image, and allows you to display different areas of the image. Here you have a choice of Top Center, Top Left, Top Right, Center Center, Center Left, Center Right, Bottom Center, Bottom Left, Bottom Right, and Custom.

If you choose Custom, a new option appears called Custom Mask Position, where you enter values in pairs, first for the X axis, and secondly for the Y axis, as coordinates for the position ex. 60% 50px.

Below from left to right, we have Center Center, Center Left, and Center Right. Note how different areas of the image are showing through the mask.

Depending on the Column size and the image, you might also want to employ the last Mask option, Mask Repeat. Here you have a choice of No Repeat, Repeat, Repeat X, Repeat Y, Space, and Round.

Below is an example of using the Repeat option, combined with a Custom mask size of 90px. There are many ways to use this feature, depending on your image, mask and desired outcome. As always, the best way to get to know a feature is to experiment. Go Wild!

Captions and Titles are fields that are already available in images in the Media Library, as you can see in the image below. When you upload an image you can add, amongst other things, a Caption and / or a Title. The media based Elements with captions then pull that information directly from the images to display using the new Captions styles.

For images that don’t have captions and titles embedded in the file, you can add them (or override them) in the Element itself. There is one main difference however, between the Image Element, and the Image Carousel and Gallery Elements. With the Image Element, you can add the individual caption and title text on the Captions tab of the Element as it is a single image Element, but with the Gallery Element and the Image Carousel Element, these Image Title and Image Caption options are found by editing the individual Element items, found under the Children tab.

The range of options on the Caption tabs of the three image-based Elements are almost identical, bar for the Title And Caption options mentioned above. But for a full list and screenshots of the options available on the Captions tab, please see the individual Element docs: Image Element, Image Carousel Element, & the Gallery Element

There are a range of Caption styles to choose from. By default, captions are Off. There are two simple caption styles – Above and Below, and then a range of five styled caption designs. These are code named Navin, Dario, Resa, Schantel & Dany. Let’s look at these caption styles individually to see what you can achieve.

As the name says, the Title and Caption are placed above the image with this selection. You can control the color and size of the fonts etc used with the Element Options.

This is exactly the same as Athe previous style, only this time, the title and Caption sit below the image.

This places a color overlay over the image. And we can see the title on the image itself. So here, when we mouse over the image, the overlay disappears, and the title lifts up so there’s room for the caption to slide in beneath it.

OK, Dario is the next style, and this one places the Title near the top, and upon mouseover a border slides in under the title, and the caption slides in from the other side

Resa is a very stylish design. It only shows the title initially, but on mouseover the title and caption are aligned in the center of the image, and a border appears around the inside of the image.

Schantel has the title at the top left, and the caption slides in below this on mouseover, with a background color. There’s also a new option with this style called Image Caption Background Color to control that color of course. There’s also a zoom in effect applied to the image with this style.

Finally, there is Dany. This puts the title at the bottom of the image, and on rollover, the image and title lift up, and the caption is presented with a background color. This option also has the Image Caption Background color option.

With the Countdown Timer End option of the Countdown Element, it is now possible to use Dynamic Content, instead of simply adding a date and time. To do this, simply click on the Dynamic Content Icon to the right of the Option Title, and a dropdown selector will appear. Here, you can choose one of four Dynamic Content types, a Custom Field, a Shortcode, a WooCommerce Sales Date, or an Event Calendar Event Date.

The first one is a Custom Field, which is pretty much for advanced users. If, for example, a user had a Custom Post Type and a custom field into which they added a date, they could use that here. Likewise, with the Shortcode option. If a user created their own shortcode which returned a date, then they could use that here. But using the last two options is going to be much more likely for the majority of users, so let’s focus on those.

When you choose a WooCommerce Sale Date as the Dynamic Content type, a further dialog appears. As you can see in the screenshot below, this allows you to choose a Sale Start Date, or a Sale End Date to count down to, as well as having a field for a Product ID, and one for a Fallback value.

You can enter a Product ID to display a specific product’s sale date, or if you leave it empty, it will auto-pull the product ID of the currently viewed product to check for sales dates. How this works depends on where you place the Countdown Element, and whether you use the Hide When Inactive option.

To find a Product ID is relatively easy. With WooCommerce Products, it’s right there when you mouse over the product, as can be seen in the first screenshot below. For The Event Calendar Events, as you can see in the second screenshot, the Event ID can be seen at the bottom of your browser when you mouse over the Edit button. If your browser does not display this, simply edit the Event, and the Event ID is the number in the Event URL.

It’s also important to remember that sales dates are set on individual products in WooCommerce, not for the shop as a whole. So where the Dynamic Content option is most useful would perhaps be in a Single Product Layout, where the Element would pull the sales dates of the various products as they were viewed. To clarify how the Dynamic Options can work, let’s look at a couple of different scenarios.

Let’s say we add the Countdown Element to a Single Product Layout, and use the Dynamic Content options to set it to display the Sale Start Date. Because it’s being used in a product template, we don’t want to set an ID for a specific product, so here, we leave that empty. In the screenshot below, you can see the Element added to the top of the Layout Section, with the Date set to Sale Start Date.

But also, let’s say only selected products in our shop will be going on sale. Because the Element is being used in a template, it would normally be displayed on all products, including those with no sale dates. But in the Countdown Element, there is a very useful Display When Inactive option. If we set that to Hide, then the Element will only display on products with upcoming sales! And because we didn’t add a Product ID, the Element will auto-pull the dates from the individual products viewed, so even if the sales started on different dates, this would be reflected in the actual products. In the screenshots below, we can see what a product with a sale coming up would look like, and below that, what a product with no sale coming up would look like.

OK, but what about when the sale starts? Our Sale Start Date now becomes Inactive, as it has passed, and so the Element no longer displays on the product. And now we might want another Countdown, this time to the end of the Sale. With the Dynamic Option in the Countdown Element, we can set both of these up at the same time.

In the same Product Layout Section, we can now add another Countdown Element, but this time we set the Dynamic Content of the Countdown Timer End option to Sale End Date. We also set the Display When Inactive Option To Hide, and change the Title and Subtitle Text. That’s it!

So now, before the sale has started we see the initial Countdown Element on any products that have a Sale Date, just like before. But after the sale has stared, this instance of the Element does not display any more and our second Countdown Element becomes active and displays on the page, as can be seen in the second screenshot. And on products that don’t have any sale, neither instance of the Element displays. How cool is that!

If you want to use the Countdown Element to count down to the start or end of a sale on a Home, or other static page, then the Dynamic Content options are not as useful as when used in a dynamic item like a Layout, as it’s very easy to just enter a date manually. But if you wanted to highlight the sale of a specific product, you could easily add the Element, and add the Product ID so that the Sales date of that specific product is used.

In the screnshot below, you can see an example of a specific product being promoted on the home pgae on the online Tutor website. It’s also set to Hide on the Display When Inactive option, so it will not display once the sale is live. This could of course be a count down to the end of a sale, or there could be both as done in the Layout above.

The process is basically the same with linking the Dynamic options of the Countdown Element to an Event Calendar Event. Again, when selecting the Event Date Dynamic Content Type, you are met with exactly the same options.

That said, Event Calendar Events are inherently different from WooCommerce Products. The Events page itself is automatically generated, and so is not a page that can be edited directly. And unlike WooCommerce Products, Layouts are not in use for Events, so the most likely places to use the Countdown Element with Dynamic Content is on a static page, like the Home page, or on the actual Event pages.

Here is an example of a Countdown to an Event on the Home page of the Online Tutor site. The Event Start Date option was selected in the Dynamic Content options, and a specific Event ID was added to pull the start date from the event in question. See the Product ID section above to see how to find IDs for Events.

To be able to edit your individual Events in Avada Builder, make sure that ‘Event’ is selected under Post Types in the Builder Options (Avada Dashboard > Options > Builder Options > Post Types).

Then it’s the same as any page. Simply add the Countdown Element, select the Start or End Date in the Dynamic options, and set the Event ID for that specific Event. Using the Dynamic Content options here doesn’t really have any advantage over manually enterting the date, but it’s another option you have.