Un rotador de oferta es una herramienta que funciona similar al rotador de productos con imagen pero además le podés sumar un contador de cuenta regresiva.
Puede ser útil para promocionar ofertas especiales o productos nuevos.
En general, un rotador de productos puede ser una forma efectiva de mejorar la presentación de los productos en nuestra tienda en línea y promover la venta.
Funciona como un carrusel, donde van rotando los productos con una portada relacionada a la izquierda o a la derecha y ocupando un 75%, un 50% o un 25% de la seccion, Esa portada puede ser una imagen o un degradé.
Tabla de contenido
- Paso a paso
para agregar la sección “Rotador – Oferta”
Recomendaciones de uso y ejemplos
Herramientas de configuración de la sección
Filtros de Productos
Configuración de la imagen- Guardar los cambios o publicar
Paso a paso para agregar la sección “Destacados”
1. Dentro del Diseñador vamos a hacer clic
en «Botón turquesa (+)
2. Ahora se abrirá una ventana con todas las secciones que podemos agregar, lo siguiente es seleccionar la sección Destacados
Luego de haber cliqueado
se mostrará la sección de Rotador -Oferta como viene estilada por defecto, como se ve en la preview.
A continuación te detallamos algunos ejemplos. Agregarlas como están estiladas, te va a permitir ahorrarte tiempo, ya que van a encontrarse pre-configuradas. De todos modos, te indicamos acá mismo, como modificarla por completo.
Ejemplo Rotador Oferta
Con título, subtítulo, párrafo, cuenta regresiva y botón
En la vista Mobile
Ejemplo Rotador – Oferta #2
Con el texto de portada a la derecha de la pantalla, título, subtitulo, párrafo y botón
Ejemplo Rotador Oferta #3
Con la imagen a la izquierda de la pantalla ocupando el 50% de la sección, cuenta regresiva y botón
Ahora, vamos a avanzar con la edición de la sección
3. Lo siguiente es editarlo, vamos a pasar el cursor por encima de la sección y vamos a ver todas estas opciones
4. Haciendo clic sobre cualquiera de los recuadros, se nos abrirá una ventana con las ediciones que podemos realizar!
Seleccionando sobre las opciones de la derecha de la pantalla (Flecha roja) vamos a poder mover la sección hacia arriba o hacia abajo, Configurar la disposición de la sección, agregarle un fondo a la seccion, Acceder a la configuración o eliminarla.
Haciendo clic sobre el icono del filtro (central), vamos a poder editar los productos que se muestran en ese rotador
Y Haciendo clic sobre el icono de imagen modificar la misma y sobre el icono del enlace, modificar el mismo.
¡No te preocupes que a continuación te explicamos que hacer en cada configuración!
Disposición
En Disposición vamos a ver 3 pestañas: General, Relleno y Margen. Vamos a repasar cada una de ellas
General
Podremos elegir si queremos que el contenedor este limitado por el ancho de seccion o no limitar el ancho de sección y seleccionar la visibilidad (si queremos que la sección se muestre en Desktop y Mobile, Solo en Desktop o Solo en Mobile.
Relleno | Margen
En Relleno podremos ajustar los espacios visuales entre secciones, mientras que el margen, nos permitirá ajustar los espacios internos, entre el contenedor y los productos por ejemplo.
Estilo de Fondo
Imagen
Podremos agregar una imagen y configurar su transparencia, repetición, sombreado, entre otros.
Textura
Podremos agregar una opción de textura entre las disponibles de nuestro banco.
Color
Podremos agregarle un color de fondo a la sección.
Estilo
Podremos agregarle un sombreado a los límites de la sección.
Configuración
Vamos a ver 4 pestañas: Información, Rotación, Distribución y Contenedor. Vamos a repasar cada una de ellas
Información
Desde este apartado podremos elegir qué información queremos mostrar dentro de los productos:
- Informacion sobre los productos: Solo Mostrar el nombre, Mostrar nombre, categoría y marca, Mostrar nombre y categoría o Mostrar nombre y marca.
- Precios: Actual y anterior, Solo el precio actual o No mostrar precio
- Etiquetas: Si mostrarlas o no
Rotación
Desde este apartado podremos elegir qué comportamiento queremos que tengan los productos al rotar:
- Rotación automática de productos: Si queremos que los productos roten automáticamente o de forma manual
- Tiempo de rotación automática: Podes elegir la velocidad de rotación (de 1 a 8 segundos)
- Visibilidad en rotación: Si queres que roten de a uno o todos los visibles.
Distribución
Tipo de Contenido del panel : Aqui vas a poder elegir si queres que se muestre una imagen o un fondo de color degradé/Venta Flash (O cuenta regresiva)
Posición del panel: Aqui vas a poder elegir si queres que la imagen se ubique a la izquierda o a la derecha de la pantalla
Tamaño del panel: Desde aqui vas a poder seleccionar si queres que la imagen sea el 25% de la seccion, el 50% o el 75%
Productos visibles por fila: Desde aqui vas a poder seleccionar si queres que se muestren 2 o 3 productos por fila.
Cantidad de filas visibles: Desde aqui vas a poder seleccionar si queres que se muestren los productos en 1 o 2 filas de productos.
Personalizar
Allí podrás configurar:
- Sección: Color de fondo de la sección.
- Degradé: Si en lugar de una imagen decidís utilizar un degradé, desde aqui lo configuras.
- Visibilidad: Donde podes configurar si queres mostrar o no título, Subtitulo, Párrafo, Boton y cuenta regresiva.
⏰ En el caso de activar la cuenta regresiva, una vez completada, la misma desaparecerá de la seccion. Quedando unicamente el resto de la información configurada.
- Elementos: Donde configuraras fecha y hora de la cuenta regresiva.
Filtros
Haciendo clic en este ícono podrás configurar los productos que queres que se muestren en el rotador.
- Productos destacados: Aquí podrás mostrar solo aquellos productos marcados como novedad y destacado, Solo los nuevos, Solo los destacados, Novedad o Destacado o simplemente no filtrar por productos seleccionados.
- Filtro: Podes elegir filtrar por Marca, Categoría y tags o bien, seleccionar productos específicos. En este ultimo caso, te va a aparecer esta otra pantalla para que elijas los productos que querés mostrar. (Un máximo de 25).
Haces clic en Seleccionar y podrás buscar los productos que quieras: Haciendo clic sobre cada uno, los vas seleccionando.
Los Filtros son combinables!
Ediciones de los textos.
Haciendo clic sobre cualquiera de los cuerpos de texto podes editar el contenido, borrar, escribir, agregar emojis, etc.
Y haciendo clic en el ícono del #Pincel, vas a poder editar la apariencia de esos textos:
Desde acá vas a encontrar 4 pestañas:
- Formato: Para ajustar el tamaño, el espaciado de caracteres, alto de renglón y la alineación, tanto para Desktop como para Mobile.
- Estilo: Para ajustar el estilo (normal o itálica), el peso (liviana, normal o negrita), la decoración (sobrerayado, tachado, o subrayado) y el sombreado.
- Color: Para elegir el color
- Disposición: Para elegir y configurar los margenes tanto para desktop como mobile.
Ediciones de Botón
Haciendo clic sobre cualquiera de los cuerpos de texto podes editar el contenido, borrar, escribir, agregar emojis, etc.
Haciendo clic en el ícono del #enlace, vas a poder configurar cualquiera de estas opciones de enlace
Y haciendo clic en el ícono del #Pincel, vas a poder editar la apariencia de esos textos:
Desde acá vas a encontrar 3 pestañas:
- Estilo: Para ajustar el color de texto, fondo y sus rellenos y bordes y su ancho y radio.
- Formato: Para ajustar el tamaño, el espaciado de caracteres, alto de renglón y la alineación, tanto para Desktop como para Mobile.
- Disposición:Para elegir y configurar los margenes tanto para desktop como mobile.
Si querés mostrar una imagen en vez de degradé en Disposición -> Tipo de Contenido del panel -> Seleccionas Imagen
Ediciones de Imagen
Haciendo clic en estos iconos estaremos editando la imagen en particular de la sección y además podremos configurarle un link.
Es desde la opción #imagen donde vas a poder cargarla y configurar el link al que redirigirá y el estilo y layout como en el resto de las secciones
Tamaños Sugeridos para este tipo de sección:
El tamaño sugerido para Destacados#2 donde la imagen ocupa el 25% de la seccion es de 2200 px de ancho x 3500 px de alto
El tamaño sugerido para cuando la imagen ocupa el 50% de la seccion es de 3500 px de ancho x 3500 px de alto
El tamaño sugerido para cuando la imagen ocupa el 50% de la seccion es de 5690 px de ancho x 3250 px de alto
Recordá también que la imagen solo se verá en Desktop. Si queres sumarle imagenes arriba o abajo de la seccion, podes configurar Destacados para que sea visible únicamente en Desktop y en Mobile utilizar otra sección o bien, sumarle una nueva que únicamente sea visible en Mobile.
Dentro del ícono de la imagen, además de tener el apartado para poder subirla,
Vamos a poder darle Estilo: Darle un sombreador a la imagen, un radio (bordes redondeados) Ajustar el color, el foco, la opacidad, la alineación y darle un alto máximo.
En el caso de la pestaña de Disposición vas a poder ajustar los márgenes.
Y por último, haciendo clic en el ícono del enlace, vas a poder configurar cualquiera de estas opciones de enlace
Cuando termines de realizar las ediciones recordá que podés salir del diseñador sin publicar los cambios o lo podes publicar inmediatamente en el portal público!
