[Resolved] Homepage design

Home Forums Support [Resolved] Homepage design

Home Forums Support Homepage design

  • This topic has 23 replies, 4 voices, and was last updated 3 months ago by Ying.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1967656
    Abdul

    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

    #1967904
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1968259
    Abdul

    Thanks 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?

    #1968264
    David
    Staff
    Customer Support

    Hi there,

    do you have the page setup ? If so can you share a link so we can see what you have ?

    #1968271
    Abdul

    Hi 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?

    #1968372
    David
    Staff
    Customer Support

    Are you wanting the exact same design ie. the Line runs through the Heading as per the image you shared?

    #1968695
    Abdul

    Yes David. Looking to build a similar page but with lesser categories that I currently have right now.

    #1969037
    David
    Staff
    Customer Support

    Add 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

    #1970175
    Abdul

    Right 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

    #1970180
    David
    Staff
    Customer Support

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

    #1970194
    Abdul

    Thanks 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

    #1970252
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1970637
    Abdul

    Hi 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

    #1970654
    David
    Staff
    Customer Support

    Can you share a link to YOUR site.

    #1970694
    Abdul

    Hi David,

    Provided the details to my site in the private information section.

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