Introducing Cards Skin: Instantly Upgrade Your Blog Design

Today, we’re excited to share a brand new way to display your posts. We call it Cards, and it allows you to create beautiful card-like layouts.

Your blog is where you display most of your content, so it has to look its best. Today, we are introducing the Cards skin, a new layer of design that sits on top of the Posts widget, allowing you to upgrade your blog design with the latest material design trend.

What is a cards layout?

A cards layout is a dynamic grid that displays content in card-like boxes. It helps organize large amounts of data in an ordered, minimalist and stylish way.

This foundation of this style is derived from Google’s material design. Pinterest was the first to incorporate it as an innovative way to lay out content on the web. Since then, cards have become extremely popular and were mentioned as one of the leading design trends of 2017. It is currently used by top brands like Dribbble, Google, and UXPin.

See how much better a blog looks with the Cards skin:

☞ Hover to reveal cards skin ☜

Skin in the game

The importance of the new Cards feature lays not only with providing you with another design layout. It represents an evolution in Elementor, the evolution into skins.

Cards is not a separate widget, and is a design layer that sits on top of the already existing  Posts widget. This is why we call it a skin.

The skin expands the design capabilities of the widget further. Cards is the first skin we put out, but we have great plans for future skins. Skins are unique to Elementor and represent an important advancement of our page builder. With skins, we plan to lead the design industry and offer superior capabilities that will be useful for web designers of every level.

Skins will make Elementor much more powerful, and enable web designers to take Elementor designs even further.

Pick a card, any card

It’s time to dive in, and see the incredible options built into the new Cards skin.

card-001

Hover effects

The hover effect helps bring the cards to life, and is part of the material design element of the Cards. The featured image and the card itself both change on hover. The former gets a gradient overlay, and the latter gets a box shadow.

Badge

The badge lets you show the category, tag or other taxonomy inside the card. This way, the user instantly recognizes which group the card belongs to. This adds to the overall user experience, and is seamlessly integrated inside the card.

card-002
card-003

Avatar

You can display the user avatar image that is related to each post in every card. This can be the author of the post, the creator of the portfolio piece and so on. As always, you get full control over the Avatar image design.

Boundless flexible design

We’ve made the Cards skin super-flexible, so you can create an endless variety of designs with it.

cards-custom

You get total control and customization over each and every element:

  • Image size and ratio
  • Border radius
  • Color & typography of every element
  • Show & hide every element
  • Alignment
  • Background

The list goes on… You can get really creative and create designs that are truly unique to your website.

Cards skin by Elementor

If you still haven’t upgraded to Elementor Pro, this is a great chance to do so, and explore the new features we’ve just added to the plugin.

3 features you may not know about

Because Cards are a new addition to the Posts widget, we thought it would be helpful to recap 3 important features available in the Posts widget.

1. Using the Posts widget to show related posts

After adding the Posts widget, we were surprised to find out it was used to display related posts, using the Global functionality. This is a use we had not planned for, but we’ve decided to improve it nonetheless. You can now filter the current post that is being visited, so you can make sure the visitor never sees a related post that is the same as the current post being visited.

2. Choosing from 3 possible blog layout

When designing your blog with the Posts widget, you have 3 main layouts options to choose from: Grid, Masonry or Blog (1 post per row) layouts. These options mean you can design a wide range of blog layouts with Elementor, and customize it to fit any website.

3. Creating a mobile responsive blog

Elementor’s Mobile Editing toolset appears across the page builder, including in the Posts widget. They let you visually customize a responsive blog that looks great on mobile devices. With this toolset, you can fix most responsive problems that arise in blog archive page design, like having a title that’s too big, changing the number of columns per row, changing padding and margin or changing the size of the featured image.

Improvements under the hood

When the next update of Elementor v-1.5.0 comes out in the next couple of weeks, users will have the ability to rollback to previous versions of Elementor & Elementor Pro. We’ve also added an automatic beta system and a settings system that is based on tabs.

The foundation for this update has already been placed in the new version of Elementor Pro, so all Elementor users will be able to enjoy this functionality in the next couple of weeks.

Conclusion

To conclude, the Cards skin helps expand the Posts widget capabilities even further, allowing you to showcase posts, articles, works and more in a unique and trendy fashion. I invite you to easily improve your current websites with a few simple clicks using Cards, exclusive on Elementor Pro.

Liked This Article?

We have a lot more where that came from! Join 482,910 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Ben Pines
Ben Pines
Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

