Introducción al editor de páginas

El editor de páginas es un espacio de trabajo visual, de tipo WYSIWYG: lo que dispongas en el lienzo es lo que verán los visitantes después de que hagas Guardar y Publicar. No estás escribiendo código HTML sin formato, sino que estás creando bloques dentro de secciones, filas y columnas que ArtInStack convierte en una página pública rápida y adaptativa.

Resumen de funcionalidades

• Bloques de arrastrar y soltar: texto, imágenes, elementos destacados, formularios, cuadrículas de productos y mucho más (consulta la Referencia de bloques y maquetación del editor y Bloques de presentación multimedia compatibles).
• Edición en línea: haz clic en el texto del lienzo para editarlo; selecciona un bloque para ajustar sus propiedades en la barra lateral derecha.
• Vista previa adaptativa: los botones de dispositivos de la barra de herramientas (Ordenador, Tableta, Móvil) muestran una aproximación de cómo se reajusta el diseño antes de publicar el sitio.
• Interacciones (pestaña «Eventos»): desplazamientos con revelaciones, efectos al pasar el cursor, conmutadores y movimientos en el sitio publicado sin necesidad de código personalizado (véase Eventos e interacciones del editor de páginas).
• Elementos comunes — El encabezado y el pie de página suelen proceder de plantillas aplicadas a todas las páginas (consulta Cómo trabajar con plantillas de página).

Arquitectura de la interfaz

[Páginas → Editar → pestaña Editor de páginas]
        |
        v
[Barra de herramientas: guardar, publicar, vista previa en dispositivo]
        |
        +-- Área de trabajo (centro): secciones → filas → columnas → bloques
        |
        +-- Barra lateral derecha (paneles apilados):
              Iconos: Editar | Capas | Bloques
              Cuando «Editar» está activo: pestañas Estilo | Atributos | Eventos debajo

Secciones, filas y columnas

La mayoría de las páginas se construyen a partir de secciones (bandas de ancho completo). Dentro de una sección se colocan filas y, a continuación, columnas (1-4 columnas o diseños con barra lateral de la categoría Diseño). Los bloques se ubican dentro de las columnas; nunca flotan sueltos en una raíz invisible.

Capa	Qué hace
Sección	Banda vertical; controla el espaciado y el fondo de la sección
Fila	Fila horizontal; ancho máximo, separación y relleno
Columna	Celda que contiene uno o más bloques
Bloque	Imagen, texto enriquecido, hero, formulario de contacto, etc.

Utiliza las Capas de la barra lateral derecha cuando necesites seleccionar una fila o sección oculta bajo otro contenido.

Lo que ven los visitantes frente a lo que ves tú mientras editas

El lienzo del editor aplica las mismas reglas de diseño que el sitio web en producción: el espaciado, la tipografía y la estructura de bloques están alineados para que no tengas que adivinar el resultado tras la publicación. Si algo parece incorrecto en la URL pública tras la publicación, consulta Vista previa y publicación y Solucionar problemas de publicación; normalmente se debe a la caché, al estado de borrador o a que a un bloque aún le falta algún elemento multimedia.

Casos de uso básicos habituales

• Página de inicio: imagen principal + cuadrícula de portfolio + llamada a la acción de contacto.
• Contacto — Bloque Formulario de contacto — Añadir un formulario de contacto a las páginas.
• Acerca de — Texto enriquecido + bloque de imagen de retrato.
• Servicios — Cuadrícula de características + bloques de testimonios.
• Tienda — Bloques de listado de productos (consulta Productos y ventas).

Próximos pasos y validación

1. Abre el editor de páginas en una página real.
2. Lee Barra lateral y barra de herramientas del editor de páginas.
3. Lee Diseño y contenido de la página para conocer los conceptos de sección, fila y ancho máximo.
4. Echa un vistazo a Eventos e interacciones del editor de páginas si quieres que se muestren elementos al desplazarte, al pasar el cursor o al hacer clic sin necesidad de código personalizado.
5. Coloca un bloque de Sección y otro de Imagen, Guarda la página y previsualízala en móvil.
6. Previsualiza y publica cuando estés listo.