How To Use FileBird Pro With Avada

How To Use FileBird Pro With Avada

FileBird Pro is a premium WordPress media library folders & file manager tool developed by NinjaTeam. FileBird is is bundled with the Avada Website Builder and 100% free with your purchase of Avada via Themeforest. It has a well designed, simple interface, it』s easy to use and comes with all the features you need. Read below to find out all you need to know about this fantasic free premium plugin, and watch the video for a visual overview.,What is FileBird?FileBird is a WordPress media management plugin that gives you the ability to create virtual folders and subfolders and help you organize your website media content effectively, without breaking any permalinks.
How does FileBird work?Free with your purchase of the Avada Website Builder, let』s take a closer look at how this plugin works and what it has to offer when it comes to sorting out that pesky mess in the WordPress media library.
Full, Single Toolbar Control in your Sidebar with Drag and DropWith FileBird』s resizable, sidebar toolbar, provides you with the ultimate control over the folders you created to help manage your uploaded files, uploading new files, move existing files and rearrange folders, all with drag and drop.
Single Toolbar Control View:Drag & Drop Feature:Easy MigrationImport and seamlessly synchronize media structure from Enhanced Media Library, WP Media Folder by JoomUnited, WordPress Media Library Folders by Max Foundry and Real Media Library Folders.
Powerful Search and Sort FeaturesNot only does FileBird Allow you to sort and search files and folders in it』s media library sidebar, it allows you to do the exact same sort and search in the FileBird Browser when editing a page or post.
Search Option:Filter Option:Unlimited Folders and SubfoldersBoost productivity and multitasking and manage your media content by categorizing them in folders and subfolders. The full FileBird offers unlimited folders and nested folders, however, the Ninja Team also created a FileBird Lite version that supports up to 10 folders, including subfolder, for those who have less requirements, but still need to group their WordPress library media content.
Create Unlimited Folders & Subfolders:Bulk Select and DeleteBulk select is a feature that gives you the means to easily select multiple files and folders so you can move then or to delete folders. Deleting folders moves your files to the uncategorized folder, keeping your media content intact.
Bulk select and Delete Feature:Smart Sidebar & NavigationWithin the stratified sidebar, you can right-click to create, rename, cut, paste or delete any folder.
Smart Context Menu:Many Languages And RTL SupportedFileBird supports the most popular languages such as English, Spanish, Italian, French, Germany, etc., and fully supports RTL languages such as Hebrew, Arabic, and more.
Quick Overview
Easy Migration

Powerful search and sort options

Create unlimited folders and subfolders

Drag and Drop

Bulk select files or folders

Intuitive User Interface

Smart Context Menu

RTL Support
SummaryAre you a website administrator? A freelancer? Do you have hundreds or thousands of website media files to manage? The answer to the clutter-free organization for your Avada website is FileBird.

How To Update The Bundled Premium Plugins

How To Update The Bundled Premium Plugins

As of Avada 5.4.1, all bundled premium plugins can be updated independently and outside of an Avada update. Please continue reading below for further information.
Premium Plugins Update ProcessWhen you purchase Avada, there are a number of Premium plugins that are included for your use. Your purchase of the Avada Website Builder, however, does not give you an individual license for the individual premium plugins. The terms and conditions for bundled plugins are set out by Envato.
Previously, to update any of the premium plugins, you had to wait until the next theme update, when the bundled plugins would be updated. But with Avada version 5.4.1 and higher, you now have the possibility to update bundled premium plugins outside of Avada updates.
Whenever a new version of one of the bundled Premium plugins is released, shortly after, we provide the plugin update via the Avada > Plugins / Add-ons page. To update the premium plugins, simply go to Avada > Plugins / Add-ons, and click the 『Update』 button. Before updating premium plugins, please always make sure Avada is on the latest available version.
Plugin Installation IssuesIf for any reason you』re unable to update / download plugins which are provided by Avada, there is an alternative method for getting the plugin files directly. Just go to your Support Account, then switch to the Product Registration tab. From there, fill in the text field with your Personal Token Key and click 『Submit Code』. You』ll see a success notification and buttons to download the Avada Builder, Avada Core, Fusion White Label Branding, Convert Plus, Advanced Custom Fields PRO, LayerSlider WP, and Slider Revolution plugins.
If you have any trouble with the above steps, please create a support ticket and one of our support members will assist you further.
Related Links/ Resources
Avada Required Plugins

