¡Hola amigos! En este post les voy a enseñar a añadir las siguientes cajas de precios a su página. Es muy simple y rápido así que espero que les sirva y puedan entender. Ya saben que en caso de problemas, no duden en preguntarme. 

---

vista previa

código css

Copiar y pegar el siguiente código entre las etiquetas <style> en algunos de los boxes que se encuentran en la configuración avanzada de los 'Ajustes de Diseño'. Si usted usa el diseño "CSS-Design" que ofrece el servicio, el código debe pegarlo en "CSS-Design sin Style Tags" ubicado también en la configuración avanzada de 'Ajustes de Diseño'.

.one-half.column {
width: 48%;
margin-left: 0;
}

.price-table {
background: url("../images/bg/tab-price-gradient.png") repeat-x scroll 0 0 #FFFFFF;
margin:0 auto;
max-width: 280px;
border-radius:5px;
}
.price-table .head {
height: 100px;
text-align: center;
}
.price-table .head p {
font-size: 13px;
line-height: 4em;
margin: 0 !important;
padding: 0 !important;
}
.price-table .head h2.price {
font-size: 3em;
line-height: 0.4em;
margin: 0 !important;
padding: 0;
text-align: center;
}

.price-table .body {
padding: 20px 25px;
font-size:12px;
}

.price-table .body ul {
list-style: none outside none;
margin: 0 0 20px;
}

.price-table .body li {
background: url("https://img.webme.com/pic/d/design-adri/tick20.png") no-repeat scroll left center transparent;
line-height: 20px;
padding: 10px 0 10px 35px;
}
.price-table .body .more {
margin: 0 !important;
padding: 0 !important;
text-align: center;
}
.price-table .body .more a {
background: none repeat scroll 0 0 #3e3e3e;
color: #d1d1d1;
display: inline-block;
font-size: 110%;
height: 16px;
line-height: 16px;
padding: 5px 10px;
text-align: center;
text-transform: uppercase;
width: auto;
}
.price-table .body .more a:hover {
background: none repeat scroll 0 0 #535353;
color: #fff;
text-decoration: none;
}
.price-table .special *, .price-table .grey * {
color: #FFFFFF;
}
.price-table .grey {
background: none repeat scroll 0 0 #4B4A4A;
}
.price-table .special {
background: none repeat scroll 0 0 #e64a3e;
}   

código html

Copie y pegue el siguiente código html en donde desea que aparezca la caja de precios, están ordenados con respecto a la imagen de muestra. Lo que está señalado en verde, es el texto que debe editar.

"Special price"

<div class="one-half column">
<div class="price-table">
<div class="head special">
<p>Special price</p>
<h2 class="price">80.0 $</h2>
</div>
<div class="body">
<ul>
    <li>Morbi est elit, imperdiet sit amet</li>
    <li>Lorem ipsum seget, egestas in leo.</li>
    <li>Morbi est elit, imperdiet sit amet</li>
    <li>Lorem ipsum seget, egestas in leo.</li>

</ul>
<p class="more"><a href="#">More info</a></p>
</div>
</div>
</div>	 

"Normal price"

<div class="one-half column">
<div class="price-table">
<div class="head grey">
<p>Normal price</p>
<h2 class="price">45.0 $</h2>
</div>
<div class="body">
<ul>
    <li>Morbi est elit, imperdiet sit amet</li>
    <li>Lorem ipsum seget, egestas in leo.</li>
    <li>Morbi est elit, imperdiet sit amet</li>
    <li>Lorem ipsum seget, egestas in leo.</li>
</ul>
<p class="more"><a href="#">More info</a></p>
</div>
</div>
</div>