Avada 文件

Vimeo Element

Adding a Vimeo video to your website has never been easier thanks to the Fusion Builder Vimeo Element. Just add the vimeo video ID and away you go. It』s even got built in responsive features, so you don』t have to worry about the size of your videos! Read below to discover more about the Vimeo Element!,View Element Demo Page!,OverviewHow To Use The ElementGeneral/Styling OptionsGlobal Options,How To Use The Vimeo Element
Adding a Vimeo video to your content couldn』t be easier with the Fusion Builder Vimeo Element.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the video.
Step 3 – Click on the + Element button at the bottom of the column. Select Vimeo.
Step 4 – Now you have the options window open. The first and most important step is to place the Vimeo video ID into the Video ID field. This is the the end section of the url; for example the Video ID for https://vimeo.com/75230326 is 75230326.
Step 5 – In the Alignment field, you can choose the alignment of the video in the column you are placing it in.
Step 6 – The dimensions of the video are next. This is in pixels, but you just enter a number. Vimeo videos do not force an aspect ratio, however the most common one is 16:9. When entering the dimensions with this element, the only really important one is the width. The video will display at its native aspect ratio.
Step 7 – There are a couple more options you can select. One is Autoplay, which by default is set to No, as it』s generally not considered good Netiquette for videos to autoplay, and there is an option for additional API parameters. The most common of these is &rel=0, which will disable related videos at the end of the video playing. And with Avada 7.4, we introduced a Video Facade option, to help with page speed. Once you have finished with the options, simply click save and the video will be inserted into your page. Once you have finished with the options, simply click save and the video will be inserted into your page.
Step 8 – If you preview your page, you will see the video as you have styled it.

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.

Video ID – Enter the Vimeo video ID. For example, the Video ID for https://vimeo.com/75230326 is 75230326.

Alignment – Select the video』s alignment. Choose from Text Flow, Left, Center, or Right.

Dimensions – In pixels but only enter a number, ex: 600.

Autoplay Video – Set to yes to make video autoplay.

Additional API Parameter – Use additional API parameter, for example &rel=0 to disable related videos. See Vimeo』s Using Player Paramerters page for more detail.
Title Attribute – Set the title attribute for the iframe embed of your video. Leave empty to use default value of 「Vimeo video player #」.Video Facade – Enable video facade in order to load video player only when video is played.
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.
View The Options ScreenGlobal OptionsThere are no Global Options for the Vimeo Element.

Views Counter Element

The Views Counter Element allows you to add a counter to a page (or in a layout section) that displays how many times the page has been viewed. Read below for an overview of the specific features of the Element, and watch the video below for a visual overview.,Number Of Views For This DocumentTotal Views: 220Daily Views: 1,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Views Counter ElementStep 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 Views Counter from the Elements List.
Step 4. Simply configure the Element as you wish. There are options to display Daily Views and Total Views, as well as some layout options and label positioning options. There are also some design options for styling the Element.
Step 5. Click Save when you are finished customizing the Element.
Read below for a detailed description of all element options.
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 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
Views Types – Choose what views types are enabled. You can reorder them, or drag them to the Disabled section so they do not display. Choose from Total Views, and Daily Views.

Layout – Choose if views items should be stacked and full width, or if they should be floated.

Separator – Controls the type of separator between views items. Only with Floated option.

Labels – Choose where to display the labels, or turn them off.

Total Views Label – Set the total views label to display before/after the views.

Daily Views Label – Set the daily views label to display before/after the views.

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
Font Size – Enter value including any valid CSS unit.

Text Color – Set the text color.

Background Color – Set the background color.

Alignment – Select the views alignment.

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

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

Border Radius – Enter values including any valid CSS unit, ex: 10px.

Box Shadow – Set to 「Yes」 to enable box shadows.

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. Only shows if Box Shadow is set to Yes.

Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels. Only shows if Box Shadow is set to Yes.

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. Only shows if Box Shadow is set to Yes.

Box Shadow Color – Controls the color of the box shadow. Only shows if Box Shadow is set to Yes.

Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow. Only shows if Box Shadow is set to Yes.
View The Options Screen,Extras 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 Screen,Global OptionsThere are no Global Options for the Views Counter Element.

Video Element

The Video Element offers the ability for users to post self-hosted video clips easily to their Avada websites. See below for more information, and watch the video for a visual overview.,View Element Demo Page,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Video ElementThe Video Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Edit an existing page. Ensure the Avada Builder is activated, by clicking the 『Use Avada Builder』 button on top of the page editor.
Step 2. Choose the Container and Column you wish to add the Alert Element into. Click on Add new Element.
Step 3. Choose Video from the Elements List.
Step 4. Add your video file in the first option, Video MP4 Upload. You can either select one already in the media library, or upload one. You can also upload a WebM file, but this is optional.
Step 5. Once you have added your video file, continue configuring the element with your preferred function and styling options.
Read below for a detailed description of all element options.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 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 in Avada > Options > Avada Builder Elements > Video section. Also, please not 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
Video MP4 Upload – Upload or select your video file to be loaded into the player.

Video WebM Upload – Add your WebM video file. This is optional; only MP4 is required to render your video with cross-browser compatibility.

Video Max Width – Set the maximum width the video should take up. Enter value in pixel (px) or percentage (%), ex: 200px. Leave empty to use full video width. NOTE: Percentage values will be with respect to the original video width and not the wrapping container width.

Video Controls – Controls whether the video controls should show or not.

Video Preloading – Controls how / if the browser should preload the video. Choose 「Metadata」 if only the video metadata should be preloaded on page load (in Chrome needed for the preview image to load) or 「Auto」 to preload the full video on page load.

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

Autoplay Video – Turn on to autoplay the media upon page load. IMPORTANT: In some modern browsers, videos with sound won』t be autoplayed.

Mute Video – IMPORTANT: In some modern browsers, videos with sound won』t be autoplayed.

Preview Image – Upload an image to display as a video preview. IMPORTANT: In Chrome the preview image will only be displayed if 「Video Preloading」 is set to 「Metadata」.

Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Theme Options.

CSS Class – Add a class to the wrapping HTML element.

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenDesign TabOverlay Color – Controls the overlay color of the video element.
Border Radius – Set the border radius of the element. 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.

Alignment – Select the video』s alignment. Choose from Text Flow, Left, Center, & Right.

Margin – Set the top and bottom margin of the element (spacing above and below the video). Enter values including any valid CSS unit, ex: 4%
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Video.
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 video using a valid CSS value.

Video Controls – Controls whether the video controls should show or not.

Video Preloading – Controls how / if the browser should preload the video. Choose 「Metadata」 if only the video metadata should be preloaded on page load or 「Auto」 to preload the full video on page load.
View The Options Screen

User Register Element

Avada comes bundled with a group of Login and Registration Elements to allow you to quickly and easily setup custom login, registration and lost password pages. These are the User Login Element, the User Lost Password Element, and the User Register Element. Used together, this suite of tools gives you a powerful and easy ways to administer your users access to your site. Read below to discover more about the User Register Element!,User Register,Read about the User Login Element!

Read about the User Lost Password Element!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The User Register ElementStep 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『User Register』 Element and click it to bring up its options window.
Step 4 – Work you way one at a time through the options to configure the User Register Element to your liking.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the User Register Element output, and remember you can come back into the element to fine tune it.
IMPORTANT NOTE: As of Avada 7.4, you can now also add Google reCAPTCHA to the User Register Element. To enable this, simply head to the Global Options, and Form > Google reCAPTCHA, and turn the reCAPTCHA For User Elements option to Yes.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.

Text Align – Choose the alignment of all content parts. 「Text Flow」 follows the default text align of the site. 「Center」 will center all elements.

Form Field Layout – Choose if form fields should be stacked and full width, or if they should be floated.

