Syntax Highlighter Element

The Syntax Highlighter Element is our solution to allow you to provide code snippets in a variety of different languages in a copyable, embeddable format directly on your website. Aside from the 4 pre-set style options, it comes with several customization options to control all colours, borders, text, line wrapping, code copying and more.. Read below for an overview of the specific features of the Element.
Copy to Clipboard

 12 3

8 9,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Syntax Highlighter 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 『Syntax Highlighter』 element and click it to bring up its options window.
Step 4 – To view the possibilities of this element, make sure you visit the Element Demo page. The element has two tabs; General and Design. On the General tab, the first thing to do is to insert the code you wish to highlight. Directly below that, you can choose from any of the 4 preset style options for the snippet. Then select the coding language that the snippet is in (this assists with correct styling). There are also a number of options to show or hide line numbers and to add the ability for the user to copy the code to the clipboard. The Design tab offers a number of styling options to further customize the element.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the code snippet, and remember you can come back into the element to fine tune it.
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 in your Theme Options > Fusion Builder Elements > Syntax Highlighter Element section.
General Tab
Code to Highlight – Enter some code to be displayed with highlighted syntax. IMPORTANT: Please make sure that the 「Code Block Encoding」 setting in Theme Options is enabled in order for the code to appear correctly on the frontend.

Highlighter Theme – Select which theme you want to use for code highlighting. Choose from Default, Light 1, Light 2, Dark 1, and Dark 2.

Code Language –  Select the language the code is in. Choose from bash, css, conf, diff, html, htm, http, javascript, json, jsx, less, md, patch, php, phtml, sass, scss, sql, svg, txt, xml, yaml, and yml.

Line Numbers – Choose if you want to display or hide line numbers.

Line Wrapping – Controls whether the long line should break or add horizontal scroll.

Copy to Clipboard – Choose if you want to allow your visitors to easily copy your code with a click of the button.

Copy to Clipboard Text – Enter text to be displayed for the user to click to copy. Leave empty for the default value of Copy to Clipboard.

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

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

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign Tab
Font Size – Controls the font size of the syntax highlight code.

Border Size – Controls the border size of the syntax highlighter. In pixels.

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

Border Style – Controls the border style. Choose from Default, Solid, Dashed, or Dotted.

Background Color – Controls the background color for code highlight area.

Line Number Background Color – Controls the line number background color for code highlight area.

Line Number Text Color – Controls the line number text color for code highlight area.

Margin – Control spacing around the syntax highlighter. In px, em or %, e.g. 10px.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Separator Element
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Highlighter Theme – Select which theme you want to use for code highlighting. Choose from Default, Light 1, Light 2, Dark 1, and Dark 2.

Line Numbers – Choose if you want to display or hide line numbers.

Line Numbers Background Color – Controls the line number background color for code highlight area.

Line Numbers Text Color – Controls the line number text color for code highlight area.

Line Wrapping – Controls whether the long line should break or add horizontal scroll.

Copy to Clipboard – Choose if you want to allow your visitors to easily copy your code with a click of the button.

Copy to Clipboard Text – Enter text to be displayed for a user to click to copy. Leave empty for the default value of Copy to Clipboard

Font Size – Controls the font size of the syntax highlight code.

Background Color – Controls the background color for code highlight area.

Border Size – Controls the border size of the syntax highlighter. In pixels.

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

Border Style – Controls the border style. Choose from Default, Solid, Dashed, or Dotted.

Margins – Control spacing around the syntax highlighter. In px, em or %, e.g. 10px.
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

Star Rating Element

The Star Rating Element allows you to add a manual or dynamic star rating anywhere in your content. You can use any icon you like, and determine both maximum and average rating. Read the document to see the full range of options, and watch the video below for a visual overview.,5.00 / 5,View Element Demo Page!,OverviewHow To Use The Element Element OptionsGlobal Options,How To Use The Star Rating ElementStep 1 – Select where you』d like to place your Star Rating. Add the Start Rating Element from the Element Dialog.
Step 2 – Configure the Element as required. Choose the maximum and average rating to display, and choose whether to Show or Hide the Element when the rating is empty.
Step 3 – Configure the style of the rating on the design tab. Here, you can choose the icon to display, as well as the size and color of both filled and empty icons, and various other options.
Step 4 – You can choose to animate the Element on the Extras tab if you wish.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Maximum Rating – Select the maximum rating. From 1 to 10.

Rating – Enter the average rating to display.

