1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved A few questions about the 'Read more' button

Discussion in 'Free Divi Community Forum' started by Ernst, Aug 13, 2020.

  1. Ernst

    Ernst Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hi,

    On: www.privacyopschool.nl (scroll down to the bottom to see the blog grid)

    1) How do I vertical align the Read more button of blog posts, when displayed in a grid?
    2) How do I only capitalize the first letter of the 'Read more' button; now it is displayed as 'read more'.
    3) How do I add and arrow on hover, like the other buttons on the page?

    Thanks so much in advance!
     
    #1 Ernst, Aug 13, 2020
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    1. Try the below code in WP Admin > Divi > Theme Options > Integration > Body Code:
    Code:
    Log In or Sign Up to view this code.
    2. Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    3. Lastly, go to your Blog module settings > Advanced > Custom CSS > Read More Button & remove all the CSS.
     
    #2 Divi.Help, Aug 13, 2020
  3. Problemizer.com

    Problemizer.com Divi Expert

    1) Height of the blog grid depends on the amount of the content. Read more text is aligned the same for every post. As an idea, you find out the height of the post with the biggest height and set the min-height of the remaining posts in the grid to be that value.
    2) .page-id-2796 .more-link {
    text-transform: capitalize;
    }
    3) This is not a button, it is referred as read more text or link and therefore there is no option in Divi to set that arrow on hover. Although the solution with custom CSS would be possible.
     
    #3 Problemizer.com, Aug 13, 2020
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  4. Ernst

    Ernst Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    The styling of the buttons worked!

    Only still need the blog grid to be the same height, so the read more buttons are vertical aligned correctly is there a way to achieve this?
     
    #4 Ernst, Aug 13, 2020
  5. Ernst

    Ernst Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    1) Could try that.
    2) Capitalize, gives both words a capital letter, but the other solution, given by the Divi.help staff works
    3) Also solved by the Divi.help staff
     
    #5 Ernst, Aug 13, 2020
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  6. Ernst

    Ernst Member
    Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    I solved it by giving the title a min-height of 75px;
     
    #6 Ernst, Aug 13, 2020
    Problemizer.com likes this.
(You must log in or sign up to post here.)