Author 詩語

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

Testimonials Element

The Testimonials Element allows you to easily add beautifully styled testimonials anywhere to your site. Testimonials are the perfect way to show your potential clients the kind of work you can provide. Avada allows you to use testimonial sliders or individual testimonial boxes. Choose between two design styles, male, female or custom icons, and also select the speed at which the slider rotates. Read below for an overview of the specific features of the Element.
Thank you for your very professional and prompt response.
I wished I had found you before I spent money on a competitor』s theme.William Genske, Avada Theme
The ThemeFusion team provides excellent support,
listens to their users & continually works to improve their product.
Lisa Smith, Avada Theme,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Testimonials ElementThe Testimonials Element is a very useful way of adding testimonials into your page content.
Step 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 『Testimonials』 element and click it to bring up its options window.
Step 4 – The options on the right hand side are Parent Options, and affect the whole series of testimonials (if you have more than one), while the individual testimonials are configured on the left hand side. This element has a range of options, starting with two designs. Make sure to view the Element Demo page, to fully appreciate the different layouts and options on offer.
Step 5 – Once you have chosen your design, you can slowly move down the Parent Options, deciding how to style the testimonials. There are navigation, speed and styling options for you to configure.
Step 6 – Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add the content for the individual testimonials. Here, you add the person』s name, choose an avatar (including the options to upload your own image), the company name, a link for the company name, and the actual testimonial content.
Step 7 – You can then set up other testimonials, either by duplicating existing ones, or creating new testimonials, by clicking on the Clone Item icon, or the + Testimonials button respectively.
Step 8 – Once you have completed adding your testimonials, click Save. You will be returned to the edit page. You can preview the page to view the testimonials, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 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 your Options > Avada Builder Elements > Testimonials Elements 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.
Parent Options
Design – Choose a Design style for your Testimonials. Choose from Classic and Clean.

Navigation Bullets – Select to show navigation bullets.

Testimonials Speed – Set the speed of the testimonial slider. ex: 1000 = 1 second. IMPORTANT: Setting speed to 0 will disable autoplay for testimonials slider.

Background Color – Controls the background color.

Text Color – Controls the text color.

Random Order – Turn on to display testimonials in a random order.

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 Theme 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.
Add / Edit Settings
Add / Edit Items – This is where all your child element』s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

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.

Add New Testimonial Button –  Allows you to add a new Testimonial Button.
View The Options ScreenChild Options
Name – Enter the name of the person for the Testimonial.

Avatar – Choose your desired avatar. You can choose from Female, Male, Image, or None.

Custom Avatar – Upload a custom avatar image.

Border Radius – Choose the radius of the testimonial image. In pixels (px), e.g: 1px, or 「round」.

Company – Insert the name of the company. To leave empty, just click in the field to delete the placeholder text.

Link – Add a URL the company will link to.

Link Target – Choose whether the link will open in the same browser tab (_self) or a new tab (_blank).

Testimonial Content – Add your testimonial content here.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Tabs Elements. These global element options control all elements that use a carousel.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

Testimonial Background Color – Controls the color of the testimonial background.

Testimonial Text Color – Controls the color of the testimonial text.

Testimonials Speed – Controls the speed of the testimonial slider. ex: 1000 = 1 second. IMPORTANT: Setting speed to 0 will disable autoplay for testimonials slider.

Random Order – Turn on to display testimonials in a random order.
View The Options Screen

Submit Button Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Submit Button Element is the one required Element in a form, as it is a button for submitting form data to a form-handler. All prebuilt forms have one. The Submission Type for your Submit Button is controlled in the Local Form Options.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Submit Button ElementThe Submit Button Element allows you to place a submit into your forms.
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 Submit Button from the Form Elements tab.
Step 4. Go through the options to populate and configure the Button. This is basically the same as configuring any button, minus of course, the Link options.
Step 5. Once you have configured the Element, save your page.
Read below for a 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 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).
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
Button Text – Add the text the Button will display here.

Text Transform – Choose how the text on the Button is displayed, in either Normal (as written) case or Uppercase. Your Default setting is chosen in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Button)

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.

