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.

toTop Button

The toTop Button has been around a while in Avada, unobtrusively assisting you back to the top of the page when required. But with Avada 5.9, we have added some enhancements to the script, to make this feature even more useful to you.
Enable/Disable toTopThe toTop Button can be enabled/ disabled at Fusion Theme Options > Advanced > Theme Features. It can be enabled/disabled separately for desktop and mobile, or for both.
toTop SettingsThe new configuration options for the toTop Button can be found at Extra > Miscellaneous.

ToTop Button Position – You can now choose the position of the toTop button. Choose from Left, Left Floating, Right, or Right Floating. The Floating options lift the button off the base of the viewport to leave the button floating on the page.

ToTop Border Radius – You can now control the border radius of the ToTop button. For non-floating layouts, the border radius will only apply to the upper corners. In pixels. 0px would create an entirely square button, while 50px would create a circular button.

ToTop Show on Scroll Down Only – You can now also choose to show the ToTop button on scroll down only. Otherwise it will always show if the page is scrolled.

The Avada Visibility System

In Avada, you will find an intuitive Visibility System for all Elements that you use on the page. This easy to use system allows you to choose when Elements are displayed, and when they are hidden, based on the screen size they are being viewed on.
For example, if you want a section of your page to only display on mobile devices and not on desktops, then our Visibility System lets you do that effortlessly. Continue reading below to learn more about the Avada Builder』s Visibility System.,OverviewContainer, Column and Element Visibility
How To Use The Visibility Options
Element Responsive Breakpoints
Element Sticky Visibility Options,Container, Column, and Element VisibilityThe 『Visibility』 option is available to use in all Elements, including Containers and Columns. This option is called 『Container Visibility』 for Containers, 『Column Visibility』 for Columns, and 『Element Visibility』 for all other Elements. By default, visibility is set on all three screen sizes, but you can enable or disable any number of screen sizes in the option. Continue reading below to learn more about how to use this option.
How To Use The Visibility OptionsStep 1 – On any Container, Column, or Element, locate the 『Element Visibility』 option and select which screens you』d like to display the element for. You can choose more than one option, or all of them.
Step 2 – Each of these options have a Custom Width Setting which you can set. To learn how, please refer to our 『Custom Width Settings』 section below.
Step 3 – Once finished, click 『Save』.
IMPORTANT NOTE – Container Visibility option will be disabled/hidden when using the 100% Height option for containers.767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element Responsive BreakpointsAll three size settings have an Element Responsive Breakpoint, which you can set in the Avada > Global Options > Responsive tab. This allows you to set the responsive breakpoint for the small, medium, and large screens and determine when your site will switch to a different screen visibility. For example, if you set 640 pixels for the Small Screen』s custom width settings, then when your site is viewed on a resolution that is equal or less to 640 pixels, any element with the 『Small Screen』 option enabled will display on your site.
How To Set Element Responsive BreakpointsStep 1 – Navigate to the Avada > Global Options > Responsive panel.
Step 2 – On this panel, locate the 『Element Responsive Breakpoints』 section.
Step 3 – Set the Small Screen』s custom width by entering a value in the text box, or by dragging the slider. When your site is viewed on a resolution that is less than or equal to the width set on this field, then the small screen visibility will take effect.
Step 4 – Set the Medium Screen』s custom width by entering a value in the text box, or by dragging the slider. When your site is viewed on a resolution that is less than or equal to the width set on this field, then the medium screen visibility will take effect.
Step 5 – The Large Screen』s custom width is automatically filled in depending on what width you』ve entered for the Medium Screen option. When your site is viewed on a resolution that is greater than the Medium Screen width, then the large screen visibility will take effect.
Step 6 – Once finished, click 『Save Changes』.,Element Sticky Visibility OptionAs of Avada 7.0, you will also find the Element Sticky Visibility option in some Elements. This is a dependent option which only appears if the parent Container is set to Sticky. It allows you to determine when the Element will be visible, based on whether the Container it is in, is in Sticky mode or not. You can choose from Normal and Sticky visibility, and by default, they are both selected, meaning the Element is always visible. But if you deselect the Normal option, the Element will ONLY be visible when the parent Container is in Sticky mode.
This can be used in a number of creative ways, particularly with Header Layouts, but generally as well. The Column Element has this option as well, and in the above example with an individual Sticky Container, you would set the Column Element Visibility to only sticky, so the entire Column would only display when the parent Container went into Sticky mode.
An example of this technique can be seen in New Header 5, one of the Prebuilt Headers for Layouts. In this Layout, as you can see below, there are two Containers, with the second one being set to Sticky. The two outside Columns on the second Container have their Element Visibility set to Sticky only, and so in the normal state of the Container, these two Columns, and the Elements inside them, are not visible, but when the Sticky Container activates, the logo and the Woo Menu suddenly appear in the Container.
Currently, this option is only available for the Columns, Nested Columns, Alert, Breadcrumbs, Button, Icon, Image, Menu, Search, Separator, Sharing Box, Social Links, Title, and Text Block Elements.
Normal Container
Container in Sticky Mode

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

The 100% Width Page Template

