elements 归档 - 第 15 页共 15 页

Breadcrumbs Element

The Breadcrumbs Element is new in Avada 6.2, and offers you a way to add Breadcrumbs anywhere in your content, not just in the Page Title Bar. It』s easy to use and has a range of content and styling options. Read below for details on all Element Options, or watch the video for a visual overview.,You Are Here:Home|Breadcrumbs Element,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,The Breadcrumbs 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 Breadcrumbs from the Elements List.
Step 4. There are a number of options which affect both what the Breadcrumbs will show and how it will display. You can select a Prefix, a Separator, font size, text color, and alignment. You can also choose whether too show Post Categories and Post Type Archives in the Breadcrumb path.
Step 5. If you wish to make further customization, there are options for Element Visibility, as well as fields for a CSS Class, and CSS ID. There is also an Extras tab, if you wish to customize how the Breadcrumbs will load on the page. Once you have completed selecting your options, click on Save.
Read below for a detailed description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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 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
Prefix – Controls the text before the breadcrumb menu. Can be set globally from the Theme Options (Avada > Theme Options > Breadcrumbs / Search Bar)

Separator –Controls the type of separator between each breadcrumb.

Show Post Categories – Turn on to display the post categories in the breadcrumbs path.

Show Post Type Archives – Turn on to display the post type archives in the breadcrumbs path.

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

Element Sticky Visibility – (Only visible if parent Container is set to Sticky) Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.

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 ScreenDesign Tab
Alignment – Select the Breadcrumbs alignment. Choose from Text Flow, Left, Right or Center.

Font Size – Controls the font size for the breadcrumbs text. Enter value including CSS unit (px, em, rem), ex: 10px.

Text Color – Controls the text color of the breadcrumbs font. Leave empty for default value.

Text Hover Color – Controls the text hover color of the breadcrumbs font. Leave empty for default value.

Margin – Controls the margins around the Element. In pixels or percentage, ex: 10px or 10%.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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 ScreenGlobal OptionsNote: The Default setting will use the global settings assigned for this element in the Global Options. This Element does not have any Global Options in the Avada Builder Element section, but instead uses the Breadcrumbs section of the Global Options to control global options for the Element as well.

Audio Element

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.,Audio Playerhttps://theme-fusion.com/wp-content/uploads/2018/05/htutaue.mp300:0000:0000:00Use Up/Down Arrow keys to increase or decrease volume.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Audio ElementThe 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.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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 ScreenDesign 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 ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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 ScreenGlobal OptionsLocation: 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.

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

Button Element

The easy to use, and versatile Button Element allows you to add a virtually endless variety of buttons to your site. This Element was updated with Avada 7.5, with a range of new options. Read below for an overview of the specific features of the Element, and watch the video for a visual overview.,Get StartedLearn MoreBuy Avada NowRead moreBuy NowA button spanning the Column,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Button ElementButtons are amazingly useful on a website. You can use them in so many ways. They can link to a website, they can open another page on your own site, they can even open a Modal dialog. You can use them in page content, widget areas, or even in menus. They can be full width, different sizes and colors; the options are almost endless. Let』s see how we insert one into a page.
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 Button from the Elements List.
Step 4. The General Tab is the place to set the links, button text, alignment, and other practical options. The first step is to add the link that the Button will open. This can be an external URL, a local page, or even a Modal dialog (for more details on Modals, see the link below). Next, fill out the Button Text (what you want to display on the button) and move down the options.
Step 5. The next step is to design your Button. On the Design Tab, you will find a huge variety of styling options, from colors, gradients, width, size, border radius and icon options.
Step 6. The Animations found in the Extras Tab can also be used to animate the entry of the button onto the page, with seven animations to choose from.
Step 7. Click Save when you are finished customizing your Button.
Read below for a detailed description of all element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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 Avada > Options > Avada Builder Elements > Button. 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
Button URL – Add the URL that the Button will link to here, ex: https://example.com.

Button Text – Add the text the Button will display here.

Button Title Attribute – Set a title attribute for the Button Link. This will show on hover.

Button Target – Use this setting to choose how the Button target URL is opened. Options are _self, _blank, and Lightbox. _self means it opens in the same browser tab, while _blank means it opens in a new browser tab. Lightbox will open item in pop up window.

Button Additional Attributes – Here you can add additional attributes to the anchor tag. Separate attributes with a white space and use single quotes on the values, doubles don』t work. If you need to add square brackets, [ ], to your attributes, please use curly brackets, { }, instead. They will be replaced correctly on the front-end. ex: rel=』nofollow』.

Alignment – This setting controls the button』s alignment in the container it is in. Choose from Text Flow, Left, Right, or Center. This is now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.