Tab Index – Tab index for this field.

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 or color name for theme options, or select custom to use advanced color options below.

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

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

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

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

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 Border Size – Controls the border size. In pixels.

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

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 Default, Small, Medium, Large, or X-Large.

Padding – Controls the padding for the button.

Typography

Font Family – Controls the font family of the button.

Font Size – Controls the font size of the button.

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

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

Text Transform – Choose how the text is displayed. Choose from Default, Normal, or Uppercase.

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, or Zoom.

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

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

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 OptionsThe global color options for the Submit Button Element come from the Button Element Global Defaults, found at Options > Avada Builder Elements > Button.,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

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!

Text Block Element

The Text Block Element is a simple, yet foundational Element, used to insert text content into your page. In addition to displaying text in a single block, there is also an added feature that lets you choose the amount of columns the text will be displayed in. This is perfect for blog posts and other pages, as it offers a unique design style, and gives you more control over how you present your information to your users. Read below to discover more about this most used of all elements.

Here is a text block element, and with the inline columns set to 「3」, it pulls your entire content box across 3 columns. We have even added an image to show you the element』s flexibility. You can also use any inline element to style your content inside the text block element.
Highlights are one example of the possibilities. This is an amazing way to break up long and varied segments of content on your website to make them easier to read, and more attractive and modern.,Read how to split columns within the Text Block Element!View Element Demo Page!OverviewHow To Use The Element In Avada Builder
How To Use The Element In Avada Live
Element OptionsGlobal Options,How To Use The Text Block Element In Avada BuilderThe Text Block Element is a foundational element, and allows you to add a variety of text blocks into your content.
Step 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 『Text Block』 element and click it to bring up its options window.
Step 4. The Text Block Element is as simple as it gets, but there are a few things to be aware of. There is now an option to split the text into a number of inline columns, but apart from that, there is just the Visual / Text Editor in which to place your content.
Step 5. Be aware that if you are placing any text that has HTML in it, it must be added via the Text editor to render correctly. You can read this article for more information.
Step 6. Once you have added your content to the text block, click Save. You will be returned to the edit page. You can preview the page to view the content, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,How To Use The Text Block Element in Avada LiveThere are only a few differences when using the Text Block Element in Avada Live.
Being a text-based Element, the Text Block Element is directly editable in Avada Live. Just click inside the text on the page to start writing or editing. And if you make a selection of text on the page, the Inline Editor appears, allowing you to make formatting changes to parts of your text directly on the page.
Please see the Best Practices for Inline Editing in Avada Live document for a good idea of how to best use the Inline Editor.,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 > Text Block. 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.
General Tab
Number of Inline Columns – Set the number of columns the text should be broken into. IMPORTANT: This feature is designed to be used for running text, images, drop caps and other inline content. While some block elements will work, their usage is not recommended, and others can easily break the layout.

Column Min Width – Set the minimum width for each column, this allows your columns to gracefully break into the selected size as the screen width narrows. Leave this option empty if you wish to keep the same amount of columns from desktop to mobile. Enter value including any valid CSS unit, ex: 200px.

Column Spacing – Controls the column spacing between one column to the next. Enter value including any valid CSS unit besides % which does not work for inline columns, ex: 2em.

Rule Style – Select the style of the vertical line between columns. Some of the styles depend on the rule size and color. Choose from None, Solid, Dashed, Dotted, Double, Groove, or Ridge.

Rule Size – Sets the size of the vertical line between columns. The rule is rendered as 「below」 spacing and columns, so it can span over the gap between columns if it is larger than the column spacing amount. In pixels.

Rule Color – Controls the color of the vertical line between columns. Leave empty for the default value.

Content – Enter your content for the text block here.

Alignment – Select the text alignment. Choose from Left, Center, Right or Justify. This options is part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.

Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.

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 – Add a class to the wrapping HTML element.

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenDesign Tab
Margin – Control the margins around the Element. In pixels or percentage, ex: 10px or 10%.

Typography

Font Family – Controls the font family of the text. Leave empty if the global font family for the text should be used.

Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.

Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.

Letter Spacing – Controls the letter spacing of the text. Enter value including any valid CSS unit, ex: 2px.