Heading – Choose a heading text.

Heading Color – Choose a heading color.

Caption – Choose a caption text.

Caption Color – Choose a caption color.

Show Labels – Controls if the form field labels should be shown.

Show Placeholders – Controls if the form field placeholders should be shown.

Button Span – Choose to have the button span the full width.

Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.

Link Color – Choose a link color.

Registration Notice – Choose a notice text that will be displayed before the register button. Leave empty if no text should be displayed.

Redirection Link – Add the URL to which a user should be redirected to after form submission. Leave empty to use the same page.

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.
View The Options ScreenGlobal OptionsThere are no Global Options for the User Register Element.

User Lost Password Element

Avada comes bundled with a group of Login and Registration Elements to allow you to quickly and easily setup custom login, registration and lost password pages. These are the User Login Element, the User Lost Password Element, and the User Register Element. Used together, this suite of tools gives you a powerful and easy ways to administer your users access to your site. Read below to discover more about the User Lost Password Element!,User Register,Read about the User Register Element!

Read about the User Login Element!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The User Lost Password ElementStep 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『User Lost Password』 Element and click it to bring up its options window.
Step 4 – Work you way one at a time through the options to configure the User Lost Password Element to your liking.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the User Lost Password Element output, and remember you can come back into the element to fine tune it.
IMPORTANT NOTE: As of Avada 7.4, you can now also add Google reCAPTCHA to the User Lost Password Element. To enable this, simply head to the Global Options, and Form > Google reCAPTCHA, and turn the reCAPTCHA For User Elements option to Yes.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 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.

Text Align – Choose the alignment of all content parts. 「Text Flow」 follows the default text align of the site. 「Center」 will center all elements.

Heading – Choose a heading text.

Heading Color – Choose a heading color.

Caption – Choose a caption text.

Caption Color – Choose a caption color.

Show Labels – Controls if the form field labels should be shown.

Show Placeholders – Controls if the form field placeholders should be shown.

Button Span – Choose to have the button span the full width.

Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.

Link Color – Choose a link color.

Redirection Link – Add the URL to which a user should be redirected to after form submission. Leave empty to use the same page.

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.
View The Options ScreenGlobal OptionsThere are no Global Options for the User Lost Password Element.

User Login Element

Avada comes bundled with a group of Login and Registration Elements to allow you to quickly and easily setup custom login, registration and lost password pages. These are the User Login Element, the User Lost Password Element, and the User Register Element. Used together, this suite of tools gives you a powerful and easy ways to administer your users access to your site. Read below to discover more about the User Login Element!,User Register,Read about the User Register Element!

Read about the User Lost Password Element!,View Element Demo Page!,How To Use The User Login ElementStep 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『User Login』 Element and click it to bring up its options window.
Step 4 – Work you way one at a time through the options to configure the User Login Element to your liking.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the User Login Element output, and remember you can come back into the element to fine tune it.
IMPORTANT NOTE: As of Avada 7.4, you can now also add Google reCAPTCHA to the User Login Element. To enable this, simply head to the Global Options, and Form > Google reCAPTCHA, and turn the reCAPTCHA For User Elements option to Yes.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 in the Options > Avada Builder Elements > User Login section. 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.

Text Align – Choose the alignment of all content parts. 「Text Flow」 follows the default text align of the site. 「Center」 will center all elements.

Form Field Layout – Choose if form fields should be stacked and full width, or if they should be floated.

Heading – Choose a heading text.

Heading Color – Choose a heading color.

Caption – Choose a caption text.

Caption Color – Choose a caption color.

Show Labels – Controls if the form field labels should be shown.

Show Placeholders – Controls if the form field placeholders should be shown.

Button Span – Choose to have the button span the full width.

Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.

Link Color – Choose a link color.

Show Remember Me Checkbox – Controls if the remember me checkbox should be displayed in the login form.

Redirection Link – Add the URL to which a user should be redirected to after form submission. Leave empty to use the same page.

