The Divi Blog module is a powerful tool that allows you to create beautiful and engaging blog page on your website. However, the default “by” word and meta separator “(|)” in the meta information may not be to your liking.
In this article, we will show you how to customize the “by” word in the Divi Blog module post meta easily by adding straightforward code to your page.
Customizing the “by” Word in Divi Blog Module Meta
Step 1: Add the CSS Class
First, 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, go to Advanced tab -> CSS ID & Classes. Afterwards, add a unique CSS class name to the CSS Class input field. For example, you can add the class name “customize-by-word“.
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). Afterwards, copy the simple JavaScript snippet below and paste it into the Code input field.
In this example, we will give you two JavaScript snippets to replace the “by” word only or replace and add some styles.
JavaScript Snippet to Replace the “by” Word
<script>
jQuery(function($) {
$(document).ready(function() {
$('.customize-by-word .post-meta').each(function() {
$(this).html($(this).html().replace('by', "Author:"));
});
});
});
</script>
The JavaScript code above is used to replace the word “by” with “Author:” in all blog posts meta elements with the class customize-by-word. Simply replace the Author: with your preferred text if you want to.
To see the result, you can preview the page by clicking the Exit Visual Builder button.
JavaScript Snippet to Replace the “by” Word and Add the Styles
<script>
jQuery(function($) {
$(document).ready(function() {
$('.customize-by-word .post-meta').each(function() {
$(this).html($(this).html().replace('by', "<b><i>Author: </i></b>"));
});
});
});
</script>
The JavaScript code above is used to replace the word “by” with “Author:” and add some styles (bold and italic) in all blog posts meta elements with the class customize-by-word. If you want it, you can replace the <b> and <i> tags on the above snippet with the <span> tag so that you can add CSS properties.
To see the result, you can preview the page by clicking the Exit Visual Builder button.
Once you finished adding the JavaScript snippet to your Code module, don’t forget to save or publish your project if you want to.
The Bottom Line
This article shows how easily you can customize the “by” word in the Divi Blog module meta by adding a simple code snippet to a Code module on your page. The code snippet will replace the word “by” with your preferred text, and you can even add some styles if you want.