Display Empty Rating – Select whether to display the rating (eg. 0/5) if no rating is present, or to completely hide it. In the live editor this element will be always be displayed.

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

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

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View the Options ScreenDesign Tab
Icon – Select an Icon to display the ratings. Click an icon to select, click again to deselect.

Icon Size – Enter value including any valid CSS unit, ex: 20px.

Filled Icon Color – Select the color of the filled icons.

Empty Icon Color – Select the color of the empty icons.

Icon Spacing – Enter value including any valid CSS unit, ex: 15px.

Display Rating Text – Select whether or not to display the rating text aside the icons.

Rating Font Size – Enter value including any valid CSS unit, ex: 20px.

Rating Text Color – Select the color of the filled icons.

Icon / Text Spacing – Enter value including any valid CSS unit, ex: 15px.

Alignment – Select the alignment of the icons and the text.

Margin – Enter values including any valid CSS unit, ex: 4%.
View The Options Screen,Extras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options Screen,Global OptionsThere are no Global Options for the Star Rating Element.

Soundcloud Element

The Soundcloud Element allows you to easily embed a SoundCloud track directly into your page. You can choose the layout of the track, as well as display various metadata. Read below to discover more about this useful media element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Soundcloud ElementThe Soundcloud Element allows you to quickly embed Soundcloud files 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 『Soundcloud』 element and click it to bring up its options window.
Step 4 – Using the Soundcloud Element is very easy. Firstly, add the url to the Soundcloud file you wish to embed, and then, choose the layout. There are also options for showing related items, users, and comments (these can only be turned off on tracks uploaded with a Pro Plan) as well as some styling and sizing options.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the Soundcloud embed, and remember you can come back into the element to fine tune it.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

SoundCloud URL – The SoundCloud URL, ex: https://soundcloud.com/zaaali/miles-davis-kind-of-blue-26-03.

Layout – Select the layout of the SoundCloud embed. Choose from Classic or Visual.

Show Comments – Choose whether to display comments. Note: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan.

Show Related – Choose whether to display related items. Note: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan.

Show User – Choose whether to display the user who posted the item. Note: This feature can only be turned off on tracks uploaded through a SoundCloud pro plan.

Autoplay – Choose whether to autoplay the track. Note: SoundCloud does not allow autoplay on mobile devices.

Color – Select the color of the element.

Dimensions – In pixels (px) or percentage (%). Can be independant, ex. 100% width, 100px high.

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

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

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenGlobal OptionsThere are no Global Elements for the SoundCloud Element.

Social Sharing Element

Have you ever wanted to share a web page, blog post, WooCommerce product, portfolio item or other piece of interesting content with your friends and colleagues? Avada already has an integrated Social Sharing Box (found at Avada > Options > Social Media > Social Sharing), but for even more control, we also have the Social Sharing Element! This Element was updated and renamed in Avada 7.2 from the Sharing Box Element to the Social Sharing Element, and now can be used in even more ways than before.
This handy Element can be placed wherever you want on a page, post, custom post type, or even in a Layout, and allows you to totally customize the look, color, appearance, links, and description of the link, to any piece of your content. Read on to find out more about this practical and versatile Social Element.,Share This Story Your Way!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element at Avada > Options > Avada Builder Elements > Social Sharing. 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 TabSocial Sharing – Select social network you want to be displayed in the social share box. Leave empty for the default gloabl options.Layout – Choose if social sharing box items should be stacked and full width, or if they should be floated.
Show Tagline – Choose to show or hide tagline.

Tagline – The title tagline that will display.

Sharing Title – The post title that will be shared. Leave empty to use title of current post. Note: Some of the social networks will ignore this option and will instead auto pull the post title based on the shared link.
Sharing Link – The link that will be shared. Leave empty to use URL of current post.
Sharing Description – The description that will be shared. Leave empty to use excerpt of current post. Note: Some of the social networks do not offer description in their sharing options and others might ignore it and will instead auto pull the post excerpt based on the shared link.

Social Icon Tooltip Position – Select the display position for tooltips. Choose from Default, Top, Bottom, Left, or Right.
Pinterest Sharing Image – Choose an image to share on Pinterest.
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 TabMargin – In pixels or percentage, ex: 10px or 10%.Padding – In pixels or percentage, ex: 10px or 10%.
Background Color – Controls the background color of the Sharing Box.
Border Size – Controls the border size of the social sharing box. In pixels or percentage, ex: 10px or 10%.
Border Color – Controls the border color of the social sharing box.

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

