Author 诗语

Responsive Headings

Avada includes several Responsive Typography options. These are global options that can be set in the Avada > Options > Responsive section. Responsive Typography options have also been built into the Avada Slider. Continue reading below to learn more about each option and how to set them up.
Manage Responsive Options In Global OptionsLocated here -> Options > Responsive
Responsive Typography Sensitivity – Set to 0 to disable responsive typography. Increase the value for a greater effect.Minimum Font Size Factor – Determines the minimum font-size of elements affected by responsive typography using a multiplying value.Step 1 – Adjust the Responsive Typography Sensitivity by dragging the slider to fit your needs. 0 will disable responsive typography, and 1 is maximum responsiveness.
Step 2 – Adjust the Minimum Font Size Factor by dragging the slider left or right to control the multiplying value of the minimum font size. For example, if set to 0, then there is no minimum font-size. If set to 1 then the minimum font-size will be the same as the font-size of the element. If set to 2 then the minimum font-size will be double the initial font-size of the element.
Step 3 – Click the 『Save Changes』 to save your settings.
Manage Responsive Type For Avada SlidersAside from the Avada Global Options, you can also set the Responsive Type options in each Avada Slider.
IMPORTANT NOTE
The Avada Slider responsive typography settings are independent of the Global Option settings and only apply to the individual Avada Slider.Located here -> Avada Slider > Add/Edit Sliders
Step 1 – Select an existing slider or create a new one. At the bottom of the settings you will see the Responsive Typography Sensitivity options.
Step 2 – Enter the Responsive Typography Sensitivity and Mininum Font Size Factor settings to suit your needs.
Step 3 – Click the 『Update』 to save your settings.
Common Issues & Questions1. My headings are too big for mobile and are being cut offThis means that your responsive settings are probably not set correctly. Please check the Responsive Typography Sensitivity and Minimum Font Size Factor settings in the theme options and ensure the values are correct. Responsive Typography Sensitivity will increase the amount of resizing. 0 will disable responsive typography, while 1 is maximum responsiveness. Minimum Font Size Factor is used to determine the multiplying factor for the minimum font size.

The Avada Options Network

The Advanced Options Network is the backbone of Avada. These options give you full control over your website and allow you to customize your design without touching a single line of code. There are three major groups of options you can utilize within Avada: Avada Global Options, Avada Page Options and Avada Builder Element Options.
Watch the video, or keep reading below to find out more about Avada』s incredible options system.
Overview
Avada』s Option Network

How The Parts of  Avada』s Option Network Relate To Each Other
Advanced Option Network CorrelationAvada』s Option Network Dependencies,Avada』s Options NetworkThe Avada Website Builder comes with a well established, and highly flexible, advanced options network, that gives you maximum design freedom without the need to write any code. Continue reading below to learn about each part of the options network.

Avada Global Options – These can be accesssed from Avada > Options tab from the WordPress admin sidebar, and on the Sidebar, accessed from the Toggle Sidebar Icon, in Avada Live. These are the main options, and affect your entire site.

