Editor CMS v3.2 (Edición directa sobre el lienzo)

• Rediseño a tres columnas: Ahora editas directamente sobre la pantalla. Lo que ves en tu panel es exactamente lo que se actualizará en tu sitio, sin tener que saltar entre pestañas.
• Incluye una nueva barra de navegación de páginas para estructurar tu sitio en segundos.

Para ingresar a nuestro nuevo constructor sigue los siguientes pasos.

PASO 1.

• Menú principal.
• Mi tienda.
• Botón > Personalizar.

Constructor de Tienda Web

Al ingresar al constructor de la tienda encontrará una interfaz diseñada para crear, editar y administrar el contenido de su sitio web. A continuación se describe cada una de las áreas principales del constructor.

1. Salir del constructor

Ubicado en la esquina superior izquierda.

Este botón permite salir del constructor de la tienda y regresar al panel principal de administración. Se recomienda guardar los cambios antes de salir para evitar la pérdida de información no almacenada.

2. Menú principal (Secciones)

Ubicado en el lado izquierdo de la pantalla.

Aquí se muestran todas las secciones que componen la página seleccionada, como por ejemplo:

• Header

• Slider principal

• Productos

• Botones

• Testimonios

• Títulos

• Categorías

• Entre otras.

Desde este menú puede:

• Seleccionar una sección para editarla.

• Reordenar el contenido (si la plantilla lo permite).

• Visualizar rápidamente la estructura completa de la página.

• Acceder a la configuración específica de cada sección.

Al seleccionar una sección, sus opciones de configuración aparecerán automáticamente en el panel derecho.

3. Agregar nueva sección

Ubicado debajo del menú principal.

Este botón permite añadir una nueva sección a la página actual.

Al presionarlo, podrá seleccionar entre los diferentes bloques disponibles, por ejemplo:

• Banner

• Productos

• Galerías

• Categorías

• Videos

• Formularios

• Testimonios

• Texto e imágenes

• Entre otros.

La nueva sección se agregará a la página y posteriormente podrá personalizarla según sus necesidades.

4. Área de edición

Ubicada en la parte central del constructor.

Corresponde a la vista previa editable de la tienda.

Desde esta área puede:

• Visualizar la página tal como la verán los visitantes.

• Seleccionar cualquier sección directamente sobre la página.

• Observar los cambios en tiempo real mientras realiza las modificaciones.

• Navegar por el contenido para revisar el diseño general.

Esta vista facilita la edición visual sin necesidad de conocimientos técnicos.

5. Panel de configuración

Ubicado en el lado derecho.

Inicialmente este panel permanecerá vacío.

Cuando seleccione una sección desde el menú izquierdo o directamente desde la vista previa, aquí aparecerán todas las opciones de configuración correspondientes.

Dependiendo de la sección seleccionada, podrá modificar aspectos como:

• Textos.

• Imágenes.

• Colores.

• Botones.

• Espaciados.

• Tipografías.

• Configuración avanzada.

• Contenido dinámico.

Todos los cambios realizados se reflejan inmediatamente en la vista previa.

6. Navegación entre páginas

Ubicada en la parte superior del constructor.

Permite cambiar rápidamente entre las diferentes páginas que conforman la tienda, por ejemplo:

• Inicio

• Productos

• Carrito de compras

• Detalle del producto

• Blog

• Contacto

• Historia de la empresa

• Inicio de sesión

• Colecciones

• Entre otras.

Al seleccionar una página, el constructor cargará automáticamente su contenido para que pueda editarlo.

7. Nombre de la tienda

Ubicado en la parte superior izquierda de la barra principal.

Muestra el nombre de la tienda que está editando actualmente.

Esta información permite identificar fácilmente el proyecto cuando administra varias tiendas o ambientes de trabajo.

8. Vista por dispositivo

Ubicada en la parte superior central.

Permite visualizar cómo se mostrará la tienda según el dispositivo desde el que será visitada.

Las vistas disponibles son:

• Escritorio.

• Tablet.

• Móvil.

Cambiar entre estas vistas ayuda a verificar que el diseño sea adaptable (Responsive) y que el contenido se visualice correctamente en todos los dispositivos.

9. Ver tienda

Ubicado en la parte superior derecha.

Abre una vista previa de la tienda en una nueva pestaña o ventana del navegador.

Esta opción permite revisar la apariencia general del sitio antes de publicarlo, sin afectar la experiencia de los visitantes.

10. Publicar

Ubicado junto al botón Ver tienda.

Este botón publica todos los cambios guardados realizados en el constructor.

Importante: Las modificaciones realizadas dentro del constructor no serán visibles para los clientes hasta que presione el botón Publicar.

Se recomienda revisar previamente los cambios mediante la opción Ver tienda antes de publicarlos.

11. Guardar

Ubicado en la esquina superior derecha.

Permite guardar el progreso de las modificaciones realizadas durante la edición.

Guardar los cambios no los hace visibles en la tienda pública; únicamente almacena el trabajo realizado dentro del constructor.

Para que los cambios sean visibles para los visitantes, deberá presionar posteriormente el botón Publicar.

Descripción de los pasos realizados

1. Situación inicial

Al ingresar al constructor de la tienda, el panel de configuración, ubicado en el lado derecho, permanece vacío porque aún no se ha seleccionado ninguna sección para editar.

En este estado, el constructor muestra la estructura de la página y todas las secciones disponibles, listas para ser seleccionadas.

2. Selección desde el menú principal

Una forma de seleccionar una sección es desde el Menú principal (Secciones), ubicado en el lado izquierdo del constructor.

Al hacer clic sobre cualquier sección (por ejemplo, Slide de marcas), el sistema:

• Resalta automáticamente la sección seleccionada en el menú principal.

• Identifica y selecciona la misma sección dentro del área de edición.

• Carga en el panel de configuración las opciones correspondientes para su edición.

Esta sincronización permite identificar fácilmente qué elemento de la página se está editando.

3. Selección desde el área de edición

También es posible seleccionar una sección directamente desde el Área de edición, haciendo clic sobre cualquier elemento visible de la página (por ejemplo, la sección Categorías, correspondiente al Slide de marcas).

Al seleccionar una sección desde la vista previa:

• El elemento queda resaltado en el área de edición.

• Automáticamente se selecciona la misma sección en el menú principal.

• Se actualiza el panel de configuración con las opciones de edición de esa sección.

De esta forma, puede iniciar la edición tanto desde el menú principal como desde la vista previa de la tienda, obteniendo el mismo resultado.

4. Sincronización de la selección

El constructor mantiene sincronizadas todas las áreas de trabajo.

Esto significa que, independientemente de si la sección fue seleccionada desde el Menú principal o desde el Área de edición, el sistema resaltará automáticamente la misma sección en ambos lugares y la dejará lista para su configuración.

Esta funcionalidad facilita la navegación y evita confusiones durante el proceso de edición.

5. Panel de configuración

Una vez seleccionada una sección, el Panel de configuración, ubicado en el lado derecho, muestra automáticamente todas las opciones disponibles para editar únicamente la sección seleccionada.

Las opciones que se muestran varían según el tipo de sección. Por ejemplo, para un Slide de marcas pueden estar disponibles configuraciones como:

• Marcas o elementos del slider.

• Agregar nuevos elementos.

• Título.

• Configuración del slider.

• Divisor.

• Opciones adicionales.

• Configuración general de la sección.

Cada tipo de sección dispone de sus propias opciones de personalización, por lo que el contenido del panel cambiará automáticamente al seleccionar una sección diferente.

6. Edición y guardado de los cambios

Realice las modificaciones necesarias utilizando las opciones del panel de configuración. Los cambios se visualizarán inmediatamente en el Área de edición, permitiendo comprobar el resultado en tiempo real.

Una vez finalizada la edición, haga clic en Guardar para almacenar los cambios realizados. Posteriormente, utilice el botón Publicar para que las modificaciones se reflejen en la tienda web y sean visibles para los visitantes.