How To Open Divi Blog Post Links In A New Tab By Default Tutorial by Pee Aye Creative

How To Open Divi Blog Post Links In A New Tab By Default

In this tutorial, I will show you how to automatically open Divi Blog post links in a new tab by default using a jQuery snippet.
Categories: Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A Custom CSS Class To The Divi Blog Module

The first step is to add a custom CSS class to the Divi Blog module. Using a custom class like this will make sure that our code only affects the module with this class, rather than affecting other Blog modules on your site.

Open the Divi Blog module settings and go to the Advanced tab and open the CSS ID & Classes toggle. From there, copy and paste or write “pa-blog-new-tab” into the CSS Class input field, as shown in the screenshot.

add custom css class to Divi blog module to open links in new tab

2. Add The jQuery Code Snippet

Now that the CSS class is added to the Blog module, we will add a snippet of code that references the class and makes the posts within that Blog module open in a new tab. The code is finding the image, title, and read more button and adding the blank target to the links, which simply means the links will open in a new tab instead of the same tab.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
jQuery(document).ready(function(){
    jQuery(".pa-blog-new-tab article a").each(function(){
        jQuery(this).attr("target", "_BLANK");     
    })
})
</script>

Once you add the jQuery code, the tutorial is completed and the blog posts will now open in a new tab! If you enjoy our weekly Divi tutorials, then please subscribe on YouTube and on the blog.

4

Last updated Jun 19, 2022 @ 12:55 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart