Elements – Avada Website Builder

Button Hover Transitions

Geoff — Tue, 30 Jan 2024 21:27:21 +0000

An easily overlooked Button Element feature is the Button Hover Transition option. This option is found at the very bottom of the Design Tab, and allows you to set specific transitions for your buttons on hover.

Effects

There are eight button hover transition effects available.

Text Slide Up – With this transition, the original text slides up and fades, and is replaced by text fading in from the bottom.
Text Slide Down – This is the opposite of the above transition, with the text sliding down.
Underline – A subtle transition, this just underlines the text, which disappears on hover.
Icon Slide – This is similar to the Text Slide effect, but here the original icon disappears, while a new one slides in from the left or the right, depending on icon position. Obviously, for the icon effects to work, an icon must be set.
Icon Switch Position – Here, the icon fades out to the side it is set on, while a new icon slides in from the opposit side of the button text. This effect will not work when icon dividers are used.
Icon Rotate – This effect is pretty simple. The icon rotates 360 degrees upon hover, and back again on release.
Background Slide Right – This effect controls the background of the button, with the Gradient Start and End colors sliding in from top left to bottom right on hover.
Background Slide Left – This effect is the opposite of the one above.

Effect Examples

Text Slide UpText Slide Up

Text Slide DownText Slide Down

Background Slide Right

Background Slide Left

Form Step Element

Geoff — Fri, 15 Dec 2023 00:46:26 +0000

The Form Step Element is one of three Special Item Elements that have very specific jobs. You will find this Element on the Special tab when adding a Container while editing an Avada Form.

See the How To Make A Multi-Step Form Doc

Add A Form Step

To add a Form Step, add a Container to the Builder directly after the container with your initial form content, and navigate to the Special tab. Here, you see the Form Step Element. This adds the step to your Form.

There is nothing to configure with this special Item; just give it a title, and an icon if you wish.

For full details of how to create a Multi-step form using the Form Step Element, see the video below.

For privacy reasons YouTube needs your permission to be loaded.

Checkout Form Element

Geoff — Fri, 15 Dec 2023 00:46:05 +0000

The Checkout Form Element is one of three Special Item Elements that have very specific jobs. You will find this Element on the Special tab, when adding a new container on a WooCommerce enabled site.

When to Use The Checkout Form Element

This Element is only needed in special situations. It is not a visual element, but merely a technical one, to solve limitations with WooCommerce checkouts.

The checkout in WooCommerce works as any other form on a website, utilizing HTML form tags and a submit button. Since you can move around Avada’s checkout elements on your custom checkout page as you like, we add wrapping form tags automatically, around the whole post content. In general, this approach works fine for simple checkouts.

In some cases though, you may add elements to your checkout page, that use HTML form tags themselves. This could break the functionality. The reason is, that then you would have a form tag within a form tag. The special checkout form element makes it possible to limit your checkout form tag to the area where it should be. If you make use of it, the HTML form tags will be placed exactly at the position where you put the element.

As an example, suppose you have the Woo Cart Coupon Element on the checkout page. It creates its own form tags to be able to apply the coupon correctly. Now, if you don’t use the special form checkout element, you would exactly run into issues with the tags. To avoid that, you could add the Woo Cart Coupon Element to a first container, then add the special Checkout Form element, then a container with all your other checkout elements, and then another special Checkout Form element. The two special elements would then serve as opening and closing HTML form tags for the WooCommerce checkout.

How To Use The Column Transform Options

Geoff — Fri, 15 Dec 2023 00:39:19 +0000

On the Extras tab of the Column Element, you will find Transform options. These can be used in very powerful ways to control the movement, scale and opacity, etc, of your columns in both normal and hover states. Read on to find out more about the various options, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

Where To Find Them

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 Transform Options

Hover Element – Found only on the Hover State, this option allows you to select which element should be hovered to apply the transform hover options. Choose from Self or Parent.
Scale X – This option allows you to scale up or down the width of the column, on both normal or hover states, from a value of 0 to a vlue of 2 (double size).
Scale Y – This option allows you to scale up or down the height of the column, on both normal or hover states, from a value of 0 to a vlue of 2 (double size).
Translate X – This option allows you to adjust the horizontal positioning of the column, on both normal or hover states, by plus or minus 300px.
Translate Y – This option allows you to adjust the vertical positioning of the column, on both normal or hover states, by plus or minus 300px.
Rotate – This option allows you to adjust the rotation of the column, on both normal or hover states, from -360 to plus 360 degrees.
Skew X – This option allows you to skew the column in the horizontal direction, on both normal or hover states, from a value of minus 100 to plus 100.
Skew Y – This option allows you to skew the column in the vertical direction, on both normal or hover states, from a value of minus 100 to plus 100.
Transform Origin – This option allows you to set the location of the origin point for your selected transformations.
Transition Duration – This option controls the duration of the transform effect as you change from Normal to Hover state.
Transition Easing – This option allows you to control the easing of the transition. Linear, for example, specifies a transition effect with the same speed from start to end. You can also choose Ease (the default) Ease In, Ease Out, Ease In Out, Linear, and Custom. For custom, there is a link to a website where you can create custom easing.

Column Element Flex Grow and Flex Shrink Options

Geoff — Mon, 30 Oct 2023 23:27:40 +0000

There are two options you will find on the Design tab of the Column Element, called Flex Grow and Flex Shrink. These are useful when the sum of your columns do not add up to 100%. With these values, you can let the browser know how to distribute the remaining space.

Flex Grow

Flex-grow tells your column whether or not it can take up additional space within its wrapping container. Initially, the option will be empty, which means a default value of 0, and thus the column will not grow to take up any available space. With a value of 1 or higher, we are telling the column to grow and to take up the available space.

It’s easiest to explain this with an example. Let’s say you have three columns of 1/4 width. This means they take up seventy-five percent of the container. If nothing is set, then the columns will not grow and remain at 1/4 each, but if they all get a flex-grow value of 1, the remaining twenty-five percent is distributed equally among all three columns (an extra 8.333% for each one). But if you set a value of one on the first and third column, but a value of two in the middle column, then the browser would divide the remaining space by four (25% / 4 = 6.5%) and apply two units to the second column (13%) while the first and third column would only grow by one unit (6.5%).

To give another example, if you have a pixel width column, which size do you set to the neighboring sibling? To make it fill up the space it would have to be calc(100% – 200px) e.g., if the px width column had a size of 200px. This can easily be rectified by setting flex grow to the column instead.

The same applies if one of the columns changes its percentage width value from desktop to mobile. Then, flex grow on the other one would make that one adjust accordingly.

Flex Shrink

This option only works if the parent container’s Content Wrap value is set to No Wrap. By default, the containers are set to wrap, so if the columns take up too much space, the last one will simply be pushed to a new row. But, when Content Wrap is turned off, all columns are forced to stay on the same row. That could lead to overflow when there are some elements in the columns that can’t be reduced in width.

So, the Flex Shrink factor, similar to Flex Grow, lets the browser decide which columns can shrink more than others. Initially, all columns have a factor of 1, so if you set one of them to e.g. 2, it can shrink twice as much as the others.

Another important value is a Flex Shrink value of 0, which means the column must not shrink at all. For example, if you use a px width column, that will make sure, that regardless of available space, that column will always remain at its set px width. If Flex Grow is set on the same column, then it won’t shrink more than the overall width of its content.

Woo Order Customer Details

Geoff — Tue, 28 Mar 2023 23:39:21 +0000

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Customer Details Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo Order Customer Details Element

This Element is designed to be used in custom WooCommerce Thank You Pages. See the How To Create Custom WooCommerce Thank You Pages for more details on that process, but here we will look at the Element, and what it offers.

This Element simply add the Customer Details into the Thank You page. It adds both the Billing and Shipping address and other details. There is a full range of typography, color and border options so you can style this element as you wish. Simply add it into your Woo Thank You Content Layout Section wherever you wish, and style it as desired.

Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
HTML Heading Tag		Choose HTML tag of both headings, either div, p or the heading tag, h1-h6.
Headings Typography		Controls the headings typography.
Headings Margin		Enter values including any valid CSS unit, ex: 4%. Let empty for default H2 title margin.
Separator Style		Controls the border style of the heading.
Separator Width		Select the width of the separator.
Separator Color		Controls the separator color.
Separator Width		Controls the separator width.
Address Typography		Controls the headings typography.
Address Margin		Enter values including any valid CSS unit, ex: 4%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Details

Geoff — Tue, 28 Mar 2023 23:30:49 +0000

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Details Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo order Details Element

This Element add the Order details to the Thank You page. As you can see in the screenshot below, there are a number of available details you can display. By default, they are all enabled, but if there’s one you don’t want to display simply drag it to the Disabled area.

Element Options

General

Heading		Description
Order of Details		Choose the order of order received details.
Failed Message		Show a custom message if the order fails. Leave empty for default Woo message translated in displayed language. You can click preview button to see how this message is displayed in case payment fails.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Item/Failed Message Typography		Controls the item typography.
Item Detail Typography		Controls the item detail(information) typography.
Failed Button Colors
Button Color		Select the color of the text of buttons.
Button Background Color		Select the background color of buttons.
Button Border Color		Select the border color of buttons.
Button Padding		Enter values including any valid CSS unit, ex: 10px or 10%.
Button Border Width		Select the width of the button border.
Button Border Radius		Enter values including any valid CSS unit, ex: 10px or 10%.
Buttons Distance From Paragraph		Enter values including any valid CSS unit, ex: 10px or 10%.
Distance Between Buttons		Enter values including any valid CSS unit, ex: 10px or 10%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Downloads

Geoff — Tue, 28 Mar 2023 23:25:36 +0000

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Downloads Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo order Downloads Element

You can add this Element to your Thank You Page Layout if your site has digital downloads. There is also an option in the Woo Order Table Element that can display digital products as well, but this Element also displays expiring download dates, and number of downloads etc.

Just add the Element into your Layout wherever you want it. There is a full range of typography, color and boder options on the Design tab, to style it as you wish.

Element Options

General

Heading		Description
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Heading Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 1px 1px 15px 1px value.
Body Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 25px 0 25px 0 value.
Heading Cell Background Color		Controls the heading cell background color.
Body Cell Background Color		Controls the table cell background color.
Table Border		Controls the border style of the table.
Table Border Width		Select the width of the border.
Table Border Color		Controls the color of the table border, ex: #000.
Heading Cell Typography		Controls the typography of the heading. Leave empty for the global font family.
Body Cell Typography		Controls the typography of the content text. Leave empty for the global font family.
Body Cell Link Hover Color		Select the color of the link on hover.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Table

Geoff — Tue, 28 Mar 2023 22:47:45 +0000

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Table Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo order Table Element

This part of the Thank You page is a simple Table Element, that displays the items purchased in the Order. Just add it to your Content Layout Section, wherever you want. There is a full range of typography, border and color options to style it however you like. See the full range of options below.

Element Options

General

Heading		Description
Display Meta Downloads Links for Digital Products		Whether or not to display the download links under the products. This is a more straightforward approach instead of using Woo Order Downloads element. The downside is that the information for expiring download date, and number of downloads remaining are missing from here, unlike Woo Order Downloads element.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Heading Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 1px 1px 15px 1px value.
Body Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 25px 0 25px 0 value.
Footer Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 10px 0 10px 0 value.
Heading Cell Background Color		Controls the heading cell background color.
Body Cell Background Color		Controls the table cell background color.
Footer Cell Background Color		Controls the footer table cell background color.
Table Border		Controls the border style of the table.
Table Border Width		Select the width of the border.
Table Border Color		Controls the color of the table border, ex: #000.
Heading Cell Typography		Controls the typography of the heading. Leave empty for the global font family.
Body Cell Typography		Controls the typography of the content text. Leave empty for the global font family.
Body Cell Link Hover Color		Select the color of the link on hover.
Footer Heading Cell Typography		Controls the typography of the heading in footer. Leave empty for the global font family.
Footer Data Cell Typography		Controls the typography of the data in footer. Leave empty for the global font family.
Total Price Cell Typography		Controls the typography of the total price. Leave empty for the global font family.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Additional Info Element

Geoff — Tue, 28 Mar 2023 21:11:01 +0000

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Additional Info Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo Order Additional Info Element

This Element is designed to be used in custom WooCommerce Thank You Pages. See the How To Create A Custom WooCommerce Thank You Page for more details on that process. This simple Element displays additional information relating to the order. It’s like a Notice Element for Woo purchases.

All you have to do it add it to the Layout. There are a few simple customisation options, but otherwise this one just displays any additional information coming from the order. This might be payment method info and any additional info that might be relevant to an order.

Element Options

General

Heading		Description
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.