Modal Window Anchor – Add the class name of the modal window you want to open on button click. Note: A Modal Element must be added to the same page as the button.

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

Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Button Style – Select the button』s color. Select default for Global Options, or custom to use advanced color options below.

Button Gradient Start Color – Controls the start color of the button background. Leave empty for the default value.

Button Gradient End Color – Controls the end color of the button background. Leave empty for the default value.

Button Gradient Start Hover Color – Controls the start hover color of the button background. Leave empty for the default value.

Button Gradient End Hover Color – Controls the end hover color of the button background. Leave empty for the default value.

Gradient Start Position – Select start position for gradient.

Gradient End Position – Select end position for gradient.

Gradient Type – Controls gradient type. Choose from Default, Linear, or Radial.

Radial Direction – Select direction for radial gradient.

Gradient Angle – Controls the gradient angle. In degrees.

Button Text Color – Controls the color of the button border, divider, text, and icon. Leave empty for the default value.

Button Accent Hover Color – Controls the hover color of the button border, divider, text, and icon. Leave empty for the default value.

Button Type – Controls the button type. Choose from Default, Flat, or 3D.

Button Bevel Color For 3D Mode – Controls the bevel color of the button when using 3D button type. Leave empty for the default value.

Button Hover Bevel Color For 3D Mode – Controls the hover bevel color of the button when using 3D button type. Leave empty for the default value.

Button Border Size – Controls the border size. In pixels or percentage, ex: 10px or 10%. Leave empty for default values.

Button Border Radius – Controls the border radius. Enter values including any valid CSS unit, ex: 10px. Leave empty for default values.

Button Border Color – Controls the border color of the button. Leave empty for default value.

Button Border Hover Color – Controls the hover border color of the button. Leave empty for default value.

Button Size – Controls the button size. Choose from Custom, Default, Small, Medium, Large, or X-Large.

Padding – Controls the padding for the button. Leave empty for default values.

Typography

Font Family – Controls the font family of the button text. Leave empty for default value.

Font Size – Controls the font size of the button. Leave empty for default value.

Line Height – Controls the line height of the button. Leave empty for default value.

Letter Spacing – Controls the letter spacing of the title. Enter value including any valid CSS unit, ex: 2px. Leave empty for default value.

Text Transform – Choose how the button text is displayed.

Button Span – Controls if the button spans the full width of its container.

Margin – Enter values including any valid CSS unit, ex: 4%. Controls the margin around the Element.

Icon – Select an icon to show on the button. Click to select, click again to deselect.

Icon Position – Choose the position of the icon on the button. Choose from Left or Right.

Icon Divider – Choose to display a divider between icon and text.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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 1.

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

Button Padding – Controls the padding for buttons.

Button Span – Controls if the button spans the full width of its container. This overrides the width, but not the height, of the above options.

Button Type – Controls the default button type. Choose from Flat, or 3D.

Button Typography

Font Family – Controls the button font family.

Backup Font – Set the backup button font family.

Font Size – Controls the size of the button text.

Line Height – Controls the line height of the button text.

Letter Spacing – Controls the letter spacing of the button text.

Text Transform – Controls how the text is displayed on the button. Choose from Normal, or Uppercase.

Button Gradient Start Color – Controls the start color of the button background.

Button Gradient End Color – Controls the end color of the button background.

Button Gradient Start Hover Color – Controls the start hover color of the button background.

Button Gradient End Hover Color – Controls the end hover color of the button background.

Button Gradient Start – Controls the start position for the gradient.

Button Gradient End – Controls the end position for the gradient.

Button Gradient Type – Controls the type of gradient. Choose from Linear, or Radial.

Button Gradient Angle – Controls the angle for the linear gradient.

Button Radial Direction – Select direction for radial gradient.

Button Text Color – Controls the color of the button text, divider and icon.

Button Text Hover Color – Controls the hover color of the button text, divider and icon.

Button Bevel Color for 3D Mode – Controls the bevel color of the buttons when using 3D button type.

Button Hover Bevel Color for 3D Mode – Controls the hover bevel color of the buttons when using 3D button type.

Button Border Size – Controls the border size for buttons. In pixels.

Button Border Radius – Controls the border radius for buttons. In pixels.

Button Border Color – Controls the border color for buttons.

Button Border Hover Color – Controls the hover border color for buttons.
Legacy Button Presets – Select if you would like to enable legacy color presets. Choose from Yes, or No.View The Options Screen

Author Element

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. In this document, we』re going to look at the Author Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Author ElementThe Author Element allows you to place the details of the post author into your Content Layout Section.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Author Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.
The Author Element can be placed anywhere in you Layout Section, and will dynamically pull the details of that specific post author into the page. As such, you would only use this Element on a Single Post/Portfolio Layout. If you used it on a Archives Layout for example, it wouldn』t render anything, as an Archives Layout might show posts from many authors.
See below, the Author Element, displaying on a Single Post layout in the Taxi Demo. View a live post here.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. 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: 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 Tab
Show Headings – Choose to show or hide headings.

HTML Heading Size – Choose the size of the HTML heading that should be used, h1-h6.

Author Avatar – Make a selection for author avatar.

Show Biography – Choose to show or hide author biography.

Margin – In pixels or percentage, ex: 10px or 10%.

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

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

Speed of Animation – Controls the speed of animation on the Element. Choose between 0.1 to 1.

Chart Element

Introduced back in Avada 5.5, the Chart Element is a new addition to the Avada Builder Elements toolkit. There are different chart types to utilize such as Bar, Horizontal Bar, Line, Pie, Doughnut, Radar, or Polar Area. Some usage examples include line graphs that of data can be used to compare changes over the same period of time for more than one group. Pie charts are for when you are trying to compare parts of a whole, they do not show changes over time. Bar graphs are used to compare data between different groups or to track changes over a certain time frame.
Read on to discover more about this amazing element, and watch the video for a visual overview.,View Element Demo Page!,Overview
Chart Types
How To Use The ElementElement OptionsGlobal Options,Chart TypesThe Chart Element brings to you 7 different ways to display your numerical data, each one as impressive as the next, and each one suiting several or different types of design and layout. Which you use and how you use them is completely up to you, as we have included extensive styling options for each chart.
Bar Chart
Horizontal Bar Chart
Pie Chart
Doughnut Chart
Polar Chart
Line Chart
Radar Chart,How To Use The Chart ElementThe Chart Element is the most versatile way to add charts anywhere on your site.
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 Alert from the Elements List.
Step 4. Charts can be simple, and they can be very complex. The Chart options are broken up into two sections to make the process as easy as possible. The first section is called Chart Options. Here you configure the chart by giving it a title, choosing the chart type, the labels on the X and Y axes, as well as border, fill and other styling options.
Step 5. Once you have finished configuring the chart, you need to populate it. This happens in the Chart Data section. Here you can add Value Columns and Data Sets to build your chart. Once you are happy with the final result after your have entered your data, click Save.
Please read below for details on the specific options the Chart Element has.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsThere are two tabs in the Chart Element namely Chart Options and Chart Data. Please continue reading below to know more about each option. A chart can take on a variety of forms, with common features that provide the chart with its ability to extract meaning from data.
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 > Chart. Also, 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.
IMPORTANT NOTE
If you are using a Bar or Horizontal Bar Chart, the table interface and available options will change depending on the number of datasets added. This setup is needed in order to ensure maximum flexibility for your chart styling.Chart Options Tab
Title – Controls the chart title. This utilizes all the H4 typography settings in Theme Options except for top and bottom margins.

Chart Type – Controls the chart type to be used. Choose between Bar, Horizontal Bar, Line, Pie, Doughnut, Radar, or Polar Area.

Legend Position – Controls the chart legend position.

X Axis label – Controls the X axis label.

Y Axis label – Controls the Y axis label.

Show Tooltips – Controls whether tooltips should be displayed on hover. If your chart is in a column and the column has a hover type or link, tooltips are disabled.

Border Type – Controls the border type for line charts. Choose between Smooth, Non smooth, or Stepped. This option is only available for Line chart type.

Chart Fill – Controls how line chart should be filled. Choose between Start, End, or Origin. This option is only available for Line chart type.

Point Style – Controls the point style for line charts. Choose between Circle, Cross, Cross Rotated, Dash, Line, Rectangle, Rectangle Rounded, Rectangle Rotated, Star, or Triangle. This option is only available for Line chart type.

Point Size – Controls the point size for line charts. This option is only available for Line chart type.

Point Background Color – Controls the point background color for line charts. This option is only available for Line chart type.

Point Border Color – Controls the point border color for line charts. This option is only available for Line chart type.

Element Visibility – Choose to show the element on the selected visibility options and hide them on the deselected ones. Choose from Small Screen, Medium Screen, and Large Screen. You can select more than one setting.

CSS Class – Allows you to add a class to the wrapping HTML element.

CSS ID – Allows you to add an id to the wrapping HTML element.
View The Options ScreenChart Data Tab
Table Area – This table allows you to add data sets and value columns, and set the values for the columns, border size, legend label, legend value text color, background color, border color, and X Axis labels.

Chart Background Color – Controls the background color of the chart.

Chart Padding Options – Controls the top, right, bottom, and left padding of the chart.

Chart Axis Text Color – Controls the text color of the x-axis and y-axis.

