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.
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.
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.
Thanks Nelson, that was a life saver!
You’re welcome, glad you liked it!