Of all the page templates in Avada, the 100% Width page template is is the most flexible. Let』s just look at how this template works and what options there are with full width content.
This template might seem counter intuitive at first. If you add a Container with a full width Column, and then add some content inside the Column, like a Title or Text etc, you might be surprised to see that it is limited to the Site Width. But the template is designed with full flexibility in mind, so it』s possible to have just parts of your content going full width, or all of it if you prefer.
IMPORTANT NOTE: Sidebars are not supported on the 100% width template. If you require sidebars, then you can use the 『default』 template, or you can insert the Widget Area Element if you need to show a sidebar or widget section on the 100% width template.Container BackgroundThe key is the Container. If you add a color or background image to a Container when using this page template, the color or image will stretch full width. This is automatic with this template.
In the image below, you also can see the padding indicators. The Left/Right padding is global – coming from the 100% Width Padding setting on the Layout tab of the Fusion Theme Options. Note that the height of a Container is determined by either the internal content or padding. Here, there is no internal content as yet, and the Top/Bottom padding has been set to 80px on this specific Container.
Internal ContentThe internal content of the Container though is entirely up to you. By default, it stays limited to Site Width, as this is the default behavior for Containers, but there is an option in the Container Options for the Interior Content Width to be set to 100% Width. This will allow the interior content added to any Columns inside this Container to spread out to the edges of the browser, limited only by the 100% Width Padding value set in Theme Options > Layout, and/or any manual left/right padding you apply to the Column.
In the image below, the Interior Content Width has been set to 100% Width, and the Left/Right padding adjusted on this specific Container to 100px, while the Top/Bottom padding has been adjusted to 180px. See the Adjusting Margins & Padding in Avada Live doc for more info on how to do this.
SummaryThese two aspects of the 100% Width page template are all you need to control the Full Width Elements on your page.
By default, remember the Internal Content of Containers is limited to Site Width, even when using the 100% Width page template. What is automatic is that Containers that have background colors or images, display these at the full 100% width.
Internally, to get your content to go full width, all you need to do is enable the setting in the individual Container Options for the Interior Content Width to be 100% Width. Then you can fine tune your layout with your global or local padding options.
With this template, you can achieve a great 100% page layout, with full control over all elements.

Site Width Options

Avada includes various options that control the overall Site Width, Content and Sidebar Width. You can also choose between a boxed or wide layout for your pages. All these options are located under Appearance > Theme Options > Layout. To learn more about these various options, keep reading below.
Layout OptionsThe Global Options Layout section at Avada > Options > Layout, makes it easy for you to manage your site』s layout type, width, padding and sidebar layouts. Choose between Boxed and Wide layouts, set page content padding, 100% width pages』 left and right padding, and adjust the top and bottom margins for all column sizes and single and dual sidebar layouts.
Layout – Choose between Boxed or Wide for your site. These are global Theme Options and can be overridden by individual page Fusion Options on a page by page basis. The Boxed option will restrict your site』s width to the value set in the site width option, using any valid CSS unit for example: 1170px – In the boxed mode, it is possible to set a background image, background pattern or a background color for your site. The Wide option will display your site at the width set in the site width option, using any valid CSS unit for example: 1170px or 100% width of the browser window.
Site Width – This option allows you to set the overall site width in the boxed or wide layout. You can use a pixel value (px), or a percentage (%). If you』d like your site to span the full browser width enter 100% as a value. If you』d prefer a set size, you can enter something like 1170px. To further customize your site』s layout, we also have left and right padding options for the Header, Footer and Main Content Area found in Theme Options.
Boxed Mode Top/Bottom Offset – This option controls the top/bottom offset of the box in which the entire page is in boxed mode
Boxed Mode Offset Scroll Mode – Choose between Framed scrolling or Full scrolling. Framed scrolling will always make the top/bottom offset of the box visible when scrolling. Full scrolling will also scroll the offset along with the page
Boxed Mode Shadow Type – This option controls the type of the shadow the boxed mode will show.
Page Content Padding – These options control the top and bottom padding for all your page content. To learn more about this option, please read our 『Page Content Padding』 article.
100% Width Left/Right Padding – This option controls the left and right padding for page content when using 100% site width or 100% width page template. Enter value including any valid CSS unit, for example: 30px
Single and Dual Sidebar Layout OptionsHere you can control single and dual sidebar layouts for your site.
Single Sidebar Width – This option controls the width of a single sidebar on all pages. Enter value including any valid CSS unit, for example: 23% – Click here to see a demo example of a single sidebar layout.
Single Sidebar Gutter – This option Controls the space between the main content and a single sidebar.
Dual Sidebar Width 1 – This option controls the width of sidebar 1 when dual sidebars are present. Enter value including any valid CSS unit, for example: 21% – Click here to see a demo example of a dual sidebar layout.
Dual Sidebar Width 2 – This option controls the width of sidebar 2 when dual sidebars are present. Enter value including any valid CSS unit, for example: 21% – Click here to see a demo example of a dual sidebar layout.
Dual Sidebar Gutter – This option Controls the space between the main content and dual sidebars.

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.

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

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.

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