Avada 文档

Title Element

The Title Element is an elegant Element that does exactly what it says: adds a Title into your content. You can select any Header Tag from H1 through to H6, and there are a variety of styling options including Alignment, Separator styling, and overrides for Font Size, Family, Line Height and Letter Spacing.
We are also constantly improving this Element. With Avada 6.1, we added Rotating Titles and Highlighted Titles, for that extra bit of bling. With Avada 6.2, we added the ability to specify font families for the Element, with Avada 7.0, we added the ability to set the heading tag to div, as well as the usual H1 – H6, for Avada 7.1, we added Text Shadow to the Element, and in Avada 7.4, we added the ability to use a Gradient Font Color on the Title.
Read below for an overview of the specific features of the Element, and watch the video below for a visual overview.
This is a Rotating Title Type using the Clip EffectThis is the Highlight Title Type with an underline zigzag effectThis is a H2 title with font size and font family overrideThis is a H2 title with a gradient font colorThis is a H2 title with a color overrideThis is a H3 title with a separatorThis is a H4 title with 2 pixel letter spacing,View The How To Use The Title Element Animation Options Video!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 Title Element In Avada BuilderThe Title Element allows you to add customized titles to your page content.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Title from the Elements List.
Step 4. The Title Element is very easy to use, and allows for some interesting customization. To get started, on the General Tab, choose whether you want a standard Text, A Rotating Title or a Highlighted Title. Each one has its own set of options. A standard Text Title is pre-selected, and you can simply enter the Title content you wish to display. Then, on the Design Tab, you can customize the title.
Step 5. The design options start with alignment, and then the HTML Heading Size you wish the title to have. You can also add a font size override, but otherwise the Title will take the font size of the corresponding Header size specified in the Global Options Heading Settings. There are also override options for line height, letter spacing, margins and font color. As well as that there is a separator option built into the Title Element, which allows you to choose from any of Avada』s 9 preset separators, or not to use one at all. You can also choose the separator color.
Step 6. Once you have completed adding your title, click Save. You will be returned to the edit page. You can preview the page to view the title, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,How To Use The Title Element in Avada LiveThere are only a few differences when using the Title Element in Avada Live.
Being a text based Element, the Title Element is directly editable in Avada Live. 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 Title 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 > Title. Also, please note that the displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Title Type – Choose what type of title you want to display. The default is a simple Text Title, but you can also select Rotating or Highlight. Each of these have their own full option sets.

Text Title Options

Title – Add the Title Content here in plain text. Formatting occurs primarily on the Design tab. Although some of the built-in Visual Editor functions will work here, like changing the font color, bold, italic etc., it is best practice to control the general appearance of your Titles through the Theme Options for them (Avada > Theme Options > Typography > Headers Typography), and the Design Options in the Title Element itself.

Title Link – Select if title text should have a link. Choose from On or Off.

Link URL – Add a url for the link. E.g: http://example.com.
Link Target – Select the target for the link. Choose between _self for the link to open in the same window and for it to open in a new window.
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 Global Options.

Element Sticky Visibility – 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.

Rotating Title Options

Rotation Effect – Choose the rotation effect for the Rotation Text. Select from Bounce, Clip, Fade, Flip, Light Speed, Roll, Typing, Slide Down, and Zoom.

Display Time – Controls the delay of animation between each text in a set. In milliseconds, 1000 = 1 second.

Loop Animation – Turn on to loop the animation.

Before Text – Enter the 『Before』 Text. This displays before the Rotation text sets.

Rotation Text – Add Rotation Text Sets here. You can add as many sets as you wish.

After Text – Enter the 『After』 Text. This displays after the Rotation Text sets.

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

Highlight Title Options

Highlight Effect – Choose the highlight effect for the Highlight Text. Select from Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal Bottom Left, Diagonal Tope Left, Strikethrough, and X.

Loop Animation – Turn on to loop the animation.

