Incorrect Shortcodes with Divi Builder

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: Divi Builder, supreme theme

Author

Posts
December 1, 2017 at 4:10 pm #407789

balifornia
Expired Member

Post count: 31

Hello dear support team,

we are currently developing a directory with your Supreme theme that is really great! We combine the theme with the Divi Builder with which we have already realized some pages and gained very good experiences.
But now we have the problem that the shortcodes of Geodirectory are not displayed correctly in conjunction with the Divi Builder.
Specifically, this is the home page where these issues occurred. Elsewhere, we have not tried it yet.

Could it possibly be that you take a look at this?

Many Thanks!

December 1, 2017 at 4:15 pm #407791

balifornia
Expired Member

Post count: 31

This reply has been marked as private.

December 1, 2017 at 4:19 pm #407792

balifornia
Expired Member

Post count: 31

Here are the pictures again a little smaller

December 1, 2017 at 7:02 pm #407823

Alex Rollin
Moderator

Post count: 27815

Hello!

Which page URL and what shortcode?

We can take a look at it and give you some advice.

December 1, 2017 at 7:06 pm #407824

balifornia
Expired Member

Post count: 31

I sent you the access data in a private post below. You can not see it?

December 1, 2017 at 7:49 pm #407835

Alex Rollin
Moderator

Post count: 27815

Hello!

No, I do not see anything that looks like the issue you are describing.

Can you tell us where we can see the issue you are describing, or the steps we take to reproduce the issue?

December 1, 2017 at 7:58 pm #407839

balifornia
Expired Member

Post count: 31

Just start the Divi Builder on the home page. Then the shortcode is moved to the editor by the builder. If you click save then you will see the change immediately.

December 1, 2017 at 8:09 pm #407842

Alex Rollin
Moderator

Post count: 27815

Hello!

The shortcode appears to render fine on the frontend.

What is the problem?

December 1, 2017 at 8:12 pm #407843

balifornia
Expired Member

Post count: 31

That we are not able to use the shortcodes with the Divi Builder. If we do, it looks like this. Please visit the site again.

December 1, 2017 at 8:44 pm #407846

Alex Rollin
Moderator

Post count: 27815

Hello!

I see! So, this is a case where the builder incline classes are overriding GD.

We have created a screencast that shows you how to create custom classes that will help keep GD’s classes a priority:

https://screencast-o-matic.com/watch/cbeiig6UKA

That comes from here: https://wpgeodirectory.com/support/topic/list-heading-size-in-page-builder/

You can also review Divi’s information here, so you can learn how to use it:
https://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-divi-code-module-to-integrate-third-party-plugins-in-the-builder

Basically what that says is to include the shortcode in a module (full width).

December 1, 2017 at 9:12 pm #407851

balifornia
Expired Member

Post count: 31

Okay, I have now moved the code to the full width module. Can you please tell me what needs to be done to get exactly the look I have when working without the Divi Builder? Creating a class is not a problem, but what do I have to define to get everything in the unchanged GD Style?

December 1, 2017 at 9:41 pm #407858

Alex Rollin
Moderator

Post count: 27815

Hello!

Divi has options that should allow you to put in shortcodes without altering the output.

https://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-divi-code-module-to-integrate-third-party-plugins-in-the-builder

https://www.elegantthemes.com/documentation/divi/code/

December 1, 2017 at 11:49 pm #407871

balifornia
Expired Member

Post count: 31

You can not offer me a solution as I can see the simple shortcode of the plugin without errors? I do not want a complicated solution or anything else. Divi Builder is compatible with the wpgeodirectory settings. Instead, I have not been able to place a simple shortcode for hours. It would be nice if you had a solution and not send me any links that contain only solutions that do not work. Thank you in advance! 🙂

December 2, 2017 at 3:19 am #407894

Jonathan
Lifetime Member

Post count: 79

Hello Balifornia:

I happen to use Divi myself and our designer does most of the design aspect for our project but I decided to try and post a simple shortcode to our homepage to see if I could make it work.

Shortcode used: [gd_homepage_map width=100% height=300 scrollwheel=false] (first example found on https://wpgeodirectory.com/docs/core-shortcodes/ and it happen to be a homepage code).

Steps:

1. Went to list of Pages
2. Selected by Home Page
3. Selected Edit with Visual Builders
4. Added a full width row with module type Code.
5. In the content section I put the example shortcode: [gd_homepage_map width=100% height=300 scrollwheel=false]
6. I selected the Check icon with green background to save and it the section to my homepage.

I have never used shortcodes in Divi. We barely just integrated Divi within about 45 days. It was pretty seamless to me. Am I missing a step?

Hope this helps or at least you can reply with the step where I may have misunderstood your needs.

Warm Regards,

Jonathan

December 2, 2017 at 8:42 am #407913
Guust
Moderator

Post count: 29970
The issue is that the Divi Builder wraps its own code around the GD shortcodes or anything else you add to the page.
For example adding Hi to the page results in this code.
```
<p>Hi</p>
```
Just enabled the Divi Builder without anything else changes the code to
```
<div class="et_builder_outer_content" id="et_builder_outer_content">
<div class="et_builder_inner_content et_pb_gutters3">
<div class="et_pb_section  et_pb_section_0 et_section_regular et_section_transparent">
<div class=" et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_4_4  et_pb_column_0 et-last-child">
<div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_text_0">
<div class="et_pb_text_inner">
<p>Hi</p>
</div>
</div>
</div>
</div>
</div>
```
So all these extra style classes that are added by Divi Builder break the styling code of anything inside and will need adjusting. Maybe the Divi Builder developers have an easy solution.
Author

Posts