Responsive Options in Avada

Responsive Options in Avada

Avada is a fully responsive theme, with a range of options to control the various breakpoints, as well flexible responsive features such as the new Responsive Option Sets, introduced in Avada 7.
In this document, we』re going to have a look at the Responsive Options found in the Global Options (Avada > Options > Responsive). Continue reading below to learn what responsive breakpoints are, and watch the video for a visual overview.
What Is A Responsive Breakpoint?It all starts with Responsive Breakpoints. These are specific pixel values that determine when the normal layout will change to a responsive layout. For example, if you enter 800px for the 『Header Responsive Breakpoint』 option, then your header will change to the responsive mobile header when the screen, or viewport, is 800px wide.
Global Responsive OptionsResponsiveResponsive Design – Leave on to use the responsive design features in Avada. If set to off, the fixed layout is used.
Grid Responsive Breakpoint – This controls when blog/portfolio grid layouts start to break into smaller columns. Further breakpoints are auto-calculated. Accepts a numeric value in pixels (px). For example, 1000.
Header Responsive Breakpoint – This controls when the desktop header changes to the mobile header. For side headers, the recommended breakpoint is 800px + the side header width. Accepts a numeric value in pixels (px). For example, 800.
Site Content Responsive Breakpoint – This controls when the site content area changes to the mobile layout. This includes all content below the header including the footer. If you are using a side header, the breakpoint value you enter will automatically include the side header width. Accepts a numeric value in pixels (px). For example, 800.
Sidebar Responsive Breakpoint – Controls when the sidebars change to the mobile layout. Accepts a numeric value in pixels (px). For example, 800.
Mobile Device Zoom – Turn on to enable pinch to zoom on mobile devices.
Element Responsive BreakpointsSmall Screen – This controls when the small screen options and visibility should take effect. In pixels. This works in conjunction with the Responsive Icon in Avada Live, and the Responsive Options Sets feature.
Medium Screen – This controls when the medium screen options and visibility should take effect. In pixels.
Large Screen – Any screen larger than that which is defined as the medium screen will be counted as a large screen.
Responsive TypographyResponsive Typography Sensitivity – Set to 0 to disable responsive typography. Increase the value for a greater effect.
Minimum Font Size Factor – This determines the minimum font-size of elements affected by responsive typography using a multiplying value.

Typography Options In Avada

Typography Options In Avada

