Drag and Drop WordPress Layout With Platform Pro

by on 18th March 2011 with 18 Comments

Building and even slightly altering WordPress themes can be a real hassle. You could buy a book or watch hours of video tutorials until you’re an expert on WordPress, but wouldn’t it be nice if you could skip all this and jump into building your own theme today?

Today we’re going to take a look at an impressively innovative product that allows you to use the simplicity of a drag and drop interface and basic forms to completely customize a WordPress site. The product is called Platform Pro and you’ve simply got to see it…

Meet Platform Pro


Platform Pro is essentially just a WordPress theme, but it’s likely different than any WordPress theme you’ve ever used before. Instead of just providing a few different color options or layouts, Platform puts you in the driver’s seat. Whether you’re a web developer and like to code by hand or someone who doesn’t even know what CSS stands for, you’ll find that Platform has a lot to offer you.

I stumbled across the theme completely by accident the other day and asked the good folks at PageLines to set me up a test page. It turns out the have already have a public test page set up for anyone to try totally free. After you get the gist of how everything works here, head over to that link to try the theme out for yourself.

Getting Started

Below is roughly the page we’ll be starting with today (I’ve trimmed a bit so it’s not too huge). As you can see, it’s excellent for a blank slate. The typography and layout are fairly nice as is, but generic enough that we won’t mind digging in and changing it all around.

Again, this is close to what you get straight out of the box with zero work thus far:


In the image above we can see a header and navigation area, some post previews, a sidebar, a footer, etc. Each of these has a number of options for customization so if you don’t like anything at this point, don’t worry, you can change it!

The Settings Panel

Within the typical WordPress admin panel, you’ll find a module for Platform Pro. This is where you will handle most, but not all, of the changes to your WordPress theme. There is a ton of stuff in here so you might feel a bit overwhelmed at first, but honestly, just about every setting you’ll find is straightforward and easy to understand.


We definitely won’t have time to go through every setting here but we’ll kick the tires sufficiently enough that you’ll get a good feel for what’s possible.

Modifying the Layout

As a designer, the first thing I want to know is how I can play with the layout. Clicking on the Layout Editor tab of the settings panel will bring up a number of options to choose from, both basic and advanced.

Your first choice is to choose between one of six basic layouts. Each of these is a mixture of a content area and either zero, one or two sidebar options.


Hate that sidebar seen in the initial site preview above? Ditch it by selecting the icon with only a main content section. Then apply your settings and take a look at your page to see the changes.


Can’t get enough sidebars and widgets? Choose an option with two sidebars and you get the layout seen in the image below.


Going Further

If you want even more control over the layout, scroll down to find the panel shown below. Here you can drag the dividers and use the fields to determine the width of the overall page and each column.


So let’s say I think my sidebar is far too wide. All I have to do to fix it is slide the little divider over to the right until my dimensions are 700px for the main column and 260px for the sidebar.


Once I save these layout settings and take a look at my page, here is the result:


Changing the Typography

Platform gives you a lot of freedom over the text on your page. Navigate to the typography tab and you’ll see options for changing the fonts for the primary font, secondary font, headers and even input areas.


One thing that really surprised me is the huge selection of fonts that you can choose from with this theme. Pagelines has included several standard web fonts and even a good portion of the Google Font Library to really push your creative freedom to the limit (there are also custom Cufon options).

When you’re assigning a font to a specific area, you can choose from a number of standard styling options that you would normally have to write a bunch of CSS to manipulate. If you want to include your own CSS, just click on the “Advanced” button.


In the end I decided to go with a modern feel so I chose a couple of nice sans-serif fonts for the page: Lato for the headers and Droid Sans for the body.


Background and Colors

Under the Design Control tab you’ll find even more customization options. At the top of this tab you’ll find more interesting layout options that affect how a background image is applied. For instance, you can make a background image flood the whole site, or just affect a “canvas” area outside of the content. I chose the latter to keep things clean, you’ll see how this works next.

To add a background image, simply scroll down to the section seen below and upload a JPG. You have full freedom over how the image is applied. You can tile it or position it in a specific spot using percents.


I uploaded a subtle dark gray texture to add come contrast to my page. Again, this could’ve flooded the entire background but I chose to have it flank the content.


Changing Colors

In the same tab as the settings above you can view and modify the color settings for every element on your site. This is as easy as finding the element in a list and changing the color values.


For instance, changing the primary background color affects the footer element. Just pick a color in Photoshop, copy the values and hit save to see the changes.


Adding Sections

Up to this point we’ve really just made minor tweaks to the site. It’s still fairly close to what we started with and not all that exciting. Let’s change this by adding some new sections.

Under the Template Setup tab you’ll find a control that allows you to drag and drop new sections onto your site. The left side contains the sections that are currently active and the right side sections that are available to add.


Let’s change our setup by adding an awesome “Featured” slider at the top of the page. To accomplish this, simply drag the “PageLines Features” box under the “Navigation” box in the header.


With this quick addition, suddenly our site is looking far better than when we started. Now we have a super fancy image slider at the top with several fully-customizable spots for images, text and even video. All without a single line of code!


There are several cool default sections that you play with that really boost the awesome factor of your site. Below I threw in a Flickr image carousel near the bottom of the page. Other sections allow you to add feature boxes, banners, links, breadcrumb navigation and more.


Finishing Up

With just a bit more tweaking, our original boring blog is transformed into a sleek and modern website with lots of advanced features. The result below would probably take you around thirty minutes of work once you got used to how the system works and more like ten to fifteen minutes once you really knew your way around.


