Barra lateral y barra de herramientas del editor de páginas

El editor de páginas mantiene el lienzo centrado y coloca todos los controles del generador en una barra lateral derecha, apilados de arriba abajo. Una barra de herramientas superior permite guardar, publicar y obtener una vista previa en el dispositivo. Puedes contraer la barra lateral para ampliar el ancho del lienzo.

No hay ninguna barra lateral izquierda independiente para bloques o ajustes: todo se encuentra a la derecha.

Resumen de funcionalidades

Área	Finalidad
Barra de herramientas superior	Guardar, publicar, deshacer/rehacer, vista previa en dispositivos, mostrar/ocultar la barra lateral
Barra lateral derecha — fila superior (iconos)	Seleccionar panel: Editar, Capas o Bloques
Barra lateral derecha — parte inferior (en modo Edición)	Pestañas Estilo, Atributos y Eventos para el elemento seleccionado
Lienzo	Composición de la página en tiempo real

Barra lateral derecha — selector de paneles (parte superior)

Tres botones con iconos en fila en la parte superior de la barra lateral:

Editar (icono de lápiz)

Modo predeterminado. Selecciona un elemento en el lienzo y, a continuación, utiliza las pestañas situadas debajo (Estilo, Atributos, Eventos).

Capas

Una lista estructurada de secciones → filas → columnas → bloques. Úsala cuando:

• No puedas hacer clic en la fila que necesitas porque los bloques se superponen.
• Quieras reordenar elementos anidados sin arrastrarlos en el lienzo.
• Necesites seleccionar el contenedor de la sección para cambiar el espaciado de la sección.

Bloques (icono «más»)

La biblioteca de bloques agrupados por categoría (Básico, Diseño, Portafolio, Hero, Avanzado, etc.). Arrastra un bloque al lienzo; suéltalo en una columna cuando se te solicite. Una vez que sueltes un bloque, la barra lateral suele volver a la pestaña Editar para que puedas configurarlo.

Los bloques con gran cantidad de contenido multimedia se describen en Bloques de presentación multimedia compatibles. Los bloques de diseño y de texto se encuentran en Referencia de bloques del editor y diseño.

Barra lateral derecha: pestañas del modo Editar (debajo de los iconos)

Aparecen cuando Editar está activo y tienes un componente seleccionado en el lienzo (bloque, fila, columna o sección).

Estilo

Aspecto visual: espaciado, tipografía, colores y fondos, siempre que la plataforma los permita para ese tipo de componente.

Relleno y margen: En Espaciado, utiliza el icono de enlace para alternar entre el modo vinculado (un valor se aplica a los cuatro lados) y el modo no vinculado (se configuran la parte superior, la derecha, la inferior y la izquierda de forma independiente). Los controles deslizantes tienen un límite de 160 píxeles; introduce valores mayores en los campos numéricos cuando sea necesario.

Ancho: un ancho fijo (por ejemplo, 800 píxeles) en un bloque independiente se centra automáticamente en la página. Para el contenido normal de la página dentro de una Sección → Fila, es preferible utilizar Fila → Ancho máximo en Atributos; consulta Diseño y contenido de la página.

Attr

Atributos de ese componente: selección de imágenes, fuente del portafolio, número de columnas, modo de diseño del hero, etiqueta de la llamada a la acción (CTA), destinatario del formulario y similares. Este es el lugar principal donde se configuran los ajustes de Multimedia, Portafolio o comercio. (Algunas guías los denominan «rasgos»; en el editor, la etiqueta de la pestaña es Atributos).

Eventos

Interactividad de los elementos para el sitio web publicado: añade desencadenantes (clic, revelación al desplazarse, paso del cursor, al cargarse) y acciones (activar/desactivar una clase, mostrar/ocultar, atenuación de elementos adyacentes en la galería, desplazamiento suave, efecto de paralaje) sin necesidad de escribir código JavaScript. La pestaña se denomina Eventos en la barra lateral; el título del panel es Interactividad de los elementos.

Guía completa con ejemplos, límites y solución de problemas: Eventos e interacciones del editor de páginas.

