How To Use The Color Picker In Avada

How To Use The Color Picker In Avada

The Color Picker is found throughout Avada, in Global options, Page options and Element options. This is the primary tool for selecting colors throughout the site, and it』s important to understand how it functions. Let』s have a look.
At the very top is a color indicator. If there is no hexadecimal value present beside it, it indicates that the color value is coming from global options. If there is a hexadecimal code, it indicates that it has been added in this instance of the color picker. You can generate hexadecimal codes in graphics programs like Photoshop, and on many websites online.
While it』s an accurate way of selecting colors, you don』t have to enter a hexadecimal code. You can also just drag the hue selector around in the color field, and manipulate the range with the saturation slider and alternatively, the opacity slider. See below for more information on these sliders.
On the right hand side is the Global Color Palette icon. If you click this, you can assign the specific option color to any one of the colors on the Global Color Palette. This ties it in to that position on the Global Color Palette and affords you a powerful way to update colors across your site. See the How To Use The Global Color Palette for more information on this aspect of the Color Picker.,Saturation and OpacityThe Saturation and Opacity Sliders are also very powerful. If you reduce the Saturation slider, your colors will become more pastel. If you reduce the saturation to zero, then your color picker will only display tones, from white to pure black and everywhere in between.
If instead, you reduce the Opacity Slider, the Hexadecimal code will be replaced by an RGBA value. This value notates the Red, Green and Blue values of the color, as well as the Alpha value (opacity). This makes the color picker very powerful indeed, and in this way, you can choose from millions of colors for your website.

How To Use Conditional Element Rendering in Avada

How To Use Conditional Element Rendering in Avada

Back in Avada 7.3, we added a new feature called Conditional Element Rendering. Currently, this feature is found in the Column and the Container Elements. In this document, we will look at how it works, and some of the ways in which it can be used. Read on to find out more about this exciting new feature, and watch the video below for a visual overview.,What Is Conditional Element Rendering?Conditional Element Rendering is a form of conditional logic that can determine whether an Element (in this case, the Column or the Container Element, but is also applies for all content within that Column or Container) should be rendered on the page or not. An example of this would be a Column that only displays if a user is logged in, or a Container on a Cart page that does not render if the Cart is empty. There can also be multiple conditions applied for complex situations. There is a significant difference between not rendering an Element and simply hiding it on the page with the Element Visibility option.,Where Is It Found?Conditional Element Rendering is currently found in the Column and the Container Elements, under the Extras tab. Because these Elements hold all content on the page however, this allows for almost all imaginable usage scenarios.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,How To Use Conditional Element RenderingThere will be an enormously wide variety of situations were this feature could be used. The best we can offer here is a breakdown of the possible values, and a scenario to give you the idea.
As you can see in the screenshot below, when you click on the + Add New Logic Button, you are presented with a Field option, a Relational Operator selector (Equals =, and Does Not Equal !=), and a Value field. Below this is an AND/OR option which you can to combine further Logic Terms.
In the table below, you can see all the available Fields, and their possible values. As you can imagine, there are a huge number of possible scenarios, where this much requested feature could be used to control the page contents.

Field
Value

Cart Status
In

 
Empty

Device Type
Desktop

 
Mobile & Tablet

Event Status
Started

 
Ended

Get Variable
This field has both a Get and a Value option

Sale Status
Started

 
Ended

User Agent
 

User Role
Administrator

 
Editor

 
Author

 
Contributor

 
Subscriber

 
Customer

 
Shop Manager

 
Keymaster

 
Moderator

 
Participant

 
Spectator

 
Blocked

User State
Logged in

 
Logged Out

Custom Field
 