Highlight Shape Width – Controls the width of the highlight shape.

Before Text – Enter the 『Before』 Text. This displays before the Highlighted Text.

Highlighted Text – Enter the text which will be highlighted.

After Text – Enter the 『After』 Text. This displays after the Highlighted Text.

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.
General Tab > TextGeneral Tab > RotatingGeneral Tab > HighlightDesign Tab
Alignment – Choose from Left, Center, or Right. This is also now part of the Responsive Option Sets, which means you can set this option independently for Medium and Small Screen Layouts.

HTML Heading Size – Choose HTML tag of the heading, either the heading tag, h1-h6, or DIV.

Animated Text Font Size – Controls the font size of the animated text. Enter value including any valid CSS unit, ex: 20px. Leave empty if the global font size for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings.

Animated Text Font Size – New in Avada 6.1. Controls the font size of the title. Enter value including any valid CSS unit, ex: 20px. Leave empty if the global font size for the corresponding heading size (h1-h6) should be used: Global Option Heading Settings.

Typography

Font Family – Controls the font family of the title text. If applicable, you can also choose the subset and the variant of the font. Leave empty if the global font family for the corresponding heading size (h1-h6) should be used.

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

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

Letter Spacing – Controls the letter spacing of the title. 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 – Allows you to override the global color for the corresponding header size without using CSS.

Animated Text Font Color – Controls the color of the animated title, ex: #000. Leave empty if the global color for the corresponding heading size (h1-h6) should be used: Global Option Heading Settings.
Text Shadow – Set to 「Yes」 to enable text shadows.
Text Shadow Position – Set the vertical and horizontal position of the text shadow. Positive values put the shadow below and right of the text, negative values put it above and left of the text. In pixels, ex. 5px.

Text Shadow Blur Radius – Set the blur radius of the text shadow. In pixels.

Text Shadow Color – Controls the color of the text shadow.

Margin – Controls the margins around the title. In px, em or %. This option also has Responsive Option Sets enabled, which allows you to set different margins on different screen sizes on the one instance of the Element.

Mobile Margin – Controls the spacing above and below the title on mobiles. In px, em or %.
Gradient Font Color – Set to 「Yes」 to enable gradient font color.Gradient Start Color – Select start color for gradient.Gradient End Color – Select end color for gradient.Gradient Start Position – Select start position for gradient.Gradient End Position – Select end position for gradient.Gradient Type – Controls gradient type. Choose from Linear or Radial.Radial Direction – Select direction for radial gradient. Choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.Gradient Angle – Controls the gradient angle. In degrees.
Highlight Shape Color – Controls the color of the highlight shape, ex: #000

Separator – (Only with Text Title) Choose the kind of Title Separator you wish to use. Default value is set in the Global Options (Avada > Options > Avada Builder Elements > Title).

Separator Color – (Only with Text Title) Choose the Separator Color or leave blank to use the default value.
Link Color – Controls the link color. Currently no default selected. Can be set globally from the Global Options.Link Hover Color – Controls the link hover color. Currently no default selected. Can be set globally from the Global Options.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.

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

Text Transform – Choose how the text is displayed.

Title Separator – Controls the type of title separator that will display. Choose from Single Solid, Single Dashed, Single Dotted, Double Solid, Double Dashed, Double Dotted, Underline Solid, Underline Dashed, Underline Dotted, and None.

Title Separator Color – Controls the color of the title separators.

Title Margins – Controls the margin of the titles. Leave empty to use corresponding heading margins. Enter values including any valid CSS unit, ex: 0px, 31px.

Title Mobile Margins – Controls the margin of the mobile titles. Leave empty to use corresponding heading margins. Enter values including any valid CSS unit, ex: 0px, 31px.
View The Options Screen

