How to make your own “Landing page Generator”

All that you have to is drag and drop some blocks and you can create a functional prototype for your website.

I see that more and more people are releasing templates with dozens of different ready made layouts to choose from. Services like Designmodo’s Startup Generator or their most recent product called Slides where you can choose from a variety of components like hero sections with cool animations and sliders, team sections, pricing sections, contact forms, portfolios and so on…

I’ve decided to create something similar, because many times when I had to create a landing page or a simple presentation of a service or whatever else I kept coming back for “inspiration” from other projects I’ve created, because many times a “team” section I’ve created for a company It might very easily apply to another company especially when they operate in the same industry.

So, I said why not to create a “Template generator” which will allow me to put all my “team” and “price tables” and “footers” and … sections into one place?

I said to myself, imagine how efficient this can be if I will be able to just drag and drop some components and build a high fidelity prototype.

Think about this like a puzzle game. You have some blocks and a blank canvas where you can play with the puzzle blocks in order to create what you need.

Ok, let’s get to work!

Building the User Interface

I’m building it using Twitter Bootstrap framework. Nothing fancy here just a two columns standard layout including a sidebar and a main container area as the main structure.

The only interesting part here is that we’ll build a nice toggle effect for the sidebar. This is useful because it acts like a “distraction free” mode and gives you a more in depth view of what you are doing.

We’re not gonna stress about how it looks because this tutorial is not about this. We will focus more on building it.

Here’s how it works:

I will not get into technical details because I’m not writing this to teach you how to code.

What you get?

• The generator itself(obviously).
• In depth documentation of how to modify and use the actual UI components (the ones you just saw in the video)

That’s all. I hope that this template generator will be useful for someone.

Note: In order to make it work on your server you have to modify the URL path in “codernize.php” and “codernize.js” with your website.