ACF Field,Example Of Conditional Element RenderingA good example of how to use Conditional Element Rendering is when building a custom Cart Page for WooCommerce. When a Cart is empty, for example, you would not want all the usual Cart Elements to display, and so by using Conditional Element rendering on the various Columns and Containers on the page, we could achieve that scenario easily. See the Avada WooCommerce Builder – Cart page for specific details of how to achieve this. Another example can be found in the video at the top of the page.
There are many more scenarios where this feature would be useful, including rendering content based on whether a user is logged in, or what their role is, whether an Event or Sale has started or finished, and whether the content is being viewed on a mobile or tablet, or even on a specific browser, just to name a few examples. This much requested feature brings an incredible level of flexibility to your page content, and is just another example of the innovation we continually bring to the table for Avada users!

How To Work With Parent & Child Elements

How To Work With Parent & Child Elements

Some Elements have a Parent and Child structure. These are Elements that can display multiple items, for example, the Checklist, Gallery, and the Slider Elements, to name a few. A full list is shown below.
There are Element Controls for the Parent Element, and separate controls for each Child Element. Read on for more information on this common Element type.
Parent/Child ElementsBelow is a list of all the Elements that can have a Parent/Child structure. To learn more about the available parameters of these specific Elements, follow the links below, or for all our other elements, please see our full Fusion Builder Elements List.,Checklists Element

Content Boxes Element

Counter Boxes Element

Counter Circles Element

Flip Boxes Element

Gallery Element

Image Carousel Element

Slider Element

Tabs Element

Testimonials Element

Toggles Element,Element SettingsWith a Parent/Child Elements, there is always 1 Parent, and as many Children as you wish. You can also edit each child item individually, as well as clone or delete them and easily rearrange their order. Below is a guide on the Parent/Child Element settings and what each button does.
Parent Settings – Illustrated as A. These are the global settings for the Element. Selecting an option here sets it globally for all items. To override it, simply select a different option in the individual item.
Child Element Items – Illustrated as B. 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 re-order elements by dragging them and dropping them into place.
Edit Item Icon – Illustrated as C. Allows you to edit the individual child items and adjust their options.
Clone Item Icon – Illustrated as D. Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.
Delete Item Icon – Illustrated as E. Allows you to delete an item.
Re-order Feature – Illustrated as F. Allows you to drag and drop the item to your desired order to re-arrange them.
Add New Item Button – Illustrated as G. Allows you to add a new item.,Parent/Child Elements In The Fusion Builder Live EditorWith the new Fusion Builder Live Editor, you will see separate Element Controls for the Parent Element and each Child Element added. If you edit the Parent Element, you can access the Child Elements as well, but if you just want to configure an individual Child Element, you can edit it directly.
As you can see in the image below, there are Parent Element Controls in the middle of the content, but hightlighted is one of the Child Element Controls. You can also see a dotted lined which shows which Child Element is selected.

How To Speed Up Your Site With W3TC Plugin

How To Speed Up Your Site With W3TC Plugin

PLEASE NOTE: These settings are not a one size fits all. W3TC interacts with your server, and each situation can be different. Contact your host if you have issues.We recommend using the W3TC Cache plugin to optimize your sites speed. All premium themes should be using a cache plugin. If you download and install the plugin, you can import our settings that we use on our demo. You can download our exported settings below, please read the important note first though.
IMPORTANT NOTE: These exported settings are ONLY for Avada 3.2 and higher. The config file is not a 「one size fits all」 solution. Each server is different, and what works for our server may not work for yours. If you have trouble with the config file, please adjust the settings to fit your server. Contact your host for more details.
Download W3TC Plugin Settings

How To Use The Container & Column Background Options

How To Use The Container & Column Background Options

The Background tab of the Container and Column Elements have had an overhaul with Avada 6.1, and in this document, we will look at the full range of possibilities with background options in these foundational elements. The BG tab (background) has 4 sub-tabs in the Container element – Color, Gradient, Image and Video. The Column Element has the same options, with the exception of the Video tab. Let』s have a look in detail at each of these tabs.,Overview
The Color Tab

The Gradient Tab

The Image Tab

