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 content 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 as 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 the markup looks:

<div id="wrapper">
  
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li class="sidebar-brand">
        <a href="#">
          UI Components
        </a>
      </li>
    </ul>
  </ul>
  
  <ul>
  <li>
      <a href="#">
        Headers
      </a>
  </li>
  </ul>
  
  <ul>
  <li>
      <a href="#">
        Contents
      </a>
  </li>
  </ul>
  
  <ul>
  <li>
      <a href="#">
        Price Tables
      </a>
  </li>
  </ul>
  
  <ul>
  <li>
      <a href="#">
        Contacts
      </a>
  </li>
  </ul>
  
  <ul>
  <li>
      <a href="#">
        Footers
      </a>
  </li>
  </ul>
</div>
<!-- /#sidebar-wrapper -->

<!-- Container (BLANK CANVAS) -->
<div id="page-content-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <h1>
          Blank Canvas
        </h1>
        Here will be the playground for our components. Drag them from the sidebar and drop here.
      </div>
    </div>
  </div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->

This is the css:

/* Toggle Styles */

#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled {
padding-left: 250px;
}

#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
width: 250px;
}

#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}

.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}

.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}

.sidebar-nav &gt; .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}

.sidebar-nav &gt; .sidebar-brand a {
color: #999999;
}

.sidebar-nav &gt; .sidebar-brand a:hover {
color: #fff;
background: none;
}

@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}

#wrapper.toggled {
padding-left: 0;
}

#sidebar-wrapper {
width: 250px;
}

#wrapper.toggled #sidebar-wrapper {
width: 0;
}

#page-content-wrapper {
padding: 20px;
position: relative;
}

#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}

This is how it looks till now:

Adding some interactions.

Now let’s create the function which will toggle the sidebar:

<!-- Menu Toggle Script -->
   <script>
   $("#menu-toggle").click(function(e) {
       e.preventDefault();
       $("#wrapper").toggleClass("toggled");
   });
   </script>

Now we need to create submenus for each category.

For example when we mouse over “Headers” we should see there some images. The same for the other categories.

In order to achieve this, we will use this great plugin called jQuery-menu-aim which is a jQuery plugin for drop-down menus that can differentiate between a user trying hover over a drop-down item vs trying to navigate into a submenu’s contents.

Here is a live example of how this works.

I’m not going to show you how to activate this plugin and how to call it because this info is already on the plugin page.

I will implement this code in the existing structure that we’ve built till now.

Great, now we have the main structure and some interactions like showing/hiding the sidebar and displaying some subcategories on mouse over.

Adding the drag and drop functionality to our subcategories.

The next step is to make the subcategories draggable. In our case, the subcategories will be images.

Let’s take “Headers” as an example. The subcategories are some screenshots of different headers. We need to be able to drag these and drop them into the main content area.

For adding this functionality we’ll use jQueryUI more exactly we’ll use interactions from there like draggable, droppable, sortable. For more info about them, you can check the API documentation.

How it will work:

After we drag an element from the sidebar into the main container it will increase its width and height to give us a more realistic feel about what we’re building.

If we drag more than two elements into the main container then we can sort them inside the container, for example, we add a header and two contents, content#1 and content#2 in this exact order but we need also to be able to swap the positions between them.

Also, we need to be able to remove an element from the main container if we want. To do this we will make the sidebar act as a “Trash”. For example, if we want to remove content#1 from the main container we need to drag it and drop it over the sidebar area.

Now, let’s create this.

Here’s how the javascript looks like:

$(document).ready(function() {

 $(".sortableList").sortable({
     placeholder: 'ui-state-highlight',
     over: function() {
            $('.placeholder').hide();
        },
        out: function() {
            $('.placeholder').hide();
        },


       
        start: function(event, ui) {
        if (event.handleObj.namespace=="sortable")
        $('.remove-item').show();
        $('ul.sortableList .testing').css("width","600")
      
            },

        stop: function(event, ui) {
        if (event.handleObj.namespace=="sortable")
        $('.remove-item').hide();
        $('ul.sortableList .testing').css("width","")
     
            }


       
 });
 $(".draggable").draggable({
     connectToSortable: '.sortableList',
     cursor: 'pointer',
     helper: 'clone',
     revert: 'invalid',
     start: function (event, ui) {
         $(this).addClass('testing');
     }
 });

 $("#sidebar-wrapper").droppable({
     accept: 'li',
     drop: function (event, ui) {
         ui.helper.remove();

     }
      

 });

 

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 do 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.

DEMO DOWNLOAD

Comment

This post doesn't have any comment. Be the first one!

hide comments
Follow
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!