Inicio/Guías/Diseño

El Panel de diseño en Batitienda

diciembre 22, 2022

Con el Panel de diseño (Diseñador) podemos modificar🖌️ como se muestra la tienda hacía nuestros clientes.

Tabla de Contenido🤓

  • Ingresar al diseñador
  • Barra superior del diseñador
    • Páginas
    • Icono de Salir / Publicar
  • Encabezado (Header)
  • Agregar una nueva sección
  • Todas las secciones
  • Configuración general
  • Paleta de colores
  • Favicon
  • Pie de página (Footer)

Para ingresar al diseñador tenemos que estar dentro de nuestro panel administrador y luego dirigirnos a 👉Tienda online > Borradores > (Elegir un borrador) > Diseño.

El Diseñador se utiliza en conjunto con los borradores. Los borradores son una versión completa de la tienda online a nivel diseño. Podemos tener un borrador principal para nuestra tienda y utilizar otros borradores para realizar pruebas, cambios grandes de diseño para una fecha especifica, etc.

Este es nuestro Panel de diseño👇

Lo primero que vamos a ver es una barra superior.

Los primeros 4 iconos nos muestran como se ve nuestro tienda en las diferentes tipos de pantallas (por defecto viene seleccionado el Ancho máximo de la pantalla)

Teléfono👇

Tablet👇

Pc de escritorio👇

Y con este icono: podemos rotar las pantallas de la vista del Teléfono y Tablet👇

Acá vemos👀 el borrador que estamos editando👇

Este es el ícono de las páginas, en el vamos a poder ver todas las páginas que tenemos creadas, también las vamos a poder seleccionar y editar!

Luego de hacer clic🖱️ en el ícono se abrirá una ventana con la lista de nuestras páginas creadas👇

Icono de Salir / Publicar👇

Si es un borrador que no está publicado vamos a tener estas 3 opciones:

  • Publicar sitio Web: El el borrador se mostrara en la tienda online.
  • Salir del diseñador: Vas a volver a la página de borradores y el diseño sera guardado.
  • Continuar con la edición del sitio: Seguir editando el diseño del borrador.

Si estas editando el borrador principal (el publicado) se mostraran estas nuevas opciones:

  • Guardar modificaciones y continuar más tarde: Las ediciones van a ser guardadas pero no se van a publicar.
  • Descartar los cambios realizados: Volverás a la página de borradores y el diseño no se va a guardar.

Pasando el cursor por encima de nuestro encabezado se nos va a aparecer un botón en donde lo podemos editar y personalizar.

  • ¿Cómo agregar un menú nuevo en tu tienda?
  • ¿Cómo personalizar el encabezado de mi tienda?

Haciendo clic🖱️ en los iconos celestes vamos a poder agregar una nueva sección a nuestra página👇

Luego de haber cliqueado🖱️ se abrirá una ventana con todas las secciones que podemos agregar👇

A continuación te dejo los iconos de las secciones con sus links en donde podes ver como se agregan y se editan!😁👇

BoxContent 1

Call to Action 1

Carrusel

Galería

Iframe HTML

Imagen 1

Imagen 2

Productos

Slider

Texto 1

Texto 2

En la parte derecha del diseñador vamos a ver un icono de la Configuración general⚙️ 

Luego de cliquear🖱️ se nos va a mostrar la ventana de la Configuración general (Estás ediciones solo se aplicaran a la página de inicio)

Lo primero que vamos a poder hacer es elegir el color de los links, detalles y decoraciones de la página de inicio.

Ejemplo:

Selecciono el color «Verde» de la Paleta de colores

Los botones de «Agregar » se cambiaron al color verde

Lo segundo que podemos hacer es editar el icono que aparece en las pestañas de los buscadores👇

Desde acá👇

Para editar el Pie de página de la tienda tenemos que dirigirnos hasta el final de la página y pasar el cursor por encima de la sección para luego cliquear en «⚙️Footer»👇

En ⚙️Configuración vamos a poder elegir entre 3 estilos de diseño para nuestro Footer

Footer Style 1 (Por defecto)

Footer Style 2

Footer Style 3

En la pestaña de Color vamos a poder elegir el color del fondo de nuestro Pie de página

Y vamos a poder elegir el color del los textos!

En la pestaña Bordes vamos a poder editar el color del borde superior e inferior.

En la pestaña Logo vamos a poder ingresar una imágen del logo de nuestro negoció

Y también podemos seleccionar la cantidad de Sellos o imágenes que queremos mostrar en nuestro Footer

Ejemplo👇

Las imágenes las podemos editar desde la primera ventana de la edición del Footer (⚙️Footer)

Ejemplo de edición de un Sello / Imagen👇

Fin del post!👏 Ahora serás un experto en el diseño de tu tienda online!😁

¿Te fue útil?

Sí  No
Artículos relacionados
  • ¿Cómo agregar la sección Imagen 2?
  • ¿Cómo agregar la sección Imagen 1?
  • ¿Cómo personalizar el encabezado de mi tienda?
  • ¿Cómo agregar una galería de imágenes?
  • ¿Cómo agregar un Iframe HTML?
  • ¿Cómo agregar la sección productos del diseñador?
Diseño
  • El Panel de diseño en Batitienda
  • ¿Cómo agregar la sección Imagen 2?
  • ¿Cómo agregar la sección Imagen 1?
  • ¿Cómo personalizar el encabezado de mi tienda?
  • ¿Cómo agregar una galería de imágenes?
  • ¿Cómo agregar un Iframe HTML?
View All 17  
Artículos populares
  • Medidas recomendadas para un slider 
  • ¿Cómo agregar el botón de continuar con Google en mi Batitienda?
  • ¿Cómo verificar mi catálogo para Instagram Shopping?
  • Primeros pasos de tu Batitienda
  • ¿Cómo configurar mi sistema de fidelización FidelyNet?
Categorías
  • Mobile
    • Mobile Configuración
  • Primeros pasos
    • Preparación
  • Productos
    • Descuentos
    • Combos de productos
    • Variables
    • Acciones masivas
    • Agregar un nuevo producto
  • Diseño
    • Personalizar tu diseño
  • Configuraciones
    • Medios de pago
    • Fidelización
  • Marketing
  • Información general
    • Conocé lo que podés hacer con Batitienda
  • Envíos
    • Todo sobre envíos
  • Canales de ventas
    • Mercado Libre / Instagram Shop / Facebook
  • Pedidos
    • Mis Ventas

© 2023 Batitienda - Todos los derechos reservados.