Avada Bundled Plugins

How To Install the Required and Bundled Plugins Video

Purchase Codes For Premium Sliders

Avada Builder Plugin

Avada Builder Plugin

The Avada Builder plugin, renamed from Fusion Builder in Avada 7.0, and one of the two required plugins with Avada, is our very own stand-alone page builder plugin, packed with innovative features and options. With Avada 6.0 and above, Avada Builder now comes in two interfaces in the one plugin, the traditional back-end wireframe editor, and the new front-end Avada Live.
As is the case with all plugins, you will have to install and activate it first in order to use it. To learn how, please continue reading below.
How to Install And Activate The Avada Builder PluginStep 1 – To be able to install the required plugins, you must first register Avada. See the How To Register Avada doc for details on that simple process.
Step 2 – Once you have registered Avda, navigate to the Avada > Plugins-Add-ons tab.
Step 4 – Here you will see the two required plugins, Avada Core and the Avada Builder. You need to install the Avada Core plugin before installing the Avada Builder plugin.
Step 5 – On the Avada Core plugin, hover over the plugin』s image and click the 『Install』 button. After the install completes and the plugin activates, click the 「Return to Avada Plugins」 link.
Step 6 – Back on the plugins page, hover over the Avada Builder』s image and click the 『Install』 button. After the install completes and the plugin activates, click the 「Return to Avada Plugins」 link.
Once finished, you can now use the Avada Builder throughout your site, on any post types you enable in the Avada Builder Options.
IMPORTANT NOTE: The Avada Builder user interface is not active by default when opening a page or post. However, you can change this globally and have the Avada Builder always active for pages and posts by going to Options > Builder Options > Avada Builder Auto Activation from the Avada Dashboard.,Updating Avada Builder with Earlier Versions of AvadaUpdating to Avada 5.0+In the Avada > Plugins / Add-ons section you will see Avada』s two required plugins, the Avada Core and the Avada Builder plugin. The 『Install』 button for the Avada Builder plugin is disabled to ensure that the Avada Core plugin is updated first. Doing it in this order is very important and will prevent fatal errors on your site. If you accidentally installed the Avada Builder plugin before updating Avada Core, please see our 『Troubleshooting』 section below.
New Avada 5.0+ InstallIn the Avada > Plugins section you will see Avada』s two required plugins, the Avada Core and the Avada Builder plugin. The installation and activation order of the the Avada Core and Avada Builder plugin does not matter, provided it』s a fresh install and you』re not updating from a later version. Make sure both are active for Avada to work correctly.,TroubleshootingIf you have updated to Avada 5.0+ and somehow managed to install and activate the Avada Builder plugin before updating the Avada Core plugin, you may experience fatal errors on your site. To learn how to remove these errors and to update correctly, please continue reading below.
Step 1 – Log into your server using FTP and navigate to your WordPress installation』s wp-content/plugins folder.
Step 2 – Locate the Builder plugin folder named fusion-builder and temporarily rename it to something else. For example, fusion-builder-dis.
Step 3 – After that is done, log into the WP Dashboard of your site and navigate to the Avada > Plugins tab. Locate the Avada Core plugin and update accordingly.
Step 4 – Once more using FTP, navigate to the wp-content > plugins folder and rename the Avada Builder plugin folder back to it』s original name, fusion-builder.
Step 5 – Lastly, log into your site』s WP Dashboard and navigate to the Avada > Plugins tab. You will see the Avada Builder plugin is automatically enabled.

How To Use HubSpot With Avada

How To Use HubSpot With Avada

HubSpot is an inbound marketing and sales cloud-based software suite, and their free plugin has recently been added to Avada』s recommended plugins. For more details on HubSpot, please see our informative blog post.
If you are keen to take advantage of this integrated CRM, you need to both install the plugin, and connect, or set up, a HubSpot account. Setting up HubSpot with Avada is very easy, so read on.
Install The PluginThe first step is to install the free HubSpot plugin. This could not be easier. Simply head to the plugins page (Avada > Plugins) and click once on HubSpot to install and activate the plugin.
Connect Your AccountOnce you have installed the plugin, you will be redirected to a page where you can either connect to an existing HubSpot account, or you can create a new one.
Once you have connected your account, you』re all set up. You will see the HubSpot Dashboard, and be able to implement Popup Forms, add HubSpot Forms and Live Chat to your site, and your HubSpot account will be fully intergated with your website.
HubSpot is an awesome CRM, and integrating it with your Avada website gives you a marketing powerhouse. Read our How To Setup And Use HubSpot Live Chat With Avada doc for more information on starting to implement some of the available HubSpot tools.
The HubSpot Plugin Free Tools and CRMUtilize HubSpot』s free marketing, sales, service, and CRM tools to help grow your online business.
Free CRM ToolsFree Marketing ToolsFree Sales ToolsFree Customer Services ToolsFree CRM Tools
Contact Management: Build views and run automated actions to manage your contacts and data easily.

