Integration Between Toolset Layouts Plugin and Popular Themes is Available

   Amir

February 23, 2016

Today we are very happy to announce the first release of integration between the Toolset Layouts plugin and the popular Avada, Divi, TwentyFifteen, TwentySixteen, Customizr, Cornerstone and Genesis themes. This integration allows you to design layouts for these themes using drag-and-drop, while preserving everything that the themes offer.

Drag-and-drop layouts design

You probably know that the Toolset Layouts plugin lets you design page layouts with a drag-and-drop editor. Until now, Layouts was only integrated with our own Toolset Starter theme. This release lets you use Layouts with popular themes, without any effort.

We’ve created integration plugins for each of the themes above. Once you install the right integration plugin, you will get pre-built layouts for all the pages in the site. This means that you don’t need to create layouts from scratch, but only to edit layouts. Of course, you can also create your own, but you don’t have to do that when getting started.

Click and hold a cell to move it
Click and hold a cell to move it

Layouts cells for theme elements

Each of the themes that we’ve integrated with includes its own “goodies”. Some themes come with just basic header and footer cells. Other themes offer advanced elements. The integration plugins turn all these features into Layouts cells. This means that you can insert all the special theme elements into layouts and build a site with everything that the theme offers.

Avada cells in the Layouts cell-insertion dialog box
Avada cells in the Layouts cell-insertion dialog box

For your convenience, the integration plugins already create default layouts for you, using these elements.

Create your own site-elements with Toolset

The biggest benefit of developing sites with Toolset is the ability to create your own site-elements with Toolset plugins. Now that you get everything built with Layouts, it’s easier than ever. Edit any of the layouts and add Views, Content Templates and CRED forms anywhere in the site.

Integration with page builders in themes

Toolset plugins coexist with the page builders that come with different themes. The idea is:

  1. Use Layouts to design the overall structure of the site and the different layouts for pages
  2. Use Toolset plugins to add custom functionality
  3. Use the theme’s page builder to create the content

Use the Toolset shortcodes menu to insert the shortcode
Use the Toolset shortcodes menu to insert the shortcode

When you write content with a page builder, you may need to display fields and Views inside that content. Click on the Toolset shortcodes->Fields and Views. Choose the field or View, set the options and you will get a shortcode that displays it. Copy and paste that shortcode into the page builder. No need to find documentation and experiment with shortcode attributes to get the right output.

Download and install

To get started, please take a few minutes to read the documentation for Toolset integration plugins. There’s a list of plugins that you will need to install and several steps to take. Saving 3 minutes reading this documentation can cost you hours in frustration (and we don’t want that).

Please also keep in mind that this is brand new development, released now for the first time. We recommend to start with development sites and learn how this works.

Feedback?

Is this what you hoped to get for Layouts-theme integration? Please let us know by leaving a comment.

 