Avada Page Options – Located at the bottom of every page and post in the back-end Avada Builder, or in the Page Options Tab of the Sidebar in Avada Live. These are local options, that only apply to the page or post they』re set on.
Avada Builder Element Options – Located within each Avada Builder Element. These options will only affect the single element instance they』re set in.,Avada Global OptionsThe Avada Global Options are the heart of the Avada options network. They are presented in a well-organized panel, covering all areas of the theme. There are over 1,000 individual options in here. These are global options that affect your entire site. Please see the Avada Global Options document for full details of all the panels, and videos explaining many of the options.
Below is a screenshot of the back-end version of the Avada Global Options, as accessed from the WordPress dashboard at Avada > Options.
In Avada Live, you have access to the Avada Global Options panel without even leaving the page you are editing. Below is a screenshot of the Avada Global Options in the Avada Live, which is accessed from the Toggle Sidebar Icon found in the main Toolbar.,Avada Page OptionsThe Avada Page Options are local options, which only affect the page or post they are set on. These options override any corresponding global options set in the Avada Global Options. Below is a screenshot of the Avada Page Options, as found at the bottom of the page in the Avada Builder.
In Avada Live, the Avada Page Options are found in the Sidebar, along with the Avada Global Options. Below is a screenshot of the Avada Page Options, as found in Avada Live.,How The Parts of Avada』s Option Network Relate To Each OtherThere is a clear hierarchy for options set in Avada. Avada Global Options affect the entire site unless overridden. Avada Page Options and Avada Builder Element Options will use any values set in the Avada Global Options if left empty or if the value is set to default. However, if any other value is set, they will override the Avada Global Options.
This setup gives users maximum flexibility, with the option of setting a global option, then being able to override it on a per page/post/element basis.
Please see below for examples of how this override system works. The first example is a setting that is both present in Avada Global Options and in Avada Page Options, and the second, an example of an Avada Builder Element that has a corresponding Avada Global Option setting.,Global Options vs Page OptionsAvada Global OptionsBelow is a screenshot of the Page Background panel in the Avada Global Options. This is a scenario where a background image has been set, and the 『100% Background Image』 option is set to On, which means the background image will cover 100% width on all the pages throughout the site, unless otherwise specified in Page Options.
Avada Page OptionsBelow is a screenshot of the Background panel in the Avada Page Options. Here, a different image has been added for the Background Image For Page options, and the 100% Background Image option is set to No. So, on this page, a different background image will display, but it will not be at 100% width. Global options, local overrides.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element Global Options vs Element Local OptionsAvada Builder Element Global OptionsBelow is a screenshot of the 『Avada Builder Elements』 tab in the Avada Global Options. The 『Button Span』 option is set to No, and so all buttons on your website will be displayed as such, unless the corresponding button element option is overridden.
Avada Builder Element Local OptionsBelow is a screenshot of the Options Panel of a Button Element inserted into a page via the Avada Builder. In this instance of the Button Element, the Span has been set to Yes. This element option will override the corresponding option in the Avada Theme Options. You can also see the Default value in the description under the Option Title, as explained below in the Advanced Option Network Correlation section.,Advanced Option Network CorrelationIMPORTANT NOTE: This feature is only available in Avada version 5.0 or higher.When building your pages, we understand that it』s important to have a seamless experience. This is why we』ve implemented a new feature called Advanced Option Network Correlation. This feature allows you to view what default option you』ve set in the Avada Global Options for specific Avada Page and Element options. If you would like to change it, you can simply click on the link to be automatically redirected to that Global Option
In Avada Live, the Global Default values are seen by clicking on the Question Mark Icon to the right of each Option title. This toggles the option description. Any default values will be indicated in the descripiton, and you can click on them to be taken to the Global Option in question, just like you can in the back-end builder.
Learn More About Advanced Option Network Correlation,Option Network DependenciesIMPORTANT NOTE: This feature is only available in Avada version 5.0 or higher.Avada』s Option Network consists of the Avada Global Options, Avada Page Options, and the Avada Builder Element Options, and each of them have dependent options turned ON by default. This means the only options you see are the only ones currently available for your selection.
This is intended to keep options as streamlined as possible and to avoid visual clutter. The dependent options are hidden/visible according to your current site』s configuration. For example, if you have a side header active, then all options that aren』t relevant to side headers like top header options, will be hidden from view. This allows you to concentrate only on the options that will affect your current set up.
This feature can be disabled in Options > Advanced > Theme Features > Avada』s Option Network Dependencies. To learn more about Dependent Options, please see our article below.
Learn More About Dependent Options

Responsive Option Sets

This awesome new feature, introduced in Avada 7.0, allows you to set certain options independently for different screen sizes. This is achieved by allowing some specific Element options to hold up to three sets of values, corresponding with the three Responsive screen sizes, Large (Desktop), Medium (Tablet) and Small (Phone). Read on to learn how to use it, or watch the video below, for a visual overview.
WHAT IS RESPONSIVE?: Responsive design is when the content on the page automatically adjusts for different screen and viewport sizes. This could be a laptop, a tablet, a mobile phone, or even just a desktop computer with the screen resized.,Overview
Isn』t Avada Already Responsive?
Where To Find ItHow To Use ItGlobal Options,Where To Find ItResponsive Options Sets are available on selected options in the Container and Column Elements, as well as a few other selected Design Elements; at this point the Button, Image, Text Block, and Title Elements. This is a brand new feature, and it will expand over time to other Elements and options.
 
