The Divi Blog module uses the meta separator to separate different meta-information elements displayed for each blog post. These meta-information elements commonly include the author’s name, publish date, categories, tags, and comments count. By default, Divi uses a specific separator character, a pipe symbol (|), to separate these meta elements.
For example, you have a blog post titled “How to Change Default Meta Separator on Divi Blog Module” authored by Ashley, published on July 10, 2023, and categorized under “Divi Builder”. The default meta information might appear as follows:
This tutorial will show you how to change the default meta separator on the Divi Blog Module from a pipe symbol (|) to another icon/symbol.
Steps to Change Default Meta Separator on Divi Blog Module
Step 1: Add a CSS Class
In this first step, we will add a unique CSS class name to the Divi Blog module. Go to the Divi Builder editor and add the Blog module, or you can select your existing module.
On the module settings -> Advanced tab -> CSS ID & Classes. Afterward, add a unique CSS class name to the CSS Class input field. For example, you can add the class name “change-meta-separator“.
Step 2: Add the Code Module
Next, we’re going to the next step, adding a simple code snippet on the Code module.
Add the Code module to the page ( you can place it anywhere you want). Afterward, copy the simple JavaScript snippet below and paste it into the Code input field.
<script>
jQuery(function($) {
$(document).ready(function() {
$('.change-meta-separator .post-meta').each(function() {
$(this).html($(this).html().replace(/\|/g, "-"));
});
});
});
</script>
This code targets elements with the classes "change-meta-separator” and “post-meta” and replaces the default meta separator (|) with a dash (-) within those elements’ HTML content.
That’s it. Your default meta separator (|) is changed to a dash (-) when you’ve added the JavaScript code. Don’t forget to save or publish your project if you want to.
Note: In this example, we change the default meta separator to a dash (-). But you can change to another icon/symbol you prefer by editing the JavaScript snippet (see the image below).
The Bottom Line
This article shows how easily you can change the default meta separator on the Divi Blog module. When visitors browse your blog, they’ll see the customized separator you specified, adding that extra touch of personalization to your website. We hope you found this tutorial helpful. Feel free to reach out if you have any further questions or need assistance.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.