Contact Website Activity: Get insight into what a contact is doing on your website. See page views, form submissions, sales activity, and more, all in one place.

Companies: Store records for every company in your database. View all your company details and communications in a single place.

Deals: Store, track, manage and report on the deals (sometimes referred to as 「opportunities」) your sales team is working.
Tasks & Activities: Store, track, manage and report on the tasks and activities that make up your relationships with customers.Company Insights: See useful insights about companies you』re dealing with appearing in your database. So your sales team can spend more time selling and less time digging.
Gmail and Outlook Integration: Connect HubSpot CRM to your Gmail or Outlook inbox to send email from the CRM, set up a shared team email account, and access dozens of other useful, time-saving tools.

HubSpot Connect Integrations: Explore the integrations library and connect your HubSpot account to other tools that you love to use.

Custom Support Form Fields: Add custom fields to your support forms to gather the right information for your team, and generate tickets.

Prospects: Use the prospects tool to see which companies are visiting your site and see any available insights about them too.

Ticketing: Log customer issues as tickets. They can then be assigned to team members, organized and prioritized, and tracked in a central location.

Forms: Add pop-up, embedded, and collected forms to any web page tracked in your HubSpot account to gather the contact details that your business needs.

Ad Management: Connect accounts from supported ad networks to your HubSpot account. Create audiences from your HubSpot CRM and see which ads are generating customers.

Conversations Inbox: Set up a shared inbox — for all incoming email and live chats — that your whole team can work from efficiently managing 1-to-1 communications at scale.

Reporting Dashboards: See detailed metrics on sales activity and performance. Use the data to know how you』re doing and where to improve.

Email Tracking & Notifications: Track one-off emails to contacts. Receive real-time notifications when emails are opened or clicked.

Email Templates: Save and reuse your best performing emails and share them with your team for a faster and more consistent way to communicate with prospects.

Canned Snippets: Create a bank of reusable answers for prospects』 most frequently asked questions that you can quickly add to live chats or emails to save time and help prospects faster.

Documents: Build a library of sales documents that you can easily share with prospects. Get insight into when and where prospects are most engaged.

Calling: Call prospects through VOIP from inside your HubSpot account. Calls can be recorded and auto-logged on the contact record for future reference.

Meeting Scheduling: Share a link with customers that lets them see when you』re free and book meetings with you, cutting out those tedious 『what time works best for you』 emails.

Messenger Integration: Automatically capture contact information, have two-way communications with your audience, create chatbots, and report on chat volume through Facebook Messenger.
Free Marketing Tools
All Features of HubSpot CRM: Marketing Hub is built on top of HubSpot CRM, giving you access to all the tools you see in the HubSpot CRM.

Forms: Add pop-up, embedded, and collected forms to any web page tracked in your HubSpot account to gather the contact details that your business needs.

Email Marketing: Send bulk emails that are tested and optimized for different devices and inboxes. Create better emails with a drag and drop editor and personalization tokens.

Ad Management: Connect accounts from supported ad networks to your HubSpot account. Create audiences from your HubSpot CRM and see which ads are generating customers.

List Segmentation: Create static or dynamically updating contact lists based on various criteria using HubSpot CRM properties. Use them to power more personalized content in email, on the web, and more.

Conversations Inbox: Set up a shared inbox — for all incoming email and live chats — that your whole team can work from efficiently managing 1-to-1 communications at scale.

Team Email: Connect team-wide email addresses to your Conversation inbox. Turn incoming emails into tickets, or send them straight into your shared inbox. No more questions slipping through the cracks.

Live Chat: Have 1-to-1 live chats with visitors as they browse your site, and give the information they need to turn them into qualified leads.

Conversational Bots: Use a bot to connect visitors to the right rep, route visitors to the most helpful content, and scale 1-to-1 communications.

