How to: Change ‘Read More’ text on the Blog Module to an Animated Button
Below is an extract from our ‘Tips & Tricks‘ page.
This creates a button with ‘Continue Reading’ (or any other text) that is placed below each post excerpt in the blog module on the right (or can be left).
The button expands to the left on hover which allows it sufficient space to display the unicode icon to the right. See below:
Create Button text and hover icon
- Go to Divi | Theme Options and select the ‘Integration’ tab. In the ‘body’ section, copy this code:
Change the ‘Continue Reading’ text & symbol in line 5 starting:
var newVal = ‘Continue Reading…..
to whatever you want. The 9 is Unicode for the symbol and the span style changes the color, size, weight and position of the symbol. You can see a complete set and Unicode reference codes available here: Divy Icon Font
Now to create the button in CSS.
- In your child theme, go to Appearance | Editor to access style.css
- Copy the code below to the stylesheet
- Depending on the text wording, font, size etc used in the first part above, you almost certainly will need to edit the ‘width’ value for both the normal button and on hover. This is trial and error till it looks good. Tip: Use “Inspect” in your browser, find the icon and look at the CSS for both Active and Hover – you can play around with the ‘Width’ settings in both states to find the best values, then apply them to your CSS.
- You can change colors, margins and other properties to suit your needs
- You can float right (button on right side) or left by changing to ‘float: left’
Note: You may need to ‘Clear’ the ‘Static CSS File Generation’ in Divi | Theme Options | Builder and clear your Cache and Minified CSS/JS if you have an active caching plugin installed for the above to functionality to work.
This looks great on the first page of your blog, but when clicking on ‘Older Entries’, the ‘Continue Reading’ text (or whatever text you have used above) reverts to ‘Read More’ in the button and without any icon.This is an issue caused since Divi 3.0.72 when AJAX pagination was used. This can be fixed – see out separate Tips & Tricks entry ‘How to: Fix Blog Module pagination issues‘ below.
Grid Layout amendments:
The above works very well on a Fullwidth blog layout, but if you intend to use a grid layout then a few additions are required.
Firstly the grids will alter in size particularly if you have a small amount of text. So to look tidier on desktops where the grids appears side by side we need to equalize the height of each grid box. We do not change the mobile display with this CSS since on mobiles the grid is stacked vertically, so there is no need to .To fix the height of the grid boxes, add the following CSS to your child theme:
The reference in the above CSS to ‘position: relative’ is required to position the button in the CSS below
Secondly, the position of the button created above is relative to the bottom of the excerpt text, so looks messy. We need to make the button appear in the same position in the grid. To do this, add the following CSS. This effects Desktop only since we are not altering the position of the button on mobile.
Play around with height and the bottom & right values to position the button to meet your needs. You could also replace ‘right:10px;’ with ‘left:10px;’ if you require the button to be placed on the left.
Grid layout box shadow & increase size of grid boxes on hover
The grid layout on our blog on desktop also has shadows around the grid boxes and increases the box size on hover, creating the effect of popping up off the page as you hover over any grid box. To achieve this effect, replace the CSS in the section above under ‘Firstly’ with this:
Play around with the transition, transform and RGBA values to create the effect you want.