Time Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Time Field Element allows a user to select a specific time in hours and minutes. You can see an example of this Element in the Reservation Prebuilt Form.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Time Field ElementThe Time Field Element allows you to place a time selector 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 Time Field from the Form Elements tab.
Step 4. The main unique options to look at in this Element are the Custom Picker, and the Clock Type, Otherwise, configure the Element 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,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
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 tooltip.

Tooltip Text – The text to display as tooltip hint for the input.
Custom Picker – Choose to enable a lightweight custom picker on mobile only, mobile and desktop or set to never to use browser native. Choose from Never, Desktop Only, or Always.
Clock Type – Choose between 12 hour and 24 hour clock type. Note, will only work for custom picker type. Choose from 12 Hour, or 24 Hour.

Input Field Icon – Select an icon for the input field, click again to deselect.

Tab Index – Tab index for this input field.

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

Textarea Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Textarea Field Element provides a multi-line text box for extended amounts of information. This is used on many of the Prebuilt forms, and is perfect when you need an area for the user to have a large amount of freedom with regards inputting text.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Textarea Field ElementThe Textarea Field Element allows you to place a Text area into your forms for people to write a message.
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 Textarea Field from the Form Elements tab.
Step 4. This Element is much the same as the Text Field Element, with one major difference. Here you can configure a Textarea Row Value, making the text area as big as you like. Otherwise, configure this Element much as you would a Text Field Element.
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).
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.

Disabled Field – Choose to disable the field, which makes its content uneditable. Disabled fields won』t be submitted.

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.
Input Field Icon – Select an icon for the input field, click again to deselect.Textarea Row Value – Choose number of rows you want to have for this textarea field.
Minimum Required Characters – Controls the minimum number of characters that will be required for this input field. Leave at 0 to have no minimum.

Maximum Allowed Characters – Controls the maximum number of characters that will be allowed for this input field. Leave at 0 to have no maximum.

Tab Index – Tab index for this input field.

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Text Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Text Field Element is a basic text field you can use to collect information such as a name or address. You can see examples of this Element in the Sign Up and Upload Prebuilt Forms, as well as several others.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Text Field ElementThe Text Field Element allows you to place checkboxes 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 Text Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. Add a label, decide if it is to be a required field, add an optional tooltip etc. You can also choose the Minimum and Maximum required number of characters for the Element.
Step 5. Once you have configured the Element, save your page.
Read below for a 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 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.

Disabled Field – Choose to disable the field, which makes its content uneditable. Disabled fields won』t be submitted.

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.
Input Field Icon – Select an icon for the input field, click again to deselect.Minimum Required Characters – Controls the minimum number of characters that will be allowed for this input field. Leave at 0 to have no minimum.
Maximum Required Characters – Controls the maximum number of characters that will be allowed for this input field. Leave at 0 to have no maximum.

Tab Index – Tab index for this input field.

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

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.

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 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 Color – Controls the color of the vertical line between columns.
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

Tagline Box Element

The Tagline Box Element is very versatile promotional element, and has numerous options for easy customization. Insert a title, body copy and a button link for default, or customize it with adding a shadow, changing the background color, border size, border color and highlight position. Users can set custom links and a link target for the button. Read below for an overview of the specific features of the Element.
Purchase NowJoin 500,000+ Satisfied CustomersAvada has been the #1 selling theme for more than 6 years, making it the most trusted and complete WordPress theme on the market. Powerful options & tools, unlimited designs, responsive framework and amazing support are the reasons our customers have fallen in love.Purchase Now,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Tagline Box ElementThe Tagline Box Element can be used in a variety of ways, enabling you to easily add a promotion box anywhere on your site. Make sure to view the Element Demo page to get a good idea of what this Element can achieve.
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 『Tagline Box』 element and click it to bring up its options window.
Step 4 – There are a large number of options in this Element, as it is highly customizable, both with style and content. Work your way down through the options, and configure the element as you wish. This is a very versatile element and is limited largely by your own imagination and needs.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the Tagline Box, and remember you can come back into the element to fine tune it.
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 Theme Options > Fusion Builder Elements > Tagline Box 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
Content Alignment – Choose how the content should be aligned. Choose from Left, Center, or Right.