Tagline Color – This controls the text color of the title tagline that will display on the Sharing Box.
Tagline Alignment – Select the Social Sharing Box alignment. Choose from Flex Start, Center, or Flex End.
Social Icon Alignment – Select the Social Icon alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly.

Boxed Social Icons – Choose the color type of social icons. Brand colors will use the exact brand color of each network for the icons or boxes. Choose from Default, Yes, or No.

Social Icon Box Radius – Choose the radius of the boxed icons. In pixels (px), ex: 1px, or 「round」.
Social Icon Size – Controls the size of the icon tagline text. Enter value including any valid CSS unit, ex: 16px. Leave empty for default value.
Social Icons Color Type – Choose to get boxed icons. Choose default for theme option selection. Choose from Default, Custom Colors, or Brand Colors.

Social Icon Custom Colors – Specify the color of social icons. Use | to set the color for the individual icons. Leave empty for default value.

Social Icon Box Colors – Specify the box color of social icons. Use | to set the box color for the individual icons. Leave empty for default value.
Social Icon Box Padding – In pixels or percentage, ex: 10px or 10%.
Social Icon Custom Taglines – Specify the tagline of social icons. Use | to set the taglines for the individual icons.

Icon Tagline Position – Choose the display position for icon tagline.

Icon Tagline Font Size – Controls the size of the icon tagline text. Enter value including any valid CSS unit, ex: 16px.

Social Icon Tagline Color – Controls the link color of the social sharing tagline. Leave empty for default value.

Social Icon Tagline Hover Color – Controls the link hover color of the social sharing tagline. Leave empty for default value.

Social Icon Separator Border Size – Controls the border size of the social icon separator.

Social Icon Separator Border Color – Controls the border color of the social icon separator. 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 Screen,Global OptionsAs there is also the integrated sharing boxes for blog and portfolio posts, the Social Sharing Element has its Global Options, not in the Avada Builder Elements tab, but instead on the Social Media tab at Avada > Options > Social Media > Social Sharing. There are also options to enable or disable the Social Sharing Box by default, on Blog Posts, Portfolio Single Posts, and Event Single Posts.

Social Sharing Tagline – Insert a tagline for the social sharing boxes.

Social Sharing Tagline Text Color – Controls the color of the tagline text in the social sharing boxes.

Social Sharing Background Color – Controls the background color of the social sharing boxes.

Social Sharing – Select the social networks you want to be displayed in the social share box.

Social Sharing Icon Font Size – Controls the font size of the social icons in the social sharing boxes. Enter value including CSS unit (px, em, rem), ex: 16px.

Social Sharing Icons Tooltip Position – Controls the tooltip position of the social icons in the social sharing boxes. Choose from Top, Right, Bottom, Left or None.

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

Social Sharing Icon Color – Controls the color of the social icons in the social sharing boxes. This color will be used for all social icons.

Social Sharing Icons Boxed – Controls if each social icon is displayed in a small box.

Social Sharing Icon Box Color – Controls the color of the social icon box.

Social Sharing Icon Boxed Radius – Controls the box radius of the social icon box. Enter value including any valid CSS unit, ex: 4px.

Social Sharing Icons Boxed Padding – Controls the interior padding of the social icon box. Enter value including any valid CSS unit, ex: 8px.
View The Options Screen

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

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

Separator Element

The Separator Element offers highly flexible separators for your site, including seven line types, plus a No Style Separator for convenient spacing. You can also control Separator Border Size, Color, Width, Margins above and below, Alignment, and you even add icons to them. Read on for an overview of this very useful Element, or watch the video for a visual overview.,View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global Options,How To Use The Separator ElementThe Separator Element allows you to add styled or invisible separators anywhere in your 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 Separator from the Elements List.
Step 4. The first thing to choose is the Separator Style. The element comes with 7 preset styles plus a No Style option for invisible separators. Be sure to check out the Separator Element Demo page to see all the options.
Step 5. The Design tab is your next stop. Depending on the style chosen, you will have more or less to do here. If you have chosen the No Style option, all you need to do is to determine the spacing for the element. This is achieved via the second option, the Margin. You can specify your spacing in px, em, or %. You can adjust the margins above and below the separator, but this is not important with an invisible one. This is best used to increase the separation between elements. It is also possible to use negative values with this element.
Step 6. If you have chosen a styled element, the remaining options are to style this, with regards to its color, icon, size, width and alignment. A huge variety of separators are possible.
Step 7. Once you have completed styling your Separator Element, click Save.
Read below for a detailed description of all element options.
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.
Note: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Separator. 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
Style – Selects the Style for the Separator. Choose between the seven Separator line styles, the No Style, or the Default option, set in Theme Options (Avada > Options > Avada Builder Elements > Separator).

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 Tab
Flex Grow – Controls the amount (in parts) of the available space inside a flex column the separator should take up. If the separator is the only element in the column using flew grow, any value above 0 will let it take up all available space. Set to 0 to disable its ability to grow.

