Simplex Design blog : SimplexCorp - A new template for business purpose

Link to SimplexDesign - free premium blogspot template

SimplexCorp - A new template for business purpose

Posted: 16 May 2013 10:27 AM PDT

It's been a long time since the last template on business. So in this post, I would like to introduce latest Simplex's template name SimplexCorp which hoped to be helpful for small business at the very first time have no budget.
This template is built base on Aquilo Wordpress template. I converted to Blogger and made it works for Blogger. It can work well in both of PC and mobile device because of responsive design.

Demo Download

Install instruction

1, Download the template. This template is available in Download page, all images hosted in Blogger and script included in template itself.

2, Upload template file to Blogger

3, Go to Blogger Dashboard -> Layout
All sections in homepage are reflected in widgets in Layout tab here.

4, To add your logo

Click on logo widget

Add the logo url to widget content as picture bellow

5, Do the same for top banner widget

In the demo, I add the contact information to top banner widget, but you can add everything you want inside top banner widget content.

6, To add content to slider

Click on slider widget
Add the content to slider as structure bellow:

<li class='slide'>
    <img class='slide-img' src='image_01_url'/>


        <div class='caption ' style='top: 20%;'>

    <div class='caption-container' style='width:50%;float:right;'>
        <h3 class='slide-title' style='font-size:42px;color:#454545;font-weight:normal;text-transform:none;font-style:normal;'>Title here</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:24px;color:#5d89b4;font-weight:normal;text-transform:none;font-style:normal;'>Sub title here</h4><div class='clear'/>


        <div class='slide-desc' style='color:#808080;'><p style='margin-bottom:20px;'>text goes here ...........</p>
    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>

This is the code of one slide in slider, if you want more, you can duplicate the code above and modify the content.
The content in each slide is up to you, but I suggest 3 small part:
- Background image (image_01_url)
- Title of slide (marked with text "title here")
- Sub title (marked with "Sub title here")
- Description text (marked with "text goes here")

I also add some CSS code to make this appear as I want ( the code start with "style='..........' "). You can change these code to make it display as you want, for example font size, color, position... and you have to familiar with CSS. No shortcut here if you want to make it your way. If not, you can copy the code above and remain the CSS code as above.

Here is my sample code of slider widget:

<li class='slide'>

            <img alt='' class='slide-img' src='http://adamtheattorney.files.wordpress.com/2011/10/clipart.jpg'/>


        <div class='caption ' style='top: 20%;'>

    <div class='caption-container' style='width:50%;float:right;'>
        <h3 class='slide-title' style='font-size:42px;color:#454545;font-weight:normal;text-transform:none;font-style:normal;'>Pelle esauete</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:24px;color:#5d89b4;font-weight:normal;text-transform:none;font-style:normal;'>Duis interdum nisi at leo</h4><div class='clear'/>


        <div class='slide-desc' style='color:#808080;'><p style='margin-bottom:20px;'>Integer in nunc et elit imperdiet sagittis. Vivamus hendrerit fermentum tristique. Donec quis dui ac mi suscipit pulvinar. Duis interdum nisi at leo mattis convallis rutrum eros sagittis. Class aptent taciti sociosqu ad litora torquent per.</p>
<a class='button-big button-video' data-rel='prettyPhoto' href='http://www.youtube.com/watch?v=v_GUm4aOUiM' target='_self'><span>Watch demo</span></a> <span style='font-weight:bold;margin:0 10px 0 0;'>or</span><a class='button-big button-cart' href='#' target='_self'><span>Get it Now</span></a></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>


    <li class='slide'>

            <img alt='' class='slide-img' src='http://businessbuildersnetwork.com/wp-content/uploads/2012/07/starting-a-business.png'/>


        <div class='caption ' style='top: 25%;'>

    <div class='caption-container' style='width:45%;float:left;'>
        <h3 class='slide-title' style='font-size:42px;font-weight:normal;text-transform:none;font-style:normal;'>Vivamus non</h3><div class='clear'/>




        <div class='slide-desc'><p style='margin-bottom:20px;'>Vivamus non sapien vitae dui suscipit volutpat. Nunc quis lectus nibh, quis adipiscing libero. Morbi non ligula vitae risus laoreet faucibus. Etiam lobortis nisi at diam faucibus posuere. Pellentesque tempus pulvinar massa, ornare sodales nisl iaculis et.</p>
