[Resolved] Can I do this with Element Blocks?

Home Forums Support Can I do this with Element Blocks?

  • This topic has 6 replies, 2 voices, and was last updated 1 month ago by Elvin.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1421080
    Tris

    I have this great new blog layout that was designed for me. Before I hand it off to a better dev than me (which is really pretty much any dev), can I do this with Element Blocks?

    New Blog Layout

    Link to image if it doesn’t load: https://www.dropbox.com/s/jz96baw0joet2pz/skyworkblog.png?dl=0

    I’ve been getting pretty good at GenerateBlocks (here’s the staging site, not ready for primetime, but it’s not bad https://staging-skyworkult.temp513.kinsta.cloud/sky-work-features/) for nice cards and such, so if I could build a blog page with blocks instead of editing the archive template … I’d be into that.

    Much appreciated.

    #1421139
    Tris

    I figured it out! Inspired by another post, I used WP Show Posts and tweaking a lot of CSS. https://staging-skyworkult.temp513.kinsta.cloud/blog/ . Not perfect yet, but I’m happy with the progress.

    #1421186
    Elvin
    Customer Support

    Hi Tris,

    Nice work. So great to see you using WP Show Posts and finding ways with it.

    To add to to your current setup, you may want to consider adding these css styles.

    .wpsp-read-more {
    margin-top: auto;
    align-self: center;
    }
    
    .wp-show-posts-columns .wp-show-posts-inner {
    flex-direction: column;
    display: flex;
    }
    
    .wpsp-read-more a {
    margin-left: 0;
    }

    Here’s how it’ll look like when you add these css styles.
    https://share.getcloudapp.com/12uJze8A

    You might also consider assigning a fixed height on the image and reducing the number of words displayed on excerpt so the card layout looks visually even.

    Let us know if this helps. 🙂

    #1421247
    Tris

    Thank you Elvin! I appreciate your help. Tris

    #1421261
    Elvin
    Customer Support

    No problem. We’re always glad to help. You’re welcome.:)

    #1422078
    Tris

    All the changes work fine … except the buttons. I don’t know what magic you did Elvin when you inspected the CSS … but even following along, align-self doesn’t center. What am I missing?

    #1422259
    Elvin
    Customer Support

    I’ve reinspected your site and saw that display: flex; didn’t apply to the button’s parent element.
    https://share.getcloudapp.com/yAubQgGZ

    display:flex has to be applied to parent elements for align-self:center; margin-top:auto; to work.

    You may have to force the class selector to use !important if its not applying.

    .wp-show-posts-inner {
    flex-direction: column;
    display: flex !important;
    }

    You can try this css code. Let us know if this works for you.

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