- This topic has 30 replies, 2 voices, and was last updated 3 years, 4 months ago by
David.
-
AuthorPosts
-
September 12, 2019 at 3:20 am #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
September 12, 2019 at 3:58 am #1007496David
StaffCustomer 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’.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 12, 2019 at 4:00 am #1007497gedosan
Thanks David – please see the update I just added to my question.
September 12, 2019 at 4:20 am #1007514David
StaffCustomer 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:
https://demos.wpshowposts.com/cards/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 12, 2019 at 5:01 am #1007543gedosan
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?
September 12, 2019 at 5:19 am #1007554gedosan
Just bought the WPSP Pro – v cool. How can I add the category (terms) above the title?
September 12, 2019 at 5:20 am #1007555David
StaffCustomer SupportWhere 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/September 12, 2019 at 5:21 am #1007556David
StaffCustomer SupportOoops – i updated the CSS above for Point 2.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 12, 2019 at 5:39 am #1007572gedosan
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
September 12, 2019 at 5:45 am #1007576David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 12, 2019 at 5:48 am #1007578gedosan
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
September 12, 2019 at 5:57 am #1007584David
StaffCustomer 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 12, 2019 at 6:02 am #1007590gedosan
INCREDIBLE! thanks David, one happy customer ๐
September 12, 2019 at 6:06 am #1007599gedosan
One 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 #1007602David
StaffCustomer 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 ๐ )
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.