[Resolved] How to edit card layout, Would I like my cards to look like these?

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support How to edit card layout, Would I like my cards to look like these?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #33282
    Cristiano
    Participant

    I’m trying to edit my cards so they look like these on this site below, could you help me?

    Mainly the mouse over shading effects

    Card 01:
    01

    Card 02

    02

    Card with list of trending articles:

    03

    Related Posts:

    03

    I’m using:

    the mod (here on the forum) that makes the category name appear before the title
    The Premium GP Plugin β€’ Version: 2.0.3
    The WP Show Posts Pro – Developer – 1.2.0

    There is no sensitive area here, how can I send my demo site and inspiration site addresses for you to review?

    thank you very much for your attention

    #33289
    elvin
    Moderator

    Hi there,

    Do you want to copy the exact same CSS styling done on these examples?

    If yes, can you link us to the page you saw these? We can get the styling from there and convert it for. πŸ™‚

    You can send the details using our contact page – https://wpshowposts.com/contact/

    #33298
    Cristiano
    Participant

    Hi there,

    Do you want to copy the exact same CSS styling done on these examples?

    Yes!

    If yes, can you link us to the page you saw these? We can get the styling from there and convert it for. πŸ™‚

    You can send the details using our contact page – https://wpshowposts.com/contact/

    I sent it to you, thank you so much for your attention!

    #33321
    elvin
    Moderator

    Thank you.

    The shadow effect and rounded corners can be done with this CSS:

    .wp-show-posts-inner {
        box-shadow: 5px 5px 0 rgb(0 0 0 / 3%);
        border-radius: 9px 9px 9px 0;
    }

    The hover effect can be done with this –

    .wp-show-posts-inner:hover img {
        transform: translateZ(0) scale(1.03,1.03);
    }
    
    .wp-show-posts-inner img {
        transition: transform .5s ease-in-out;
        filter: grayscale(1%);
    }

    As for the actual post layout, it’s pretty close to “Base” from the Cards style dropdown. You can try using that. πŸ˜€

    #33348
    Cristiano
    Participant

    The effects were great, thanks a lot!

    I made a few attempts (on my demo site I already sent the link), but I was unsuccessful, furthermore

    I would like to create something like this:

    2

    But I only got this:

    2

    I cannot increase the size of the featured post title.
    I cannot remove the two images (from the two boxes) below the featured posts
    I can’t shrink the space below the second column heading
    I can’t create a Trending, as in the first image.

    Can you help me, please?

    #33366
    elvin
    Moderator

    I cannot increase the size of the featured post title.

    Is it only for the featured post title? If so, you’ll have to do it with custom CSS.

    Since the featured post is the first post, we can do something like this:

    section#wpsp-123 article:first-child h2.wp-show-posts-entry-title a {
        font-size: 60px;
    }

    replace 123 with the wpsp list ID.

    I cannot remove the two images (from the two boxes) below the featured posts

    Are the posts below the featured post coming from the same list? Can you link me to the page in question?

    I can’t shrink the space below the second column heading

    I believe it was made that way to at least keep the same height for visual balance between the post cards. Are you trying to do otherwise?

    Or perhaps, are you trying to make the images go the same height?

    Note: this is tricky to deal with as we’ll have to consider the length of the title of the posts. Some are longer than others.

    I can’t create a Trending, as in the first image.

    Trending seems to be a sidebar. You’ll have to add a WPSP list there with a WPSP list setting only showing the post title and your preferred post meta (and w/o a card style).

    #33388
    Cristiano
    Participant

    Hello, I sent the information by email, Thanks!

    #33403
    elvin
    Moderator

    Can you try adding same-height CSS class the left and right column container on test page/test-02/?

    And then add this CSS:

    .same-height .gb-inside-container,
    .same-height .gb-inside-container section#wpsp-727{
        height: 100% !important;
    }

    This would be the result – https://share.getcloudapp.com/12uv0pxm

    As for /test-01/

    Consider changing the site of the image. This should automatically push down the 2 posts below it. Similar to /test-02/‘s layout.

    #33408
    Cristiano
    Participant

    It worked, thank you very much!

    #33444
    elvin
    Moderator

    Nice one. No problem. πŸ˜€

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