Text Transform – Select how to capitalize the text. Choose from Default, None, Uppercase, Lowercase, or Capitalize.

Font Color – Controls the color of the text, ex: #000. Leave empty for default value.
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: Avada > Options > Avada Builder Elements > Text Block.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Number of Inline Columns – Set the number of columns the text should be broken into. IMPORTANT: This feature is designed to be used for running text, images, drop caps and other inline content. While some block elements will work, their usage is not recommended, and others can easily break the layout.

Column Min Width – Set the minimum width for each column, this allows your columns to gracefully break into the selected size as the screen width narrows. Leave this option empty if you wish to keep the same amount of columns from desktop to mobile. Enter value including any valid CSS unit, ex: 100px.

Column Spacing – Controls the column spacing between one column to the next. Enter value including any valid CSS unit besides % which does not work for inline columns, ex: 2em.

Rule Style – Select the style of the vertical line between columns. Some of the styles depend on the rule size and color. Choose from None, Solid, Dashed, Dotted, Double, Groove, or Ridge.

Rule Size – Sets the size of the vertical line between columns. The rule is rendered as 「below」 spacing and columns, so it can span over the gap between columns if it is larger than the column spacing amount. In pixels.

Rule Color – Controls the color of the vertical line between columns.
View The Options Screen

Progress Bar Element

Avada includes multiple animated counter shortcodes, including the Progress Bar Element. These are great for displaying varying types of data and content to your viewers. The Progress Bar Element include several options for easy customization, and is a great way to visually attract the viewer and display content. read below to find out more about this visual element.,Progress Bar ElementLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HTML Skills 85% WordPress Development 90% User Interface Design 85%,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Progress Bar ElementStep 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 progress bars.
Step 3 – Click on the + Element button at the bottom of the column. Select Progress Bar. Before configuring the options, it』s a good idea to view the Progress Bar Element Demo page to see what』s possible with this fun visual element.
Step 2 – That will open the element』s settings. This element has only one Options panel, and the options are quite straight forward. Initially, you choose the height of your progress bar, and then selecting where you want to display the text. It can be On, Below, or Above the bar itself. The next two options are about whether you want to show the filled area number and any chosen unit on the bar. For example, it could show 85%, just a number, or it could not show at all. The option below this, the Filled Area Percentage, is what determines how much the bar is actually filled with color. Under that, you can choose the color of the fill, the border color and size, the unfilled color and whether you want the filled area to be striped. You can even animate the stripes!
Step 3 – Once you have configured the styling options, the last thing to do is add any text you want on the bar and choose its color. That』s it.
Step 4 – When you have finished styling your element, click Save. You will be returned to your page content. Click preview to view your gallery on the front end, and you can always return to edit the element to make changes. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 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 your Theme Options > Fusion Builder Elements > Progress Bar Element 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.
General Tab
Filled Area Percentage – From 1% to 100%.

Progress Bar Text – Insert the text that will show on the progress bar.

Display Percentage Value – Select if you want the filled area percentage value to be shown. Choose from Yes, or No.

Progress Bar Unit – Insert a unit for the progress bar. ex %.

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 Fusion Builder Elements tab in the Theme Options.

CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
View The Options ScreenDesign Tab
Text Position – Select the position of the progress bar text. Choose 「Default」 for theme option selection. Choose from Default, On Bar, Above Bar, or Below bar.

Text Align – Choose the alignment of the text. If the text position is 「On Bar」, the alignment will work only if the bar is filled over 35% percent.

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

Typography

Font Family – Controls the font family of the text.

Striped Filling – Controls if the filled area is striped. Choose from No, or Yes.

Animated Stripes – Controls if the stripes are animated. Choose from No, or Yes.

Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px.

Filled Color – Controls the color of the filled in area.

Unfilled Color – Controls the color of the unfilled in area.

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

Filled Border Size – In pixels, from 0 – 20.

Filled Border Color – Controls the border color of the filled in area.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Progress Bar.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Progress Bar Text Position – Select the position of the progress bar text. Choose from On Bar, Above Bar, or Below Bar.

