- This topic has 25 replies, 4 voices, and was last updated 1 year, 10 months ago by Ying.
-
AuthorPosts
-
October 18, 2021 at 12:16 pm #1967656Abdul
Hi,
I would like to create a similar page Link
Can you please let me know if this can be done using Generate Blocks and Show Posts? If some other option will be best way to implement this then please do let me know
Thanks
October 18, 2021 at 8:29 pm #1967904ElvinStaffCustomer SupportHi there,
It’s definitely possible with GenerateBlocks + WPSP.
The first grid would be a WPSP list displaying 5 posts.
We can do the same layout (2 on first row, 3 on second row) using grid layout property with custom CSS.
As for the category listings:
You need to place a WPSP shortcode 22 times with varying category term for each shortcode for the 22 category listings with 3 column post grids.
Example using multiple instance of WPSP list id
1234
but with different categories used:[wp_show_posts id="1234" settings="taxonomy=category&tax_term=dogs"]
[wp_show_posts id="1234" settings="taxonomy=category&tax_term=cats"]
[wp_show_posts id="1234" settings="taxonomy=category&tax_term=birds"]
[wp_show_posts id="1234" settings="taxonomy=category&tax_term=insects"]
These 4 shortcodes will use the same WPSP list (ID = 1234) but will display different posts depending on the category tax term specified. (in this example, it’s dogs, cats, birds, and insects)
You can apply this concept on the 22 category listings on similar to your reference site.
October 19, 2021 at 5:26 am #1968259AbdulThanks Elvin
Can you please let me know how to get that border for each of those 3 posts under each category so that those containers are having equal sizes for all those 3 posts?
October 19, 2021 at 5:29 am #1968264DavidStaffCustomer SupportHi there,
do you have the page setup ? If so can you share a link so we can see what you have ?
October 19, 2021 at 5:36 am #1968271AbdulHi David,
It’s currently in draft mode only. I have not yet published it. Please let me know how I can share it with you?
October 19, 2021 at 7:13 am #1968372DavidStaffCustomer SupportAre you wanting the exact same design ie. the Line runs through the Heading as per the image you shared?
October 19, 2021 at 8:59 am #1968695AbdulYes David. Looking to build a similar page but with lesser categories that I currently have right now.
October 19, 2021 at 2:21 pm #1969037DavidStaffCustomer SupportAdd this CSS to your site:
.section-heading { position: relative; display: flex; align-items: center; } .section-heading:before, .section-heading:after { content: ''; flex: 1; background-color: #000; /* set line color */ height: 1px; /* Set line height */ } .section-heading:before { margin-right: 30px; } .section-heading:after { margin-left: 30px; }
Then for your Titles use a GenerateBlocks Headline Block, which you can style in the editor, with the block selected go to Advanced > Additional CSS Class(es) and add:
section-heading
The view the page
October 20, 2021 at 4:27 pm #1970175AbdulRight now it is showing like this on the site (refer to the image in the private section).
Can you please let me know how I can show the posts like this Link
October 20, 2021 at 4:59 pm #1970180DavidStaffCustomer SupportChange the CSS to this:
.section-heading:before, .section-heading:after { content: ''; flex: 1; background-color: #000; /* set line color */ height: 3px; /* Set line height */ } /* set link hover */ .section-heading a { box-shadow: 0px -8px 0px #f00 inset; transition: all 0.6s ease 0s; padding: 0px; margin: 0 30px; } /* link hover color */ .section-heading a:hover { box-shadow: 0px -1em 0px #f00 inset; color: #fff; }
You need to add a Link to the Headline.
I have commented the CSS where you can change the line color and its height.
And in the link color and hover section you can change the#f00
to a color of your choosing.October 20, 2021 at 5:08 pm #1970194AbdulThanks David.
I am asking for a solution to have the posts under the section header in containers like the one in this Link
Those 3 posts that are shown in that category in boxes of equal sizes
October 20, 2021 at 8:00 pm #1970252ElvinStaffCustomer SupportThanks David.
I am asking for a solution to have the posts under the section header in containers like the one in this Link
Those 3 posts that are shown in that category in boxes of equal sizes
To display post grid of a specific category, you’ll need a plugin that does that for you.
That’s where the WP Show Posts come in.
After you’ve made the header, you can insert a WPSP list under it w/ a specific category query. See my examples on my previous reply here – https://generatepress.com/forums/topic/homepage-design-2/#post-1967904
Here’s WP Show Post’s site – https://wpshowposts.com/
Here are some demo designs – https://demos.wpshowposts.com/cards/ – these are optional. We can style it completely different w/ custom CSS.
October 21, 2021 at 6:01 am #1970637AbdulHi Elvin,
I used the WPSP as you said and have the posts displayed but they are not getting displayed in equal-sized containers like the one on the reference site Link
October 21, 2021 at 6:22 am #1970654DavidStaffCustomer SupportCan you share a link to YOUR site.
October 21, 2021 at 7:07 am #1970694AbdulHi David,
Provided the details to my site in the private information section.
-
AuthorPosts
- You must be logged in to reply to this topic.