Es muy recomendable indicar varios precios de un mismo producto o servicio con diferentes opciones y extras para que el cliente elija el que más conveniente le resulte.
El proceso para añadir una tabla de precios es muy sencillo, simplemente debemos realizar 2 pasos:
1.- CSS
El primero añadir este pequeño código CSS adicional:
/* Tabla de precios/* Tabla de precios--------------------------------------------- */.amount { font-size: 38px; text-align: center;} .pricing-table { line-height: 1;} .pricing-table h4 { background: none repeat scroll 0 0 #ddd; border: 1px solid #ddd; color: #333; padding: 20px 0 30px; text-align: center !important; text-transform: uppercase;} .pricing-table .one-third { background-color: #fff; margin: 20px 5px; padding: 40px; width: 32.33%;} .pricing-table .one-third:nth-child(3n+1), .pricing-table .one-third:nth-child(3n+2), .pricing-table .one-third:nth-child(3n) { border: 1px solid #ddd;} .pricing-table .one-third ul { margin: 0;} .pricing-table ul li { border-bottom: 1px solid #ddd; color: #333; margin-bottom: 10px; padding: 10px; text-align: center;} .pricing-table a.button { background-color: #ddd; border: 3px solid #fff; color: #000; display: block; text-align: center;} .pricing-table a.button:hover { background-color: #000; border: 3px solid #000; color: #fff;} /* Tabla de precios - Responsive Media Queries --------------------------------------------- */ @media only screen and (max-width: 1140px) { .pricing-table .one-third { width: 32%; }} @media only screen and (max-width: 800px) { .pricing-table .one-third { width: 100%; }} @media only screen and (max-width: 568px) { .pricing-table .one-third { width: 100%; }} @media only screen and (max-width: 480px) { .pricing-table .one-third { width: 100%; }} @media only screen and (max-width: 420px) { .pricing-table .one-third { width: 100%; margin: 20px 0; }}
2.- HTML
Y el segundo, añadir este código HTML en la página en la que queramos mostrar la tabla de precios:
<div class="pricing-table"> <div class="one-third first"> <h4>Básico <span class="amount">190€</span></h4> <p style="padding-left: 30px;">- Item 1<br>- Item 2<br>- Item 3</p> <a class="button" href="#">Lo quiero!</a> </div> <div class="one-third"> <h4 style="background-color: #d5abab;">Estándar <span class="amount">290€</span></h4> <p style="padding-left: 30px;">- Item 1<br>- Item 2<br>- Item 3</p> <a class="button" style="background-color: #d5abab;" href="#">Lo quiero!</a> </div> <div class="one-third"> <h4>Premium <span class="amount">390€</span></h4> <p style="padding-left: 30px;">- Item 1<br>- Item 2<br>- Item 3</p> <a class="button" href="#">Lo quiero!</a> </div> </div>
Si queremos modificar el color de la columna central, deberemos hacerlo en este código:
style="background-color: #d5abab;"
que se repite 2 veces. Si queremos que las 3 columnas tengan el mismo color, simplemente habría que eliminar ese mismo código en los 2 lugares en los que aparece.
Gracias a estos 2 simples pasos, no necesitaremos instalar ningún plugin.
Si tienes cualquier problema aplicando esta solución, déjanoslo en los comentarios y estaremos encantados de responderte.
¡Dios, Gracias!! Andaba buscando esto por todas partes, así que tenía que dejarte un gran GRACIAS aquí debajo <3
Un placer haberte sido de ayuda! Se agrade tu comentario.