Margin – Controls the spacing above and below the Separator. In px, em or %, e.g. 10px.

Separator Width – Controls the width of the Separator. In In pixels (px or %), ex: 1px, ex: 50%.

Alignment – Controls the alignment of the Separator. This only works when a width is specified. Choices are Center, Left, or Right.

Border Size – Controls the thickness of the Separator. In pixels.

Separator Color – Controls the Separator Color. Leave empty for the Default value, set in Theme Options (Avada > Options > Avada Builder Elements > Separator).

Select Icon – Allows you to select an icon to show in the center of the Separator.

Icon Size – In pixels.

Icon Color – Controls the color of the Icon.

Circled Icon – Controls whether the chosen icon has a circle around it. Choices are Default, Yes, or No.

Circle Color – Controls the background color of the circle around the icon. Leave empty for the default value.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Separator.

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

Separator Style – Controls the line style of all separators, divider lines on portfolio archives, blog archives, product archives and more.

Separator Color – Controls the color of all separators, divider lines and borders for meta, previous & next, filters, archive pages, boxes around number pagination, sidebar widgets, accordion divider lines, counter boxes and more.

Border Size – Controls the border size of the separator. In pixels.

Icon Size – In pixels.

Separator Circle – Turn on if you want to display a circle around the separator icon.

Circle Color – Controls the background color of the circle around the icon.
View The Options Screen

Select Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Select Field Element allows users to choose from a set of predefined choices, that display in a dropdown list. You can see an example of this Element in the Sign Up Prebuilt Form.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Select Field ElementThe Select Field Element allows you to place select fields 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 Select Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. You can add a label, decide if it is to be a required field, add an optional tooltip etc. You can add your own options, either individually or in bulk, or you can choose from a range of pre-populated choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, and Days of the Month.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.
General Tab
Field Label – Enter the label for the input field. This is how users will identify individual fields.

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

Required Field – Make a selection to ensure that this field is completed before allowing the user to submit the form.
Placeholder Text – The placeholder text to display as the initial selection.
Tooltip Text – The text to display as tooltip hint for the input.

Options – Add options for the input field. You can add your own options one at a time, or choose from Bulk / Predefined Choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, Days of the Month.
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

Section Separator Element

The Section Separator Element is a great way to add stylish sections to your website. Our section separators have been designed to give you the ultimate in page compartmentalization flexibility, and to aid you in making your website legible, logical, and beautiful…all at the same time.
With Avada 7.2, we have added even more section separators, bringing the total to 20 different separator styles, each with their own options. If you』d like to learn how to add them to your site, as well as understand the different styles and options available, please continue reading below, and watch the video for a visual overview.,Separator Section Example
This style displays the section separator as a big triangle shape. You can position the triangle to point to the left, center or right. You can also choose to display it on the top or bottom and choose it』s background color.,View Element Demo Page!,Overview
Section Separator Style
How To Use The ElementElement OptionsGlobal Options,Section Separator StylesAs of Avada 7.2, Avada』s Section Separator Element now has 20 styles, with an increased range of options. These styles provide a wide range of creative design capabilities for your website. Remember to view the Element Demo Page for visual examples of each style of separator section.

Triangle – This style displays a small triangle on the center of the page. You can position the triangle to display either on top or the bottom or both. You can also set an icon, icon color, border, and border color, and background color.

Slant – This style displays the Section Separator as a slant on the page. You can position the section separator to slant left or right, and to display on the top or bottom. You can also choose it』s background color.

Big Triangle – This style displays the section separator as a big triangle shape. You can position the triangle to point to the left, center or right. You can also choose to display it on the top or bottom and choose its background color.

Rounded Split – This style displays the section separator as a rounded split. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

Curved – This style displays the section separator as a slanted curve. You can position the section separator to slant to the left or right, and display it on the top or bottom. You can also choose its background color.