<a class='button-big button-document' href='#' target='_self'><span>Get More Info</span></a></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></li>


    <li class='slide'>

            <img alt='' class='slide-img' src='http://www.arturiconsulting.com/business_people2.jpg'/>


        <div class='caption ' style='top: 25%;'>

    <div class='caption-container' style='width:50%;float:right;'>
        <h3 class='slide-title' style='font-size:42px;color:#4f4f4f;font-weight:normal;text-transform:none;font-style:normal;'>Curabitur rutrum</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:18px;color:#ffffff;background-color:#5d89d4;padding:3px 15px;font-weight:normal;text-transform:uppercase;font-style:normal;'>Integer in nunc et elit</h4><div class='clear'/>


        <div class='slide-desc' style='color:#888888;'><p>Integer in nunc et elit imperdiet sagittis. Vivamus hendrerit fermentum tristique. Donec quis dui ac mi suscipit pulvinar. Duis interdum nisi at leo mattis convallis rutrum eros sagittis. Class aptent taciti sociosqu ad litora torquent per.</p></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>


    <li class='slide'>

            <img alt='' class='slide-img' src='http://www.kingdombusinessalliance.com/images/Business%20Growth%20Bar%20Chart.jpg'/>


        <div class='caption ' style='top: 25%;'>

    <div class='caption-container' style='width:50%;float:left;'>
        <h3 class='slide-title' style='font-size:42px;color:#424242;font-weight:normal;text-transform:none;font-style:normal;'>Quisque euismo</h3><div class='clear'/>


         <h4 class='slide-sub-title' style='font-size:24px;color:#5d89b4;font-weight:normal;text-transform:none;font-style:normal;'>Ut scelerisquesc euismod</h4><div class='clear'/>


        <div class='slide-desc' style='color:#888888;'><p style='margin-bottom:20px;'>Sed laoreet lacinia turpis vel viverra. Quisque et purus arcu, eu molestie est. Ut scelerisque euismod lacinia. Sed a iaculis metus. Aliquam urna dolor, vestibulum ac mattis id, semper in justo. Phasellus id tempus nisi.</p>
<a class='button-small' href='#' target='_self'><span>View Details</span></a></div>


    </div>
    <div class='clear'/>
    </div>

    </div></div></div></li>

8, Widgets : Block 1, Block 2, Block 3, Block 4, Block 5, Block 6, Block 7, Block 8, Block9 and Block 10 can be edit easily.
Just click on the widget you want and add content in widget content dialog, it will be display in corresponding position in homepage.

9, There are 3 widgets in the footers : Recent posts, latest tweets and FlickR. These widget is made for demo only and you can replace them with your own widgets in minutes.

10, Save changes. That's all in Layout tab.
Now we move to some coding works. Don't worry, just change the top menu navigation and footer menu.
You need to back to Blogger Dashboard then go to Template tab.
Click on Edit HTML

For the top menu
Click on dropbox : Jump to widget and choose widget HTML12.
Now you will see the code of top menu, just change it as your own:

<nav id='navigation'>
<ul class='sf-menu' id='mobile-menu'>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Features</span></a>
<ul class='sub-menu'>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
</ul>
</li>
<li><a href="/search/label/"><span>Blog</span></a>
<ul class='sub-menu'>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
<li><a href=""><span>Category</span></a></li>
</ul>
</li>

<li><a href=''><span>Contact Us</span></a></li>
</ul>
<select class='select-menu'>
<option value='#'>Navigate to...</option>
<option selected='selected' value=''>Home</option>
<option value=''>Home Page 2</option>
<option value=''>Home Page 3</option>
<option value=''>Features</option>
</select>
</nav>

For the footer menu

Now scroll the template file to the end, you will find this code:

<div class='footer-content float-right text-align-right'>Copyright 2013 SimplexCorporate. All rights reserved.</div>

<div class='float-left text-align-left'><ul class='footer-menu' id='menu-footer-menu'><li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-30' id='menu-item-30'><a href='#'>Home</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-31' id='menu-item-31'><a href='#'>About</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-32' id='menu-item-32'><a href='#'>Services</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-33' id='menu-item-33'><a href='#'>Blog</a></li>

<li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-34' id='menu-item-34'><a href='#'>Contact Us</a></li>

</ul></div>

Just replace the link and text to what you want.

That's all for this template. After editing the template, you can save changes and see the result.
Have fun.