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

Nelson Miller Pee Aye Creative
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.

Where To Paste The jQuery Code

If you are using Divi Assistant, simply paste the code in the jQuery tab in the custom code window (be sure to enable it in the Code Helper settings first).

If you are using a child theme such as our free Divi child theme, place this snippet into the scripts.js file (remove the <script> tags at the beginning and end).

Otherwise, place this code in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

    jQuery(".pa-blog-new-tab article a").each(function(){
        jQuery(this).attr("target", "_BLANK");     

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.

Last updated [last-modified %date%]


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 :)

Blog Post Optin

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


  1. Bill Horvath

    Thanks Nelson, that was a life saver!


Submit a Comment

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

Recent Posts


Your Cart