How To Style And Customize The Divi Blog Read More Button
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- This tutorial will show you how to style and customize the Divi Blog module read more link and turn it into a button with an icon and custom text!
Blog Post + Snippet: www.peeayecrea...
We are creating a great series on the Divi blog module, and before we can do some of our other tutorials we need to address the read more button. Oddly enough, this is treated as text rather than a button, so we are going to fix that and show you how to style and customize the Divi Blog module read more button and change it into a button.
Become a member of our Divi Adventure Club!
www.peeayecrea...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecrea...
Thanks for watching!
Nelson, great video, and great teaching style! Watching from Fort Lauderdale!
Thanks for watching! I'm glad you like my content!
I was right in the middle of adding a Divi blog module and throught that the read more text needed to be more of a button in appearance. Nice one #conincidence
Nice one Clarke, love when timely things happen! More fun stuff on the blog module coming in the next few weeks :)
Hey Nelson, fantastic video!! i followed along and with a bit more tweaking i now have my blog module looking exactly how i want it to be👍👍 Thank you so much for your help with these videos. Because of your teaching style i now understand more and more about how and where to use CSS.
That's awesome, glad it was helpful!
Thanks men, in two day you help me twice
Glad to hear it Bato!
Great video 🤩🙌
Waiting for blog pagination video!!!!
Hehe it will come! :)
Thanks a lot again for very useful (as always) tip
My pleasure, Nissim!
This is what i need, thank you Sir for the tutorial, God Bless!
Glad it helped! Thank you, God bless you as well!
Thank you very much. I love your teaching style, very clear and concise. Everything worked for me except the last script to change the text. I added it to the head of the post in the integration tab but it did not change the text.
Hey Cletus, it could be as simple as cache, especially if you have the page up, it would need to be reloaded. Try clearing that and see.
This worked fantastically! I have a question, what would we add to the code if we want the "Read More" Button to be centered vs left aligned? I had tried fixing it myself but my guesses didn't work
Thank you very much, that is just what I was looking for. The only thing I'm still missing is the possibility to link to another url than the blog itsself.
You're welcome, Frederic! Hmm, I am not sure what you mean. What would be that use case? Otherwise just use other modules with a link, right?
In the blog I have a link to a newspaper article. If I could go directly in this article it would not be necessary to open the blog. On vagmuerren.ch you can find some examples.
The articles with Jungfrau Zeitung as author are the examples.
@@fredericjean6110 I don't understand at all. These are just normal blog posts. In the examples with that author they are just adding a short summary with a link to the other article. This has nothing to do with the blog feed itself.
Duuuude .. thank you so much
You're welcome! 😎
Dude, thank you.
You're welcome!
awesome!
Glad you think so!
Thanks you very much Sir
You are welcome Tom!
Just a thought. Rather than add the custom script, you can just call the posts via "Post Slider Settings" module 1 at a time (shutting off the arrows and controls) and this will give you the option to add a button and change the "read more" text. This is what I did to work around that issue.
Interesting Katy! I would rather avoid duplicate posts and add the tiny bit of js, but hey that sounds like it works! Thanks for sharing!
@@PeeAyeCreative You can offset the posts in the layout to avoid duplicating. I like the tiny bit of js but if someone doesn't feel that confident there is an alternative solution. Cheers!
Hi pee-Aye thanks for your helpful video. One thing: i have updated Read More text with your snippet BUT when i navigate through the pages of the blog it comes back to READ MORE. Any tricks?
how to set the read more button to be in all modules at the bottom in the same plane. So that they are all eg: 2px from the bottom of the module. That, despite the smaller number of text characters, they do not rise above the text
Is it possible to animate the icon to move on hover?
I am always a fan of yours and I do follow your tutorials. It helped me a lot in making my client's website look better. ☺️
I have a question tho, can I also use this for testimonials?
You mean the blog module, for showing individual testimonials instead of blog posts?
@@PeeAyeCreative Yes, that's correct. I like the testimonials to have the same sizes. I'd like to use 'read more', is that possible?
@@orvilla5719 You could do that if you want, using blog posts as testimonials. I would look into a custom post type instead, but it would work.
Cool🎉
Thanks!
Thank you for this. I am wondering if there is a way to show the icon only in the "read more" button area. I have tried hiding the text and other tricks, but they seem to affect the icon and text size and visibility together. Ultimately, I want to show a speaker icon only. Great video as always!
I'm confused, you want to simply show an Icon on the blog? What would it do? I wouldn't associate it with the read more button if you simply want an icon displayed.
Hi, thanks for your video, in my case divi editor not working and new page with divi creation also not working. can you help me please
Sure, please check our guide on how to solve that: www.peeayecreative.com/how-to-fix-divi/
So is there a way to change the Read More text to something else ONLY for the page and not universally on the site?
Hi Bob, this code changes it for the Divi Blog module in general anywhere on your site because we are targeting .et_pb_post a.more-link in the code. But you could add your own custom class like .bob ..et_pb_post a.more-link and then add "bob" to the blog module that you want to change.
Unfortunately I don't know how to get to the screen you start on - where is that? Thanks
The link is in the description 😉
the padding css doesnt seem to work for me. The button is HUGE and no amount of fiddling with the padding numbers can make it any smaller
I have added code, but its not working today : 9-april-2022
It works. You're welcome to share details otherwise there's nothing I can say.
hi I'd rather have the hover be a colour rather than transparent. How do I do that?
You can simply change the transparent value to any hex color of your choice.
@@PeeAyeCreative interesting . It didn't work the other day and now it does. Thanks. Can I put a background image there instead? if so what do I change that part to? from a hover background color to a background image? fyi . your videos are really helpful. I managed to put an image in the foreground of the buttons. I'd. love one with a subtle uploaded pattern image for the background.
Is there a way to make the Read More text change for just one page? I have one set of posts that are all videos that seems odd to say Read More.
I don't think so, but I would recommend just making it generic like "View Now" or something.
Sar I have a request for you. Please you make a video for. Apple header and Apple landing page proper with Divi
Hi Paswan, can you give me a little more detail? Are you asking for a tutorial on how to recreate Apple's website?
@@PeeAyeCreative I mean to teach you how to make a header section of Apple's website
m.facebook.com/groups/990911507701672?view=permalink&id=2951644584961678
Are you from Baltimore or Maybe Philly?
Near Gettysburg, why?
Thanks for your great help!
It seems that the code do edit "read more" button doesn't work anymore? Or it might be just on my website
jQuery(document).on('ready ajaxComplete', function () {
//Replace read more link text
jQuery(".et_pb_post a.more-link").html(function () {
return jQuery(this).html().replace('read more', 'View Full Post');
});
});