To give you full control over the fonts used on your website, there are quite a number of typography options in Avada. You can use standard font families, choose from the huge range of Google Fonts, or even upload your own Custom Fonts. From Global Typography options, through to specific area options, like Main Menu Typography Options, Responsive Typography options, and even on-the-fly typography options in the Inline Editor, you will find typography options throughout Avada.
Read on to discover more about these Typography options in Avada, and watch the video below for a quick overview.
Overview
Global Typography Options
Typography Options SettingsFeature Specific Typography OptionsResponsive Heading Typography
Inline Editing Typography Options
Typography Performance Options
Google & Font Awesome Fonts Mode
Heading Font SizesFeature Font SizesFont Line HeightsFont WeightsFont Letter Spacing,Global Typography OptionsThe initial Global Typography options are located in Avada > Options > Typography, and relate to the global use of the site』s Body Typography, Header Typography (H1-H6), and any Custom Fonts.
Body Typography Options – To customize the Body Font, navigate to the Avada > Options > Typography > Body Typography, where all the Body Typography options such as font family, weight, size, etc. are found. This is also where you can set the Link Color for all text links throughout the site. This can be overridden on a Container by Container basis, at Container > Design > Container Link Color.Headers Typography Options : H1-H6 – To customize the Headers, Post Titles including Single Post Title Extras such as 「Comments」, 「Related Posts or Projects」 and 「Author Titles」, navigate to the Avada > Options > Typography > Headers Typography where all the Headers and Post Titles Typography options are found.Custom Fonts – Along with the new Typography options, you can also upload as many custom fonts as you want. You can upload custom fonts by navigating to the Avada > Options > Typography > Custom Fonts tab. If you』d like to learn how to upload custom fonts, please read our 『Custom Fonts』 article.,Typography Option SettingsWhen setting global Headers or Body typography options, there are several settings to fully control the display of the font, including weight, size, color, and even backup font family. Headers Typography, as seen below, has the additional options of setting top and bottom margins. These options are especially useful if you』d like to manually tweak your headings to fit your website better. Take note, that these options accept em units instead of pixel units.
Font Family – Illustrated as A. Controls the font family to be used.
Backup Font Family – Illustrated as B. Controls the backup font family to be used in case the primary font doesn』t load correctly.
Font Weight and Style – Illustrated as C. Controls the font weight and style to be used.
Font Subsets – Illustrated as D. Controls the font subset to be used.
Font Size – Illustrated as E. Controls the size of the text on display.
Line Height – Illustrated as F. Controls the spacing between lines.
Letter Spacing – Illustrated as G. Controls the spacing between letters.
Margin Top – Illustrated as H. (Only in Headers Typography). Controls the top margin of the title.
Margin Bottom – Illustrated as I. (Only in Headers Typography). Controls the bottom margin of the title.
Font Color – Illustrated as J. Controls the color of the text.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Feature Specific Typography OptionsTo customize specific typography options, such as the Menu, Page Title bar, Sliding Bar, Footer, and the like, navigate to their specific panels to access their different typography options such as font family, weight, size, etc.
Main Menu Typography Options – Navigate to the Avada > Options > Menu > Main Menu panel, then go to the Main Menu Typography section. View here.Flyout Menu Typography Options – Navigate to the Avada > Options > Menu > Flyout Menu panel. View here.Secondary Top Menu Typography Options – Navigate to the Avada > Options > Menu > Secondary Top Menu panel. View here.Mobile Menu Typography Options – Navigate to the Avada > Options > Menu > Main Menu panel, then go to the Mobile Menu Typography section. View here.Page Title Bar Typography Options – Navigate to the Avada > Options > Page Title Bar panel, then go to the Page Title Bar Styling section. View here.Breadcrumbs Typography Options – Navigate to the Avada > Options > Page Title Bar > Breadcrumbs panel. View here.Sliding Bar Typography Options – Navigate to the Avada > Options > Sliding Bar panel, then go to the Sliding Bar Styling section. View here.Footer Typography Options – Navigate to the Avada > Options > Footer > Footer Styling panel, then go to the Footer Typography section. View here.Sidebars Typography Options – Navigate to the Avada > Options > Sideabrs > Sidebar Styling panel. View here.Button Element Typography Options – Navigate to the Avada > Options > Fusion Builder Elements panel, then go to the Button Element section. View here.Content Box Element Typography Options – Navigate to the Avada > Options > Fusion Builder Elements panel, then go to the Content Box Element section. View here.Counter Boxes Element Typography Options – Navigate to the Avada > Options > Fusion Builder Elements panel, then go to the Counter Boxes Element section. View here.Blog Meta Typography Options – Navigate to the Avada > Options > Blog > Blog Meta panel. View here.Elastic Slider Typography Options – Navigate to the Avada > Options > Elastic Slider panel. View here.Pagination Typography Options – Navigate to the Avada > Options > Extra > Pagination panel. View here.Form Typography Options – Navigate to the Avada > Options > Extra > Form Styling panel. View here.bbPress Typography Options – Navigate to the Avada > Options > bbPress panel. View here.WooCommerce Typography Options – Navigate to the Avada > Options > WooCommerce > WooCommerce Styling panel. View here.Events Calendar Typography Options – Navigate to the Avada > Options > Events Calendar > General Events Calendar panel. View here.Events Single Post Typography Options – Navigate to the Avada > Options > Events Calendar > Events Single Posts panel. View here.,Responsive Heading TypographyThe Responsive Typography options allow you to control responsiveness for all headings and fonts. This helps your layout look more proportionate on smaller sizes.
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.,Inline Editing Typography OptionsThere are also typography options found in Avada Live, when using the Inline Editor.
When you select any text in the front end builder, the Inline Editor appears above or below it. The very first option on the menu is Typography. On the Settings tab, you can adjust the settings of that particular paragraph of text, or you can also head to the Family tab, where you can change the font family and variant, for just that particular text selection.,Typography Performance OptionsFont Face RenderingBack in Avada 6.1, we improved the font performance feature for Font Face Rendering. Located at Avada > Options > Performance, you will find the Font Face Rendering option. Here you can now chose 「Swap All」 for faster font rendering with possible flash of unstyled text (FOUT), 「Block」 for clean rendering but a longer wait time until first paint, or 「Swap Non-Icon Fonts」, which will use a mix of the first two methods (「swap」 for text fonts and 「block」 for icon-fonts).
Preload Key FontsThere is also an option to make a selection to prioritize fetching resources that will be requested later in the page load. This improves page load time, as the browser caches preloaded resources so they are available immediately when needed. You can choose from All, Google Fonts, Icon Fonts, or None.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Google & Font Awesome Fonts ModeAs part of the Privacy Settings, located at Avada > Options > Privacy, you will find the Google & Font Awesome Fonts Mode option. To allow you to be fully compliant with the GDPR, you can choose to download Google and Font Awesome Fonts locally on to your server, or you can set the option to CDN to use the Google and Font Awesome CDNs.,Heading Font SizesHeading Font Size for H1Page Title Bar – Affects the font size of titles inside all Page Title Bars. View a sample here.Title Element – Affects the font size of text set to H1 inside all Title Elements. View a sample here.Heading Font Size for H2Tagline Box Element – Affects the font size of titles inside all Tagline Box Elements. View a sample here.Content Box Element – Affects the font size of the titles inside all Content Box Elements. View a sample here.Flip Box Element – Affects the font size of the Frontside Heading inside all Flip Box Elements. View a sample here.Title Element – Affects the font size of text set to H2 inside all Title Elements. View a sample here.Heading Font Size for H3Pricing Table Element – Affects the font size of titles inside all Pricing Table Elements. View a sample here.Modal Popup – Affects the font size of titles inside all Modal Popup windows. View a sample here.Title Element – Affects the font size of text set to H3 inside all Title Elements. View a sample here.Heading Font Size for H4Flip Box Element – Affects the font size of the Backside Heading inside all Flip Box Elements. View a sample here.Person Element – Affects the font size of the Name Option inside all Person Elements. View a sample here.Person Element – Affects the font size of the Title Option inside all Person Elements. View a sample here.Popover Element – Affects the font size of titles inside all Popover Elements. View a sample here.Recent Posts Element – Affects the font size of titles inside all Recent Posts Elements. View a sample here.Tabs Element – Affects the font size of titles inside all Tabs Elements. View a sample here.Toggles Element – Affects the font size of titles inside all Toggles Elements. View a sample here.Title Element – Affects the font size of text set to H4 inside all Title Elements. View a sample here.Image Rollover – Affects the font size of titles on all Image Rollovers. View a sample here.FAQ Titles – Affects the font size of titles on all FAQ items. View a sample here.Heading Font Size for H5Sharing Box Element – Affects the font size of titles inside all Sharing Box Elements. View a sample here.Title Element – Affects the font size of text set to H5 inside all Title Elements. View a sample here.Heading Font Size for H6Title Element – Affects the font size of text set to H6 inside all Title Elements. View a sample here.,Feature Font SizesBody Font Size – Affects the font size of all text within your website that does not have a special, custom option. View a sample here.Main Menu Font Size – Affects the font size of all navigation or menu items on your website. This does not include submenu items. View a sample here.Main Menu Dropdown Font Size – Affects the font size of all submenus of menu items on your website. This includes mega menus. View a sample here.Secondary Menu & Top Contact Info Font Size – Affects the font size of all text in the top bar when using Header designs #2 – #5. View a sample here and here.Side Menu Font Size – Affects the font size of all sidebar navigation items on your website. View a sample here.Mobile Menu Font Size – Affects the font size of menu items in mobile devices.Breadcrumbs Font Size – Affects the font size of breadcrumbs inside all Page Title Bars. View a sample here.Sidebar Widget Heading Font Size – Affects the font size of all sidebar widget headings on your website. View a sample here.Sliding Bar Widget Heading Font Size – Affects the font size of all Sliding Bar widget headings in your sliding bar. View a sample here.Footer Widget Heading Font Size – Affects the font size of all footer widgets in your footer. View a sample here.Copyright Font Size – Affects the font size of copyright text on the very bottom of your website. View a sample here.Post Titles Font Size – Affects the font size of titles inside all Blog and Portfolio Posts. View a sample here and here.Post Titles Extras Font Size – Affects the Comment, Related Posts, Related Projects and Author Titles inside all Blog Posts. View a sample here, here and here.Header Tagline Font Size – Affects the font size of headlines in the top menus found in Header design #3. View a sample here.Meta Data Font Size – Affects the font size of all meta data on your website. View a sample here.Page Title Font Size – Affects the font size of titles inside all Page Title Bars. View a sample here.Page Title Subheader Font Size – Affects the font size of subheaders inside all Page Title Bars. View a sample here.Pagination Font Size – Affects the font size of all paginations on your website. View a sample here.WooCommerce Icon Font Size – Affects the font size of the add to cart and details on your shop page. View a sample here and here.,Font Line HeightsHeading Font Line Height for H1Page Title Bar – Affects the font line height of titles inside all Page Title Bars. View a sample here.Title Element – Affects the font line height of text set to H1 inside all Title Elements. View a sample here.Heading Font Line Height for H2Tagline Box Element – Affects the font line height of titles inside all Tagline Box Elements. View a sample here.Blog Post – Affects the font line height of titles inside all Blog Posts. View a sample here.Portfolio Post – Affects the font line height of titles inside all Portfolio Posts. View a sample here.Content Box Element – Affects the font line height of titles inside all Content Box Elements. View a sample here.Flip Box Element – Affects the font line height of the Frontside Heading inside all Flip Box Elements. View a sample here.Author Title – Affects the font line height of the Author Title Heading inside all Blog Posts. View a sample here.Related Posts – Affects the font line height of the Related Posts Heading inside all Blog Posts. View a sample here.Leave A Comment – Affects the font line height of the Leave A Comment Heading inside all Blog Posts. View a sample here.Title Element – Affects the font line height of text set to H2 inside all Title Elements. View a sample here.Heading Font Line Height for H3Pricing Table Element – Affects the font line height of titles inside all Pricing Table Elements. View a sample here.Modal Popup – Affects the font line height of titles inside all Modal Popup windows. View a sample here.Title Element – Affects the font line height of text set to H3 inside all Title Elements. View a sample here.Heading Font Line Height for H4Flip Box Element – Affects the font line height of the Backside Heading inside all Flip Box Elements. View a sample here.
Person Element – Affects the font line height of the Name Option inside all Person Elements. View a sample here.
Person Element – Affects the font line height of the Title Option inside all Person Elements. View a sample here.Popover Element – Affects the font line height of titles inside all Popover Elements. View a sample here.Recent Posts Element – Affects the font line height of titles inside all Recent Work Elements. View a sample here.Tabs Element – Affects the font line height of titles inside all Tabs Elements. View a sample here.Toggles Element – Affects the font line height of titles inside all Toggles Elements. View a sample here.Title Element – Affects the font line height of text set to H4 inside all Title Elements. View a sample here.Image Rollover – Affects the font line height of titles on all Image Rollovers. View a sample here.Heading Font Line Height for H5Sharing Box Element – Affects the font line height of titles inside all Sharing Box Elements. View a sample here.Title Element – Affects the font line height of text set to H5 inside all Title Elements. View a sample here.Heading Font Line Height for H6Title Element – Affects the font line height of text set to H6 inside all Title Elements. View a sample here.Body Font Line HeightDefault Body Content – Affects the font line height of all text within your website that does not have a special, custom option. View a sample here.Secondary Menu Line Height
Top Menu Headline – Affects the font line height of headlines in the top menus found in Header design #3. View a sample here.,Font WeightsSelect Body Font Weight – Affects the font weight of all text within your website that does not have a special, custom option. View a sample here.Select Menu Font Weight – Affects the font weight of all navigation or menu items on your website. This does not include submenu items. View a sample here.Select Headings Font Weight – Affects the font weight of all headings on your website. View a sample here.Select Footer Headings Font Weight – Affects the font weight of all footer headings on your website. View a sample here.Select Button Font Weight – Affects the font weight of all button texts on your website. View a sample here.,Font Letter Spacing
Heading H1 – H6 Letter Spacing – Affects the letter spacing of all H1 – H6 Headings on your website.
Menu Letter Spacing – Affects the letter spacing of all navigation or menu items on your website. This does not include submenu items. View a sample here.Button Letter Spacing – Affects the letter spacing of all button texts on your website. View a sample here.