The Video Tab (Containers Only),The Color TabThe Color Tab is unchanged from previous versions and offers a full color picker with an opacity slider, to allow for a full choice of background colors for your container or column. What has changed, however, is how this color can interact with a background image or video. There is now a Background Blend Mode, in the Image Tab section, which allows you to control how the background color or gradient can interact with a background image. More on that later.
Containers, by default, have a transparent background, and columns are empty, but both can have any colour you like, with any level of opacity.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,The Gradient TabA Gradient background tab has been introduced with Avada 6.1. With this tab, you can add gradient backgrounds to your Container or Column Element, with a range of options for gradient colors, start and stop positions, type and direction. The gradient colors can also have opacity, just like in the Color tab. The default type is Linear, but you can also choose Radial.
As you can see in the screenshot below, you first choose a Gradient Start Color and a Gradient Stop Color, and then set a Gradient Start Position and a Gradient End Position. This controls how the two colours of the gradient blend. Experiment with these to see how this affects the gradient, but the default values of 0 and 100 give you the smoothest gradient.
If you choose Linear as the Gradient Type, the last option is Gradient Angle, and here you can choose from a full 360 degrees.
If you choose Radial as the Gradient Type, the last option becomes Radial Direction, and here you can choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, and Center Bottom.
With these options you can create gradients of almost any type. These gradients also work in conjuntion with the Background Blend Modes, that we will look at in the next tab, Image.,The Image TabThe Image Tab allows you to add an image to the Container or Column background. Images added as backgrounds stretch or shrink to fill the the holding container or column, but containers and columns are a little different in this regard, so let』s look at them individually.
ContainersIt』s important to note that Containers have no height by default, even with a background image added. The only things that affect the height of a container are the content and the padding applied to the container. They do have width however, which on the default template is the Site Width, or if you are using the 100% Width Template, they can be the site width or the full width of the screen. So it』s important that the images added are big enough to show in the container without pixellation. Background images added to containers therefore need to be at least as wide as the site width.
With containers, the image initially shows at the full width of the container, so if the container height grows, whether with content or padding, the full image』s height will eventually be displayed, and then, if the height continues to increase, the full height of the image will remain, and the width will start to crop in as the image has to stretch to fill the container.
ColumnsColumns, on the other hand, increase in size when a background image is added, and by default, show the full background image, so again, it』s important that the images added are big enough to show without pixellation. For example, in a full width column on a site with a Site Width of 1100px, it would be wise for any column background image to also be at least 1100px.
If a column』s height is then incresed past the height of the image, either through padding or content, then again, the full height of the image will be shown and the image』s width will start to crop. Please experiment yourself with background images to make sure you understand the implications when adding background images to containers and columns.
Background Blend ModesWith the new Background Blend Modes, you now have multiple options with blending background colours or gradients with background images. There are 15 Blend Modes to choose from, and these determine how the image and any background color or background gradients will interact with the image. Experiment with these blend modes to see how they interact with the background images. If you use a blend mode, you can also use opacity in your colors to affect the overall effect.
If Background Blend Modes are disabled, however, then a background image will always show on top of a background color, regardless if that background color has opacity or not. (In the past, we automatically set a blend mode of overlay if the alpha of the background color was less than 1). But gradients are a type of background image, and so gradients with opacity will still show as overlays on top of background images.
See the video at the top of the page for visual examples of this.,The Video Tab (Containers Only)The Video Tab can be used to add a video background to a container. Videos of course can be added in many ways, with any of the three video elements, into a container or column, but adding a background video can sometimes be a useful tool.
The mp4 format is the only required file type, although there are two other optional file types for full browser compatability. You can also add a YouTube or Vimeo video instead. You can control the aspect ratio, loop and mute the video, and there is also a field for a fallback preview image for older browsers.
Like images, it』s important to remember that containers have no inherent size, and so don』t automatically resize to a video』s dimension. So the best user case for background videos is for videos that act in a background capacity, rather than being the main content. There are ways to resize the container to closer fit the video, but it』s not really designed for that. See the video at the top of the page for more information on the various ways you can use video backgrounds.

