[Support request] Best way to recreate these “cards?”

[Jeff]

I’m not sure what these are called….content cards maybe? Here’s the example I want to copy, on https://www.starterstory.com, what I’m referring to is the web page type that each of these articles are created on. The case studies, interviews, etc all the content is created on these “cards.” Hovering over the card triggers a display of some content and then when you click on the card it opens up the full article.

On a site that I’m starting, I’d like to have the same thing where my articles will be created and published on these “cards”

What is the best way to recreate these and display them on the front page? Are these just normal pages or posts or custom post types or custom blocks or page templates? I’ve never used custom post types but from reading about them it seems like cpt’s could be a possibility.

I didn’t think these should be normal pages because I want to be able to manage and organize the cards in a better way than just using tags on pages or posts. So for example if “Interviews” is one of the content types on my site, I want to be able to pull up all the Interview cards even if I accidentally forgot to use the “interview” tag on the article. And I want to be able to bulk edit them if necessary even if a tag was accidentally missed.

Any thoughts or directions you can point me towards to learn how I can recreate a site like starterstory or at least the “content cards” they’re using for all the content pieces they publish? That site isn’t built on wordpress but the content is organized in the same way that I want. I’ve seen lots of WordPress sites designed the same way but never knew how it was being done.

[Elvin]

Hi Jeff,

I’ve inspected the site you’ve referenced and it seems really customized for that site’s specific purpose.

GP is general use. But that doesn’t mean we can’t replicate what was on the reference site or atleast do something similar.

The site you’ve reference has a post grid of 3 columns w/ its post list items in card style.

I believe you can do all of this with Block Element – Content template but with extra custom steps. (see more about block element content template here – https://www.youtube.com/watch?v=-ZTQP_KA2xE

The tedious part about this is the actual making of the template because there seems to be a lot of dynamic data to be fetch.

It’s a flip card style and the initial state of the card already pulls 6 dynamic values and the flip side seems to be pulling 10 dynamic values. (total of 16 + the read more link)

So you basically have to do layout that pulls 16 dynamic values

And then you’ll custom CSS to do the flip animation.

[Jeff]

Thanks. So what are these “cards” exactly? Are they posts or pages or custom post types or blocks?

[Elvin]

Thanks. So what are these “cards” exactly? Are they posts or pages or custom post types or blocks?

I’ve observed the site structure as well and these cards work like posts in a post listing on a normal Blog page.

You can actually check and see it too. When you click on card, it goes to its post page, which is pretty similar to clicking a post link on a Blog page. 🙂

[Author]

Posts