Big Half Circle – This style displays the section separator as a half circle. You can only position this style to display either on top or on the bottom. You can also choose a background color for this style.

Clouds – This style displays the section separator as a cloud-shaped border. This style doesn』t have any position options, and will only display in the center and on top. You can, however, set its background color.

Horizon – This style displays the section separator as a converging point on the horizon, with multiple levels of opacity. You can position this style to display either on top or on the bottom. You can also choose a background color for this style.

Waves – This style displays the section separator as a wave. You can position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Waves Opacity – This style displays the section separator as a wave with multiple levels of opacity. You can position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Waves Brush – This style displays the section separator as a wave. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Hills – This style displays the section separator as rolling hills. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

Hills Opacity – This style displays the section separator as rolling hills with multiple levels of opacity. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

Grunge – This style displays the section separator with a messy, grungy style. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Music – This style displays the section separator with multiple lines like bars of sound. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Paper – This style displays the section separator as if it』s ripped paper. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Squares – This style displays the section separator with multiple squares of varying size. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Circles – This style displays the section separator with multiple circles of varying size. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Paint – This style displays the section separator as if painted with a brush. ou can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Grass – This style displays the section separator as grass. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Splash – This style displays the section separator as splashin liquid. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.
View The Full Range of Section Separator Styles In Action!767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,How To Use The Section Separator ElementThere are multiple ways to set up a separator section, so let』s look at a common example. Here, we will look at the Avada Classic Prebuilt Website Home Page.

Step 1 – The Separator Section Element is designed to transition between two separate sections of the page. To this end, there are some conditions for the container that the separator section will be in. In our example, the Separator Section Element will be at the bottom of the container. It』s important that the Container does not have any padding at the bottom and that the Column does not have any padding or margin at the bottom. As we can see from the below screenshot, the top container has a background image, as well as a normal column layout with content. At the bottom of the content, the Separator Section Element has been placed.
Step 2 – Select the desired Section Separator Style and style settings. In this example, the Waves Opacity option has been selected, with the Horizontal Position set to Left and the Vertical Position set to Top. For the transition to the next container to work smoothly, the Background Color of the Section Separator should be the same color as the background color of the following container. Here, it has been set to white.
Step 3 – Add a new container. Ensure the background color of the Container is the same as has been set in the Section Separator Element. Add your content as usual.

That』s it. As mentioned, there are a lot of ways to use these section separators, so you will have to adjust the setting to suit your situation, but the basic principle is the same.,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in the Global Options > Avada Builder Elements > Section Separator 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 TabStyle – Controls the style of the section separator. Choose between Triangle, Slant, Big Triangle, Rounded Split, Curved, Big Half Circle, Clouds, Horizon, Waves, Waves Opacity, Waves Brush, Hills, Hills Opacity, Grunge, Music, Paper, Circles, Squares, Paint, Grass, or Splash.
Custom SVG File – You can now upload your custom SVG separator. SVG file should include attribute preserveAspectRatio=」none」 for best work in combination with custom height or repeat option.
Height – Controls the height of the Section Separator. Enter value including any valid CSS unit, ex: 200px. Leave empty to use default. Some styles may not have these settings available. Please see the Section Separator Styles section to learn more.
Repeat – Choose how many times the Section Separator should repeat horizontally. Some styles may not have these settings available. Please see the Section Separator Styles section to learn more.

Horizontal Position – Controls the section separator』s horizontal position. Some styles may not have these settings available. Please see the Section Separator Styles section to learn more.

Vertical Position – Controls the section separator』s vertical position. Some styles may have variation in these settings. Please see the Section Separator Styles section to learn more.

Icon – Choose an icon for your Separator Section. Click an icon to select, click again to deselect. (Only for Triangle Style)

Icon Color – Choose a color for the icon. Leave empty for the default value. (Only for Triangle Style)

Border – Choose a border width for the separator section. In pixels. Leave empty for the default value. (Only for Triangle Style)

Border Color – Choose a border color for the separator section. In pixels. Leave empty for the default value. (Only for Triangle Style)

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 – In pixels or percentage, ex: 10px or 10%.

Background Color – Controls the background color of the separator style. Leave empty for default value.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Section Separator.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Section Separator Border Size – Controls the border』s thickness. Accepts a pixel value. For example, 5px.

Section Separator Background Color – Controls the separator』s background color. Accepts a hexcode. For example, #000000.

Section Separator Border Color – Controls the border』s color. Accepts a hexcode. For example, #000000.
View The Options Screen