Ejemplo rápido	Lo que se configura en Eventos
La sección aparece gradualmente al desplazarse	Entrar en el área visible → Añadir clase + transición CSS en esa clase
Abrir/cerrar el menú móvil	Hacer clic → Alternar clase en un panel de menú (selector #menu)
Cuadrícula de mosaicos del portafolio	Entrar al pasar el cursor → Atenuación de los elementos hermanos; Salir al pasar el cursor → Deshacer atenuación en el contenedor de mosaicos
Salto a un ancla dentro de la página	Clic → Desplazarse a con #section-id

Las interacciones se ejecutan en las páginas en vivo y de vista previa tras Guardar página, no necesariamente mientras solo estás arrastrando en el lienzo. Es preferible asociar las interacciones a la raíz del bloque que hayas seleccionado (sección, contenedor de tarjetas, botón), en lugar de a nodos internos profundos.

En el caso de las filas, el relleno y el ancho máximo suelen controlarse desde Atributos (campos de diseño de fila). Si tanto Atributos como Estilo muestran el relleno, es preferible utilizar los controles de fila de Atributos para evitar valores contradictorios.

Espaciado del diseño (secciones, filas, columnas)

El espaciado se divide en tres capas. Mezclarlas es la razón más habitual por la que una banda parece demasiado alta, demasiado baja o descentrada tras la publicación.

Capa	Qué controla	Dónde editar
Sección	Espacio vertical exterior por encima y por debajo de la fila (el «margen» de la «banda»)	Selecciona la sección → Attr (espaciado de sección) o Style
Fila	Ancho máximo, separación entre columnas, relleno de la fila	Selecciona la fila → Atrib (diseño de la fila); es preferible esto al relleno de Estilo en las filas
Columna	Relleno interior de las celdas, altura mínima, alineación vertical	Selecciona la columna → Atributos

El relleno de la sección no cambia el tamaño de los elementos hijos. Aumentar el relleno de la sección añade espacio en blanco alrededor de la fila; no estira las filas ni las columnas para llenar el área de visualización. Para hacer una banda más alta, aumenta la altura mínima de la columna o el relleno de la columna, o añade un bloque Spacer.

¿Te cuesta hacer clic en la fila? Utiliza Capas → expande Sección → selecciona Fila y, a continuación, cambia el ancho máximo o el espacio en Atributos.

¿La fila parece descentrada o demasiado estrecha en el sitio web en vivo? Establece el ancho máximo de la fila en Atributos (no solo en Estilo). Si tanto Atributos como Estilo definen el relleno de la misma fila, utiliza únicamente Atributos.

Guía completa sobre el ancho del contenido, la diferencia entre sección y fila, y cuándo utilizar cada control: Diseño de la página y contenido.

Lista más detallada de bloques: Referencia de bloques y diseño del editor.

Barra de herramientas superior

Control	Qué hace
Borrador / Publicar	Determina si la página es pública (junto con Guardar página)
Guardar página	Guarda los cambios en el lienzo sin que se publiquen necesariamente
Ordenador / Tableta / Móvil	Vista previa del ancho del lienzo
Deshacer / Rehacer	Acciones recientes del editor

Flujo de trabajo completo de publicación: Vista previa y publicación.

Pestaña «Editor de la página» frente a «Configuración de la página»

Por encima del lienzo, dos pestañas separan las funciones:

• Editor de la página: todo lo que se describe en este artículo (lienzo + barra lateral derecha + barra de herramientas).
• Configuración de la página: slug, campos de SEO, modificaciones de la plantilla: Configuración y modificaciones de la página.

Próximos pasos y validación

1. Abre cualquier página en el editor.
2. Selecciona un bloque → comprueba que las pestañas Estilo, Atributos y Eventos se actualizan en Editar.
3. Haz clic en el icono Capas → selecciona una fila → cambia el ancho máximo en Atributos.
4. Haz clic en el icono Bloques → arrastra un bloque al lienzo.
5. Abre Eventos en una sección → añade una interacción Entrar en el área de visualización → Guardar página → previsualiza la página pública.