[Resolved] Divi adding extra markup to views

[Author]

Posts

[Stephen Vaughan]

Hi Christian,

Just getting back to you regarding the Divi Bootstrap conundrum. I have been onto to Elegant Themes about this and to be honest it has been like getting blood out of a stone in getting a relational answer from them as to why Divi does this. The bottom line is that this is required to make sure that layouts will appear properly in custom post types:

"The #et-boc and co wrappers are required on custom post type pages to ensure high CSS specificity. Basically, this will make sure that themes/plugins do not overwrite the styles of the builder content."

I am not sure that makes sense to you but to me it says Divi is interfering with third part elements so that they do not interfere with Divi. I am not sure this is the best way to do this because any good developer/ designer should be adding their own classes and ids for styling that differentiate from those of Divi.

I looked at your initial solution in copying the shortcode for the view template portfolio-single-thumb and pasting it into the loop anywhere it is required and then looked a the rendered mark up where I see Divi's extra markup injected into every column of my Bootstrap markup. Instead of doing this wouldn't it be better if all the content in the Divi module was wrapped in the extra divs instead around the view markup.

// What divi does

<div class="et_pb_text_inner"> // Divi text module
  <div id="wpv-view-layout-3470-TCPID3059">
    <div class="row">
      <div class="col-md-4">
        <div id="et-boc" class="et-boc">
          <div class="et_builder_inner_content et_pb_gutters3">
            // content
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div id="et-boc" class="et-boc">
          <div class="et_builder_inner_content et_pb_gutters3">
            // content
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div id="et-boc" class="et-boc">
          <div class="et_builder_inner_content et_pb_gutters3">
            // content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


// Better to do this?

<div class="et_pb_text_inner"> // Divi text module
  <div id="et-boc" class="et-boc">
    <div class="et_builder_inner_content et_pb_gutters3">
      <div id="wpv-view-layout-3470-TCPID3059">
        <div class="row">
          <div class="col-md-4">
            // content
          </div>
          <div class="col-md-4">
            // content
          </div>
          <div class="col-md-4">
            // content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

To me this makes more sense and if I am right would not interfere with how Toolset functions but maybe I am not seeing this correctly?

In light of this change in Divi, since sometime last year, does this effect future support of the Divi Builder Toolset integration that I have been using in many of my builds? Do I need to look at another method?

[Christian Cox]

Instead of doing this wouldn't it be better if all the content in the Divi module was wrapped in the extra divs instead around the view markup.
"Better" is a bit ambiguous here but from the perspective of this particular View, I would say yes.

To me this makes more sense and if I am right would not interfere with how Toolset functions but maybe I am not seeing this correctly?
It could still interfere with the Bootstrap grid, depending on how their CSS is written. I'm not able to say based on the information I have available. For example, if they add CSS to child elements based on these classes, they could modify the grid's margins or padding, effectively breaking the grid. Furthermore, there are inherent problems with Divi and Bootstrap that will not be resolved by moving their markup and classes around. Divi uses some CSS class names that conflict with Bootstrap.

In light of this change in Divi, since sometime last year, does this effect future support of the Divi Builder Toolset integration that I have been using in many of my builds? Do I need to look at another method?
I don't think Divi is going to be fully Bootstrap compatible in the near future. So if you're expecting to be able to use the Bootstrap grid or any other Bootstrap features in Toolset, you should consider that when making decisions about themes and page builders for future projects. Also there are issues with AJAX updates in Views when using Divi Builder to design a loop content template. Most of those issues occur when using module-level styles in the Divi Builder. Instead, we recommend you use CSS classes to apply styles, and/or disable AJAX updates. Those things should also be considered upfront.

[Stephen Vaughan]

Thanks Christian,

I actually haven't had any major issues with bootstrap in Divi barring the slider with thumb carousels and I dropped the thumbnails anyway in the solution I was using. I have set up filtered search views with AJAX and conditional logic on showing different filters as others are applied without issues, but I will keep what you have said in mind. I am tempted by Elementor but have invested in Divi for the moment which, although is not perfect, has a certain panache in terms of the features it includes and the UX for using these. How good is Elementor with Toolset? Any issues?

I do see that in the latest Divi update they list the following in the change log:

- Fixed a compatibility issue with the Visual Builder and Toolset View Plugin.

I will check in with them to see what exactly that means.

To clarify, my last paragraph in the opening ticket was referring to the Divi builder integration that has been included in Toolset for a while now and wether Toolset will continue support and develop this for the backend builder and new backend visual builder.

[Stephen Vaughan]

OK, I just checked that the new Divi backend builder is now working with the integration provided by Toolset. So this is what the change log must be referring to.

[Christian Cox]

How good is Elementor with Toolset? Any issues?
Elementor's integration with Toolset is fairly new and there are some limitations. Their dynamic fields feature is still very basic, and doesn't give you the ability to access all the different settings you would normally be able to configure in a Types or Views shortcode when selecting dynamic sources. Most Elementor module input fields do not accept 3rd-party shortcodes, so you cannot use a Types or Views shortcode for the text or URL link of a button element, for example. The dynamic fields feature works best with basic fields, not repeating fields or fields with complex formatting. However, you can insert Types or Views shortcodes in a separate post or template, then copy + paste them into an Elementor text module. Also you cannot design a Toolset Content Template with Elementor, and we do not expect to support that soon. This has some implications for working with Forms, since Content Templates are part of the normal Forms workflow for certain types of Forms.

More info about Toolset and Elementor: https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/

Known issues:
https://toolset.com/errata/elementor-pro-template-shortcode-not-rendered-in-view-loop-item/
https://toolset.com/errata/elementor-library-widget-content-does-not-appear-on-the-front-end-for-posts-using-a-content-template/

[Stephen Vaughan]

Hi Christian,

A bit more information on the Divi Bootstrap compatibility issue. I managed to get a bit more info from Elegant Themes support. It relates to the fact that Bootstrap (3 & 4) and Divi target a container class. They are aware of this and are working on a solution.

Any merit in Toolset adding a css Flex or css Flex option to the loop wizard for views? Or, is it something we could code in ourselves?

One last thing on the - Fixed a compatibility issue with the Visual Builder and Toolset View Plugin. I see that the page/layout settings button doesn't function when working in the Edit Content Template (Divi integration) dashboard. In fact the Divi builder tends to become inactive until you open another module's settings panel. You can open the settings if viewing from the new backend visual builder. Devs may be working up some updates in Views. As it is there is some scope for improvements in the visual builder version of the builder.

[Shane]

Hi Stephen

As Christian is currently sick, he wont be available today but should be back to continue assisting.

Thanks,
Shane

[Christian Cox]

Any merit in Toolset adding a css Flex or css Flex option to the loop wizard for views? Or, is it something we could code in ourselves?
Sounds like a non-trivial new feature. You can certainly code your own CSS classes in a loop, and implement flexbox-based designs manually. I encourage you to ask for the features you want here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
This form submits to the product directors who make decisions about which features to implement.

[Stephen Vaughan]

Thanks Christian,

I'll give it a go myself and will also submit the suggestion.