How To Use Flex Grow On Separators

How To Use Flex Grow On Separators

A new feature, enabled by the addition of Flexbox to Avada, is the use of Flex Grow on Separator Elements. Let』s have a look at what this new option does.
The option is found in the Separator Element, at the top of the design tab. It』s a new Flex option that allows the separator to grow to fill the available space. It』s best explained with an example.
Let』s say we have three Columns in a row, with the parent Container』s Column Alignment option set to Stretch. This allows the Columns to Stretch to the full Height of the Container. Now let』s imagine that each Column has a Title, a Checklist Element, a 20px Separator, and a Button at the bottom. Depending on the number of Checklist items though, the columns would be the same heights, but the buttons would not be aligned at the bottom. It would look something like this.
In the back end builder, the columns would look like this.
You could go to the Column > Content Alignment Option, and see if you could get a better alignment using one of the Space options there, such as Space Around, Space Between, or Space Evenly. But a simpler solution exists, right inside the Separator Element. And that, of course, is Flex Grow.
The option is very simple. By default, it』s set to 0, and so is disabled. But in our situation here, we only need to go into the Separator Element in each Column and change the Flex Grow option to 1. This essentially tells the Separator to grow into the available space. As Flex Grow is implemented in other Elements, other possibilities will arise, using numbers higher than 1. But currently, you don』t need to set it higher than 1, and the Separator will expand into the available space.
This would make our Columns look like this, now with the Buttons aligned along the bottom. That』s Flex Grow!
Read More About The NEw Flex Options In Containers And Columns

How To Split Columns With The Text Block Element

How To Split Columns With The Text Block Element

