Is it possible of doing this?

Hi there,

Anything is possible, but that would require quite a bit of custom coding, unfortunately.

I'm willing to help you achieve it bit by bit if you'd like? Trying to do it all at once would be a huge post with lots of instructions. Might be easier to break it up a bit.

Let me know :)

Sure, no rush at all :)

Ok, let's try:

1. Customize > Layout > Blog and set the featured image to "Above Title"
2. Uncheck "Display padding around images"
3. Disable the comment count, tags and author and categories
4. Display the read more button

Next, add this function:

add_action( 'generate_after_entry_title', function() {
    $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );

    if ( $categories_list ) {
        printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
            _x( 'Categories', 'Used before category names.', 'generatepress' ),
            $categories_list
        );
    }
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Now, add this CSS:

.blog .inside-article,
.archive .inside-article {
    position: relative;
}

.blog div.entry-meta,
.archive div.entry-meta {
    position: absolute;
    right: 40px;
    bottom: 40px;
}

p.read-more-container {
    position: absolute;
    bottom: 40px;
    left: 40px;
}

.entry-summary {
    margin-bottom: 80px;
    border-bottom: 1px dashed #ddd;
}

.post-image + header.entry-header {
    margin-top: -110px;
}

.post-image + header.entry-header h2.entry-title a {
    color: #fff;
}

.blog .cat-links:before,
.archive .cat-links:before {
    display: none;
}

.blog .cat-links a,
.archive .cat-links a {
    background: purple;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 5px;
}

Great, is looking quite close.

2 Things:

This is how is looking:

#1: Is it possible to align the date and the button? The button seems to be "centered" and the date is not or it seems that way.

#2: Could we get rid some of the space between the dashed line and the button, and from the button to the bottom of the container, does that make sense? So it makes the container a bit smaller.

1. For sure, just change the bottom value of this part of the CSS:

.blog div.entry-meta,
.archive div.entry-meta {
    position: absolute;
    right: 40px;
    bottom: 40px;
}

2. Any chance you can link me to the page?

Great, thanks! I went ahead and made a live site, and added it to the url box!

Few things:

1. Change the margin-bottom: 80px in .entry-summary to 70px.
2. Change the bottom value for .blog div.entry-meta, .archive div.entry-meta to 30px.
3. Change the bottom value for p.read-more-container to 20px

That should do it :)

Thank you so much :)

You're welcome :)