En 2016 8 millones de usuarios Cupones canjeados en línea en EE. UU. Se espera que este número aumente a 145 millones para 2021.
Si tiene una tienda en línea o un sitio web, quiere que los cupones se conviertan en parte de su estrategia de marketing. Los cupones que ofrecen, por ejemplo, envío gratis o un porcentaje de descuento en su compra total, pueden ayudar a atraer nuevos compradores y deleitar a los clientes leales.
Si está utilizando un creador de sitios web, puede haber una función integrada que puede usar. Por ejemplo, GoDaddy ofrece un módulo para crear cupones. Sin embargo, el uso de este tipo de módulo limitará sus opciones de personalización.
Además, es posible que algunos creadores de sitios web ni siquiera tengan esta función. Por ejemplo, Bootstrap CSS es un kit de desarrollo de front-end que viene con plantillas para tipografía, formularios, botones, menús desplegables, navegación y otros componentes de la interfaz, pero no para cupones.
En ese caso, debe crear un cupón desde cero utilizando código HTML y CSS básico. Hablaremos de este proceso a continuación.
Cómo crear cupones en CSS
Puede crear cupones utilizando HTML y CSS. En esta demostración, usaremos el ejemplo de Escuelas W3.
Suponga que desea recrear el cupón a continuación.
Para comenzar, use el siguiente fragmento de código HTML.
<div class="coupon">
<div class="container">
<h3>Company Logo</h3>
</div>
<img src="https://blog.hubspot.com/website/hamburger.jpg" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>20% OFF YOUR PURCHASE</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>Use Promo Code: <span class="promo">BOH232</span></p>
<p class="expire">Expires: Jan 03, 2021</p>
</div>
</div>
Para personalizar este cupón, simplemente reemplace el texto del marcador de posición después de las etiquetas
, y
Nombre de la empresa, copia y código de cupón y fecha de vencimiento.
El siguiente es el formato del cupón. Desea que el bisel sea punteado en lugar de continuo, y redondee sus bordes para que se vea como un cupón recortado que encontraría en una revista impresa. También desea que parte del fondo sea gris para que la copia del cupón se destaque. Finalmente, desea cambiar la fuente de la fecha de vencimiento a rojo para captar la atención del lector.
Para crear este estilo, agregue el siguiente código CSS en la sección
Código HTML.
.coupon {
border: 5px dotted #bbb; /* Dotted border */
width: 80%;
border-radius: 15px; /* Rounded border */
margin: 0 auto; /* Center the coupon */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}
Puedes jugar con este ejemplo en Página de prueba de W3School. Lo hice cambiando la fuente a Georgia, agrandando el H3, cambiando la línea sólida, reemplazando la imagen, cambiando el fondo de la copia del cupón a amarillo y cambiando el color de la fecha de vencimiento a verde. El resultado final quedó así:
Aquí está el fragmento de código que usé.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Georgia;
}
.coupon {
border: 5px solid #bbb;
width: 80%;
border-radius: 10px;
margin: 0 auto;
max-width: 600px;
}
h3 {
display: block;
font-size: 2em;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: green;
}
</style>
</head>
<body>
<div class="coupon">
<div class="container">
<h3>Anna's Fake but Fabulous Company</h3>
</div>
<img src="https://blog.hubspot.com/w3images/nature.jpg" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:yellow">
<h2><b>50% OFF YOUR PURCHASE</b></h2>
<p>First-time customers get half off their entire purchase. Happy spending!</p>
</div>
<div class="container">
<p>Use Promo Code: <span class="promo">ANNAROCKS12</span></p>
<p class="expire">Expires: Never</p>
</div>
</div>
</body>
</html>
Codificación de cupones desde cero
Ahora puede comenzar a crear cupones desde cero usando HTML y CSS. Puede jugar con la cantidad de secciones que contiene, así como con los colores, las fuentes y otros formatos que elija. ¡Feliz codificación!