Register Link – Add the URL the 「Register」 link should open.

Lost Password Link – Add the URL the 「Lost Password」 link should open.

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.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > User Login
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

User Login Text Align – Choose the alignment of all content parts. 「Text Flow」 follows the default text align of the site. 「Center」 will center all elements.

User Login Form Field Layout – Choose if form fields should be stacked and full width, or if they should be floated. IMPORTANT: This option only works for the login and the register form.

User Login Show Labels – Controls if the form field labels should be shown.

User Login Show Placeholders – Controls if the form field placeholders should be shown.

User Login Show Remember Me Checkbox – Controls if the remember me checkbox should be displayed in the login form.

User Login Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.
View The Options Screen

Upload Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Upload Field Element allows users to easily upload files via a form. You can control allowed file extensions, whether a user can upload mulitple files, and the maximum file size. You can see an example of this Element in the Upload Prebuilt Form.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Upload Field ElementThe Upload Field Element allows you to place a field into a form where users can upload files before submission.
Step 1. Create a new, or edit and existing Form in the Avada Form Builder.
Step 2. Create, or choose the Column you wish to add the Element into.
Step 3. Click on Add New Element and choose Upload Field from the Form Elements tab.
Step 4. The main things to configure with this Element are the Max File Upload Size, whether to allow Mulitple Uploads, and the Allowed Extensions. Otherwise, configure as any other form Element.
Step 5. Once you have configured the Element, save your page.
Read below for a 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 access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms 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 instance of the Element independently, greatly enhancing your flexibility and creative options.
General Tab
Field Label – Enter the label for the input field. This is how users will identify individual fields.

Field Name – Enter the field name. Should be single word without spaces. Underscores and dashes are allowed.

Required Field – Make a selection to ensure that this field is completed before allowing the user to submit the form.

Placeholder Text – The placeholder text to display as hint for the input type. If tooltip is enabled, the placeholder will be displayed as a tooltip.

Tooltip Text – The text to display as tooltip hint for the input.

Max File Upload Size – Maximum size limit for file upload. The default is 2 MB.
Allow Multiple Uploads – Decide if multiple files can be uploaded. Choose from Yes, or No.Allowed Extensions – Please enter the comma separated extensions that you want to allow. Leave empty to allow all. Example input: .jpg,.png. Note, WordPress file type permissions still apply.Input Field Icon – Select an icon for the input field, click again to deselect.
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 ScreenConditionals TabConditional Logic – Add conditional logic for the input field. Please see the Conditional Logic In Avada Forms document for more information on how to use this feature.View The Options ScreenGlobal OptionsThere are no Global Options for Form Builder Elements.,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Twitter Timeline Element

The Twitter Timeline Element allows you to add a Twitter feed directly in your content. Read the document to see the full range of options, and watch the video below for a visual overview.,View Element Demo Page!,OverviewHow To Use The Element Element OptionsGlobal Options,How To Use The Twitter Timeline ElementStep 1 – Select where you』d like to place your Twitter Timeline. Add the Twitter Timeline Element from the Element Dialog.
Step 2 – Configure the Element as required. Set the Username to display your Twitter Timeline, and there are range of options for sizing and what Twitter Elements to display.
Step 3 – On the Design Tab, you can adjust margins and alignment, and if you wish, you can animate the Element on the Extras tab.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 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: 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
Username – Twitter username.

Dimension – Box width and height in pixels.

Language – Select twitter timeline language. Choose from Automatic or select a specific language.

Theme – Select twitter timeline theme. Choose from Light or Dark.

Header – Show or hide the header.

Footer – Show or hide the footer.

Borders – Show or hide the borders.

Border Color – Set the color of element borders, including the border between Tweets.

Transparent Background – Remove background color.

Scrollbar – Crop and hide the timeline scrollbar, if visible.

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

CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View the Options ScreenDesign Tab
Margin – Enter values including any valid CSS unit, ex: 4%.