There are very clear indicators for when Responsive Option Sets are available. In the back end editor interface, you will see the word 『Responsive』 and a set of icons in the Title Bar of any Element that uses it. As well, a screen icon will be visible next to the options available for use with the feature, as seen below.
In Avada Live, on the right hand side of the toolbar, you will find the Responsive Icon. This is no longer just a preview option to see how the site looks on different screen sizes, but is also a new responsive editing mode. When you select a specific screen size, like Medium or Small, not only does the layout change on the screen, but any Responsive Options that you set while in that view, will apply only for that view.
You can also adjust the Responsive Screen view in Avada Live from the actual Element options that support it, by clicking on the icon in the option.,How To Use ItAs you can see in the example of the Live Builder below, I have chosen the Small (Phone) Responsive Icon in the toolbar, and in the Padding Option for the Container I am editing, the icon has changed to the same icon, signifying that the values inserted (in this case 10px padding on the left and right sides of the Container) will only apply when the screen is at Small size.
Any responsive option set while in the Desktop view will carry through to both medium and small layouts, but if you want a specific value, for either Tablet or Phone for example, you would just click on the respective icon and then enter a different value into the relevant option.
It works the same way in the back end interface of the builder, but it just looks a little different. If we look at the Container or Column Element in the back-end interface of Avada Builder, we can see three Responsive icons at the top of the Element. If we select a specific icon along the top, the options included in this feature and that also have a responsive icon, will change their icons to match the one selected at the top. This shows that the values you set in this options will apply only to the selected layout.
See the image below to see how this works. Note how in the image, the Mobile Responsive view has been selected in the Container header, and in the Margin and Padding options of the Container, the Responsive Icons there have changed to a phone, showing that the values entered there will only apply when the page is viewed at Mobile size.
There are many options and situations you can change with this system to help you fine tune your design on Tablets and Mobile, including How To Set The Display Order And Size Of Columns In Responsive Layouts, and Alignment options on several Elements, including the Button, Image, Text Block, and Title Elements.,Global OptionsIt』s also important to realize you have full control over the responsive sizes and behaviors in Avada. For example, under the Responsive Options, found at Avada > Options > Responsive > Element Responsive Breakpoints, you can determine the breakpoints at which a Medium Screen and a Small Screen kick in.
IMPORTANT NOTE: Note, this feature will not work on Legacy Containers and Columns.And under the Global Column options, found at Avada > Global Options > Avada Builder Elements > Columns, you can control the default behavior for Columns in responsive situations.
By default, Medium size screens inherit the layout from Desktop, and Small size screens revert to full width Columns, but you can, of course, change these default behaviors as you wish.
This new feature is a real game changer. With Responsive Option Sets, you now have full control over your responsive layouts, all within the same containers and columns.
Check Out How To Set The Display Order And Size Of Columns In Responsive Layouts

Configure and Display Social Media Icons

Avada includes a wide range of social media icons that can be used in several locations on your site. All social media icons are CSS based font icons, which ensures that they are high quality, and can be configured using the available options. Continue reading below to learn more about how to set up the social media icons, how to customize different settings, and how to display them on your site.,Overview
Social Media Icons

Header Social Icons

Footer Social Icons

The Social Sharing Box

Social Links Element

Social Sharing Box Element

Social Links Widget

Social Media Icons Styling

