Qards: How to Create a Post Story Like Mashable Does

Written by Alyona Galea
Written by Alyona Galea
Mashable. Techcrunch. Wired. New York Times. All of these publishers have something in common: valuable content. They deliver and craft not only news and articles, but also visual stories that grab our attention. If your dream is to create post stories like they do, then continue to read this article. You will find out more about Qards, a robust drag and drop visual editor for WordPress, easy-to-use by anyone who wants to start building strong digital articles that will make a difference.

Partner Sponsors


Full disclosure: If you purchase through a link on our site, we may earn a commission. Learn more.

Connected. That’s the word that best describes our actual status quo. Informed, up to date, eager to keep track with everything that matches our interests.

Aim high and start creating visual content that matters

Mashable. Techcrunch. Wired. New York Times. All of these publishers have something in common: valuable content. They deliver and craft not only news and articles, but also visual stories that grab our attention.

If your dream is to create post stories like they do, then continue to read this article. You will find out more about Qards, a robust drag and drop visual editor for WordPress, easy-to-use by anyone who wants to start building strong digital articles that will make a difference.


Qards can be easily integrated in ANY existing WP theme and it is ready to be used by people with or without a technical background.

Developed to save time and money in the process of creating beautiful post stories, Qards becomes an asset for those who want to be able to produce an article or review like Mashable does.

Therefore, in the next section you will learn how you can build an awesome product review like this one with Qards.

Samsung Galaxy S6 review Mashable style with Qards

Step 1

Let’s start with the setup phase: create a new page with Qards and give a specific name to ease the searching part. Make the best of the cover section by uploading an eye-candy image from your computer. You have two options: upload an image as you did before or  just Drag & Drop it there to reinforce the look and feel of the website.

Step 2

Now, click on the + icon and select Text from the menu. Choose one pre-designed card that you consider good enough in terms of aesthetic and functionality. You can then effortless duplicate blocks of text, modify the color, size or fonts.

Step 3

Big full width images are a trend nowadays so it’s a good idea to use them ourselves. Let’s add an image using drag and drop just after the text that we previously added.

Step 4

Next, make sure you keep users interested and engaged by inserting an interactive video. Click on the section you think that fits best to this objective, select the right icon and just copy-paste the URL in the box. The smart part is that you can show them exactly what brings value, not 3 minutes of irrelevant frames. Name the number the video should start & end at and hopefully your users will find this timeframe interesting too.

Repeat the processes above until you are sure you add all the text and images that are useful for the reader.

Step 5

Aim high and optimize even the Footer section of your websites by adding valuable content. Go again on the main menu and select the layout that meets your needs. Play around with all those pre-designed cards from the Footer section and you will discover some great ways to improve the overall user experience.

Finish line! You are ready to admire a full view of your websites created with Qards. Take a look and see if the sections are logically connected and the information flow makes any sense. If so, feel free to show it to your client and ask for feedback. No matter if he would like to rearrange the order or duplicate some blocks of text, don’t panic! You can do that in minutes. Any component is 100% editable.

Qards’ feature overview

  • Customizable pre-designed cards that fit any kind of story
  • All elements, sections, items can be dragged and dropped and are fully editable to make sure you don’t lose precious time when your clients aren’t on the same page with you
  • CSS Editor that allows you to change virtually anything design related;
  • Typekit integration for matchmaking a specific story with the proper font
  • Easily add video backgrounds to your visual stories (just copy-paste the URL from YouTube)
  • SEO ready and performance optimized
  • Works flawlessly with plugins such as W3 Total Cache, WP Super Cache and Quick Cache
  • Flexible grid to easily adapt at any kind of business conditions
  • Uploading images without effort to boost your clients’ attention, but not only
  • A generous gallery of layouts and visual patterns to facilitate your creative process.

Thanks to its features and tools, Qards will definitely help you change the way you visually construct your post stories.

Next, you can skim through some examples of websites, 100% created with Qards.

If you like to build awesome stories like Mashable does, then you can easily do so with Qards.  In the end, it’s all about adding value. Start now with Qards!

This article was filed in our archives.
Written by Alyona Galea
Alyona is a WordPress enthusiast, focused on sharing interesting things she comes across during her work with this great CMS. She loves exploring new destinations and maintains a travel blog at

In this article

Discover More

2 Responses

  1. In my case, I moved to another host and lost all my pages. When I moved to the new host, the license had to be entered again. Which I did. Then I went to check my pages and nothing was there. Then I went back to my old server and saw the license was deactivated and pages gone. Now I am neither here nor there. All my hard work to create those design pages went to waste. I wrote to support and got no response from them. Then went to their Facebook page and left a comment in on of the articles, they deleted that too, or I must have gone blind while finding my comment. Its a $99 wasted money. It is a slick platform and the above are true for it. There is not much you can do with it. Good for single page coming soon types pages It also interferes with peepso plugin. So i had to disable Peepso and then create my pages.

    I have written to them again and have an automated response. Lets see what happens.

  2. My real-life experience with Qards, the interface is slick.

    • Qards live in self-contained bubbles: There is no way (drag & drop) to integrate widgets or page / post content so their value is limited to landing pages or one-page site-lets. There is in fact almost no connection to any WordPress content hooks except for the menus but even there the use is limited as you can’t carry menu styling over from the regular site to your Qards pages or vice versa. Nor can an existing page or post can’t be turned into a Qard—which would be a great want to use them if they also included a Post Content module—but alas they don’t; they only exist as Qard Page CPTs. So the claim here that this tool is useful for article publishing like Mashable or Techcrunch is plainly wrong. There are no index archives for Qards pages, nor are there taxonomies etc. which would be required for articles. But in fairness this is not a claim even Designmodo makes. They describe Qards as a landing page builder—which is accurate.

    • Basic functionality is missing despite the slick interface: For example. You can ada featured image but can’t link it to anything without knowing how to custom code (which suspends the UI editor tools).

    • The only way to share common Header / Footer info across cards is to code them into settings—no slick UI for that.

    • Saving changes is buggy. Small changes such as correcting a Typo or changing a link never seem to trigger the “Save” button. You have to do something more dramatic like re-sort section order to get the button to appear.

    • Lack of support: I wrote to their support team about the save issues on May 13. I got an auto-response from their help software but still have yet to hear whether they can solve this issue either for me or whether they were aware that it is a bug and plan to address it in an upcoming update.

    On a related note: Designmodo gave me a full refund for their other product, the Startup Framework for WordPress, after their theme was repeatedly replaced by another theme (really) on whenever my WordPress site did an auto-update of WordPress or I updated any plugins (not themes). When I explained what was happening, Designmodo simply asked me to ignore the update requests (which had no effect) and never explained why or even how one theme could ever be replaced by another. In fairness, the other theme maker claimed that they were in a copyright dispute with Designmodo over the similar names of their respective themes.

    Designmodo also offered me a refund for Qards, since I had bought both products at the same time, but I decided to stick it out. Despite the issues above it works well enough for landing pages and coming soon pages.

Share Your Thoughts

Your email address will not be published. Required fields are marked *

New discoveries, every week.
Join thousands of designers, developers, and builders that come to WP Mayor to find the best guides, tools, and services for their next website. One email, once a week.
WP Mayor Newsletter

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored just for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.

What's missing?