84 Responses

  1. Seriously awesome!! I’m off to update and play with this now. Definitely looking forward as well to the other skins to come and other functionality with Elementor Pro! Good job Ben

  2. This is awesome. I love all of the customization options that are available, and the fact that you can use these for pages as well as posts. One feature I would like to see added is the ability to change the title size with the traditional S, M, L, XL, XXL. Looking forward to future card skins!

  3. I’m trying to create some templates for portfolio items. I love the design of the collections at Priime. Have you seen the priime collections?

    This is so great to see cards! My blog is going to get upgraded 🙂

  4. I’ll admit, I generally dread getting email “updates” from a lot of other services and products I use, but I’m always excited to get Elementor emails to see what’s new. I’ve been really impressed at how user friendly (and beautifully designed) Elementor is. Looking forward to what’s in store.

  5. One thing I would like to see is that the category badges can be designed so that we can select different colours manually for different categories of the posts. This would be a simple little update for the end user, but very visually rich when it comes to searching posts of certain interest/category.

    A filter like the portfolio would be a nice addition.

    Well done Team Elementor. So happy to have made the transition from Beaver.

  6. My license id was replaced by “local” once I entered the id back into the field EP recognized an update was available. After the update, I was able to see the “Cards” feature.

  7. Hi Ben,
    Great job! You guys are simply amazing in how rapidly you are maturing Elementor.

    I wish that Elementor has an Avatar widget that I can use in Menus.

  8. Nice news! Here are my ideas for the next posts widget upgrade:
    1. Post meta: icons (maybe fontawesome) on/off for autor, date and comments count
    2. Navigation on/off: standart numbers with previous /next, axaj load more, infinite scroll on focus
    3. Filter above posts. In settings take main taxonomy to filter: category, tags or custom if has. Filter with ajax like some other portfolio plugins (by the way this filtering feature can be use in portfolio widjet too). Search field beside the filter for ajax filtering posts by search query.

    like so =) Thanks!

  9. This is fantastic. A couple random things that may or may not be possible. I also would love a filtering option or just to apply the skin to the portfolio element if that was possible. I especially like the badge and wonder if that could some how be added to the flip box element. If not I’m pretty dang happy with the cards as is. I think it immediately shortened the dev time for a site I’ve been working on forever. Every time you guys come out with something new it makes my life easier. I swear you’re reading my mind and releasing just what I need. Keep it up!

    1. Thanks for the feedback. We will take your suggestions into account, however, we have a lot of other features we are working on. We will expand Cards and other skins in the future.

  10. Nice work team E! I’m wondering if the option to display all tags is a feature on the drawing board? When I have a post with a few tags, it seems to be randomly selecting just one to display, so more control over displaying all or selecting one using another pattern would be icing on the new Post Cards cake!
    Thanks again 🙂

  11. The improvement looks great but since I it seem to influence Portfolio widget CSS as well. After upgrading to Elementor Pro 1.5. my Portfolio elements get “card” appeal – shadows and title space beneath image and (what is the most disturbing) their 2-column split doesn’t work properly and they display one below the other with lots of white space on the right. I reinstall to previous version and it looks OK (no option to do it within Elementor BTW). How can I make it work in 1.5.?

  12. Is there a way to choose which tag gets used for the badge? I’d like to be able to add more tags to my posts but be able to have a specific one selected as the badge, not just the first alphabetically.

  13. I would love to be able to control the positioning of title text so that it is overlaid on the post image rather than below the image. Is that possible?

  14. I am using the cards skin at to display a posts grid at below some other content on a page and it works great – only problem is that whenever I use the pagination to click “next” it refreshes the whole page and takes me right back to the top of the page and not to the top of the posts grid. Is there a way to solve this?

  15. Hello, is there a way to make the badge and the avatar clickable (linkable to the category, and the autor) ?
    thanks, Johann

  16. Is there a way to Remove the Badge, I tried setting to Transparent text and background but this did not work on the front visitor side?

  17. Hi, i’m also trying to figure this out, Could you point me in the right direction to do that? I have the field (an event date), and its part of the post but I need it to be on the post grid card, really don’t want to add another plugin since I have Elementor Pro 😉 Thanks

  18. I do like how the cards look. Is there a way to choose which tag/category will go inside the Badge? Currently, whether I choose Category or Tags, it shows the first available which, since the taxonomy always shows up in alphabetical order, means almost all my cards have the same badge.

  19. I love this feature! Will there be an option eventually to have the featured image as the background with the rest of the content (title, excerpt, etc) as an overlay?

  20. This is awesome. One feature I would like to see added is the ability to change the title size with the traditional S, M, L, XL, XXL. Looking forward to future card skins!

Leave a Reply