[Support request] Simple Homepage layout using Sections

Home Forums Support Simple Homepage layout using Sections

  • This topic has 30 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #1007456
    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

    #1007496
    David
    Staff
    Customer Support

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

    #1007497
    gedosan

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

    #1007514
    David
    Staff
    Customer Support

    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/

    #1007543
    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?

    #1007554
    gedosan

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

    #1007555
    David
    Staff
    Customer Support

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

    #1007556
    David
    Staff
    Customer Support

    Ooops – i updated the CSS above for Point 2.

    #1007572
    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

    #1007576
    David
    Staff
    Customer Support

    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.

    #1007578
    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

    #1007584
    David
    Staff
    Customer Support

    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.

    #1007590
    gedosan

    INCREDIBLE! thanks David, one happy customer 🙂

    #1007599
    gedosan

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

    #1007602
    David
    Staff
    Customer Support

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

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