Custom Social Media Icons
Social Media IconsIn the Social Media Icons panel, found at Avada > Options > Social Media > Social Media Icons, you will find a repeater field, to which you can add one social network at a time. You can add as many social links as you require. You can also add custom social links and icons here, which you can read more about below.
IMPORTANT NOTE: The social media icons and links that you insert on this tab will be the icons that will be displayed on your header or footer.How To Add Social Media IconsStep 1 – Navigate to Avada > Options > Social Media > Social Media Icons.
Step 2 – In the repeater field dropdown, select the social network that you』d like to add an icon for. For example, Facebook.
Step 3 – Under the 『Link (URL)』 field, enter the URL you』d like the social media icon to link to. For example, http://www.facebook.com/avada.
Step 4 – Once done, click the 『Add』 button to add it to the list.
Step 5 – To add another social media icon, simply repeat Step 2 to 4.
Step 6 – To delete a social media icon, expand the social media icon tab you』d like to delete, then click the 『Delete』 button on the lower right side.
Step 7 – To rearrange the order of the social media icons, simply drag and drop each tab until you achieve your desired order.
Step 8 – Once you』re done adding social media links, don』t forget to click the 『Save Changes』 button.
Header Social IconsOnce you have added Social Media Links, you can display them on your site. On the Header Content tab, found at Avada > Options > Header > Header Content, you can, if you have chosen a header layout that supports it, choose to show Social Links in the Header Content 1 or Header Content 2 field. Full instructions and screenshot below.
IMPORTANT NOTE: For social media icons to appear on your header, you must enable it and have the appropriate social media links set in the Social Media Icons tab.How To Display Social Media Icons On Your HeaderStep 1 – Navigate to Avada > Options > Header > Header Content.
Step 2 – Choose a header layout #2 – #5 (not available for header layouts 1, 6, 7).
Step 3 – Under 『Header Content 1』 or 『Header Content 2』 dropdowns, select the Social Links option to display social links on the header.
Step 4 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
Styling Header Social Media IconsTo style your Header Social Media Icons, see the following steps.
Step 1 – Navigate to Avada > Options > Social Media > Header Social Icons Styling.
Step 2 – On this tab, you will find configuration options such as font size, tooltip position, color, and layout.
Step 3 – When you are done, click the Save Changes button.
Footer Social IconsYou can also display social media icons in your Footer. They draw from the same pool of social media icons set previously, but you can style them independently to the header social media icons. Continue reading below to learn how to display social media icons on your footer and customize them.
IMPORTANT NOTE: For social media icons to appear on your footer, you must enable it and have the appropriate social media links set in the Social Media Icons tab.How To Display Social Media Icons In Your FooterStep 1 – Navigate to Avada > Options > Social Media > Footer Social Icons Styling.
Step 2 – Locate the 『Display Social Icons In The Footer』 option and select On.
Step 3 – Under this tab, there are also several options that you can use to customize the appearance of the footer social media icons.
Step 4 – When finished, don』t forget to click the 『Save Changes』 button.
The Social Sharing BoxThe Social Sharing Box allows your viewers to share any blog or portfolio post using several social media networks. This feature can be enabled or disabled on any blog or portfolio single post page. On this tab, you can customize the social sharing box itself and the social media icons within it. Also in this section, we』ve included a quick guide on how to enable/disable the social sharing box on blog and portfolio posts.
How To Enable Social Sharing Box In All Single Blog Post PagesStep 1 – Navigate to Avada > Options > Blog > Blog Single Post.
Step 2 – Locate the Social Sharing Box option, and select 『On』 to enable the Social Sharing Box.
Step 3 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
How To Enable Social Sharing Box In One Single Blog Post PageStep 1 – Navigate to the blog post you』d like to enable the Social Sharing Box in.
Step 2 – Under Page Options > Post tab, locate the Show Social Share Box option and set it to 『Show』.
Step 3 – Don』t forget to save your changes by clicking the Save Draft or Publish.
How To Enable Social Sharing Box In All Single Portfolio Post PagesStep 1 – Navigate to Avada > Options > Portfolio > Portfolio Single Post.
Step 2 – Locate the Social Sharing Box option, and select 『On』 to enable the Social Sharing Box.
Step 3 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
How To Enable Social Sharing Box In One Single Portfolio Post PageStep 1 – Navigate to the portfolio post you』d like to enable the Social Sharing Box in.
Step 2 – Under Page Options > Portfolio tab, locate the Show Social Share Box option and set it to 『Show』.
Step 3 – Don』t forget to save your changes by clicking the Save Draft or Publish.
How To Style Social Sharing And IconsStep 1 – Navigate to Avada > Options > Social Media > Social Sharing.
Step 2 – Here you will see multiple options for social sharing such as the tagline, background color. You』ll also find options for the Social Sharing Icons such as font size, tooltip position, etc.
Step 3 – Under the Social Sharing Links section, you can select which social links to display on the Social Sharing Box. Simply choose 『On』 for the corresponding social link option that you』d like to show. For example, if you』d like your viewers to be able to share your portfolio or blog post on Facebook, then you will need to set the Facebook option to On.
Step 4 – Don』t forget to save your changes by clicking the 『Save Changes』 button.
How To Add The Social Sharing Element To A Page Or PostIMPORTANT NOTE: For social links to appear on the sharing box element, you must first set them in the Avada > Options > Social Media > Social Sharing panel.Step 1 – Navigate to the page or post where you』d like to add the Social Sharing Element.
Step 2 – Activate the Avada Builder by clicking the 『Use Avada Builder』 button.
Step 3 – Add a new Container to the page, and select your desired column layout.
Step 4 – Click the 『+ Element』 button to bring up the 『Elements』 window. Find the Social Sharing Element, and then click it to add it to the page and bring up its options window.
Step 5 – Customize the Social Sharing Element to your liking.
Step 6 – Once finished, click 『Save』.
Social Links ElementThe Social Links Element can be inserted in any page or post you create. To learn how to add and customize the Social Links Element, please continue reading below.
How To Add The Social Links Element To A Page Or PostStep 1 – Navigate to the page or post you』d like to add the Social Links element.
Step 2 – Activate the Avada Builder by clicking the 『Use Avada Builder』 button on the top of the content editor.
Step 3 – Add a new Container to the page, and select your desired column layout.
Step 4 – Click the 『+ Element』 button to bring up the 『Elements』 window. Find the Social Links element then click it to add it to the page and bring up it』s options window.
Step 5 – Add links to the respective social network fields you』d like to display. For example, if you』d like to display the Facebook social icon, you need to add a Facebook link to the Facebook field provided.
Step 6 – Once finished, click 『Save』.
How To Configure Social Links Elements GloballyIMPORTANT NOTE: On the 『Avada Builder Elements』 panel, the 『Social Icon Elements』 tab controls the global options for both the Social Links element and the Person element.Step 1 – Navigate to the Avada > Options > Avada Builder Elements panel.
Step 2 – On this panel, you』ll find the 『Social Links Elements』 tab. Under this tab, you』ll find several options that allow you to customize the appearance of the Social Links elements globally. Please keep in mind that this tab also controls the global options for the Person element.
Step 3 – Once done, click the 『Save Changes』 button.
Social Links WidgetYou can use the Social Links widget to insert social links to any widget-ready areas of your site; such as the footer, sliding bars, sidebars, mega menu columns, and the like. To learn how to add a Social Links widget to widget areas, please continue reading below.
How To Add A Social Links Widget To Widget AreasStep 1 – Navigate to the Appearance > Widgets tab on your WordPress admin sidebar.
Step 2 – You must first create a widget area. To learn more about this, please refer to our Widgets Section article.
Step 3 – Under the Available Widgets section, locate the 『Avada: Social Links』 widget. Then, drag and drop it to the widget area you』d like to add it to.
Step 4 – Once you add it to a widget area, the widget will automatically expand and display all the available customization options. Using these options, you can customize the widget and add your desired social links to their corresponding social network fields. For example, if you』d like to display a Facebook link, then enter that link under the 『Facebook Link』 field. View screenshot here.
NB. A few options to be aware of here: If you want to ensure your Social Media Links open in a new window, make sure to add 「_blank」 to the Link Target option. Also, you can add your own Social Media links by adding the link in the fields provided, or you can choose to Use Theme Option Links and/or Show Custom Links. See these options here.
Step 5 – Once done, click 『Save』.
Social Media Icons StylingThere are several configurable options that makes it easy to style your social media icon』s appearance. These options are found in the respective areas where social icons can be displayed. To learn how these options affect the social icons, please continue reading below.
IMPORTANT NOTE: The options to configure a particular set of social media icons depends on the area where they』re found. For example, if you』d like to change the social media icons displayed on the header, then you will need to go to the Avada > Options > Social Media > Header Social Icons tab.Social Icon Font SizeUse this option to increase or decrease the size of the social media icon. For example, 18px.
Social Icon Tooltip PositionCan be Top, Right, Bottom, Left or None. Choose the tooltip』s position.
Social Icon Color TypeCan be Custom Colors or Brand Colors. Sets each icon』s color to it』s brand colors or custom colors.
Social Icon BoxedCan be On or Off. Use this option to display the social icons in boxes or just icons.
Social Icon Boxed RadiusIf the 『Social Icon Boxed』 option is set to On, then this option controls the roundness of the box.
Social Icon Boxed PaddingIf the 『Social Icon Boxed』 option is set to On, then this option controls the interior padding of the icon.
Custom Social Media IconsAdding custom social media icons allows you to display social networks that are not included on the list. You can also choose to add custom social media icons for existing social networks if you』d prefer to use your own icons. You can add as many custom social media icons as you』d like. To learn how to add custom social media icons, please continue reading the instructions below.
How To Add Custom Social Media IconsStep 1 – Go to the Avada > Options > Social Media > Social Media Icons panel.
Step 2 – In the repeater field, select 『Custom』 from the dropdown. The 『Custom』 option is the last option in the dropdown.
Step 3 – Once 『Custom』 is selected, the options on the repeater field will change.
Step 4 – Add your custom URL link in the 『Link (URL)』 option.
Step 5 – Add your custom tooltip name in the 『Custom Icon Title』 field.
Step 6 – Upload your custom icon image by clicking the 『Upload』 button, then choose the appropriate image from your computer or media library.
Step 7 – Once you』re finished, don』t forget to click the 『Save Changes』 button.

