Fix Divi Slider Overlapping Text Issue

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.


  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.

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


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.