Skip Navigation

Using Toolset with Avada Theme in WordPress

Avada and Toolset plugins work smoothly together. In this tutorial, you’ll see how to configure Avada to use it effortlessly with Toolset.

What you need to install

The initial setup includes the following elements:

  • The Avada theme
  • Toolset Types
  • Toolset Views
  • Toolset Layouts

You may need additional Toolset plugins according to the project you are going to create.

What we want to get from Toolset and what we want to get from Avada

Avada is a versatile theme allowing you to take control of every aspect and section of your site. You will use Avada for all the settings related to the header and the footer using a few set of options:

Header options:

  • Social links, contacts information, tagline
  • Look-and-feel: colors, background, logos, font, transparency padding, shadows…

Footer options:

  • Widget areas that can be configured in Fusion Theme Options, from the Footer tab. (You can create up to four columns.)
  • The copyright area.

Toolset is only covering the content area of the page, it is not taking over Avada’s settings.

Setting up a page with Avada Settings

As shown below, Avada comes with a sample page. There is a header, a navigation menu, and a footer (empty widgets area and the copyright). If you create a new page, the configuration will remain the same.

using toolset and avada

1. Go to Avada -> Theme Options and customize your header, your footer, and your navigation the way you want. avada toolset
2. Create a new page.
You can also set up header and footer options for each page you create with Avada.
Using Avada and toolset
3. Select A static page and define the “New Page” as the front page.  Using Toolset with Avada

You are ready to start designing the content with Toolset.

Designing the interior with Toolset

Now that we have set up the header and the footer, we are ready to create a part of the content with Toolset. You can display your custom types and fields, create custom searches, create forms for the front-end content submission and much more.

1. From this new page, open the Content Layout Editor.  Using Avada and Toolset
2. The Layouts editor opens.
Now you can add any custom content or template created with Toolset.
 Using Avada and Toolset
3. All Toolset custom content you add is shown in the body of the page without disrupting the global options, or the one selected for the single-page. Using Avada with Toolset

Designing the interior with Toolset and Avada Fusion Builder

Keep in mind that if you enable the builder, you will lose what you just built with Toolset. If you design the content using Toolset, you cannot use Avada Fusion Builder “around” this content.

To insert Custom Fields or a View in the part of your page using Avada Fusion Builder, you need to insert a Text Block. Click on the Fields and Views tab to insert some custom content coming from Toolset:

Note: If you need to insert a Toolset form, you can do it manually and copy/paste the shortcode of your choice from Toolset -> Forms inside Avada Text Block. We are currently working on adding the Forms tab as well.

Frequently Asked Questions

Avada’s CSS and JavaScript Compilers are not working when using Toolset

Avada provides so-called CSS and JavaScript compilers whose purpose is to optimize the CSS styles and JS code which are dynamically generated from the various option settings on your site.

You can turn Avada Fusion compilers on or off by going to the Toolset -> Settings page and scrolling to the Avada Fusion Compilers Options section.

Managing Bootstrap Issues

Avada is loading its own version of Bootstrap. This can lead to conflicts with the native Bootstrap library loaded by Toolset. Depending on the issue you can do one of the following:

  • Let Toolset load Bootstrap – in this scenario everything will work except for Avada’s Modal Popup Elements.
  • Let Avada load Bootstrap – in this scenario everything will work unless Bootstrap version loaded by Avada is missing some specific styles required for specific elements. In this case, you will need to add those styles manually.
  • Do not load Bootstrap at all – in this scenario you have to manually add the code that will allow you Bootstrap features such as Views Pagination.
Originally written
June 5, 2017
July 8, 2020