Podemos anunciar alto y claro que ¡ya han empezado las rebajas! No hace falta ir muy lejos para encontrar tiendas por la calle que lo ponen de manifiesto en sus escaparates: grandes carteles rojos con la palabra “REBAJAS” en mayúsculas acompañada de porcentajes de descuento. Hay que aprovechar al máximo estas ocasiones en las que la predisposición de los compradores a adquirir nuestros productos o servicios es mayor para aumentar el volumen de ventas del negocio. En consecuencia, tenemos que prestar atención a todas las vías de venta con las que se cuentan, y como tal no podemos olvidarnos de la tienda online de nuestro sitio web.
Hoy compartimos con vosotros algunas ideas para que vuestros escaparates online no sean menos que los de vuestra tienda física y podáis maximizar vuestras ventas online. En este artículo y videotutorial os explicamos y os mostramos cómo podéis adaptar el diseño de la home de vuestra tienda online o sitio web al periodo de rebajas.
¿Qué necesitáis para hacerlo? Nosotros hemos utilizado Elementor en su versión PRO. Este plugin de WordPress os facilitará sobremanera las tareas de maquetación y personalización de vuestro sitio. En Dimoteca confiamos en Elementor y lo recomendamos 100%.
Table of Contents
1. Categoría de productos rebajados
Para empezar, crearemos una categoría de productos rebajados y la incluiremos y destacaremos en el menú principal. Con todos los productos rebajados agrupados bajo una misma página y estando esta resaltada en el menú principal, habrá más posibilidades de aumentar la venta online.
- Creamos una nueva categoría desde “Productos” > “Categorías”: insertamos el nombre (“Rebajas -35%”) y el slug que se va a mostrar en la URL de la página de la categoría (“rebajas”).
- Añadimos algunos productos a la nueva categoría, que son los que el usuario encontrará en la página de productos rebajados. Desde “Productos” > “Todos los productos”, marcamos la categoría “Rebajas -35%” en aquellos productos rebajados que deseemos.
- A continuación incorporamos la nueva categoría al menú principal del sitio web, y para ello nos dirigimos a “Apariencia” > “Menús”. Antes que nada, debemos cambiar las opciones de pantalla (¡Muy importante! Sin este paso no podremos realizar los siguientes): abrimos el panel “Opciones de pantalla” en la esquina superior derecha y activamos las casillas de “Categorías del producto” y “Clases CSS”. Una vez activadas, vamos a “Categorías del producto”, seleccionamos “Rebajas -35%” y la añadimos al menú. Luego arrastramos esta categoría hasta arriba del todo para que sea la primera que aparezca en el menú principal.
- Abrimos la pestaña de la nueva categoría para editarla y le damos una clase CSS que luego nos será necesaria para modificar el estilo de este ítem en concreto. En este caso nosotros le damos la clase “destacar-categoria”.
- Ahora editamos el header del sitio web, y para ello vamos a “Plantillas” > “Maquetador de temas” > “Header” > “Editar”. De entrada, vemos que ya ha aparecido el nuevo ítem en el menú principal, y lo que haremos es destacarlo para que sobresalga respecto al resto de ítems. Para ello, seleccionamos el contenedor del menú de navegación y nos dirigimos a “Avanzado” > “CSS personalizado”. Una vez allí, se abre el editor para insertar código CSS manualmente. En este momento es cuando toca utilizar la clase CSS que le hemos dado previamente al ítem del menú “Rebajas -35%”, que en este caso ha sido “destacar-categoria”. Introducimos la clase junto al tipo de elemento en cuestión para seleccionarlo y a continuación escribimos entre llaves las instrucciones para que aparezca el ítem destacado en negrita. El código a introducir sería el siguiente:
.destacar-categoria a {
font-weight: bold !important;
}
*Hemos añadido “!important” para que esta regla se sobrescriba a otras previamente establecidas. No suele ser necesario, pero en este caso lo ha sido porque sin esta especificación Elementor ignoraba el código manualmente añadido.
2. Barra superior llamativa
A continuación, insertaremos una barra encima del header del sitio web que enlace la página de productos rebajados y modificaremos su estilo para que no pase desapercibida para ningún usuario que visite nuestra tienda online.
- Creamos una nueva sección y la arrastramos hasta arriba del todo.
- Le añadimos un widget tipo “Editor de texto” e insertamos el texto: “REBAJAS DE VERANO 35% DTO: COMPRAR”. Resaltamos la cifra del descuento seleccionando esta parte del texto en el propio editor y activando la opción de aplicar negrita.
- Convertiremos la palabra “COMPRAR” en un enlace que dirija a la página de productos rebajados. Para ello seleccionamos la palabra y hacemos clic en la opción del editor “Insertar/editar un enlace”. Entonces se abre una pestaña donde poder introducirlo. Para hacerlo fácilmente, podemos seleccionar la URL de la home en la barra superior del navegador (en este caso: http://tuweben4dias.dimoteca.com/), la pegamos en la pestaña y luego añadimos el slug correspondiente a la página del sitio que queremos enlazar. En este caso añadiremos “rebajas”, que es el slug que hemos asignado a la categoría de productos rebajados al crearla. Seleccionamos la palabra “COMPRAR” y la subrayamos con la opción del editor de texto para que se pueda identificar fácilmente como enlace.
- Cambiamos los estilos para conseguir una barra más llamativa: seleccionamos un rojo intenso como color de fondo de la sección, cambiamos el color de texto a blanco, lo alineamos al centro y subimos el peso de la tipografía a 500.
- Reduciremos la anchura de la sección para hacerla más delgada. Como lo que le da el tamaño que tiene es la medida del widget que contiene, vamos a reducir el margen del editor de texto, estableciendo un margen inferior de -15px.
3. Banner principal
El último paso será el de actualizar el mensaje del banner de la página de inicio y dirigir el botón de llamada a la acción hacia los productos rebajados, una vez más con la intención de llamar la atención e intentar maximizar la venta online de nuestro negocio.
- Vamos a la página principal del sitio y vemos que ya se han aplicado los cambios llevados a cabo hasta ahora. Desde aquí, vemos la barra superior y hacemos clic en “Editar con Elementor” > “Archivo de productos” para editar la página de inicio, que en el caso de este sitio web coincide con el archivo de productos.
- Una vez abierto el editor de Elementor, seleccionamos el widget de diapositivas y editamos el texto de la diapositiva actual. Como título ponemos “REBAJAS”, y como descripción escribimos “Hasta el -35% online y en tiendas”.
- En cuanto al botón, lo que haremos será modificar también el texto (ponemos “VER DESCUENTOS”) y el enlace (procedemos del mismo modo que anteriormente: seleccionamos la URL de la home, la pegamos y añadimos el slug de la página de productos rebajados).
- Finalmente, cambiamos los estilos para que sea más atractivo. Ponemos el título de color rojo, aumentamos su tamaño y ampliamos el espaciado entre letras para que aparezca de forma prominente. Aumentamos también el tamaño de la descripción para realzar el mensaje y sustituimos el verde de WhatsApp que había en el botón por el negro para que el estilo quede unificado.
4. Resultado
Si analizamos el resultado obtenido y lo comparamos con el estado previo de la home, constatamos a simple vista que tras los cambios el sitio web está mucho mejor adaptado para la época de rebajas. Al crear una categoría nueva se consigue que todos los productos rebajados se presenten unificados bajo una misma página. El hecho de enlazar dicha página en diferentes puntos de la web (el menú principal, la barra superior y el botón call to action del banner principal) permite que el usuario pueda acceder a ella con gran facilidad. A nivel estético, el uso del color rojo característico de las rebajas y el uso de negritas para destacar ciertos aspectos son grandes aliados para llamar la atención y dirigirla hacia donde nos interesa. Tras realizar todos estos cambios será mucho más probable que podamos aprovechar la gran oportunidad que brindan las rebajas para aumentar la venta online de nuestro e-commerce.
ANTES
DESPUÉS
¿Necesitas ayuda con tu proyecto web? ¡Te echamos una mano!
