Audio Element

27/08/2020

The Audio Element was released with Avada 6.1, and offers the ability for users to post self-hosted audio clips easily and stylishly to your Avada websites. Read below for details on all Element options, or watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept
View Element Demo Page!

How To Use The Audio Element

The Audio Element is easy to add anywhere in your content. Follow these simple steps below.

Step 1. Ensure Avada Builder, or Avada Live is active.

Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.

Step 3. Choose Audio from the Elements List.

Step 4. Add your audio file in the first option, Audio. You can either select one already in the media library, or upload one. This element uses a HTML5 tag, and so supports all major audio formats, including .mp3, .wav, & .m4a.

Step 5. Once you have added your audio file, continue configuring the element with your preferred styling options. This element can also be styled in conjunction with the containing column.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Audio. Also, please note that the displayed option 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 Tab

  • Audio – Upload or select your audio file to be loaded into the player.

  • Loop – Turn on to loop the media when it is played.

  • Autoplay – Turn on to autoplay the media upon page load.

  • Preload – This setting specifies if and how the audio should be loaded when the page loads. It defaults to “None”.
    • “None”: The audio should not be loaded when the page loads.
    • “Auto”: The audio should be loaded entirely when the page loads.
    • “Metadata”: Only metadata should be loaded when the page loads.

  • Element Visibility – Allows you to control the column’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the column.

  • CSS ID – Allows you to add an ID for the column.

View The Options Screen

Design Tab

  • Background Color – Controls the background color of the audio player.

  • Controls Color Scheme – This setting sets the color of the controls of the player. Depending on the background color you can change this value to “Light” or “Dark” to ensure controls are visible.

  • Audio Progress Color – Select a color for the audio progress-bar.

  • Maximum Width – Set the maximum width of the audio player using a valid CSS value.

  • Border Size – Set the border size. In pixels.

  • Border Color – Set the border color.

  • Border Radius – Set the border radius. In pixels.

  • Box Shadow – Set to Yes to enable a box shadow for the element.

  • Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.

  • Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels.

  • Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.

  • Box Shadow Color – Set the color of the Box Shadow.

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Options > Avada Builder Elements > Audio

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Maximum Width – Set the maximum width of the audio player using a valid CSS value.

  • Background Color – Controls the background color of the audio player.

  • Audio Progress Color – Select a color for the audio progress-bar.

  • Controls Color Scheme – This setting sets the color of the controls of the player. Depending on the background color you can change this value to “Light” or “Dark” to ensure controls are visible.

  • Border Size – Set the border size. In pixels.

  • Border Color – Set the border color.

  • Border Radius – Set the border radius. In pixels.

View The Options Screen