How To Use Global Typography Sets In Avada

You will find Global Typography sets at Avada > Options > Global Typography. With these typography sets, you can establish your entire typography scheme for your website in the one tab of the Global Options. This is best done at the very start of the website building process, so that you can then connect these sets to other Global and Element options as you build. But you can of course retrofit them, so to speak, on a finished site as well.
As you can see below, there are five inital Typography sets, Headings, Subheadings, Lead, Body, and Small. You can edit their names as you wish, and you can also create more sets if you need them.
An individual typography set consits of eight options, as you can see below – the Typography Set Name, the Font Family, the Backup Font, the Variant, the Font Size, the Line Height, the Letter Spacing, and Text Transform. So the idea here is that you create Typography Sets for various typographic styles, and then you apply the set to other Global and Element options. Additionally, you can easily override every single setting of a typography set, if needed, so you have full freedom.
ScenariosLet』s look at a few examples to see how this feature can be used. Let』s say you make a Typography set called Headings and then apply the set to the Global Options all H1 – H6 Headings. At this point, all headings would be the same, but then you could differentiate the H1 – H6 Global Options each with a different font size. In that scenario, you would then only need to change the Font Family or Line Height or any of the individual options in the Global Typography Set, and this would ripple through the site to every Heading on the site, all at once. You can also apply these Typography Sets to any Elements that have fonts included, such as the Title Element, the Text Block Element etc.
You can also create different sets for different purposes. As another example, suppose you have set your 「H1 Headings」 to the 「Headings」 set and your 「H2 Headings」 to 「Subheadings」 set. On a specific page now, you already have your H1 heading tag, and further down the page you create a CTA. SEO-wise, it would likely make sense to use an h2 tag. But of course, you want the typography to stand out. So you use the Title Element, write your CTA text, set the heading tag to H2, but then you set the typography field to use the 「Headings」 set. With just one single click, it will just look like your H1.
Finally, below, lets』s look at a real world implementation of this feature. On the Handyman Demo, let』s look at the HI Headings Typography options. A Global set has been applied, but then certain parts of the set have been overridden for the H1 Heading. All options that are greyed out signify that their values are coming from a Global Typography Set, whereas the ones in white have been set in this option. This is similar to example 1. With global typography sets, you can apply a full set or just part of it. When you mouseover the Font Size, or any of the individual options, you will also see asmall globe. When that globe is blue, it also signifies that the value is coming from a typography set. We can also see below that a Global Color has been applied to the H1 Heading, but as the H1 font on the screen is white, this means it has been overridden at the Element level.
It will take a little while to truly appreciate the power of this stystem, but play around with it, and you will find it gives you a very powerful global, yet granular control over your site』s typography.