Mobile Optimization: Create content that looks good on multiple device types, and see it before it goes out.

User Roles: Give each team member using your account the right permission levels for different functionality.

Reporting Dashboards: Get in-depth, customizable data on your marketing performance, so you know how you』re doing and where to improve.

Messenger Integration: Automatically capture contact information, have two-way communications with your audience, create chatbots, and report on chat volume through Facebook Messenger.
Free Sales ToolsAll Features of HubSpot CRM: Sales Hub is built on top of HubSpot CRM, giving you access to all the tools you see in the HubSpot CRM.
Live Chat: Chat 1-to-1 with visitors as they browse your site, and give them the information they need about your business.

Conversational Bots: Scale live chat using bots. They can qualify leads, collect and store contact data, book meetings, and send leads to the right salesperson.

Team Email: Connect team-wide email addresses to your Conversation inbox. Turn incoming emails into tickets, or send them straight into your shared inbox. No more questions slipping through the cracks.

Conversations Inbox: Set up a shared inbox — for all incoming email and live chats — that your whole team can work from efficiently managing 1-to-1 communications at scale.

Calling: Call prospects through VOIP from inside your HubSpot account. Calls can be recorded and auto-logged on the contact record for future reference.

Email Scheduling: Write one-to-one prospect emails, and schedule them for the right send and receipt time.

Email Tracking & Notifications: Track one-off emails to contacts. Receive real-time notifications when emails are opened or clicked.

Email Templates: Save and reuse your best performing emails and share them with your team for a faster and more consistent way to communicate with prospects.

Canned Snippets: Create a bank of reusable answers for prospects』 most frequently asked questions that you can quickly add to live chats or emails to save time and help prospects faster.

Documents: Build a library of sales documents that you can easily share with prospects. Get insight into when and where prospects are most engaged.

Meeting Scheduling: Share a link with customers that lets them see when you』re free and book meetings with you, cutting out those tedious 『what time works best for you』 emails.

Reporting Dashboards: See detailed metrics on sales activity and performance. Use the data to know how you』re doing and where to improve.

Deal Pipeline: Keep track of deals and predict future revenue based on how likely they are to close.

Messenger Integration: Automatically capture contact information, have two-way communications with your audience, create chatbots, and report on chat volume through Facebook Messenger.
Free Customer Service ToolsAll Features of HubSpot CRM: Service Hub is built on top of HubSpot CRM, giving you access to all the tools you see in the HubSpot CRM.
Ticketing: Log customer issues as tickets. They can then be assigned to team members, organized and prioritized, and tracked in a central location.

Live Chat: Chat directly with customers through a live chat widget on your website, giving them the help they need, when they need it.

Conversations Inbox: Organize customer questions, including live chats and emails, in a shared inbox. Accessible to your entire team so you can manage 1-to-1 customer communications at scale.

Calling: Call prospects through VOIP from inside your HubSpot account. Calls can be recorded and auto-logged on the contact record for future reference.

Conversational Bots: Use a bot to create tickets and send visitors to the right service rep, or knowledge base article. Improving the efficiency of live chat and helping you to scale 1-to-1 communications.

Team Email: Connect team-wide email addresses to your Conversation inbox. Turn incoming emails into tickets, or send them straight into your shared inbox. No more questions slipping through the cracks.

Canned Snippets: Create a bank of reusable answers for prospects』 most frequently asked questions that you can quickly add to live chats or emails to save time and help prospects faster.

Email Templates: Save and reuse your most helpful emails. Share them with your team for faster and more consistent customer communication.

Meeting Scheduling: Share a link with customers that lets them see when you』re free and book meetings with you, cutting out those tedious 『what time works best for you』 emails.

Tickets Closed Reports: Measure your customer service efforts. Get in-depth reports that show volume, category, and response times.

Rep Productivity Reports: See productivity and response times broken down by rep, and use the data to spot high performers and who needs help.

Time-to-close Reports: See how long customers are waiting for their questions to be solved, and use the data to improve response times and processes.

Reporting Dashboards: Get data on your marketing, sales, and customer service performance. Use the data to know how you』re doing and where to improve.

Email Tracking & Notifications: Track one-off emails to contacts. Receive real-time notifications when emails are opened or clicked.

Documents: Build a library of resources and collateral that you can easily share with customers. Get insight into when and where they are most engaged.