Search Options In Avada

Search Options In Avada

We search for information on a daily basis on the Internet, and our websites should be able to be searched as well. Avada offers a range of search features and functionality, which we will go over in this document, and new features are regularly being added. In Avada 5.9, we added new functionality to search, including a whole new tab in the Avada Global Options, and in Avada 6.2, we added the Search Element. We have also added options for filtering what content is searchable, a range of ways of displaying that content, and a 『live search』 feature. Try it below, and watch the video for a visual overview.

Search for:,How To Enable SearchTo enable search on your Avada website, there are several options.

Add an Avada Special Menu Search Item To The Menu Element – When using a Header Layout, you can add an Avada Special Menu Search Item to your WordPress menu, which then displays via the Menu Element.

Add a Search Element – You can place a Search Bar anywhere in your content by placing the Search Element into your page content (as in the example search bar above) or in a Layout Section, such as a Header, Page Title Bar etc.

Add A Search Widget – You can add a Search Widget to any Avada Widget Ready area (like a sidebar or footer) or anywhere in your content using the Widget Element.

Enable the Search Icon on the Main Menu (Legacy method) – In the Global Options, at Avada > Options > Main Menu, there is an option to enable a Main Menu Search Icon. This places a search icon at the far right of your existing main menu. This is only availble when not using Avada Layouts.