Alignment – Select the alignment of the icons and the text.
View The Options Screen,Extras 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 Screen,Global OptionsThere are no Global Options for the Twitter Timeline Element.

Tooltip Element

The Tooltip Element offers you the ability to create a 「tooltip」 linked to specific text. The Tooltip Element is an Inline Element, which means it is only accessible through the Avada Builder Element Generator. See the links below for more information on those topics, and read on to find out more about this simple, yet effective element.
Hover over the words 「Inline Element」  in the next sentence to see an example of a Tooltip.
The Tooltip Element can only be used with text based elements, as it is a Inline Element.,View Element Demo Page!,OverviewHow To Use The Element
How To Use The Element In Avada Live
Element OptionsGlobal OptionsUseful Links & Resources,How To Use The Tooltip ElementNote. As stated above, the Tooltip Element is an Inline Element, which means that you can access it through the Avada Builder Element Generator. This Element can be used in all Elements that allow text editing in the Visual Editor and that therefore have access to the Avada Builder Element Generator.
Step 1. Add a text based element via the Avada Builder, for example, the Text Block Element.
Step 2. Add your content as normal, up to the point where you want the Tooltip to appear.
Step 3. Place your cursor at the end of your content and select the Avada Builder Element Generator icon on the Visual Editor toolbar.
Step 4. Select the Tooltip Element.
Step 5. Add the Title, which is the text that displays in the Tooltip.
Step 6. Add the Content you want to trigger the Tooltip.
Step 7. Optionally, you can go to the Design tab and change the location and trigger for the Tooltip. When you are finished, click Insert.
Step 7. You are now back in the Text Block Element. You can add more normal text content if you wish. When you are finished click Save, and you are returned to your page. Preview to see your Tooltip in action.
NB. The Tooltip Content will always display in the main site color.
What』s the difference between a tooltip and a popover? These two elements are very similar in many ways, but their intended usage is quite different. If you want to give a small few word hint on how or what an element on the page does, use a tooltip. If you want to add any additional content, interactions, or content more than about a line; or if you need the content to remain open without the target being moused over, use a popover.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada,How To Use The Tooltip Element In Avada Live
Please see the Inline Elements document for more details on how Inline Elements work in Avada Live.,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.
General Tab
Title – Insert the text that displays in the tooltip.

Content – Insert the text that will activate the tooltip hover.

CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign Tab
Tooltip Position – Select the display position. Choose from Top, Bottom, Left, or Right.

Tooltip Trigger – Choose action to trigger the tooltip. Options are Hover or Click.
View The Options ScreenGlobal OptionsThere are no Global Options for the Tooltip Element.,Useful Links & ResourcesRead more about Inline Elements HereRead about how to use the Element Generator Here!

Toggles Element

The Toggles Element is a perfect way to add multiple sections of varied content to your website, while actively selecting which to show or hide at any time. Toggles will only allow one item to be open at a time, while Accordions will allow multiple open at one time. Read below to discover more about this useful space saving Design Element.,Avada Toggles ElementToggles are a great way to display and hide content that you want to give the user control over.
Our Company MissionFugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.The Avada PhilosophyFugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.The Avada PromiseFugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Toggles ElementStep 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『Toggles』 element and add it to the page.
Step 4 – Configure the Toggle Element to your liking. There is a wide range of options to configure and style the Toggles Element, including styling the individual toggle items. Check out the full list of Element options below.
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 settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Toggles section. 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.
Children Tab
Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.
+ Add Toggle – Allows you to add new toggle Items.
Item Options

Edit Item Icon – Allows you to edit an item.

Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

Delete Item Icon –  Allows you to delete an item.

Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.
View The Options ScreenItem Options General TabTitle – Insert the toggle title.Open by Default – Choose to have the toggle open when page loads.Toggle Content – Insert the toggle content.CSS Class – Add a class to the wrapping child HTML element.
CSS ID – Add an ID to the wrapping child HTML element.
View The Options ScreenItem Options Design Tab
Title Typography

Font Family – Controls the font family of the title.

Font Size – Controls the font size of the title.
Title Font Color – Set the color of title in toggle box. Leave empty for value set in parent options. If that is also empty, the Global Options value of Color 8 will be used.
Content Typography

Font Family – Controls the font family of the content.

Font Size – Controls the font size of the content.
Content Font Color – Set the color of title in toggle box. Leave empty for value set in parent options. If that is also empty, the Global Options value of Color 8 will be used.View The Options ScreenGeneral Tab
Toggles or Accordions – Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
Boxed Mode – Choose to display items in boxed mode.Divider Line – Choose to display a divider line between each item.
Inactive Icon – Click an icon to select, click again to deselect.

Active Icon – Click an icon to select, click again to deselect.

Toggle Icon Boxed Mode – Choose to display icon in boxed mode.
Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign TabBoxed Mode Border Width – Set the border width for toggle item. In pixels.Boxed Mode Border Color –  Set the border color for toggle item.
Boxed Mode Background Color – Set the background color for toggle item.
Boxed Mode Background Hover Color – Set the background hover color for toggle item. Leave empty for default value.
Divider Line Color – Set the color for divider line. Leave empty for default value of Color 3.

Divider Line Hover Color – Set the hover color for divider line. Leave empty for default value of Color 3.

Title Typography

Font Family – Controls the font family of the title.

Font Size – Controls the font size of the title.
Title Font Color – Set the color of title in toggle box. Leave empty for default value of Color 8.Toggle Icon Size – Set the size of the icon. In pixels (px), ex: 13px.Toggle Icon Color – Set the color of icon in toggle box. Leave empty for default value.Toggle Icon Inactive Box Color – Controls the color of the inactive toggle box.Toggle Icon Alignment – Controls the alignment of toggle icon.
Content Typography

Font Family – Controls the font family of the content.

Font Size – Controls the font size of the content.

Content Font Color – Set the color of content in toggle box. Leave empty for default value of Color 8.

Toggle Hover Accent Color – Controls the accent color on hover for icon box and title.

Toggle Active Accent Color – Controls the accent color for icon box and title.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Toggles.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.
Toggles or Accordions – Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.Toggle Boxed Mode – Turn on to display items in boxed mode. Toggle divider line must be disabled for this option to work.
Toggle Boxed Mode Border Width – Controls the border size of the toggle item.
Toggle Boxed Mode Border Color – Controls the border color of the toggle item.Toggle Boxed Mode Background Color – Controls the background color of the toggle item.Toggle Boxed Mode Background Hover Color – Controls the background hover color of the toggle item.Toggle Divider Line – Turn on to display a divider line between each item.Divider Line Color – Controls the color of toggle divider line.Divider Line Hover Color – Controls the hover color of toggle divider line.
Toggle Title Typography

Font Family – Controls the font family of the toggle title.

Font Size – Controls the font size of the toggle title.

Line Height – Controls the line height of the toggle title.

Letter Spacing – Controls the letter spacing of the toggle title.

Font Color – Controls the font color of the toggle title.

Toggle Icon Size – Set the size of the icon. In pixels (px), ex: 13px.

Toggle Icon Color – Set the color of the icon.

Toggle Icon Boxed Mode – Turn on to display toggle icon in boxed mode.

Toggle Icon Inactive Box Color – Controls the color of the inactive toggle box.

Toggle Content Typography

Font Family – Controls the font family of the toggle content.

Font Size – Controls the font size of the toggle content.

Line Height – Controls the line height of the toggle content.

Letter Spacing – Controls the letter spacing of the toggle content.

Font Color – Controls the font color of the toggle content.

Toggle Hover Accent Color – Controls the accent color on hover for icon box and title.

Toggle Active Accent Color – Controls the accent color on active for icon box and title.

Toggle Icon Alignment – Controls the alignment of toggle icon.
View The Options Screen