The Text Block element now allows split columns for running text, images, dropcaps, highlights, and other non-block elements. You can split your post content to up to 6 columns. This would be great for a newspaper/magazine look on your site. Please continue reading below to know more about this new feature, which is available in Avada version 5.5 or higher.
IMPORTANT NOTE: Choosing the number of columns (1-6) and how that is displayed on your page will be affected by, and dependent on, what size Column the Text Block Element has been added to. If added to a 1/1 Column, the site width is taken into account. If added to a 1/2 Column, the width of the 1/2 Column is taken into account, etc. Some usage examples are shown below.,Usage Examples1/1 Column – Text Element added with 『Number Of Inline Columns』 set to 3, 『Column Min Width』 set to 270px and 『Column Spacing』 set to 1em.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Morbi consectetur lectus a est posuere, in congue sem porttitor. Vestibulum at iaculis dolor. Fusce laoreet, ligula sed aliquam feugiat, leo erat rutrum augue, vehicula auctor turpis nisl eu massa. Nunc ac ex euismod, commodo enim id, dictum enim. Donec eget lacinia enim, sit amet rhoncus sapien. Integer est nisi, ullamcorper at nunc a, auctor condimentum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla suscipit pharetra libero, non aliquet elit aliquam ac. Quisque faucibus ex id egestas commodo. Sed tempor dui massa, sed hendrerit justo feugiat id. Pellentesque dapibus enim orci, ut blandit metus lobortis nec. Mauris iaculis leo ac mi vulputate dignissim. Quisque hendrerit venenatis aliquam. Vivamus dolor diam, volutpat sit amet tincidunt malesuada, laoreet eu ligula. Vestibulum eget mauris fringilla, lacinia lorem non, pharetra eros. Morbi eleifend arcu dolor, congue facilisis nisi euismod sed. Fusce blandit at diam non varius. Vivamus euismod consequat magna at scelerisque. Pellentesque dapibus enim orci, ut blandit metus lobortis nec. Mauris pellentesque tortor eget ultrices sagittis.
1/2 Column – Text Element added with 『Number Of Inline Columns』 set to 2, 『Column Min Width』 set to 200px and 『Column Spacing』 set to 0.5emLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Morbi consectetur lectus a est posuere, in congue sem porttitor. Vestibulum at iaculis dolor. Fusce laoreet, ligula sed aliquam feugiat, leo erat rutrum augue, vehicula auctor turpis nisl eu massa. Nunc ac ex euismod, commodo enim id, dictum enim. Donec eget lacinia enim, sit amet rhoncus sapien.
1/3 Column – Text Element added with 『Number Of Inline Columns』 set to 2, 『Column Min Width』 set to 120px and 『Column Spacing』 set to 0.5emLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida. Mauris pellentesque tortor eget ultrices sagittis. Cras lacinia et orci ut viverra. Curabitur non aliquam mauris. Fusce iaculis ligula sodales massa dignissim, non semper est imperdiet. Fusce cursus turpis eget nunc dignissim cursus. Consectetur adipiscing elit. Proin iaculis sapien interdum eleifend faucibus. In libero lectus, pulvinar in lobortis ac, tempus sit amet dolor. Mauris rhoncus rhoncus gravida.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,How to Split Columns with Text ElementStep 1 – Create a new page, and add a container and a column choice using the Avada Builder. Inside the column, add a 『Text element』.
Step 2 – In the 『Number of Inline Columns』 option, set the number of columns the text should be broken into. You can choose from 1 to 6. The default selection of 1 for this option is the default Text Column Element. Choose more than one, for example, 2-6 and additional options will be displayed. Note: This feature is designed to be used for running text, images, dropcaps and other inline content. While some block elements will work with it too, their usage is not recommended, and others can easily break the layout.
Step 3 – Set the minimum width for each column through the 『Column Min Width』 option. 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.
Step 4 – Set the 『Column Spacing』 option, this will control the column spacing between one column to the next.
Step 5 – Set the 『Rule Style』 of the vertical line between columns. Choose between None, Solid, Dashed, Dotted, Double, Groove, or Ridge. Some of the styles depend on the rule size and rule color.
Step 6 – Next, set the 『Rule Size』 option, which sets the size of the vertical line between columns. The rule is rendered as 「below」 spacing and columns, so can span over the gap between columns, if it is larger than the column spacing amount. It can be set from 1 to 50.
Step 7 – Set the 『Rule Color』 option to your preferred color. This controls the color of the vertical line between columns.
Step 8 – You can add your content in the Content』s Visual/Text editor.
Step 9 – Once done, save the Text element and the page.

How To Use The Container/Column Filter Options

How To Use The Container/Column Filter Options

With the introduction of Avada 6.1, we introduced Filter Options in Containers, Columns and Nested Columns. These filters are similar to the ones found in Photoshop or other editing programs. There are eight filters in all, Hue, Saturation, Brightness, Contrast, Invert, Sepia, Opacity and Blur, and there are options to apply these on both the normal and the hover state of the container or column.
You can apply any or all of the filters concurrently, with complete separation between normal and hover state, and the filters applied on a column work independently, but also in conjunction with filters applied on the parent container (though usually, you』d probably be only applying them to one of them). Filters affect not only the containers and columns, but also the content in them (and the controls for that column or container in the live builder).,View The Theme Feature Page!,Overview
Where To Find Them

The Filters

Examples,Where To Find ThemThe filter options are found under the Extras tab, in Containers, Columns, and Nested Columns. There are eight in all, and they can be applied on both the normal and the hover state of the container or columm. Let』s go through them one at a time to see what they do.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada,The Filters
Hue – The Hue Blend Mode preserves the luminosity (brightness) and saturation (the intensity of the color) of the base pixels while adopting the hue (the color itself) of the blend pixels. Hue can be used to change hues in an image while maintaining the tones and saturation of the original. The slider travels the full 360 degrees of the color wheel.

Saturation – The Saturation Blend Mode preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully desaturate an image, and up to 200 to fully saturate the image.

Brightness – The Brightness (luminosity) Blend Mode preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully reduce the luminosity an image, and up to 200 to fully increase the luminosity of an image.

