- This topic has 30 replies, 2 voices, and was last updated 4 years, 7 months ago by David.
-
AuthorPosts
-
September 12, 2019 at 3:20 am #1007456gedosan
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
September 12, 2019 at 3:58 am #1007496DavidStaffCustomer SupportHi there,
try the WP Show Posts plugin ( its another of Tom’s ):
It used in the Library Site: Dispatch to create the different ‘post sections’.
September 12, 2019 at 4:00 am #1007497gedosanThanks David – please see the update I just added to my question.
September 12, 2019 at 4:20 am #1007514DavidStaffCustomer Support1. 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:
September 12, 2019 at 5:01 am #1007543gedosanThanks – 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?
September 12, 2019 at 5:19 am #1007554gedosanJust bought the WPSP Pro – v cool. How can I add the category (terms) above the title?
September 12, 2019 at 5:20 am #1007555DavidStaffCustomer SupportWhere you set the Image Alignment below that you can set it to above Title.
September 12, 2019 at 5:21 am #1007556DavidStaffCustomer SupportOoops – i updated the CSS above for Point 2.
September 12, 2019 at 5:39 am #1007572gedosanGreat! 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
September 12, 2019 at 5:45 am #1007576DavidStaffCustomer SupportCould 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.
September 12, 2019 at 5:48 am #1007578gedosanSure – 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
September 12, 2019 at 5:57 am #1007584DavidStaffCustomer Support1. 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.
September 12, 2019 at 6:02 am #1007590gedosanINCREDIBLE! thanks David, one happy customer ๐
September 12, 2019 at 6:06 am #1007599gedosanOne other little small thing – is there a way to flip the order, so text left pic on the right?
September 12, 2019 at 6:09 am #1007602DavidStaffCustomer SupportJust 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 ๐ )
-
AuthorPosts
- You must be logged in to reply to this topic.