March 14, 2014

Weebly Tricks #37 - Plans and Pricing Widget

Posted by Domz at 3/14/2014

Plans and Pricing Widget for Weebly



Today's tutorial is useful for eCommerce and paid products sites. You have seen this widget already and now it's time to make your own. Just an overview, the "Plan and Pricing" widget comes with atleast three comparable plans for users to choose and typically one of them is highlighted as it was being recommended to be purchased.








1. Copy the following code and paste to the <head>. (head help here)

<style>
@import '../../shared/mixins',
        '../../shared/reset',
        '../../shared/about-dark';

/*
 * Copyright (c) 2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */



.plans {
  width: 836px;
  margin: 50px auto;
  overflow: hidden;
}

.plan {
  float: left;
  width: 150px;
  margin: 20px 2px;
  padding: 15px 25px;
  text-align: center;
  background: white;
  background-clip: padding-box;
  border: 2px solid #e5ded6;
  border-color: rgba(black, .1);
  border-radius: 5px;
}

.plan-title {
  margin-bottom: 12px;
  font-size: 24px;
  color: #36bce6;
}

.plan-price {
  margin-bottom: 20px;
  line-height: 1;
  font-size: 28px;
  font-weight: bold;
  color: #fd935a;
}

.plan-unit {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: normal;
  color: #aaa;
}

.plan-features {
  width: 120px;
  margin: 20px auto 15px;
  padding: 15px 0 0 15px;
  border-top: 1px solid #e5ded6;
  text-align: left;
}

.plan-feature {
  line-height: 20px;
  font-size: 24px;
  font-weight: 500;
  color: #333;

  & + & { margin-top: 5px; }
}

.plan-feature-unit {
  margin-left: 2px;
  font-size: 16px;
}

.plan-feature-name {
  font-size: 13px;
  font-weight: normal;
  color: #aaa;
}

.plan-button {
  position: relative;
  display: block;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(black, .1);
  background: #fd935c;
  border-bottom: 2px solid #cf7e3b;
  border-color: rgba(black, .15);
  border-radius: 4px;

  &:active {
    top: 2px;
    margin-bottom: 2px;
    border-bottom: 0;
  }
}

.plan-highlight {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
  width: 170px;
  border: 4px solid #37bbe6;

  .plan-button {
    font-size: 18px;
    line-height: 49px;
    background: #37bce5;
    border-color: #3996b3;
    border-color: rgba(black, .15);
  }
}

.plan-recommended {
  width: 160px;
  margin: -15px auto 15px;
  padding-bottom: 2px;
  line-height: 22px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px rgba(black, .05);
  background: #37bbe6;
  border-radius: 0 0 4px 4px;
}
</style>

2. Save the code above and go to the page you intended to insert your "Plan and Pricing" widget. Drag one embed code and paste the code below:

<div class="plans">
    <div class="plan">
      <h3 class="plan-title">Started</h3>
      <p class="plan-price">$19 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">2 <span class="plan-feature-name">websites</span></li>
        <li class="plan-feature">5<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
        <li class="plan-feature">3 <span class="plan-feature-name">users</span></li>
      </ul>
      <a href="#" class="plan-button">Choose Plan</a>
    </div>
    <div class="plan plan-highlight">
      <p class="plan-recommended">Recommended</p>
      <h3 class="plan-title">Team</h3>
      <p class="plan-price">$49 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">5 <span class="plan-feature-name">websites</span></li>
        <li class="plan-feature">20<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
        <li class="plan-feature">10 <span class="plan-feature-name">users</span></li>
      </ul>
      <a href="#" class="plan-button">Choose Plan</a>
    </div>
    <div class="plan">
      <h3 class="plan-title">Premium</h3>
      <p class="plan-price">$99 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">20 <span class="plan-feature-name">websites</span></li>
        <li class="plan-feature">50<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
        <li class="plan-feature">25 <span class="plan-feature-name">users</span></li>
      </ul>
      <a href="#" class="plan-button">Choose Plan</a>
    </div>
    <div class="plan">
      <h3 class="plan-title">Corporate</h3>
      <p class="plan-price">$249 <span class="plan-unit">per month</span></p>
      <ul class="plan-features">
        <li class="plan-feature">&infin; <span class="plan-feature-name">websites</span></li>
        <li class="plan-feature">200<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
        <li class="plan-feature">&infin; <span class="plan-feature-name">users</span></li>
      </ul>
      <a href="#" class="plan-button">Choose Plan</a>
    </div>
  </div>

3. Publish your site. Now if you want to modify the CSS (refer to step 1 code), simply read the short tag labels and change what you like, it is pretty self explanatory. From the HTML code on step 2, there are four plans to choose, you can easily identify the wordings on each box. The div in blue color is for the first box while the red one is for the second which is the highlighted plan. Customize it with your preferences and republish your site for the changes.

Enjoy and please give credit to the script source and read the TOS! All details can be seen on the demo page.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top