Progress Bar Text Color – Controls the color of the progress bar text.

Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 37px.

Progress Bar Filled Color – Controls the color of the progress bar filled area.

Progress Bar Unfilled Color – Controls the color of the progress bar unfilled area.

Progress Bar Filled Border Size – Controls the border size of the progress bar filled area. In pixels, from 0 – 20.

Progress Bar Filled Border Color – Controls the border color of the progress bar filled area.
View The Options Screen,Useful Links & ResourcesHow To Change The Speed of Progress Bar Shortcode

Slider Revolution Element

If you have the bundled Premium Slider Plugin, Slider Revolution, activated on you site, you will have the Slider Revolution Element available through the Avada Builder. This very simple Element has only one purpose, and that is to enable you to add a Slider Revolution slider, anywhere in your content, and not be limited to above or below the header, as is the case when adding them through the Avada Page Options.,View Element Demo Page!Read More About Slider Revolution Integration,Slider Revolution Element OptionsSelect Slider – As you can see, the Element has only one option, and that is to choose the Slider you wish to show. The Slider will interact with the column and container it is placed in, so if you place it in a 1/2 Column, it will only fill that area.
IMPORTANT NOTE: Many themes sold on ThemeForest come bundled with premium plugins from CodeCanyon. A plugin offers additional functionality and features beyond a typical WordPress installation, and you do not need additional licensing in order to use the plugin with your theme. The terms and conditions for bundled plugins is set out by Envato.As of Avada 5.4.1, Avada bundled plugins can be updated independently and outside of an Avada theme update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Global OptionsThere are no Global Options for this Element.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Useful Links & ResourcesThere are extensive options when creating sliders with Slider Revolution. Avail yourself of the plugin documentation below.

Slider Revolution – Extensive Documentation can be found at the ThemePunch Support Center.
Avada Bundled Plugins Info

Related Posts 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 are looking at the Related Posts 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 Related Posts ElementThe Related Posts Element is a specific post and portfolio element, designed to add related posts anywhere in a Content Layout Section, in any Single Post or Portfolio Layout. Of course, you can also use the full range of Design Elements when building your Layout, and combine them with the Layout Elements.
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 Related Posts Element.
The Related Posts Element can be placed anywhere in you Layout Section, and displays the specified number of posts or portfolio items, based on the options selected in the element, on pages based on the conditions set in the Layout.
There are quite a few options in the element, controlling layout and design. See the options panels below for specific details on that.
See below, for an example of the Related Posts Element as added to the Single Portfolio Layouts on the Interior Design Demo.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 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
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 ScreenDesign Tab
Enable Heading – Turn on if you want to display default heading.

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

Show Author – Choose to show or hide the author in the Project Details.

Margin – 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 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.

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 OptionsLayout Elements do not have any Global Options.

Project Details 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 are looking at the Project Details 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,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
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 ScreenDesign Tab
Enable Heading – Turn on if you want to display default heading.

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

Show Author – Choose to show or hide the author in the Project Details.

Margin – 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 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.

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 OptionsLayout Elements do not have any Global Options.

Social Links Element

The Social Links Element allows you to add social media links anywhere in your content. The Element is loaded with options that allow you to easily customize your Social Media icons. Read below to discover more about this useful social media element, and watch the video for a visual overview.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Social Links ElementThe Social Links Element is a quick and easy way to add your own social media links 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. Locate the 『Social Links』 element and click it to add it to the page and bring up its options window.
Step 4. Configure the Social Links Element to your liking. There are styling options for the icons, including the ability to use either branded or custom colors for the icons, and then, once you have styled the icons the way you like, there are fields to add your own profile links for every major Social Media platform. You can also add an email icon, and any custom social icons specified in the Theme Options.
Step 5. Once you have finished configuring the options, click 『Save』.
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: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Social Links. 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.
General Tab
Blogger Link – Insert your custom Blogger link.

Deviantart Link – Insert your custom Deviantart link.

Discord Link – Insert your custom Discord link.

Digg Link – Insert your custom Digg link.

Dribbble Link – Insert your custom Dribbble link.

Dropbox Link – Insert your custom Dropbox link.

