Simple Homepage layout using Sections

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'.

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

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/

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?

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

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

Ooops - i updated the CSS above for Point 2.

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

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.

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

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.

INCREDIBLE! thanks David, one happy customer :-)

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

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 :) )