诗语，作者 Avada 文档 - 第 72 页共 79 页

Blog Element

Blogging is core WordPress functionality, and with Avada, we have added many ways to get the most out of this core custom post type. For a full rundown on how to blog, in conjunction with Avada, please see the full series of Blog Post type documentation here.
One of the best ways to add blog posts to a page however, is to use the Blog Element. This is a fantastic method to use, because it allows you to place your blog posts on any page, select any of our layouts, assign custom categories to display, and so much more. Using the Blog Element gives you the flexibility to add a blog feed on any page, and indeed, anywhere on the page. Each Blog element can have a different set of categories, layouts and other unique blog settings. It』s also great to use if you want to only display a few posts on a page along with other content. Before you can display blog posts, you must, of course, first create them.
Read on to find out about all the options for this Element, or watch the video for a visual overview.

Avada Beer: Deconstructing a Prebuilt Website

Avada Electrician: Deconstructing a Prebuilt Website

Avada Barber Shop: Deconstructing a Prebuilt Website

The 2021 Avada Black Friday Sale

Avada eSports: Deconstructing a Prebuilt Website

Avada Extreme Sports: Deconstructing a Prebuilt Website

Avada Salon: Deconstructing a Prebuilt Website

Avada Spa: Deconstructing a Prebuilt Website

How to Build a Multilingual Website in Minutes Using Avada and WPML,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Blog ElementThe Blog Element is the most versatile way to add blog posts 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 Blog from the Elements List.
Step 4. Configure the Blog element to your liking. This is where the action happens. The Blog Element comes with 7 different blog layouts for you to choose from. They can then all be customized to your liking. To view the possibilities of this element, make sure you visit the Blog Element Demo page. There are way too many options to list for this element, but if you start with your preferred layout, and then slowly go down the options list, customizing its appearance to suit your wishes, you will soon get the blog page you are looking for! There is almost nothing that cannot be customized, and it is truly the most versatile way to add blogs to a page.
Step 5. Once you have finished configuring the options, save your page.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsIMPORTANT NOTE: When using the Blog element, the general Avada Global Options on the Blog tab will not take effect. This is because each Blog element has its own set of options built directly into the element. This allows you to set all the options per instance of the element. The single post Page Options in Avada Global Options will still apply.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 > Blog. 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.

Blog Layout – Controls the blog posts layout. Choose between Large, Medium, Large Alternate, Medium Alternate, Grid, Timeline, or Masonry.

Number of Columns – Controls the number of columns per row. Note: Masonry layout does not work with 1 column. Default currently set to 2.

Column Spacing – Controls the column spacing for blog posts.

Masonry Image Aspect Ratio – Allows you to set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). Note: The value of 「1.0」 represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.

Masonry 2×2 Width – This option decides when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait layouts. Note: There is a 「Masonry Image Layout」 setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio.

Equal Heights – Allows you to display grid boxes with equal heights per row.

Posts Per Page – Accepts a numerical value that sets how many posts to display per page. Choose from -1 – 25. Choose -1 to display all and 0 to use number of posts from Settings > Reading.

Post Status –Select the status(es) of the posts that should be included or leave blank for published only posts. You can select from Published, Drafted, Scheduled, Private, or Pending.

Post Offset – Accepts a numerical value that sets how many posts to skip. Choose from 0 – 25.

Pull Posts By – Allows you to load posts by category or tag.

Categories – Controls which post categories to display. Leave blank to show all categories.

Exclude Categories – Controls which post categories to exclude. You can exclude multiple categories, or leave blank to exclude none.

Tags – Controls which post tags to display. Leave blank to show all tags.

Exclude Tags – Controls which post tags to exclude. You can exclude multiple tags, or leave blank to exclude none.

Order By – Controls how to order the posts. Choose from Date, Post Title, Post Slug, Author, Number Of Comments, Last Modified, or Random.

Order – Controls the sorting order of the posts. Choose from Descending or Ascending.

Show Thumbnail – Allows you to show or hide the post』s featured images. Choose from Yes or No.

Show Title – Allow you to show or hide the title below the featured image. Choose from Yes or No.

Link Title To Post – Controls the title as a link to the single post page. Choose from Yes to set the title as a link, or No to keep it as plain text.

Text Display – Controls if the blog post content is displayed as excerpt, full content or is completely disabled. Choose between Default, Excerpt, Full Content, or No Text.

Excerpt Length – Accepts a numerical value that sets the excerpt』s length. Choose from 0 – 500.

Strip HTML from Posts Content – Allows you to strip HTML from the excerpt. Choose Yes to strip HTML, or No to keep it.