Global Footer Options

Footers in Avada can be constructed in two ways – the recommended method of using Avada Layouts to create a completely custom footer with no limitations, or the traditional method, configuring the footer via the Global Options and adding widgets to populate it. For more details, please see How To Create A Footer In Avada. If you do wish to build a footer using the traditional method, it will be useful for you to familiarize yourself with the Global Footer options, as shown in this document.
There are various options available for customizing the Footer in the Avada Global Options, accessed from the WordPress Dashboard at Avada > Options > Footer. To access these theme options from Avada Live, you can simply mouse over the footer, and choose Edit Footer. This will open the Sidebar to the Footer Options section of the Avada Options.
There are three sub-panels in the Footer tab: Footer Content, Footer Background Image, and Footer Styling, as well as a Footer Social Icon Styling sub-panel under Social Media. Please continue reading below to know more about the options in each section.
IMPORTANT NOTE:  Check out the How To Build a Custom Footer video, using Avada Layouts.OverviewFooter ContentFooter Background ImageFooter Styling
Footer Social Icons Styling
Footer ContentFooter Widgets – Allows you to show or hide the footer widgets. Setting this to 『Off』 removes the entire footer section from the page,
Number of Footer Columns – Controls the number of columns to be displayed in the footer. Choose from 1 to 6.
Center Footer Widgets Content – Allows you to center the footer widget content.
Footer Special Effects – Allows you to select a special effect for the footer area. Choose between None, Footer Parallax Effect, Parallax Background Image, Sticky Footer, or Sticky Footer and Parallax Background Image.
None – Allows you to disable footer effects.
Footer Parallax Effect – Allows you to enable a fixed footer with parallax scrolling effect.
Parallax Background Image – Allows you to enable a parallax effect on the background image selected in 「Background Image For Footer Widget Area」 field.
Sticky Footer – Allows you to enable a sticky footer. The entire footer area will always be 「below the fold」. On very short pages, it makes sure that the footer sticks at the bottom, just above the fold. IMPORTANT: This will not work properly when using a Left or Right Side Header layout and the side header is larger than the viewport.
Sticky Footer and Parallax Background Image – Allows you to enable a sticky footer with a parallax effect on the background image. The entire footer area will always be 「below the fold」.
Copyright Bar – Allows you to show or hide the copyright bar.
Center Copyright Content – Allows you to center the copyright bar content.
Copyright Text – Allows you to enter the text that will be displayed in the copyright bar. Avada Builder Shortcodes and HTML markup can be used.
Footer Background ImageBackground Image For Footer Widget Area – Allows you to set an image for the footer widget background. If left empty, the footer background color will be used.
100% Background Image – Allows you to have the footer background image displays at 100% in width and height according to the windows size.
Background Repeat – Controls how the background image repeats. Choose between Repeat All, Repeat Horizontally, Repeat Vertically, or No Repeat.
Background Position – Controls how the background image is positioned.
Footer Styling100% Footer Width – Allows you to have footer area display at 100% width according to the window size. If this is set to Off, it will follow the site width.
Footer Padding – Controls the top/right/bottom/left padding for the footer.
Footer Background Color – Controls the background color of the footer. The Background Color will not show/apply when a Footer Background Image is specified in the Footer Background Image section.
Footer Border Size – Controls the size of the top footer border.
Footer Border Color – Controls the border colors of the footer.
Footer Widgets Area Vertical Divider Line – Allows you to have the footer widget area display vertical divider line between columns.
Footer Widgets Area Vertical Divider Line Size – Controls the size of the vertical divider line between footer widget area columns.
Footer Widgets Area Vertical Divider Line Style – Controls the style of the vertical divider line between footer widget area columns.
Footer Widget Divider Color – Controls the divider color in the footer widgets and also the vertical divider lines between widget areas.
Footer Widgets Area Padding – Controls the right/left padding for the footer widget areas.
Copyright Padding – Controls the top/bottom padding for the copyright area.
Copyright Background Color – Controls the background color of the footer copyright area.
Copyright Border Size – Controls the size of the top copyright border.
Copyright Border Color – Controls the border colors for the footer copyright area.
Footer Headings Typography – Controls the primary and backup font family, font weight and style, font subsets, font size, line height, letter spacing, and font color of the footer headings.
Footer Font Color – Controls the text color of the footer font.
Footer Link Color – Controls the text color of the footer link font.
Footer Link Hover Color – Controls the text hover color of the footer link font.
Copyright Text Color – Controls the text color of the footer copyright area.
Copyright Link Color – Controls the link color of the footer copyright area.
Copyright Link Hover Color – Controls the link hover color of the footer copyright area.
Copyright Font Size – Controls the font size for the copyright text.
Footer Social Icons StylingDisplay Social Icons In The Footer – Turn on to display social icons in the footer copyright bar.
Footer Social Icon Font Size – Controls the font size of the footer social icons. Enter value including CSS unit (px, em, rem), ex: 16px.
Footer Social Icon Tooltip Position – Controls the tooltip position of the footer social icons.
Footer Social 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.
Footer Social Icon Color – Controls the color of the footer social icons. This color will be used for all social icons in the footer.
Footer Social Icons Boxed – Controls if each icon is displayed in a small box.
Footer Social Icons Box Color – Controls the color of the social icon box.
Footer Social Icon Boxed Radius – Controls the box radius. Enter value including any valid CSS unit, ex: 4px.
Footer Social Icon Boxed Padding – Controls the interior padding of the box. Enter value including any valid CSS unit, ex: 8px.

