How can I put something like this on my front page / homepage?

Hi there,

if you're starting from scratch then you could Import Dispatch from our Site Library:

https://generatepress.com/site-library/#dispatch

Hi David,

Not really starting from scratch.
I just need that portion or element.
Is it possible to extract or import just that portion/element?

Thanks,

Unfortunately not. And it takes a little work to setup. Can provide instructions if you need ?

I see, instructions for importing from library? no need.
Do you have another solution or suggestion?
I'm thinking of using WP show post, but not sure if it's possible with the free version

That is built with WP Show Posts.
I can walk you through the steps of creating it. Let me know,

Hi David,

Please do so. I have a small idea, of using WP shows posts, since I used that on my side bar.
Kindly show me how.

Thanks!

Hope you're sitting comfortably :)

1. Install WP Show Posts plugin - which you have.
2. Create a new list with the following settings:

4 posts per page
NO pagination
Columns: 1
Images: Center and above title
Content: Excerpt, Include title
Meta: Include terms, below title.

3. Add this PHP Snippet to your site:

add_action( 'wpsp_before_header' , function() {
    ?>
    <div class="wpsp-content-wrap">
    <!-- Openeing wrapper -->
    <?php
}, 15 );

add_action( 'wpsp_after_content' , function() {
    ?>
    <!-- Close WPSP Wrapper -->
    </div>
    <?php
}, 15);

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

4. Add the CSS listed here:

https://gist.github.com/diggeddy/9e77109f4dc80d858074282b2ae2f491#file-dispatch-gp-site-css-L189

You only need Lines 189 to 350.

5. Create a new Header Element.
Add your WPSP Short code to the content.
In the Element Classes field add: wpsp-grid wpsp-card
Set your Display Rules to Front Page

Thank you very much!

Well it's not exactly like on the Dispatch, but I think I can edit the CSS from here.

Thanks again! (b^_^)b

By the way, any idea how to change the font size of the title, and font color?

How can I target those in the CSS? It seems to affect all the titles including those outside the wp-show-posts area.

Thanks!

Awesome - first go ( almost )
I would change the WPSP title to a H2.
And you have some CSS that is already affecting the wp-show-posts-entry-title

You can style it specifically for the grid layout using: .wpsp-card .wp-show-posts-entry-title

Glad to be of help.

For the Header Grid you can do this - we can target the <a> element as its the one controlling the colors:

.wpsp-card .wp-show-posts-entry-title a {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

and for Hover color:

.wpsp-card .wp-show-posts-entry-title a:hover {
    color: #eee;
}

Thank you for that.
I was able to change the size and/or add a background color for the title.
But I can't seem to change the color of the text title (blue).
Adding "color" inside the ".wpsp-card .wp-show-posts-entry-title" doesn't seem to affect the title color.

Never mind! I got it. :)
I should have included the "a"

Thanks again! Have a great weekend!

Glad you've figured out!

Looks like David did include the color property in the first block of CSS here:
https://generatepress.com/forums/topic/how-can-i-put-something-like-this-on-my-front-page-homepage/#post-1439650