Use the Search Bar Option in a Page Title Bar (Legacy method) – If you use a Page Title Bar, you can replace the Breadcrumbs with a Search Bar, either globally at Avada > Options > Page Title Bar > Breadcrumbs / Search Bar, or on a page by page basis in the Page Title Bar tab of the Avada Page Options. Again, this is only availble when not using Avada Layouts.,Avada Special Menu Item – SearchWhen using Avada Layouts, and the Menu Element, you can add an Avada Special Search Menu Item to your WordPress menu, and it will display via the Menu Element.,Search ElementThe Search Element is perhaps the most versatile way to add search functionality to your website. See the Search Element documentation for more details.,Search WidgetYou can also add search functionality to your site through the use of widgets. The Search Widget can be added to any Widget Ready Area in Avada, such as sidebars or footers, or indeed anywhere in your content with the Widget Element. There is also a Product Search Widget if you have WooCommerce installed.,Live SearchThe settings for Live Search can be found in the Search Element, and in the Global Options at Options > Search > Search Form tab. If you turn it on, you will see many options underneath it to control its appearance and functionality. You can set a minimal Character count for it to kick in, limit the number of posts the live search will suggest, control the height of the Live Search Results Container, and control whether the featured image and post type are displayed in the results.
Results show as soon as the minimum number of characters is reached (see image below). However, if the user hits Enter after they type, the search page will load instead.,Global OptionsThese are found in the Global Options, at Avada > Options > Search.
Search Form Options
Limit Search Results Post Type – Turn on to limit the search results to specific post types you can choose.