Button Link – The URL the button will link to.

Button Text – Insert the text that will display in the button.

Link Target – Choose the target of the link. _self = open in same window _blank = open in new window.

Modal Window Anchor – Add the class name of the modal window you want to open on button click.

Button Size – Select the button』s size. Choose from Small, Medium, Large and XLarge.

Button Type – Select the button』s type. Choose from Flat or 3D.

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

Button Color – Controls the button』s color. Choose from a preset or custom colors.

Tagline Title – Insert the title text.

Tagline Description – Insert the description text.

Additional Content – This is additional content you can add to the tagline box. This will show below the title and description if one is used.

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

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

CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab
Background Color – Controls the background color. Leave empty for the default value.

Shadow – Choose whether to show the shadow below the box.

Shadow Opacity – Choose the opacity of the shadow. From 0 to 1.0

Border Size – In pixels.

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

Highlight Border Position – Choose the position of the highlight. This border highlight is from theme options primary color and does not take the color from border color above. Choose from Top, Bottom, Left, Right, or None.

Margin – Spacing above and below the tagline. In px, em or %, e.g. 10px.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Tagline Box.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Tagline Box Background Color – Controls the color of the tagline box background.

Tagline Box Border Color – Controls the border color of the tagline box.

Tagline Top/Bottom Margins – Controls the top/bottom margin of the tagline box. Enter values including any valid CSS unit, ex: 0px, 84px.
View The Options Screen

Tabs Element

The Tabs Element is perfect for displaying a large amount of organized information in a small area. Avada includes 2 different design styles for tabs; clean and classic. Both design styles can be vertical or horizontal, and you can use any of the other Avada Builder elements inside of them. You can use icons next to the titles, easily drag and drop each tab item into different locations, insert images, icons, checklists and much more. Read below to discover more about this very useful design element.
DesignAnimationDevelopmentVideoDesign
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla sapien. Class aptent tacitiaptent taciti sociosqu ad lit himenaeos. Suspendisse massa urna, luctus ut vestibulum necs et, vulputate quis urna. Donec at commodo erat. Sed egestas consequat augue eu iaculis sadips ipsums dolores nonsi etra un. Donec elementum pellentesque. Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa. Duis sodales eleifend sem, nonsi semper dui consectetur on roin leoi.
Learn More
Animation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel nulla sapien. Class aptent tacitiaptent taciti sociosqu ad lit himenaeos. Suspendisse massa urna, luctus ut vestibulum necs et, vulputate quis urna. Donec at commodo erat. Sed egestas consequat augue eu iaculis sadips ipsums dolores nonsi etra un. Donec elementum pellentesque. Sed gravida, nisl ac lobortis pulvinar, augue est vulputate felis, vel pulvinar ex eros sed est. In hac habitasse platea dicssa. Duis sodales eleifend sem, nonsi semper dui consectetur on roin leoi.

Learn More
Development

Learn More
Video

Learn More,View Element Demo Page!,OverviewHow To Use The ElementParent OptionsAdding/Editing SettingsIndividual Child OptionsGlobal Options,How To Use The Tabs ElementThe Tab Element is the most versatile way to add a tabbed section anywhere on your site.
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 『Tabs』 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 tabs, while the individual tabs are configured on the left hand side. This element has a range of options, starting with two designs and two layouts to choose from. 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 and layout, you can slowly move down the Parent Options, deciding how to style the Tabs. There are color, border and icon 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 Tabs. You can add a title, an icon, and then there is the Tab Content field. This can take text, html or shortcodes, so there is no limit on what the content of the tabs can be.
Step 7 – You can then set up other tabs, either by duplicating existing ones, or creating new tabs, by clicking on the Clone Item icon, or the + Tab button respectively.
Step 8 – Once you have completed adding your tabs, click Save. You will be returned to the edit page. You can preview the page to view the tabs, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Tabs 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 – Select a design for the element. Choose from Classic, or Clean.

