Avada and Toolset plugins work smoothly together. In this tutorial, you’ll see how to configure Avada to use it effortlessly with Toolset.
Toolset features a powerful integration with the Avada theme and allows you to control Avada’s theme options per template and per archive page you design. All this using the Avada’s Fusion builder.
What you need to installThe initial setup includes the following elements:
- The Avada theme
- Toolset Types
- Toolset Views
- Toolset Layouts
What we want to get from Toolset and what we want to get from AvadaAvada 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…
- Widget areas that can be configured in Fusion Theme Options, from the Footer tab. (You can create up to four columns.)
- The copyright area.
Setting up a page with Avada SettingsAs 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.
Designing the interior with ToolsetNow 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.
Designing the interior with Toolset and Avada Fusion BuilderKeep 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
Managing Bootstrap IssuesAvada 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.