Search Results Content – Controls the type of content that displays in search results. This is a multi-select option. Choices are Pages, Posts, Portfolio Items, FAQ Items, WooCommerce Products, and Event Calendar Posts.

Limit Search to Post Titles – Turn on to limit the search to post titles only.

Search Form Design – Controls the design of the search forms. Choose from Classic or  Clean.

Enable Live Search – Turn on to enable live search results on the menu search field and other search forms.

Live Search Minimal Character Count – Set the minimal character count to trigger the live search.

Live Search Number of Posts – Controls the number of posts that should be displayed as search result suggestions.

Live Search Results Container Height – Controls the height of the container in which the search results will be listed. In pixels.

Live Search Display Featured Image – Turn on to display the featured image of each live search result. Choose from Yes or No.

Live Search Display Post Type – Turn on to display the post type of each live search result. Choose from Yes or No.
See The Search Form OptionsSearch Page Options
Search Results Layout – Controls the layout for the search results page. Choose from Large, Medium, Large Alternate, Medium Alternate, Grid, or Timeline.  

Number of Search Results Per Page – Controls the number of search results per page.

Search Pagination Type – Controls the pagination type for the search results page.

Number of Columns – Controls the number of columns for grid and masonry layouts. IMPORTANT: Masonry layout does not work with 1 column. 

