[Resolved] Divi Layout not working as intended when being pulled into Toolset CPT

[Author]

Posts

[sharlaC]

Tell us what you are trying to do?
I have created a divi layout with a button that opens a video popup. The popup works fine when using it in Divi, but when I import the layout into my CPT, the popup does not trigger.
Is there any documentation that you are following?
No
Is there a similar example that we can see?
This works as intended in this page: hidden link
What is the link to your site?
Here is the template where the button is embedded and is NOT working as intended.
hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

I checked both the links, but the first one showed the "404 not found" message.

Can you please share temporary admin login details, so that I can see how this template is set up?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing these details.

I tried to log in, but the standard admin login links are showing the "404 not found" page.

If you're using any secret/protected admin login link on the website, please share that as well.

Note: Your next reply will be private as well.

[sharlaC]

test

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing the admin access.

During troubleshooting, I noticed that several script errors were showing in the console, due to using "$" instead of "jQuery", in the Divi theme's options for custom scripts.
( ref: hidden link )

Those errors are now fixed and you'll find several lines which I've commented and replaced with the corrected lines.
( screenshot: hidden link )

As for the overlay/popup, I noticed that you're using a third-party plugin "Divi Overlays" for that. If you'll compare the code of a page where the overlay is working (and is used directly inside the Divi builder) and the page where it is not working (and is added inside the blocks based editor Gutenberg), you'll see that no initialization code for the overlays is loaded, when the overlay is not working.

This suggests that the plugin somehow scans the page's content added through the Divi builder only and then initializes the overlays accordingly.

To make these overlays work from within the blocks-based Gutenberg editor, I'll recommend getting in touch with the "Divi Overlays" plugin's official support team, to see if the two can be made to work together, or if they have some workaround.

I hope this helps and please let me know if you need any further assistance around this.

[sharlaC]

Waqar,

Thanks for your help. Do you have a solution for the button in the template? We need it to trigger a popup that shows the video in a new tab.

Thanks,
Deanna

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for writing back.

If you're looking for an alternative to "Divi Overlays", you can check out Bootstrap 4 modal or Prettyphoto lightbox:
hidden link
https://wordpress.org/plugins/prettyphoto/
hidden link

Here is an article that reviews some of the popular WordPress plugins for lightbox/popup:
hidden link