Contrast – The Contrast Blend Mode increases or decreases the contrast in the image, by lightening or darkeing the lightest pixels and lightening or darkeing the darkest pixels. The slider is set to 100 by default, and can go down to 0 to fully reduce the contrast of an image, and up to 200 to fully increase the contrast of an image.

Invert – The Invert Blend Mode inverts all of the colors in the image, making each color its exact opposite color, for example, replacing greens and browns with magentas and blues. The slider is set to 0 by default, and can go up to 100 to fully invert the colors in the image.

Sepia – The Sepia Blend Mode effectively reduces an image to greyscale (black & white) and adds a mid brown color filter over the image, originally designed back in the mid 1800s to warm black and white images.  The slider is set to 0 by default, and can go up to 100 to fully desaturate and apply a sepia tone to the image.

Opacity – The Opacity Blend Mode gradually increases transparency into the image. The slider is set to 100 by default, which is fully opaque, and can go down to 0 to make the image fully transparent.

Blur – The Blur Blend Mode adds a Gaussian blur to the image as the slider is increased. The slider is set to 0 by default, and can up to 50 to fully blur the image.,ExamplesHue Blend Mode – set to 180 degrees on hoverSaturation Blend Mode – set to 0 saturation on hoverBrightness Blend Mode – set to 25 on hoverContrast Blend Mode – set to 150 on hoverInvert Blend Mode – set to 100 on hoverSepia Blend Mode – set to 100 on hoverOpacity Blend Mode – set to 0 on hoverBlur Blend Mode – set to 10 on hover

How To Use Font Awesome Icons with Avada

How To Use Font Awesome Icons with Avada

Font Awesome is the world』s most popular and easiest to use icon set. We have integrated it into Avada, so you can add any of the 1,609 Free Font Awesome Icons to your content. The full set of styling options available allows you to choose any icon size, weight, color, background, rotation, and more. And every icon is 100% full vector, so they look incredibly sharp and are retina-ready!
As well as all the free icons, there is also Font Awesome Pro Integration in Avada, giving you access to 7,000+ Font Awesome Icons through the Avada Builder.,IMPORTANT NOTE: Font Awesome Pro requires an annual subscription. Please check their site for detailed information & pricing.,How To Use Font Awesome Icons with AvadaBefore using Font Awesome Icons in Avada Builder, it』s best to start in the Global Options, as there are several options that affect how Font Awesome Icons are displayed in the Builder.

Font Awesome – Here, you can choose which subsets you want to load. If you have a Font Awesome Pro license, and you can connected it, you can also choose the Light subset, but otherwise you can display the Brands, Regular and the Solid subsets.

Font Awesome v4 Compatibility – Turn this on to enable support for Font Awesome 4 icon code format. You』ll generally only need to enable this is you have hard coded icons in your markup, for example:Copy to Clipboard  1
Font Awesome Pro – Turn this on to connect your Font Awesome Pro license. You will need to whitelist your domain as well.
Accessing Font Awesome Icons in Avada BuilderOnce you』re set up in the options, you can add Font Awesome Icons in any of the Elements that support icons. If you want to add an icon on its own, use the new Icon Element. But icons can also be used in several other elements, including the Alert, Button, Checklist, and Content Boxes Element, to name just a few. In short, anywhere you find the Icon Picker, you will be able to use the Font Awesome Icons in your content.

How To Translate 「Go To」 In Mobile Menu

How To Translate 「Go To」 In Mobile Menu

For Avada versions preceding version 3.8To translate/change the words 「Go To」 in the mobile menu, you can do so by editing this file -> /functions.php located in the main Avada folder and searching for 「Go To」
For Avada versions 3.8 +To translate/change the words 「Go To」 in the mobile menu, you can do so by editing this file -> Avada/includes/class-avada-scripts.php and searching for 「Go To」
In addition, you can always translate 「Go To」 and any other string using our included translation files. See our Translation docs here.