Column Spacing – Controls the column spacing for search results. In pixels.

Search Content Display – Controls if the search results contents display as an excerpt or full content or are completely disabled. Choose from Excerpt, Full Content, or No Text.

Search Excerpt Length – Controls the number of words (or characters) in the search results excerpts. 

Search Strip HTML from Excerpt – Turn on to strip HTML content from the excerpt for the search results page. 

Featured Images for Search Results – Turn on to display featured images for search results.

Search Results Meta – Select the post metadata you want to be displayed in the individual search results. Possible metadata options are Author, Date, Categories, Comments, Read More Link, Tags, and Post Type.

Search Field Position – Controls the position of the search bar on the search results page. Choose from Above Results, Below Results, or Hide.
See The Search Page Options

Page Title Bar Options

Page Title Bar Options

The Page Title Bar is a highly customizable horizontal bar that sits directly below the header and contains a range of information, from the page title, as well as breadcrumbs, or a search bar. It can also have a background color or image and be of variable height. It is very versatile.
The Page Title Bar can be displayed or completely hidden globally, via the Avada Global Options, or you can display or hide it individually per page or post, using the Avada Page Options. And now, with Avada Layouts, you can build Custom Page Title Bars and display them either globally or locally with conditional logic.
Please see the How To Build A Custom Page Title Bar for more info on using Avada Layouts to create Page Title Bars, and read on, in this document, for the options of setting your Page Title Bar via the Global and Page Options.
Overview
Usage Example
Page Title Bar Global OptionsBreadcrumbs Global OptionsPage Title Bar Avada Page Options
Custom Page Title Bar
Usage ExampleThe Page Title Bar is not an Element; rather it is controlled via the Global Options and the Avada Page Options, or created with Avada Layouts. This article will look in depth at the options that are available for this often overlooked tool. The Page Title Bar has global options found in the Avada > Options > Page Title Bar panel, and individual options in the Avada Page Options, found on all pages and posts, that will override global settings.
We also have a document on Setting up the Page Title Bar, and a technical post on Page Title Bar Global Setting vs Page Setting.
The image below illustrates an example of the Page Title Bar in action on the Avada University Website. The 『About Us』 Page Title Bar has a background image for added visual appeal. Adding an image and other styling options can be set globally via the Avada Global Options or locally on a page/post basis via the Avada Page Options.
Page Title Bar Global OptionsBreadcrumbs Global OptionsPage Title Bar Avada Page OptionsPage Title Bar – Choose to show or hide the Page Title Bar. You can choose between Show Bar and Content, Show Content Only, or Hide bar.
Breadcrumbs / Search Bar – Choose to display the Breadcrumbs or the Search Bar or None.
Page Title Bar Headings – Choose to show or hide the page title bar headings.
Page Title Bar Text Alignment – Choose the title and subheading text alignment. Choices are Left, Center, or Right. If you choose Left or Right, the Breadcrumbs or Search Bar (if chosen) will display on the opposite side. If you choose Center, the Breadcrumbs / Search Bar will display below the Title.
Page Title Bar Heading Custom Text – Insert custom text for the page title bar main heading.
Page Title Bar Heading Font Size – In pixels. Leave empty for the default value.
Page Title Bar Heading Font Color – Controls the text color of the page title bar main heading. Leave empty for the default value.
Page Title Bar Heading Line Height – Valid CSS unit. Leave empty for the default value.
Page Title Bar Subheading Custom Text – Insert custom text for the page title bar subheading.
Page Title Bar Subheading Font Size – In pixels. Leave empty for the default value.
Page Title Bar Subheading Font Color – Controls the text color of the page title bar subheading. Leave empty for the default value.
Page Title Bar 100% Width – Choose 「Yes」 to have the page title bar area display at 100% width according to the viewport size. Select 「No」 to follow site width. Only works with wide layout mode.
Page Title Bar Height – Controls the height of the page title bar on desktop. Enter value including any valid CSS unit besides % which does not work for the page title bar, ex: 87px. Leave empty for the default value.
Page Title Bar Mobile Height – Controls the height of the page title bar on mobile. Enter value including any valid CSS unit besides % which does not work for the page title bar, ex: 70px. Leave empty for the default value.
Page Title Bar Background Color – Controls the background color of the page title bar. Hex code, ex: #000. Leave empty for the default value.
Page Title Bar Borders Color –  Controls the border color of the page title bar. Hex code, ex: #000. Leave empty for the default value.
Page Title Bar Background – Select an image to use for the page title bar background.
 Page Title Bar Background Retina – Select an image to use for retina devices.
