Fix Divi Slider Overlapping Text Issue

Written by Dan Mossop

The Divi Theme slider lets you display slides along with overlaid text. If you are unlucky, you may run across an issue with the slider where the texts of all your slides are displayed at the same time, on top of one another.

Kenny was having just this problem over on the Divi users Facebook group. I took a look and noticed that the HTML produced by the slider didn't look quite right. Specifically there were some <strong> tags floating around which seemed out of place. I tracked down the problem to the text entered as the heading of the first slide. It was surrounded by <strong> tags that Kenny was using to bold the text, and it looked like this:

<strong>Heading Text<strong>

The problem with this is that both <strong> tags are opening tags, not closing tags. So there was two levels of bolding being opened by this text and none being closed. This was breaking out into the rest of the HTML document and ultimately causing the slider to fail.

The simple solution, of course, is to convert the second tag into a closing tag like so:

<strong>Heading Text</strong>

A slightly more elaborate way of dealing with the problem is to attempt to fix the tags programmatically so that the issue can't happen again even if we enter unbalanced HTML tags.

WordPress comes with a handy function "balanceTags()" which will correct the tags in a string, and is exactly what we want to apply to the slide heading text.

The only challenge remaining is to actually get access to the slide heading to change it. I had a look to see if Divi was calling apply_filters() on the header, which would have allowed us to easily make the change. Unfortunately it doesn't, but while I was looking at the code, I noticed that Divi was pulling it from a shortcode in the post content (generated by the Page Builder). This meant it would be possible to apply a filter to the whole content of the post, locate the slide shortcode with a regex, and make the change. Here's the code to do just that:

function myprefix_fix_slide_heading_tags($content) {
    return preg_replace_callback('#\
*)"#', 'myprefix_fix_tags', $content); } add_filter('the_content', 'myprefix_fix_slide_heading_tags'); function myprefix_fix_tags($matches) { return '[et_pb_slide heading="'.balanceTags($matches%911%93,true).'"'; }

Adding this code into functions.php (ideally in a child theme) patches the issue and prevents malformed HTML in the slider heading from breaking the slider.

Seamlessly Integrate LearnDash with Divi!

Elevate your LearnDash LMS with the Divi LearnDash Kit from Divi Booster. This plugin adds custom LearnDash modules to Divi, resolves compatibility issues, and supports Divi design settings, creating a cohesive and visually appealing learning environment.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

2 Comments

  1. Thank you Dan. You just troubleshooted my testimonial slider. Who knew that a little bit of sloppy html could have such a weird effect?

    Well, apparently you did.

    Thank You again.

    Reply
    • You’re welcome, John! I’m glad you were able to figure it out and that the post helped!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest Posts

How to Hide a Divi Module When Scrolling Up or Down

In this quick tutorial, I’ll show you how to hide a Divi module when scrolling in a specific direction (up or down), so that the module only shows when you want it to. This is especially useful when using Divi’s Scroll Effects feature and you have a effect you want to...

Fade a Divi Image Module Edge into the Background

Want to create a stylish fade effect on your Divi image module—where one side fades smoothly into the background? With a bit of CSS, you can make any edge (or corner) of the image fade out: top, bottom, left, right, or even diagonally.Fade a Divi Image Module Edge...

Hide the Header and Footer in the Hello Elementor Theme

Removing the default header and footer from your Hello Elementor theme allows for a streamlined and distraction-free website design. This is especially useful when creating unique landing pages, full-width layouts, or custom headers and footers with a page builder. In...

Setting up the Divi Password Box Module

Setting up password protection on a page can help you control access to sensitive or private content in WordPress, allowing only authorized visitors to view certain sections. With the Divi Password Box module, you can replace the plain Divi password form with a fully...

Open Divi Social Media Icons in a New Tab

Ensuring your website's social media icons open in a new browser tab creates a seamless user experience and keeps visitors engaged with your site while allowing them to explore your social media presence. This approach prevents users from navigating away from your...

Random Posts