Container Background Parallax Options

Container Background Images can also have a parallax effect applied to them. There are a range of options with regard how the image should move. These options can be found in the BG tab of any container element, once a background image has been chosen.
Below is an example of a container with a background image that has a parallax effect applied to it. The direction chosen is left, and the speed is the default .3. As you can see as you scroll, the image moves to the left. On a mobile device the image will not move as Enable Parallax on Mobile has been set to No on this container.,There are three parallax related options. The first is Background Parallax. There are six options here.

No Parallax – This is the default setting on Containers, with no parallax effects.

Fixed (fixed on desktop, non-fixed on mobile) – As the title makes clear, this makes the background image fixed when viewing on a desktop size screen, with the image not being fixed on mobile screens.

Up (moves up on desktop and mobile) – This option makes the image move in an upwards direction as you scroll down the page.

Down (moves down on desktop and mobile) – This option makes the image move in a downwards direction as you scroll down the page.

Left (moves left on desktop and mobile) – This option makes the image move to the left as you scroll down the page.

Right (moves righton desktop and mobile) – This option makes the image move to the right as you scroll down the page.
There is also an option that controls the speed of the image movement – The value should be between 0.1 and 1.0. A lower number means slower scrolling speed. Higher scrolling speeds will enlarge the image more.
Mobile Parallax OptionsFor parallax movement on mobiles, there is the Enable Parallax on Mobile option. This works only for the up/down/left and right options. To disable parallax effects on mobile when using one of these options, set this option to No. As the description explains, parallax effects can cause slowdowns when your site is viewed on mobile devices.