Chart Gridline Color – Controls the color of the chart background grid lines and values.
View The Options ScreenGlobal OptionsLocation: Avada > Theme Options > Avada Builder Elements > Chart.

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

Legend Position – Set chart legend position. Choose between Top, Right, Bottom, Left, or Off. Note that on mobile devices legend will be positioned below the chart when left or right position is used.

Show Tooltips – Choose whether tooltips should be displayed on hover. Select between Yes, or No. If your chart is in a column and the column has a hover type or link, tooltips are disabled.

Chart Background Color – Controls the background of the chart.

Chart Axis Text Color – Controls the text color of the x-axis and y-axis.

Chart Gridline Color – Controls the color of the chart background grid lines and values.
View The Options Screen

Avada Builder Elements Videos

With over 90 Design Elements to choose from in Avada, comes the need to familiarize yourself with what the individual Elements can do.
And so to show you how each and every Element works, we have made a video for each one, designed to give you a snapshot of the awesome features you can use on your websites. Just mouse over the Element you』d like to explore and click for the video to load in a Lightbox.
Some of these Elements will only be visible in your install if you have the corresponding plugin installed as well (eg. Convert Plus, Gravity Forms, Events, Layer Slider, Slider Revolution & the WooCommerce Elements), or have the option activated in the Theme Options (Privacy).,Structural Design ElementsContainer
Column
Nested Columns

Avada Builder Elements

The Avada Builder Elements are the heart of the Avada Builder. With 95 Design Elements, 23 Layout Elements, 20 Form Elements, and over 500+ element options, there are a LOT of design choices at your fingertips. For a great intro to the Design Elements, visit this page, for Layout Elements, see this page, and for Form Elements, see this page.
Below is an alphabetically ordered list of all the available Elements in Avada. First up are the Structural Design Elements like the Container & Column etc. While these create the structure on your page, they are also Design Elements in their own right, and are very powerful. Then come the main Design Elements, and then under this, there are the Layout Elements, introduced for Content Layout Sections in Avada Layouts, and expanded upon for the Avada WooCommerce Builder in Avada 7.2 and 7.3. Finally, at the bottom, are the Avada Form Builder Elements.
Please note that some of these Elements will only be visible in your install if they are enabled in the Global Options (Privacy), if you have the corresponding plugin installed (eg. Convert Plus, Gravity Forms, Events, Layer Slider, Slider Revolution & the WooCommerce Design Elements), as well as having the Element activated in the Avada Builder Options, or if you are in the Builder section where they are active (Layout Sections for the Layout Elements, and the Avada Form Builder for the Form Elements).
Simply click the element below that you』d like to know more about, to be directed to the corresponding Element documentation. There you will find an overview of the element, an example of the element, a section explaining how to use the element, the full range of its options, and any Global Options for the Element. In short, everything you need to know to get started with each and every Element that comes with Avada. The vast majority of the Elements also have their own videos, embedded on the Element page, or gathered together here.
The Avada Builder Elements list below is valid for Avada 7.6 (Released on December 15th, 2021).,Structural Design ElementsContainer
Column
Nested Columns
Next Page,Design ElementsAlert
Audio
Avada Form
Avada Slider
Blog
Breadcrumbs
Button
Chart
Checklist
Code Block
Contact Form 7
Content Boxes
Convert Plus
Countdown
Counter Boxes
Counter Circles
Dropcap
Events
Facebook Page
FAQ
Flickr
Flip Boxes
Gallery
Google Map
Gravity Form
Highlight
Icon
Image
Image Before & After
Image Carousel
Image Hotspots
Layer Slider
Lightbox
Lottie Animation
Media Slider
Menu
Menu Anchor
Modal
Modal Text / HTML Link
News Ticker
One Page Text Link
Person
Popover
Portfolio
Post Cards
Post Slider
Pricing Table
Privacy
Progress Bar
Recent Posts
Scroll Progress
Search
Section Separator
Separator
Slider Revolution
Social Links
Social Sharing
Soundcloud
Star Rating
Syntax Highlighter
Table
Tabs
Tag Cloud
Tagline Box
Testimonials
Text Block
Title
Toggles
Tooltip
Twitter Timeline
User Login
User Lost Password
User Register
Video
Views Counter
Vimeo
Widget
Widget Area
Woo Cart Coupons
Woo Cart Shipping
Woo Cart Table
Woo Cart Totals
Woo Checkout Billing
Woo Checkout Order Review
Woo Checkout Payment
Woo Checkout Shipping
Woo Checkout Tabs
Woo Featured Products Slider
Woo Notices
Woo Product Carousel
Woo Product Grid
Woo Shortcodes
Woo Sorting
Woo Up/Cross-sells
YouTube
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Layout Elements,Avada Form Elements