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 From Divi Booster

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Removing Gaps in Divi Builder Layouts

Designing a seamless, professional-looking website is often about managing space effectively. Gaps in Divi Builder - particularly excessive white space between sections, rows, or modules - can disrupt your layout, leading to a fragmented and less engaging user...

Random Divi Posts