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

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1439007
    Peter Paul

    Hi Team,

    Sorry I forgot what it is called, but how can I put something like this on my front page or homepage?
    You can see an example on these pages:
    https://www.techspot.com/
    https://thinkcomputers.org/

    I am referring to the element that is just below the header of those pages.
    It’s like a tile or masonry of posts, showing posts under a particular category.
    Sorry I really forgot what it’s called.
    I used to have one with my previous theme.

    What’s the best way to implement it on GP, without affecting the speed much?

    Thanks!

    #1439216
    David
    Staff
    Customer Support

    Hi there,

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

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

    #1439279
    Peter Paul

    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,

    #1439302
    David
    Staff
    Customer Support

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

    #1439341
    Peter Paul

    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

    #1439535
    David
    Staff
    Customer Support

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

    #1439580
    Peter Paul

    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!

    #1439597
    David
    Staff
    Customer Support

    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

    #1439620
    Peter Paul

    Thank you very much!

    It worked! See-> https://thepcenthusiast.com/

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

    Thanks again! (b^_^)b

    #1439625
    Peter Paul

    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!

    #1439631
    David
    Staff
    Customer Support

    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.

    #1439650
    David
    Staff
    Customer Support

    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;
    }
    #1439653
    Peter Paul

    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.

    #1439654
    Peter Paul

    Never mind! I got it. 🙂
    I should have included the “a”

    Thanks again! Have a great weekend!

    #1439694
    Leo
    Staff
    Customer Support

    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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.