Messenger Integration: Automatically capture contact information, have two-way communications with your audience, create chatbots, and report on chat volume through Facebook Messenger.

How To Use ACF Pro With Avada

How To Use ACF Pro With Avada

Advanced Custom Fields Pro is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra Custom Fields include repeatable blocks, intuitive galleries, custom settings pages and reusable fields, and allow you to build websites faster and educate your clients quicker.
As the plugin name indicates, it is a pro tool that can be a huge aid in customizing the Avada experience even further, to anything you envision. Below we provide you the direct link to the ACF PRO docs the developer maintains, and then below that, we offer a real use example of the plugin.
ACF Pro DocumentationACF Pro is a third party plugin, and is fully maintained by the creator Elliot Condon. ThemeFusion is not affiliated with the ACF PRO Plugin – we only bundle it with our theme so our customers have the ability to use it. Therefore, all documentation for the plugin can be found on the vendor』s website. Please click the button to be directed to the full online documentation resources.
ACF Pro DocumentationPlugin UpdatesACF Pro is an Avada bundled plugin and as of Avada 5.4.1, it can be updated independent and outside of an Avada theme update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Example Usage of the pluginSuppose you want to add more fields to the Project Details of Avada』s single portfolio posts. ACF Pro will make that very easy. As an example we will add a new image field, that let』s you present newly created logos of your clients and a file upload field, where a detailed project description could be downloaded as PDF.
Please see the steps below for a short How To. On the right you can see screenshots for the most important steps and what it should look like for you.
Step 1 – In your WP Dashboard click on Custom Fields > Add New. Create a field group and set a name, e.g. Portfolio Fields, and in the Location rules set the post type where the field options should show to Portfolio.
Step 2 – Click the + Add Field. On the opening UI, add a label, e.g. New Logo. The field name will be auto inserted, but you can also change it to what you prefer. Set the Field Type setting to Image and the Return Value setting to Image ID. The image type will make sure that on portfolio post edit screens you』ll find a media dialog button, so that you can add/upload an actual image. And the return value is, what will be used in your custom template later on, that renders the newly added fields.
Step 3 – Add second field, assign e.g. the name Project Description to it, set the Field Type setting to File and the Return Value setting to File URL. This will create a file dialog field and in the template we』ll create below, the actual URL to the file will be returned.
Step 4 – Save the newly created field group.
Step 5 – Open any portfolio post and look for the newly created Portfolio Fields meta box below Fusion Builder. This will be displayed on all portfolio post edit screens now, and only on those, as we limited the field group to the Portfolio post type. From the option dialogs choose a logo image and also a file. Then save the post.
Step 6 – Next we have to create the template to actually render our newly created and populated fields. In order to do that we』ll use the
Copy to Clipboardfusion_after_portfolio_side_content 1fusion_after_portfolio_side_content action hook. You can put the code snippet below to your child theme』s
Copy to Clipboardfunctions.phpxxxxxxxxxx1 1functions.phpCopy to Clipboardadd_action( 'fusion_after_portfolio_side_content', 'add_fields_to_single_portfolio_post' );
function add_fields_to_single_portfolio_post() {
$imgae_id = get_field( 'new_logo' );
$image = wp_get_attachment_image_src( $imgae_id, 'full' );
?>

<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="" alt="" />

<a href="" title="" >

6 7

8

9 <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-orig-src="" alt="" />10

11 12​13 14 15

16

17 <a href="" title="" >18

19 20​21 <?php22}What the snippet does is, to retrieve the contents of our custom fields with the
Copy to Clipboardget_field()xxxxxxxxxx1 1get_field() function (this is a function native to ACF Pro plugin, see more info here). Then it loads the actual image of our logo field with WP native functions and renders it with the correct markup for the Project Deatils fields. Similar is done for the detailed project description, but this time we render a link tag, as our fields holds a PDF.
Step 7 – Load the front end of the portfolio post to which you have already added field values and you can see, that our two new fields have correctly been added.
Step 8 – Now you can add field values to all your other portfolio items.
Before custom field addition
Steps to setup new custom fields
After custom field addition

The Avada Visibility System

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

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.

How To Use The Performance Wizard

How To Use The Performance Wizard

