Setting 'Featured/Highlighted' Posts on Homepage

[AshleyF]

Hi,

I may be over thinking this and it may be a simple thing to do. I want to create a row of posts on my homepage, but rather than specific latest 3, I want to set three individual posts, a sort of ‘featured/highlighted posts’ if you like. The idea being within each block the image would appear, with the title over the image towards the bottom.

I was hoping to set like this (created using the grid element). So one main featured post and two less important ones.

I was watching your Looper introduction which was really helpful and I created a row of latest posts further down that works great, but of course that uses the latest posts (whatever number I set). For my chosen three featured posts like I want above, is there a way to set it, so when I edit the homepage I just filter to a specific post of my choosing?

Hopefully that makes sense.

[AshleyF]

Ok, think I have worked it out, perhaps somebody can advise if I have done this correctly.

I discarded the grid and created a two column layout, making the row the Looper provider and selected query builder to select my three chosen posts. I then made two Looper consumers as per your video instruction (very helpful) to create the one larger post and the two smaller posts.

The only issue I have that I cant seem to work out is how to create a perfectly aligned row with the three images displaying as above layout shows. As you can see below, the images seem to display at the size of the image rather than how I want to be in the layout mock above.

I guess my updated question is, how do I create three perfectly aligned images with a 10px margin between them?

[prakash_s]

Hello @AshleyF,

Thanks for writing to us,

In order to help you with your concern please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[AshleyF]

Hi, I have added a secure note with the staging URL.

I have been using your Looper video and template element all day to more or less create the look I want with that top element (above the ‘welcome to’ message).

What I want to try and do is place the dark overlay that covers the entire image to cover the bottom part (just above the post title), so then the rest of the image is true colour.

Also, I am not sure how to adjust the gap between the two posts on the right?

[christian]

Hey @AshleyF,

Regarding the dark overlay, you will need custom gradient CSS for the Section or Row. You can generate
CSS gradients from sites like this https://cssgradient.io/gradient-backgrounds/. Plug in the code in the Section’s Element CSS like the following screenshot.

Regarding the gap, the grid is actually tight. You will need your image to span 100% of cell or better yet, use large images so it covers the cell.

Hope that helps.