Facebook Link – Insert your custom Facebook link.

Flickr Link – Insert your custom Flickr link.

Forrst Link – Insert your custom Forrst link.

Instagram Link – Insert your custom Instagram link.

LinkedIn Link – Insert your custom LinkedIn link.

Myspace Link – Insert your custom Myspace link.

PayPal Link – Insert your custom PayPal link.

Pinterest Link – Insert your custom Pinterest link.

Reddit Link – Insert your custom Reddit link.

RSS Link – Insert your custom RSS link.

Skype Link – Insert your custom Skype link.

SoundCloud Link – Insert your custom SoundCloud link.

Spotify Link – Insert your custom Spotify link.

Teams Link – Insert your custom Microsoft Teams link.

Telegram Link – Insert your custom Telegram link.

Tiktok Link – Insert your custom Tiktok link.

Tumblr Link – Insert your custom Tumblr link.

Twitch Link – Insert your custom Twitch link.

Twitter Link – Insert your custom Twitter link.

Vimeo Link – Insert your custom Vimeo link.

VK Link – Insert your custom VK link.

WeChat Link – Insert your custom WeChat link.

WhatsApp Link – Insert your custom WhatsApp link.

Xing Link – Insert your custom Xing link.

Yahoo Link – Insert your custom Yahoo link.

Yelp Link – Insert your custom Yelp link.

YouTube Link – Insert your custom YouTube link.

Email Address – Insert an email address to display the email icon.

Phone Number – Insert a phone number to display the phone icon.

Show Custom Social Icon – Show the custom social icons as specified in Theme Options. Options are Yes, or No.

Element Visibility – Allows you to control the Separator』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 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 TabAlignment – Select the icon』s alignment. Choose from Text Flow, Left, Center, or Right. NB. This option now has responsive options, so that the alignment can be independently controlled for large, medium and small screens.
Margin – Enter values including any valid CSS unit, ex: 4%. Leave empty for default values. NB. This option now has responsive options, so that the alignment can be independently controlled for large, medium and small screens.

Tooltip Position – Choose the display position for tooltips.

Font Size – Controls the font size for the social icons. Enter value including CSS unit (px, em, rem), ex: 10px Leave empty for default value.

Boxed Style – Choose to get boxed icons.

Boxed Social Icons – Choose to get boxed icons.

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

Box Border Radius – Choose the border radius of the boxed icons. In pixels (px), ex: 1px, or 「round」. Leave empty for default value.

Color Type – Select the color type for social icons. Choose from Default, Custom Colors, or Brand Colors.

Custom Colors

Regular Options

Icon Color – Specify the color of social icons. Leave empty for default value.

Background Color – Specify the box background color of social icons. Leave empty for default value.

Border Color – Specify the border color of social icons. Leave empty for default value.

Hover Options

Icon Color – Specify the color of social icons on hover. Leave empty for default value.

Background Color – Specify the box background color of social icons on hover. Leave empty for default value.

Border Color – Specify the border color of social icons on hover. Leave empty for default value.
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.

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: Avada > Options > Avada Builder Elements > Social Links

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.NB. These social icon global options control both the Social Link Element and the Person Element.

Margins – Controls the margins around the element.

Social Links Icons Tooltip Position – Controls the tooltip position of the social links icons.

Icons Font Size – Controls the font size for the icons.

Icon Color Type – Custom colors allow you to choose a color for icons and boxes. Brand colors will use the exact brand color of each network for the icons or boxes.

Icons Color – Controls the color of the custom icons.

Icons Hover Color – Controls the hover color of the custom icons.

Boxed Style – Turn on to have the icon displayed in a small box. Turn off to have the icon displayed with no box.

Boxed Padding – Enter value including any valid CSS unit, ex: 8px.

Box Background – Select a custom social icon box color.

Box Hover Background – Select a custom social icon box color on hover.

Box Border Size – Controls the borders size of social icon box.

Box Radius – Box radius for the social icons. Enter value including any valid CSS unit, ex: 4px.

Border Color – Controls the borders color of social icon box.

Border Hover Color – Controls the borders color of social icon box on hover.
View The Options Screen