Skip to main content

How to Make the Entire Post Inside the Blog Module Clickable

Use custom CSS code to make the entire post box clickable in the Blog module.

Updated over a year ago

The posts displayed by the blog module have a clickable title and Feature Image by default. Custom CSS Code can be used to make the entire Post clickable inside the Blog module.

  1. Open the Blog module's settings by clicking on the Gear icon

  2. Go to Advanced Tab → CSS ID & Classes → CSS Class

  3. Set the divi-blog-module-clickable-article

    Divi Blog module custom css class

  4. Go to WordPress Dashboard → Divi Theme → Options General Tab → Custom CSS

  5. Add this CSS code:

    .divi-blog-module-clickable-article .et_pb_post,
    .divi-blog-module-clickable-article .et_pb_post {
      position: relative;
    }

    .divi-blog-module-clickable-article .et_pb_post .entry-title a:after,
    .divi-blog-module-clickable-article .et_pb_post .entry-title a:after {
      position: absolute;
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

    .divi-blog-module-clickable-article .et_pb_post:hover,
    .divi-blog-module-clickable-article .et_pb_post:hover {
      cursor: pointer;
    }

  6. Save your changes

Related Articles
How to Equalize the Posts' Height Within the Blog Module
Move The Divi Blog Module Author, Date, Or Category Over The Featured Image
How to Eliminate Separators in the Blog Module Post's Meta
How to Add Social Share Icons to Posts in the Blog Module Without a Plugin
The Divi Blog Module (Divi 5)
Did this answer your question?