Layout – Select the layout of the element. Choose from Horizontal or Vertical.

Justify Tabs – Choose to get tabs stretched over full element width.

Background Color – Controls the background tab color.

Inactive Color – Controls the inactive tab color. Leave empty for the default value.

Border Color – Controls the color of the outer tab border.

Icon – Global setting for all tabs, this can be overridden individually. Click an icon to select, click again to deselect.

Icon Position – Select the position of the icon on the tab. Choose from Default, Left, Right, or Top. Icons are selected in each child tab element on the left side and do not have to be used.

Tabs Icon Size – Set the size of the icon. In pixels (px), ex: 13px. Icons are selected in each child tab element on the left side and do not have to be used.

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.

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 Tab Button – Allows you to add a new Tab.
View The Options ScreenChild Options
Tab Title – Title of the tab.

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

Tab Content – Add content for the tab.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Tabs. 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.

Tabs Background Color + Hover Color – Controls the color of the active tab, tab hover, and content background.

Tabs Inactive Color – Controls the color of the inactive tabs as well as the post date box layout for the Avada Tab Widget.

Tabs Border Color – Controls the color of the tab border.

Icon Position – Select the position of the icon on the tab. Choose from Left, Right, or Top.

Tabs Icon Size – Set the size of the icon. In pixels.
View The Options Screen

Table Element

With the Table Element, Avada gives you an easy to use interface to create tables, so you can display various kinds of content to your viewers. Choose from 2 styles, unlimited columns and a visual table interface that makes it easy and fun to create tables. Read below to discover more about this useful element.,Column 1
Column 2
Column 3

Item #1
Description
Discount:

Item #2
Description
Discount:

Item #3
Description
Discount:

All Items
Description
Your Total:

Column 1
Column 2
Column 3

Item #1
Description
Discount:

Item #2
Description
Discount:

Item #3
Description
Discount:

All Items
Description
Your Total:,View Element Demo Page!,Overview
How To Use The Element
Element OptionsGlobal Options,How To Use The Table ElementThe Table Element allows you to add customised tables anywhere on your site.
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 『Table』 element and click it to add it to the column to bring up its options window.
Step 4 – Firstly, choose from table style 1 or 2. Be sure to visit the Element Demo Page to see what』s possible with this element.
Step 5 – Then, choose how many columns and rows you want your table to have. You can choose up to 25 for each.
Step 6 – This updates the table into the editor, directly below in the Table option editor. You can customize the headings and column content directly in the visual Editor, or if preferred, you can go into the Text Editor and work directly with the html. This is not particularly difficult.
Step 6 – Once you have completed customizing your table, click Save. You will be returned to the edit page. You can preview the page to view the table, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
How To Edit An Existing TableIf you have an existing table that you want to edit, you can simply return to the Element and change the number of rows and columns using the Number of Rows and Number of Columns sliders. With these Element Controls, it』s very easy to change your number of columns and rows and then edit the content in the editor.
If you want to understand how to edit in text view however, it』s also very easy. If you look at the table code below, you can see in the Table Body section that each Table Row has its own section (between the tr and / tr HTML tags).
To create a new row, you would simply copy a Table Row section, and paste it in below itself, as seen below. Then you could manually edit each of the Table Data (td) lines. To add a new Column, you would have to add a new Table Header line for the Title of the new column, and add a new Table Data line in each Table Row. Generally though, it』s much easier just to use the visual editor and the element controls.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 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.
General Tab
Type – Select the table style. Choose from the two predefined table styles Style 1 and Style 2.

Number of Columns – Select how many columns to display. Choose from 1 – 25.

Number of Rows – Select how many rows to display. Choose from 1 – 25.

Table – Once you have selected your preferred number of columns, the Table markup will be displayed here.

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