Behind the scenes of “Inspired”


It’s always fascinated me to see how people create cool things. 

Seeing how Tesla manufactures their electric vehicles or how the Empire State Building was built back in the 1930’s makes the product or building even more impressive when you see it.

One of the features on the Web Designers Academy website is a curated collection of website and popup designs that web designers can review when they need a little inspiration. Think of it like a shot of caffeine for your creative brain.

We created this feature because we wanted to solve a problem that most all web designers have. You know those moments when you are browsing the web, come across a design and you think “Hey, I should remember this so the next time I have to create something I can use this as inspiration“?  That would happen to us all the time but rarely would we record it and if we did, rarely would we remember where we recorded it.

So we decided to record these sexy designs in a place where we could always find them AND help other web designers get inspired when they needed it most.

We call this feature Inspired

The Front End

The main Inspired page shows the most recent designs that have been added and at the top there are two buttons where you can sort the results between website designs and popup designs.  When you click on any item you arrive at the detail (single) page where you can see a large version of the screenshot, navigate to the next and previous design and there are two buttons to either return to the main Inspired page OR visit the website where the design is from. There is also an interesting signup feature below it all to collect email addresses.

The Admin Area

Adding these designs to the WordPress Admin Area is simple as well.  There is an menu item called Inspirational Design and when we add a new one a special interface with just the fields we need display.  These fields include the URL of the design, the screenshot image url and what type of design it is (Website OR Popup).

The Tour

With all that data entered into the admin area there are a few plugins that automatically create the front end pages and functionality that you just saw.  This includes Toolset for the custom fields and views and Beaver Themer to style the individual design pages. Instead of boring text description how about we go on a little tour of the admin area so I can show you how it’s done?

TIP: Make this video fullscreen for maximum awesomeness

If you want the shorthand version of how you can create something like this on your website:

  1. Install WP Toolset Types & Views modules
  2. Create custom post type
  3. Add post fields needed for that custom post type
  4. Create a view for the main index page (make sure you turn on pagination!)
  5. Install Beaver Builder and Beaver Themer
  6. Create new layout in beaver Themer and assign it to the “Singular” type of your custom post type
  7. Design a layout using Beaver Builder (with Ultimate) tools and insert Toolset shortcodes to pull in the data

What types of things can you build using these plugins? Have any ideas on how to improve Inspired?  Reply in the comments below!