Comments 57 Responses

    • We are also working on Enfold integration. We ran into an interesting complication with Enfold child themes. Our next move is to contact Enfold team and get their help on this. If you also contact Enfold team and let them know you are interested in this integration, they will listen more to us.

      • I will definitely do so. I really enjoy using Toolset and Enfold together and have done so on a number of sites.

        Thanks Amir!

        • To get a feel for this integration, you can try one of the default themes (TwentyFifteen and TwentySixteen). This will show you how our new integrations look. Maybe you will have some feedback about this. I’d love to hear it.

      • Excellent, I’ll get in touch with the Enfold team. Integration with ‘Bridge’ theme (by Qode) would also be a great move.

      • Ah, this set me off as well. Any plans on integrating it with X theme and the cornerstone page builder it uses? The X theme is a popular one.

        • Yes, we know that X theme is very popular and we want to integrate it too. If you can, try the integration with some of the themes that we released (like the default WP themes). Even if you’re not using them in your client projects, you will still see how this works and I’m sure that you will have good feedback for us.

  1. “The integration plugin – in our example Toolset Avada Integration”

    Where do you download the plugins for the various themes (Namely Customizr) referenced in the “How to use Toolset theme integrations” blog post?

    • All Toolset downloads are available in your account, under the Downloads menu. There are integration plugins for each of the themes in this blog post. Let me know if you have trouble finding them.

          • Yes, we have plenty of votes to integrate X theme.

            Want to make this happen? You can contribute and facilitate it greatly.

            First, experiment a bit with one of the existing integrations that we already have. We offer integration with the default themes, so everyone has access to them. I’m asking this because I want to see how you like the way existing integrations work. It makes no sense to build new integrations if you don’t like the existing ones.

            Then, if you like the direction this is going and you’re using X theme (are their client), ask and check if the authors of X theme are interested.

            If there’s real interest from the other side and they are willing to lend a hand, we can get this integration implemented very soon.

            Does this make sense?

  2. Just tested for Divi.
    And it seems not to work.
    When I am in a Divi text module, the box to create the shortcode appears behind the Divi text module and so it’s not reachable.
    I would be happy to have a Skype with someone of your team to share my screen and show what happens.
    Don’t hesitate to contact me. 😉

  3. Amir, thank you so much for this great news.

    I have been struggling with using live editors with toolsets, glad to know DivI would work out of the box.

    Will test it soon 🙂

    Btw, do you have any plans to have ThriveThemes (www.thrivethemes.com) integration?

    Thanks

    • Thank you for this feedback. We are planning to integrate many more themes with Toolset. We released this first batch, hoping to get feedback about how we implemented the integration and the usability. We want to see that this is OK and then we will continue with the integration of other themes.

      • Amir, I just installed Divi theme integration plugin and layouts and get this warning:

        Layouts theme integration
        Layouts plugin needs to be integrated with your theme. Before designing layouts, please see the Layouts theme integration guide.

        Do I have to ignore it?

        Thanks

    • We didn’t yet manage to create the videos. This is coming next. We wanted to first provide complete text descriptions for all integrations. The videos take us about x10 time to produce, so we want to see how folks manage with the outline that we described. Then, when we see that it’s generally clear, we’ll produce videos that follow the same process.

  4. I think it would help if there were some default layouts already configured on installation. Even if it was just displaying the default content for that page/post, a header, and a widget area explaining that you can customized the layout of the page like widget area placeholders.

    Also, hurdles like having to configure a Layout specifically for a CRED preview and things like that are annoyances that caused me to stop using layouts.

    • The first step in the setup is to create the default layouts. This way, all the pages in the theme display “something” and you need to only edit them (not create from scratch). The layouts for single items (single page and single post) and complete. The default layouts for archives require your edits, because you should display their loops with a View. Have you seen how this works?

  5. I tested it with Genesis and it worked great. So easy to take a design and dial it in with layouts, types, and views. Great stuff! I’m still learning some of the features of Toolset but the tutorials are helping me understand how everything fits together. Thanks so much.

  6. Great news to here. One question to get a clear picture: when using divi, why would I fully switch to layouts for structure when divi itself has great structure features? I know, there are views, but I am talking about the general situations here. Could you help me Amir to better understand it?

    • The builder in Divi (and in other great themes) focuses on the “content” area of the site. Layouts lets you position and size everything on the page, including the header, menu, content area, sidebars and footer. Does this help?

      • So, in this case it doesn’t make any sense to integrate it with Headwaythemes, because Headwaythemes is doning exactly that? Am I understanding this right? Or would there be other benefits?

        • Right. Headway lets you design the entire page already. The difference is that Toolset also lets you create custom elements without programming.

          I think that it still makes sense to integrate Headway and Toolset, but probably not the same as our Genesis integration works. Headway has other things than Genesis, so the integration should look very differently.

          For Headway integration, it would make sense to skip our Layouts plugin altogether and make it easier to insert Views, Content Templates and CRED forms via the Headway editor. This will really let Headway and Toolset complement each other.

          If Headway team is very interested and will actively cooperate with us, we can build this integration. I don’t know what their plans are and how available they are for this sort of initiative. If you are their client, how about asking them?

  7. Hi Amir,

    I wonder why implementing the Layouts into other “Builder” based themes is so important. if people love the Divi builder, what’s the idea by replacing it with layouts inside Divi?

    Wouldn’t it be smarter to have Modules support for these themes instead?
    These theme already have their own layout building tools, but the missing part was having the Views and Types as “Modules” under these systems.

    Would be nice for example to drag and drop a Divi module called “Types” or “Views” into a Divi layout design, and the data would reflect there.

    Please help me understand what I’m missing here.

    Thanks
    Dan

    • The page builders in themes make it easy to edit the content, in a more visual and rich way. Layouts plugin doesn’t work on the “content” area, but on the overall layout of the site. It lets you position all the elements on the page, including the header, menu, content area, widgets and footer. The other Toolset plugins also let you build your own data-driven page elements. We’re going to write a detailed blog post that shows how to efficiently use Toolset with page builders.

      Have you tried this integration?

      • may I add, if I got your question right @tech500,
        the difference is that a page builder of eg, AVADA, will let you design any layout you want, but that is within the BODY field of that specific page. which means, if you designed a layout for a given post or page with AVADA, that layout is not a ‘template’ that you can use on 100’s of other pages and still be able to change all from one place.
        let’s say I created a design for a video page. I can duplicate it with AVADA, but I can’t change at once the size of all the video pages. unless I use the new ‘layouts’ integration.
        toolset makes it more of a dynamic content site vs a static in a way. you can create generic pages this way and still enjoy the design elements of AVADA/DIVI/other.

        That is the missing part with page builders. they are great for a single page/post/cpt but once you want to create a generic directory of any sort of page you can’t maintain and change the generic layout for all pages that were built by page-builder. they keep the design locked in the body field.

        Please comment if that is correct.
        This is fantastic news for AVADA and for using CPT’s

  8. Hi.

    Are modules of Types and Views in line for integration with Visual Composer?
    A lot of themes are using this page buider

  9. Hi, I’ve got some issues with the divi integration:

    first: secondary navigation on top of primary navigation is missing.
    second: shrinking header isn’t working.
    third: the logo isn’t displayed correctly. I’m using an svg which should adapt automatically – instead it is defined with dimension 0 x 0.

    I really would like to use LAYOUTS to define standards for various CPTs – but to do this the problems mentioned above have to be solved.

  10. DIVI again:
    Playing around, I found the Headerformats “Slide-In” and “Full-Size” aren’t working at all.

  11. Hi Everyone,

    we have a working hotfix for Views+Toolset Divi Integration plugins so that they can work better together.

    Thanks to Franck we managed to address an important bug to allow inserting Views/Types shortcodes in Divi Builder text fields.

    Whoever is interested/needs the new build, can ask it here and we’ll provide it ASAP.

    Thanks!
    Riccardo

    • Hi Riccardo,

      I would like the hotfix for Views, Toolset, & Divi integration.

      Thank you (and Franck too!)!!

      -Sandy

  12. Fantastic news on AVADA 🙂

    I’m stuck with WooThemes Sensei Plugin, that’s an LMS for online courses. I’d want to add custom fields and change the layout of lessons with toolset. is Woo Sensei anywhere on the integrations roadmap ?

    • Probably not right now. We should start with more basic themes from WooThemes, like Storefront.

        • Yes, that’s high on our wishlist too. What would you do with Layouts integration for Storefront? Can you give some practical examples of sites that you’re working on?

    • Hi JWB, I will pass that information to our developers. We integrate the most popular themes.