A Small But Beneficial Link Change
When a reader comes to your blog page and click son a link, the post link opens within the current page. But chances are the user will read the post, but will get sidetracked and not return to the main blog page. To prevent this, the simple solution is to open the individual blog posts in new tabs. This will keep the main blog page available while also opening the article. But in Divi there is no setting for this, so in this tutorial I will show you how to open blog post links in a new tab by using a snippet of code.
▶️ Please watch the video above to get all the exciting details! 👆
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.
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.
<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.
Hi Nelson
I have a problem on a site using Divi Flash Filterable CPT.
The blog posts in ‘Quadsat in the news’ should point out of the page – (blank)
I tried your code for the blog – and also tried to modify it, but cant get it to work.
Do you know a solution for this?
Hi Ole!
Can you please share the page URL so that I can check further?
Hi Nelson.
Thanks for your great tips.
I tried to use your code on a page where I use a Divi Flash Filterable CPT module.
But it doesn’t work. It the bottom links ‘Quadsat in the news’
I can see that you’re not using the default Blog module. Can you please share the page URL so that I can provide the updated code as per the module?
Hi Nelson,
So great, all your work!!!
I am helping a friend for his site.
Is this code also possible to open filterable projects in a new window?
Thanks for your help, or advice.
Hi Siike!
Please use the following code for the Filterable portfolio module. Use the class pa-portfolio-new-tab in the module instead of above one:
jQuery(document).ready(function(){
jQuery(“.pa-portfolio-new-tab .et_pb_portfolio_item a”).each(function(){
jQuery(this).attr(“target”, “_BLANK”);
})
})
Hope it helps!
This is great, thanks. Is there any way to open results from the search module in a new window too?
You’re welcome, glad you like it! I have never considered what you asked, but this would be a good feature for us to add to our Divi Search Helper!
Thanks, Nelson.
Divi support was not able to help me resolve this. Your tutorials have helped me in the past, and I’m very glad to have found this one. I added your code to:
Divi Theme Options > Integrations > Add code to the of your blog
Worked like a charm. I just subscribed to your website newsletter. Thanks for making it available.
That’s great to hear, Tom! I hope you enjoy all of our resources!
This just made me do a happy dance!!! Thank you for your clear and easy to follow instructions. You saved my a$$!
You’re welcome Kat, so glad to help!
How useful, thank you so much!
I have a question though, I’m displaying only a few posts on my blog module and using pagination to navigate through the older posts. The feature perfectly works on page 1 but as soon as I click on a post on page 2 and so on, it opens within the current tab.
Any idea why? Is there a way to amend the snippet to make in work on the whole module no matter the page?
Thanks a lot!
Hi Sawdien!
Can you share the URL of the page to check further?
Hi! that’s very udeaful for blog articles! I need a similar things.. I need to open the portfolio (projects) item (from the Divi portfolio module) in a popup or overlay or blank page. How I can do that? Thank you!
By default, the Divi Projects are like single posts, so clicking on one will go to the single post. I am not aware of any other way to do it. You could use a Gallery modules instead to open the images in a lightbox.
Thanks Nelson, that was a life saver!
You’re welcome, glad you liked it!