Introduced in Avada 7.4, the Performance Wizard is a step-by-step wizard to help you optimize the performance of your Avada website. it can be found at Avada > Performance from the WordPress Dashboard, or Maintenance > Performance Wizard from the Avada Dashboard. Please read on for more information about how the Wizard can help you, and watch the video below for a visual overview.
IMPORTANT NOTE: The Performance Wizard should only be run once the website is complete.,1. StartThis screen is just where you begin the Performance Wizard. At the top of the page, there is a Run PageSpeed Insights buton, which you can use to do a before and after comparison of your page loading times.
There is a reminder that the optimization process should only be run once the website has been completed, and there is a link to the Performance related documentation, and a Let』s Start button. Click that to begin the Performance Wizard.,2. FeaturesIn this step, you can disable any features you aren』t using, thereby reducing the amount of code loaded. Please be cautious, as disabling a feature you are using will result in broken behaviour until it is enabled again.
As you can see in the screenshot below, the Wizard loads with the current Features as set in the Global Options. At the top of the page, there is a Find Recommendations button, which when clicked will scan your website and offer you recommendations about the various features.
Once, the scan is complete, you will see the Wizard』s recommendations. The green ones mean that the current option is appropriate, the red ones are options which the Wizard recommends be changed, and the blue ones are ones that can』t be automated, and require you to consider the options yourself. The Apply All button, found next to the Find Recommendations button at the top, will apply all the red recommendations. But best practice here is to take your time to go through each of these features and make your changes.
Once you have made your choices, click the Save Changes button at the bottom, before clicking Next Step.,3. IconsIn this step, there are two options relating to Icons. You can choose which Font Awesome icon subsets you want to load, and you can set Font Awesome v4 Compatibility.
If you click the Find Recommendations button, the Wizard scans your website and offers a range of infomation pertaining to the icons used on the site, to help you make your choices. It offers a full list of all the icons used on the site, breaking them down into the individual pages they are used on. (If they are under the Meta column, this means they are not used directly in the content, but are in used in a menu). This list is useful if you want to convert your Font Awesome icons to a single custom icon set to improve your load time. See the How To Replace Font Awesome Icons With A Custom Icon Set documentation for more information on that process.
The recommendations for the two font options lets you know which subsets you can turn off, or need on, and in the Font Awesome v4 Compatibility option, the recommendation also lets you know if you have any old v4 icons, which you could then update, so you could turn off v4 compatability.
Once you have made your changes on this page, click Save Changes, and then Next Step.,4. FontsIn this step, you can check which fonts are being loaded on your website and optimize how those fonts are served. Ensure all families and variants selected here are required. Less variants will mean less requests and therefore faster loading. This page is split into two sections – the Global Fonts, and the Font Serving Global Options.
Clicking on Find Recommendations checks how many font variants are being used on the site, and makes recommendations about the Font Serving options. There are five font options you can change, depending on your website. They will all affect performance to some degree. For example, you can Preload Key Font Variants for a faster LCP (Largest Contentful Paint) if the LCP on your site is a font. Again, when you are done, click Save Changes and then Next Step.,767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada
5. ElementsIn this step, you can disable any Design, Layout or Form Elements you aren』t using. When disabled, the Elements will not load and will therefore not be available in the Builder.
There are three buttons at the top of this page. Find Recommendations, Enable All, and Disable All.
Clicking on Find Recommendations scans your website to see which Elements you are using, and deselects all the Elements you are NOT using. If your website is finished, you could then save your changes, thus stopping any unused Elements from loading. Just be aware that you would have to re-enable these Elements to use them at a future time.,6. OptimizationIn this penultimate step of the Wizard, you can optimize how the CSS and JS assets should be enqueued. These options can have a large impact on the performance of the page load but some of these can also break functionality, particularly if you are using a caching plugin, so be sure to test your site after any changes.
When you are done with your changes, click Save Changes and then Finish Wizard.,7. FinishThis takes you to the FInish page, which clears the site cache and assets. The Wizard also displays how many plugins you have, as these can have a big effect on performance. If you have missed any possible improvements, these will be listed on the right-hand side, next to the Active Plugins.
At the bottom, are some links to specific docs that can help with your understanding of website optimization, and how to perform further optimization, such as optimizing for above the fold content, and enduring that your images are all the right size and optimized as well. Finally, at the top, you can click the Run PageSpeed insights button again, to see how the site has improved.
There are always more things you can to to optimize your site, like choosing faster hosting, running a CDN, installing a caching plugin, further optimize your images and much, much more, but the Performance Wizard is a great first step once you have completed your site, to get it up to speed.

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!

toTop Button

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.