Avada and Toolset plugins work smoothly together. In this tutorial, you’ll see how to configure Avada to use it effortlessly with Toolset.
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.
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:
- Social links, contacts information, tagline
- Look-and-feel: colors, background, logos, font, transparency padding, shadows…
- 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.
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.
You are ready to start designing the content 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.
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.
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.
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.