Image Rollovers

Image Rollovers are stylish overlays for your blog and portfolio images. They come with numerous customization options that allow you to control styling, visibility, actions and more. The Image Rollover options are located in Avada > Theme Options > Extra > Featured Image Rollover tab. You can also set some options individually under the Fusion Page Options in each blog or portfolio post. Continue reading below for more information on this element and its options.
IMPORTANT NOTE: These Image Rollovers are different from the Image Hover Effect for regular images.Linked Areas Of The Image Rollover
Link Icon – The link icon will link to the single post page by default. However, you can add a custom URL for this icon in the Single Post』s Fusion Options.

Zoom Icon – Clicking this will open the image in the Avada lightbox by default. However, you can add a YouTube/Vimeo video URL in the Single Post』s Fusion Options. That will open the video in the lightbox instead of the featured image.

Post Title – The post title will link directly to the Single Post Page.
Post Categories – These will link to their respective category archive pages. Example of a Portfolio category archive.
Featured Image Rollover – The whole overlay which is generally colored is also a link to the Single Post Page. This refers to the green area which covers the image.
Image Rollover Fusion Theme OptionsLocated in the Avada > Theme Options > Extra > Featured Image Rollover tab. See our How Options Work article to learn more.
Image Rollover – Illustrated as A. Allows you to enable or disable Image Rollovers. Choose On or Off.
Image Rollover Direction – Illustrated as B. Allows you to set the rollover animation』s starting direction when activated. Choose between Fade, Left, Right, Bottom, Top, Center Horizontal, or Center Vertical.
Image Rollover Icon Font Size – Illustrated as C. Accepts a pixel value that sets the icon』s font size. For example, 15px.
Image Rollover Link Icon – Illustrated as D. Allows you to show or hide the image rollover』s Link Icon. Choose On or Off.
Image Rollover Zoom Icon – Illustrated as E. Allows you to show or hide the image rollover』s Zoom Icon. Choose On or Off.
Image Rollover Title – Illustrated as F. Allows you to show or hide the title. Choose On or Off.
Image Rollover Categories – Illustrated as G. Allows you to show or hide the categories. Choose On or Off.
Image Rollover Icon Circle – Illustrated as H. Allows you to display the image rollover icons in a circular background. Choose On to display it in a circular background, or Off to display just the icons.
Image Rollover Gradient Top Color – Illustrated as I. Accepts a hexcode value that sets the top gradient color.
Image Rollover Gradient Bottom Color – Illustrated as J. Accepts a hexcode value that sets the bottom gradient color.
Image Rollover Element Color – Illustrated as K. Allows you to set the text and icon background colors.
Image Rollover Icon Color – Illustrated as L. Allows you to set the icon』s color.
Image Rollover Fusion Page OptionsIf you do not want the same global settings for each post, you can set them individually under the Fusion Page Options box in each blog or portfolio post. Navigate to the post you』d like to change, then locate the 『Image Rollover Icons』 option in the Fusion Page Options > Post tab or the Fusion Page Options > Portfolio tab. You can choose which icons to display using this option. The Default value will pull whatever option is set in Fusion Theme Options. To override this, simply choose an option other than Default.