Simple Homepage layout using Sections

[gedosan]

Hi guys

I’m trying to create something like this homepage (see below), but using only GP and not a page builder. I figured sections might be the way to go, but can’t see a way to pull through posts. How would you go about it?

Update: I’ve just discovered Tom’s WPShowPosts…cool! Got it pulling through to my homepage, so far so good. Still a couple of things I’d like to do…

1. Have the title of the post to the left or right of the main image
2. Have the category that the post is from appearing above the title
3. Control the font size

(Basically like the site I shared below)

Possible?

G

[David]

Hi there,

try the WP Show Posts plugin ( its another of Tom’s ):

https://wpshowposts.com

It used in the Library Site: Dispatch to create the different ‘post sections’.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Thanks David – please see the update I just added to my question.

[David]

1. You can set the Image to align left in the Image settings.
2. Set the Terms below title and add this CSS:

.wp-show-posts-entry-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

3. To style the Meta this CSS:

.wp-show-posts-meta {
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}

The Pro version does afford some more style controls, and the current Beta version of it has added Cards:

https://demos.wpshowposts.com/cards/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Thanks – I’ve set the image to align left (which it does) but the title stays above the image, not aligned to left or right. How would I do that?

[gedosan]

Just bought the WPSP Pro – v cool. How can I add the category (terms) above the title?

[David]

Where you set the Image Alignment below that you can set it to above Title.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Ooops – i updated the CSS above for Point 2.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Great! Could you provide CSS to:

– Align term to ‘top’ so it aligns with the pic. I’d also like the title to shunt up too below it.
– Control space between term and title.

Thanks

[David]

Could you link me to the Site ? You can edit the original topic and use the Site URL field for privacy.

Hard to do it without seeing it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

Sure – just shared – scroll to the bottom of that page and you’ll see what I’m doing.

Also another slight issue – I want the image you see to be much wider (set it to 700px) – but it’s not showing the width on the front end.

Cheers

[David]

1. Remove the content wrap padding top on desktop to move meta up:

@media(min-width: 769px) {
    .wpsp-row .wpsp-content-wrap {
        padding-top: 0 !important;
    }
}

2. Reduce space between Meta and Title

.wpsp-row .wp-show-posts-entry-title {
    margin-top: 5px;
}

3. The the Row card style sets the image and content at 50% / 50% columns. So this to adjust that:

.wpsp-row .wp-show-posts-image {
    flex: 1 0 60%;
}
.wpsp-card.wpsp-row .wpsp-content-wrap {
    flex: 1 0 40%;
}

All of these style changes are specific to the Row card style.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[gedosan]

INCREDIBLE! thanks David, one happy customer 🙂

[gedosan]

One other little small thing – is there a way to flip the order, so text left pic on the right?

[David]

Just a note: The Row List actually reverses the columns on each subsequent row. Just be mindful of that if you display more posts.

For the single post then this:

.wpsp-row .wp-show-posts-inner {
    flex-direction: row-reverse;
}

( Just don’t tell anyone i been providing WPSP Support here 🙂 )

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts