Customize read more button and move options to featured image in Divi –

Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training

Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days

Introduction

It is usual to see that the Divi theme treats as text instead of a button, which refers to the read more that is in the blog module, so we are going to solve it and show it as a button, as well as see how to design and customize the Divi blog module, in such a way that we can completely modify it and make our title and read more button that we are just going to create to be placed on our image, achieving a more stylized effect and saving space of our place.

Adjustments in the basic settings of the Divi blog design

We start by seeing what options we have available in the general settings of the blog module, for some reason the Divi theme interprets this read more text as a text field, instead of doing it as a button, that is why we need this guide to be able to modify this and give our button a better look, to be able to modify it. But first let’s look at its options in case we don’t mind it looking like text instead of a button.

Here we can find the following options:

Source: Directly in this option we can apply several sources, the one we need from those available in Divi.

Thickness: This option allows us to adjust the thickness of the line that our font has, in such a way that we can apply a read more with bold and the text in light, so that it has a difference and can be differentiated.

Text style: It allows us to activate different styles to our text, from italics to all uppercase or lowercase, this setting, like the previous ones, only applies to the read more text.

Text color: As the name itself indicates, we can use this tool to change the color of our text.

Text size, line space, line height: Once again we have three quite intuitive options, we can modify the size of our text, its height and the separation it will have in relation to the previous text.

Shadows: This option is not used at all, but if we need it we can apply a shadow to our text, in some cases we use it so that it can be seen better.

Convert read more text to a button

Now that we have some basic styling in place and we know the tools available for the text, we’re going to continue adding some CSS to make it look more like a button and not text. We’ll add a background color, a border, and a hover effect.

To add custom css codes we can do it in several ways. One of the simplest to make it work correctly is to add this type of code in:

Appearance > Customize > Additional Css

Another option is to do it manually to our style file, this option is not highly recommended, since when updating our theme it is possible that these settings are lost. Also, this file is located at:

Panel > File manager > public_html > domain > wp-content > themes > theme used > style.css file

These two ways are not the only ones, we can also see the option directly in our theme, for example in Divi we have this css panel or styles if we go to Divi > Theme Options > Custom CSS

The code to add would be the following:

/*Convert text to read more button*/ .et_pb_post a.more-link { color: #ffffff; background: #0071fc; border: 2px solid #0070fc; padding: .7em 1.3em; margin-top: 20px; border-radius: 50px; text-transform: capitalize; display:inline-block; transition: all 0.3s ease-in-out; } /*Hover of read more button*/ .et_pb_post a.more-link:hover { background: transparent; Colour: #0070fc; border: 2px solid #0070fc; transition: all 0.3s ease-in-out; }

Once we have added this code we will have this result:

Add an icon to the Divi blog read more button

Once our text becomes a more colorful and better stylized button, we consider the option of adding an additional element so that it has more similarity to a functional button that we are used to seeing on websites. To achieve this, just like before, we are going to add a new css:

/*Add icon in read more button*/ .et_pb_post .more-link:after { content: “\24”; font-family: ETModules; vertical-align: middle; margin-left: 10px; }

Change the text read more for another text that we want

One way to customize this button is to change the words. So, instead of using the Read more that is usual in the installations, we are going to change it to another text, for example, we are going to change it to See complete news, but, we can make it say what we want by replacing the words in the snippet of code.

We are going to add the code that we are going to see now by going to Divi > Theme Options > Integrations Tab in the code area “Add code to

of your blog”.

If we have the case where we already have some code added, we simply take a few line breaks at the end of everything and add this new custom code:

Once we make this adjustment to our code we will have this visualization of the button that we have created

Necessary codes so that the text and button are placed on the image

To achieve this we are going to need a union of a css code and a script that is going to go in our head, in the same way that we have done with the previous codes, so we are going to proceed first to apply a class to our module blog, so that we can apply these changes to the module we want.

Apply css to blog module

For this we simply enter the configuration of our Divi Blog module > Advanced tab > ID and CSS class > CSS class. Once here we apply a class for example web-blog

Insert query in Divi head

Once we have assigned our css class, we are going to add it in Divi > Theme Options > Integrations Tab in the code area “Add code to the

of your blog”. The following code:

This code works in the following way, the blog module is divided into parts, the title, the content, the meta and sometimes it can even have dates. It is necessary to combine them previously to be able to move everything together without losing any element.

Insert Css in divi for the change to the blog module

The last step would be to add our css code where we have had to add it on other occasions, let’s also remember where.

To add custom css codes we can do it in several ways. One of the simplest to make it work correctly is to add this type of code in:

Appearance > Customize > Additional Css

Another option is to do it manually to our style file, this option is not highly recommended, since when updating our theme it is possible that these settings are lost. Also, this file is located at:

Panel > File manager > public_html > domain > wp-content > themes > theme used > style.css file

Adjust Divi settings

Once all this is done, we are not finished, since there are some adjustments that we have to make in our blog module so that it looks the way we want, by default we already have the adjustment made, but our text is seen in black and this makes it difficult the visibility of the content, that is why we are going to change in the settings of our blog, the color that is being applied to each element that we want to keep visible, for example if we have left only the title and the previously created read more button we can leave the text blank and it will look like this:

conclusion

Once we have these settings assigned to our blog, we can get to see a more stylized blog page, with more space for other elements, this type of settings can usually be applied to the home page, so that the blog does not take up so much space, but still keep it stylish and contain the necessary information that the user is looking for, be it just a title and button or add a small excerpt to give a little more information about the post.

Technical aspects that we can easily solve once we have our style already defined by what we have done in this guide.

Help us improve our content by sharing your opinion

WordPress and WooCommerce support team at .