100% Background Image – Choose to have the background image display at 100%.
Parallax Background Image – Choose a parallax scrolling effect for the background image.
Custom Page Title BarAs mentioned previously, with the new Avada Layouts, you can now also have completely custom Page Title Bars.
How To Build A Custom Page Title Bar Layout!

Single Post Title

Single Post Title

Single Post Title using H1 or H2For Avada 5.5 we have enhanced the single post header typography management. The post header for single posts, single FAQ, single portfolio, and WooCommerce single product pages will automatically default to H1 tag if for example, Theme Options > Page Title Bar > Page Title Bar Text is set to Hide.
If Theme Options > Page Title Bar > Page Title Bar Text is set to Show, then the post header will default automatically to H2. Below are the different scenarios when H1 and H2 tags will be used in a single post title:
The single post title will automatically change from H2 to H1 when the page title bar is disabled is totally disabled.The single post title will automatically default to H1 when page title bar is enabled and the Page Title Bar Text is set to > Show.The single post title will automatically change from H1 to H2 when the page title bar is enabled and the page title bar text is set to > Hide.
Single post extra section headings will automatically change to an H2 tag, when page title bar is disabled.
IMPORTANT NOTE
The automatic H1|H2 change for the post header is applicable to single posts, single FAQ, single portfolio, and WooCommerce single product pages. It does not apply to a Title Element added to post/page content manually and Events Calendar single post headers.Post Title Typography OptionsPost Title options are now updated and made into full sets in Avada 5.5 compared to fewer options in older versions. Post Title Typography settings controls the typography of all post titles including archive and single posts. Post Title Extras Typography settings controls the typography of single post title extras such as 「Comments」, 「Related Posts or Projects」 and 「Author Titles」. Please see below the options located in Avada > Theme Options > Typography > Headers Typography section.
Font Family – Illustrated as A. Controls the font family to be used.
Backup Font Family – Illustrated as B. Controls the backup font family to be used in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as C. Controls the font weight and style to be used.
Font Subsets – Illustrated as D. Controls the font subset to be used.
Font Size – Illustrated as E. Controls the size of the text on display.
Line Height – Illustrated as F. Controls the spacing between lines.
Letter Spacing – Illustrated as G. Controls the spacing between letters.
Font Color – Illustrated as H. Controls the color of the text.

Font Awesome Pro Integration

Font Awesome Pro Integration

Back in Avada 5.8, we introduced the much-requested feature of Font Awesome Pro integration. If you have opted for a Font Awesome Pro subscription, you can now get access to the full range of FA Pro icons to use on your site.
The Font Awesome Pro subscription includes a lifetime license for the icons and toolkit, plus yearly renewable access to new icons, software updates, services, and hands-on support. Read on for more details!
Enabling FontAwesome ProTo start using Font Awesome Pro, you just need to turn the feature on, and make sure your website is white-listed in your FontAwesome Account.
To start with, navigate to Avada > Theme Options > Advanced > Theme Features, and look for FontAwesome Pro. You can also just search for it in the Options search bar. Turn this to On and Save the Theme Options.
Whitelist DomainThe next step is to whitelist the domain of the website you』ve just added Font Awesome Pro to. Go to the CDN section of your Font Awesome account to do this. You can add up to 30 sites.
Choose Your SubsetsYou can also choose which Font Awesome icon subsets you want to load. You can add Light (Font Awesome Pro only), Solid, Brands and Regular. If you have FontAwesome Pro enabled, and all subsets turned on, you will have 7,020 FontAwesome icons available to you!
FontAwesome v4 CompatibilityThe final FontAwesome options allows you to enable or disable support for FontAwesome 4 icon code format. This is useful in the case where you might have some older FA4 icons handcoded in a site, for example something like:
Copy to Clipboard  1 Without FA4 compatibility, the old icons would not be displayed. If you are sure you don』t have any, you can leave this off.

How To Use Global Typography Sets In Avada

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.

Fusion Taxonomy Options For Archives

Fusion Taxonomy Options For Archives

Archives can be customized with the addition of new Avada Taxonomy Options. Sliders can now be assigned to archive pages as well as header background color, header transparency, page content padding and page title bar options. Please continue reading below for more info.
Avada Taxonomy OptionsOn your archives pages such as Post Categories, Portfolio Categories, etc. (please see list below for the the other taxonomies these options are available for), you can find Avada Taxonomy Options section. See this Avada Freelance Demo example using the Avada Taxonomy Options which was set up via Portfolio > Portfolio Categories > Avada Taxonomy Options.
Slider Type – Illustrated as A. Controls the type of slider to be displayed. Choose between No Slider, LayerSlider, Avada Slider, Slider Revolution, or Elastic Slider.
Select *Slider – Illustrated as B. Controls the unique name of the slider. This option will not show up if you choose No Slider for the 『Slider Type』 option. *This varies depending on the selected slider type.
Slider Position – Illustrated as C. Controls if the slider shows below or above the header. Only works for top header position. Choose between Default, Below, or Above. Default value comes from Theme Options > Header > Header Content > Slider Position.
Page Content Top Padding – Illustrated as D. Controls the top padding of the page content in pixels. Default value comes from Theme Options > Layout > Page Content Padding.
Page Content Bottom Padding – Illustrated as E. Controls the bottom padding of the page content in pixels. Default value comes from Theme Options > Layout > Page Content Padding.
Header Background Color – Illustrated as F. Controls the background color for the header using hex code or rgba value.
Page Title Bar Background – Illustrated as G. Controls an image to use for the page title bar background. This can be set globally from Theme Options > Page Title Bar > Page Title Bar > Page Title Bar Background Image.
Page Title Bar Height – Illustrated as H. Controls the height of the page title bar in pixels. Default value comes from Theme Options > Page Title Bar > Page Title Bar > Page Title Bar Height.
Page Title Bar Mobile Height – Illustrated as I. Controls the height of the page title bar on mobile in pixels. Default value comes from Theme Options > Page Title Bar > Page Title Bar > Page Title Bar Mobile Height.
List of Taxonomies these options are available for:Post CategoryPortfolio CategoryPortfolio TagsPortfolio SkillsEvent CategoryEvent TagsFAQs CategoryProduct CategoryProduct TagTopic TagHow To Hook Avada Taxonomy Options Into Your Own Custom Post TypesIn order to have our taxonomy options added to certain or all taxonomies for a CPT, the fusion_tax_meta_allowed_screens filter can be used. The filter can be hooked on through the functions.php of a child theme or within a plugin.
Usage example:
Copy to Clipboardadd_filter( 'fusion_tax_meta_allowed_screens', 'add_taxonomy_options_to_cpt_taxonomies' );

function add_taxonomy_options_to_cpt_taxonomies( $taxonomies ) {
$taxonomies[] = 'slug_of_my_cpt_taxonomy_1';
$taxonomies[] = 'slug_of_my_cpt_taxonomy_2';

return $taxonomies;
}​x 1add_filter( 'fusion_tax_meta_allowed_screens', 'add_taxonomy_options_to_cpt_taxonomies' );2​3function add_taxonomy_options_to_cpt_taxonomies( $taxonomies ) {4    $taxonomies[] = 'slug_of_my_cpt_taxonomy_1';5    $taxonomies[] = 'slug_of_my_cpt_taxonomy_2';6​7    return $taxonomies;8}

Image Rollovers

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.

Global Footer Options

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.