Guía del Editor Visual: Diseña tu Tienda Online sin programar

 

El Editor Visual es tu centro de comando para diseñar la apariencia de tu tienda. Aquí podrás decidir qué ve el cliente desde que entra hasta que compra.

 

 

1. Ingresando al Editor

 

Para comenzar a diseñar:

1. En el menú lateral de tu administrador, busca la sección "Tienda Online".

2. Haz clic en "Editor" o "Personalizar sitio".

3. Se abrirá una nueva interfaz que ocupa toda la pantalla.

 

 

2. Estructura de la Pantalla

 

El editor se divide principalmente en dos grandes áreas:

• A. La Barra Lateral (Izquierda): Es tu caja de herramientas. Aquí verás la lista de todos los componentes que forman tu página (ej: Carrusel, Productos Destacados, Pie de página). Desde aquí controlas el orden y las configuraciones.

• B. El Área de Vista Previa (Centro/Derecha): Aquí ves en tiempo real cómo está quedando tu página. Es interactiva, lo que significa que puedes hacer clic en los elementos para editarlos directamente.

 

 

 

3. Agregar Nuevos Componentes

 

¿Quieres agregar un banner o una lista de productos?

1. En la vista previa, busca el botón "Agregar componente" (si la página está vacía) o los botones circulares con un símbolo "+" que aparecen entre los componentes existentes al pasar el mouse.

2. También puedes usar el botón "Agregar componente" que está al final de la lista en la Barra Lateral.

3. Se abrirá un menú con las opciones disponibles: Texto, Imagen, Carrusel, Grilla de Categorías, etc. Elige uno y se insertará en tu página.

 

 

 

4. Editar y Personalizar

 

Para cambiar el contenido de una sección (ej: cambiar la foto de un banner o el texto de bienvenida):

1. Haz clic directamente sobre el componente en el Área de Vista Previa.

2. La Barra Lateral cambiará automáticamente para mostrarte las opciones de ese componente específico.

3. Aquí podrás subir imágenes, cambiar textos, ajustar colores o modificar la disposición.

4. Para volver al menú principal, usa la flecha "Volver" en la parte superior de la barra lateral.

 

 

 

5. Reordenar y Organizar

 

¿Quieres que los productos destacados aparezcan antes que el banner?

1. Desde la Barra Lateral: Haz clic y mantén presionado el icono de "puntos" o "arrastrar" a la derecha del nombre del componente. Arrástralo hacia arriba o abajo y suéltalo.

2. Desde la Vista Previa: Al seleccionar un componente, verás una pequeña barra de herramientas flotante con flechas (⬆️ ⬇️). Úsalas para subir o bajar la sección.

 

 

 

6. Vista Móvil y Escritorio

 

El editor de Flobu es "Responsive". Aunque trabajes en una pantalla grande, el sistema ajusta automáticamente el contenido para celulares.

• Tip: Usa tu navegador para simular una pantalla de celular (achicando la ventana) y verificar que todo se vea perfecto.