Show Meta Info – Allows you to show or hide all meta data. Choose Yes or No.

Show Author Name – Allows you to show or hide the author. Choose Yes or No.

Show Categories – Allows you to show or hide blog post categories. Choose Yes or No.

Show Comment Count – Allows you to show or hide all comments. Choose Yes or No.

Show Date – Allows you to show or hide the date. Choose Yes or No.

Show Read More Link – Allows you to show or hide the read more link. Choose Yes or No.

Show Tags – Allows you to show or hide tags. Choose Yes or No.

Pagination Type – Allows you to set the pagination type. Choose from No Pagination, Pagination, Infinite Scrolling or Load More Button.

Grid Box Color – Controls the background color for the grid boxes.

Grid Element Color – Controls the color of borders/date box/timeline dots and arrows for the grid boxes.

Grid Separator Style – Controls the line style of grid separators. Note: At least one meta data field must be enabled and excerpt or full content must be shown in order that the separator will be displayed.

Grid Separator Color – Controls the line style color of grid separators.

Blog Grid Text Padding – Controls the padding for the blog text when using grid / masonry or timeline layout.

Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

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

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Blog

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

Number of Columns – Set the number of columns per row for grid and masonry layout. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing for blog posts for grid and masonry layout. In pixels.

Blog Grid Text Padding – Controls the top/right/bottom/left padding of the blog text when using grid / masonry or timeline layout. Enter values including any valid CSS unit, ex: 30px, 20px, 25px, 25px.

Content Display – Controls if the post content displays an excerpt, full content or is completely disabled for blog elements. Choose between No Text, Excerpt, or Full Content.

Excerpt Length – Controls the number of words in the excerpts for blog elements.

Blog Date Box Color – Controls the color of the date box in blog alternate and recent posts layouts.
View The Options Screen

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

Enqueue a CSS file on Avada Builder back end

To enqueue a CSS file on Avada Builder back end use fusion_builder_admin_scripts_hook action hook.
This action hook is fired on Avada Builder initialization and is used to enqueue javascripts and styles on the backend.
Copy to Clipboardfunction my_function() {
wp_enqueue_style( 'my-style','css/my-style.js', array( 'jquery' ), '1.0', true );
}
add_action( 'fusion_builder_admin_scripts_hook', 'my_function' ); 1function my_function() {2 wp_enqueue_style( 'my-style','css/my-style.js', array( 'jquery' ), '1.0', true );3}4add_action( 'fusion_builder_admin_scripts_hook', 'my_function' );

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.

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.

Enqueue a CSS file for my Avada Builder Element on back end

When registering a new Avada Builder element via fusion_builder_map() helper function provide admin_enqueue_css attribute with your CSS file location.
Copy to Clipboardfunction fusion_element_text() {

fusion_builder_map(
array(
'name' => esc_attr__( 'Text Block', 'fusion-builder' ),
'shortcode' => 'fusion_text',
'admin_enqueue_css' =>'/css/my-style.css',
'params' => array(
array(
'type' => 'tinymce',
'heading' => esc_attr__( 'Content', 'fusion-builder' ),
'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),
'param_name' => 'element_content',
'value' => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),
),
),
)
);
}
add_action( 'fusion_builder_admin_scripts_hook', 'fusion_element_text' );x 1function fusion_element_text() {23fusion_builder_map( 4 array(5 'name' => esc_attr__( 'Text Block', 'fusion-builder' ),6 'shortcode' => 'fusion_text',7 'admin_enqueue_css' =>'/css/my-style.css',8 'params' => array(9 array(10 'type' => 'tinymce',11 'heading' => esc_attr__( 'Content', 'fusion-builder' ),12 'description' => esc_attr__( 'Enter some content for this textblock.', 'fusion-builder' ),13 'param_name' => 'element_content',14 'value' => esc_attr__( 'Click edit button to change this text.', 'fusion-builder' ),15 ),16 ),17 ) 18);19}20add_action( 'fusion_builder_admin_scripts_hook', 'fusion_element_text' );

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

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

Enqueue a script on Avada Builder back end

To enqueue a script file on Avada Builder back end use fusion_builder_admin_scripts_hook action hook.
This action hook is fired on Avada Builder initialization and is used to enqueue java scripts and styles on the backend.
Copy to Clipboardfunction my_function() {
wp_enqueue_script( 'my-script','js/my-script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'fusion_builder_admin_scripts_hook', 'my_function' ); 1function my_function() {2 wp_enqueue_script( 'my-script','js/my-script.js', array( 'jquery' ), '1.0', true );3}4add_action( 'fusion_builder_admin_scripts_hook', 'my_function' );

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