Motion background

Aside from using a video, Avada does not have a motion background feature — most builders don’t. Since CSS makes this relatively easy, your only limitation is your imagination (and CSS skills). I put together a demo based on a question from Facebook. It is functional, but I consider it a work in progress,

Row wrapper

Avada does not give you the ability to manage the row that houses your columns and as such you have to waste a column on some fairly basis styling. This demo shows you how to overcome this and opens the door for some additional designs

Fixed position

Avada does not have the ability to set position:fixed within the settings, but this is very easy to overcome with a little CSS. This demo shows a bar at the bottom of the page with an image scroll element.

Horizontal Post Card Slider

CSS Tricks has had a great horizontal card slider and I was curious if it could be recreated in Avada. Thanks to an Oxygen builder tutorial, the answer is yes.

Multiple Columns, Same Height

How do I make columns the same height? Flexbox to the rescue – with the click of one option in either a column or container.

Image Animation

An example of using Motion.Page (GSAP) with Avada. Still a work in progress but functional on desktop.

Count Box

A quick demo showing a design options — negative margins and overflow — that can add interest to columns without pseudo classes or images

Vertical Divider

Ran across a design element I thought might be useful someday so I created an Avada-based version.

Gradient Flip Box

How to add an image with a gradient overlay to a flip box.

 

Equal height columns with buttons at the bottom

Flexbox in Avada adds capabilities to easily implement designs that required a lot of custom css in the past

CSS Play Button and Lightbox

This originated from a question on the Facebook group. Since the video elements don’t have a lightbox feature, could on be created with a pulsing play button.

Image and a Button

Using the image element and a nest column with a button to create a more controlled overlay.

Partial Border

This originated as a request of the Facebook Group to add a partial border. Can a border be added to a column that has dimensions smaller than the column?

Testimonials

Using a custom post type and posts cards to create a testimonial feature with more options than the default element.

wpDataTables with Filter

This is a demo using a third-party plugin, wpDataTables, which recently added native element support for Avada.

Content Boxes without the Content Box Element

This was a proof of concept to show that the content box element is really no longer required for any scenario except the timeline. There is no supporting text or code.

Section Separator Drop Shadows

Applying a drop show do a section separator is a little difficult to do and requires some trial and error, but can produce some interesting results.