Las cintas de opciones son una forma visualmente agradable de hacer un anuncio en su sitio web. Si bien hay muchas situaciones en las que puedes usar cintas de opciones, pero a menudo las encuentras con anuncios de ventas, descuentos o fuera de stock en las tiendas Woocommerce.

Las cintas se utilizan para informar al visitante sobre una venta o un descuento tan pronto como llegan a su sitio web. En este tutorial, entenderemos cómo puede agregar cintas de opciones mediante Elementor.

¿Por qué debería usar cintas de opciones?

Las cintas son una gran manera de atraer instantáneamente a su visitante cuando está haciendo un anuncio. Por ejemplo, ha anunciado un descuento en un determinado producto y luego aplica la cinta de descuento en la miniatura de ese producto, inmediatamente hará que el usuario haga clic en el producto.

Las cintas de opciones son visualmente atractivas cuando se usan de cierta manera. Pueden ayudar al usuario a pasar por productos no relacionados y mejorar las conversiones y ventas de su sitio web.

Cómo agregar cintas de opciones personalizadas mediante Elementor

Para iniciar el proceso, debe agregar una sección Interior donde agregaremos los widgets.

A continuación, deberá arrastrar una columna en la sección. Para este tutorial, usaremos una estructura de una columna.

Una vez que haya terminado con la configuración anterior, puede seguir adelante y crear un título para la cinta de opciones.

Para el siguiente paso, avance a las clases CSS en la pestaña Avanzadas y agregue "estilo gc-ribbon" en el campo.

A continuación, deberá agregar el siguiente CSS personalizado.

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

Ya casi terminaste. Publíquelo y consulte su sitio web para ver cómo funciona.

Así es como puede agregar cintas de opciones a sus productos mediante Elementor. Asegúrate de unirte a nosotros en nuestro Facebook y Twitter para seguir recibiendo actualizaciones frecuentes sobre nuestro contenido.