Closing Thoughts: Should You Try Platform Pro?

Even after that dramatic change, I’ve still just scratched the surface of what Platform Pro can do. We didn’t even discuss the custom HTML options, post thumbnails, social media integration, pre-configured plugins or a whole host of other things that I haven’t even discovered yet!

Honestly, I’m blown away by this product and think that it could really take the pain out of WordPress customization for a lot of people. Whether you’re a designer looking for flexible a flexible system to set your clients up with or just a small business owner who wants to get more out of WordPress, Platform Pro is a steal for $95.00 (read about the free version here). There are tons of $50 and $30 themes on the market, but they don’t offer a fifth of the freedom that you’re going to get with Platform.

To learn more, head over to the Pagelines website where you can see a comprehensive feature list and even a video of the theme in action. Leave a comment below and let us know if you’ve tried Platform and what you think. Also be sure to leave a link to any similar products that you’ve found for making WordPress more user friendly!

Comments & Discussion


  • http://catladydesignsonline.com Cat Lady

    omg, i don’t know whether to laugh because i now know this exists or whether to cry because i’m just now finding out this exists! lol

  • Pingback: Drag and Drop WordPress Layout With Platform Pro « Big Engine Media()

  • christian

    OK. But where is the interest ? I’m not sure you’ll play with the settings every day or twice a week … ? Once a theme si applied you rarely change it…

  • http://www.designshack.co.uk Joshua Johnson

    You have the flexibility to easily add announcements or features of different kinds, which many businesses do regularly on their sites. This is a huge selling point if you’re a designer telling your client that you can set them up with a site in such a way that they don’t have to run to you every time they want to add something simple to the homepage.

  • http://bryyl.com/ tony

    this is amazing! i cant believe i haven’t seen this before!

  • Tanja

    “you can use the themes on multiple sites owned by you or your organization.
    When using the themes for client work, we recommend joining our affiliate program and earning money selling the themes to your clients.”

    Does that mean i have to sell the theme to every client when i want to use it for their site?

  • Scott Rod

    PageLines seems like a great premium utility for people who don’t want to touch syntax of any kind. Also, look at Gantry [http://www.gantry-framework.org/?platform=wordpress]. It may not be exactly like PageLines, but it seems worthwhile as another good resource. It’s opensource as well.

  • Joshua Johnson

    Tanja, with just about every pre-built theme you buy, a one-time purchase grants you a one-time license. Though designers often ignore this, they technically aren’t allowed to buy a theme one time and use it for multiple clients in most cases. It all depends on who builds the theme and what restrictions they place on it. With this theme, I believe that this is the case. You could simply roll the cost into your fee: $X for a WP design, +$100 if you want a system that you can edit yourself in the future.

  • Alex

    And yet another post wich is more like a commercial rather than a review.

    Pagelines is nice, but only for the ultimate anti-coders. A good solid theme is always better build before it goes up. If a client wishes layout change possibilities they can be coded into the theme or make use of the oh so easy shortcodes.

    Actualy build the site inside the backend is just no use if you a have a specifically designed website for a client. It would even go much slower.

    Guess this is like frontpage; nice and handy for the semi-semi-semi webbuilders.

  • http://jim-silverman.com/ Jim

    @Alex: Have fun reinventing the wheel for every site you build. The rest of us can use this as a framework, slap a coat of CSS paint on it, and deliver great, flexible designs in half the time and effort.

    But yeah, this does seem a bit like a commercial.

  • http://www.templatebase.info templatebase

    Once you install the theme and activate after that you rarely change it, but when you want to change bugs appears. Why should you hit your head to the wall and search in the source code.
    Good tip Joshua Johnson for the majority of the user who do not like source code :).

  • http://rogerpfaff.de rogerpfaff

    believe it or not but with time passing by our profession as webdesigner, coder and similar will be much harder.

    tools like this will give users the ability to create their own themes, build their own sites and get rid of us high priced professional webworkers. More and more of our tasks can be given to the user and where the website builder software in the past failed to produce results which are valid and good they get better and better.

    change is going on and we will have to adopt to it.

  • http://invenioit.com dale

    thank you very much for the information, much appreciated.

    where can i go to remove the boxes at the bottom “Looking for something?” and “Visit our friends!” and “Archives”?

    many thanks!

  • http://www.vamban.com vamban blog

    pagelines is out of box wordpress theme. Really great framework.

  • http://www.radiantphotographyaz.com/radiant_life Breanna Chanson

    So much for my free time! I think I’m going to waste the rest of my life editing, re-editing, moving things around… and I will love every second of it! There’s just too many great options for a perfectionist! But it will still take less time than trying to find the perfect theme designed by someone else! I love this, thanks for sharing!

  • http://www.aaronhung.com Aaron Hung

    Firstly, on the second image of your article, how did you set it so that Test post 6 and Test Post 7 going horizontal instead of verticle?
    second, when I try to do a three columns on my site. ALL of my widgets would go on both sides, the SAME widgets, how do you fix that? it’s like it’s mirrored

  • http://www.totpe.ro lemonthirst

    hello, it’s a great framework, loved using it. Yes it has a lot of functiones you can set different widgts, carousels, and boxes all over the pages/posts comes with good documentation both free and premium. But in my opinion it’s kinda missing something “catchy to the eye”.

  • http://hellofancy.com jovanna

    Hi, gosh I hope you read this. I need help. If I want to change the blog post layout from magazine to blog layout do I have to hit the upload new settings button on the bottom? I’m not seeing any changes.


About the Author