Page Builder
El PageBuilder es el editor visual del sistema para crear, estructurar y personalizar páginas del sitio web mediante bloques, secciones y componentes configurables. Su funcionamiento permite construir páginas de forma visual sin necesidad de editar directamente el contenido desde código, aunque también incorpora opciones avanzadas para usuarios técnicos.
Introducción
El entorno del PageBuilder se organiza en cuatro áreas principales:
- Barra superior de control
- Panel lateral izquierdo de estructura
- Lienzo central de edición
- Panel lateral derecho de propiedades
Estructura general del editor
Panel lateral izquierdo
El panel izquierdo muestra la estructura jerárquica de la página. Desde aquí se pueden visualizar y seleccionar las secciones principales del sitio, como:
- Header
- Buscador
- Banner de Cookies
- Plantilla
- Footer
Cada elemento puede desplegar sus bloques internos y permite seleccionar componentes concretos para editar sus propiedades.
Lienzo central
El área central muestra una vista visual de la página en edición. En esta zona se visualiza el resultado del diseño y se pueden añadir nuevas secciones o componentes.
Cuando no hay elementos en la plantilla, el sistema muestra un mensaje indicando que no existen componentes y permite comenzar añadiendo el primero.
Panel lateral derecho
El panel derecho muestra las propiedades del elemento seleccionado.
Su comportamiento depende del contexto:
- Si no hay ningún elemento seleccionado, mostrará un mensaje indicando que se debe seleccionar una sección o componente.
- Si se selecciona una sección o bloque, mostrará sus opciones de configuración específicas.
- Si se pulsa la rueda de configuración global, mostrará las propiedades generales del sitio.
Barra superior del PageBuilder
La barra superior reúne las herramientas principales de control de edición.
Modos de visualización
El editor permite comprobar la visualización de la página en diferentes dispositivos mediante tres modos:
- Móvil
- Tablet
- PC
Esto facilita revisar la adaptación responsive del diseño antes de publicar cambios.
Estado de guardado
En la parte superior se muestra el estado actual del documento.
Estados observables:
- Sin guardar → existen cambios pendientes.
- Guardado → los cambios han sido almacenados correctamente.
Al pulsar el botón Guardar, el sistema actualiza el estado automáticamente.
Vista previa
La opción Vista previa permite abrir una vista limpia de la página sin los paneles de edición del constructor.
Es útil para revisar el resultado visual antes de guardar o publicar.
Guardar
El botón Guardar almacena los cambios realizados en la estructura y configuración de la página.
Configuración global del sitio
La rueda de configuración situada en la parte superior izquierda del editor permite acceder a la configuración global del diseño del sitio.
Estas propiedades afectan al comportamiento y estilo general de la web, no solo a una página concreta.
Las categorías disponibles en esta configuración son:
- General
- Layout
- Tipografía
- Botones
- Campos de entrada
- Colores
- Espaciado
- Bordes
- Animaciones
- Tarjeta de producto
- Muestras de opciones
- Contacto de tienda
- Configuración del carrito
- Búsqueda
- Integración
- Avanzado
Al final del panel aparecen dos acciones globales:
- Aplicar cambios
- Restaurar
General
La sección General reúne configuraciones base del sitio.
Favicon
Permite definir el icono que se mostrará en la pestaña del navegador.
Tamaño recomendado:
- 32x32 px
- 16x16 px
Añadir al carrito con Ajax
Permite añadir productos al carrito sin recargar la página.
Botón volver arriba
Activa un botón que permite regresar rápidamente al inicio de la página.
Habilitar RTL
Activa compatibilidad con idiomas escritos de derecha a izquierda.
Idiomas RTL
Permite indicar los idiomas que deben usar orientación RTL, separados por comas.
Ejemplo: ar,he
Layout
La sección Layout controla la estructura base del contenido.
Incluye:
- Ancho del contenedor
- Ancho máximo fluido
- Margen izquierda/derecha
- Padding del contenedor
Puede configurarse en tres modos:
- Todo
- Ejes
- Individual
Tipografía
La sección Tipografía controla la apariencia global de textos y encabezados.
Texto del cuerpo
- Fuente
- Peso de fuente
- Tamaño de fuente
- Altura de línea
Encabezados
- Fuente de encabezados
- Tamaño H1
- Tamaño H2
Botones
Permite definir el estilo global de los botones del sitio.
- Tamaño de fuente
- Radio de borde
- Padding vertical
- Padding horizontal
- Texto en mayúsculas
Campos de entrada
Controla la apariencia de inputs y campos de formularios.
- Grosor de borde
- Radio de esquina
- Tamaño de fuente
Colores
La sección Colores define la paleta global del sitio.
Esquemas de color
Permite seleccionar esquemas predefinidos.
Colores de notificación
- Éxito
- Advertencia
- Error
Overlay
- Color de fondo
- Opacidad
Espaciado
Controla la separación entre elementos y secciones.
- Padding de sección
- Margen de sección
- Espaciado entre elementos
Bordes
Permite definir radios de borde globales.
- Radio pequeño
- Radio mediano
- Radio grande
Animaciones
Permite controlar la respuesta visual de animaciones del sitio.
- Duración
- Tipo de easing
Tarjeta de producto
Controla el estilo de visualización de las tarjetas de producto.
Opciones disponibles:
- Estilo 1
- Estilo 2
- Estilo 3
También permite activar:
- Mostrar botón de favoritos
- Mostrar vista rápida
Muestras de opciones
Permite definir colores personalizados para variantes o muestras de producto.
El formato esperado es:
nombre:#codigo_hex
Un color por línea.
Contacto de tienda
Permite definir la información de contacto del negocio.
- Teléfono
Redes sociales
- TikTok
Configuración del carrito
Permite definir el comportamiento del carrito de compra.
Cajón del carrito
- Habilitar cajón del carrito
- Mostrar pago acelerado
Complementos del carrito
- Mostrar nota del carrito
- Mostrar código de descuento
- Mostrar tarifas de envío estimadas
- Mostrar días de entrega estimados
- Mostrar hora de entrega
País predeterminado para envío estimado
Define el país base para los cálculos de estimación.
Sello de confianza
Permite añadir una imagen de confianza en el carrito.
Búsqueda
Controla el comportamiento del motor de búsqueda del sitio.
- Habilitar búsqueda predictiva
- Buscar por etiquetas de producto
- Buscar por descripción de producto
- Búsquedas populares
- Resultados para productos no disponibles
Integración
La sección Integración conecta el sitio con servicios externos.
API de Google Maps
Permite introducir la clave API para mapas interactivos.
Permite introducir el token para mostrar el feed de Instagram.
Análisis y seguimiento
- Facebook Pixel ID
- Google Analytics ID
- TikTok Pixel ID
Comunicación
Permite configurar el número de WhatsApp del sitio.
Avanzado
La sección Avanzado incluye opciones técnicas.
CSS personalizado
Permite añadir estilos propios.
JavaScript personalizado
Permite añadir scripts personalizados.
Optimización de rendimiento
- Habilitar carga diferida de imágenes
- Optimización automática de imágenes
- Minificar CSS y JavaScript
Header
El Header es la cabecera principal del sitio.
Puede contener distintos bloques internos, visibles en el panel izquierdo:
- Announcement Bar
- Logo
- Menú de navegación
- Acciones
Además, desde Agregar bloque se puede añadir:
- Redes Sociales
Importante sobre bloques del Header
En el Header, la acción Agregar bloque permite trabajar con los bloques que aparecen por defecto y añadir adicionalmente el bloque Redes Sociales.
Propiedades del Header
Al seleccionar el Header completo se muestran las siguientes áreas de configuración:
Layout
Tipo de navegación
Permite elegir el modo de navegación del header.
En la captura se muestra:
- Menú lateral (Hamburguesa - Logo - Acciones)
Este layout muestra un icono hamburguesa que abre un panel lateral con submenús.
Ancho del panel
Permite definir el ancho del panel lateral.
Mostrar iconos
Activa o desactiva los iconos de búsqueda y favoritos.
Mostrar enlaces del footer
Permite mostrar enlaces de contacto y cuenta al final del panel lateral.
Diseño
- Color de fondo
- Color del borde
- Mostrar borde inferior
- Header fijo (sticky)
- Mostrar sombra
- Abrir carrito al añadir producto
Otras propiedades visibles
También aparecen secciones de:
- Espaciado
- CSS personalizado
Announcement Bar
La Announcement Bar es la barra superior informativa del sitio.
Contenido
- Mostrar announcement
- Texto del anuncio
- Permitir cerrar
Diseño
- Color de fondo
- Color de texto
Logo
El bloque Logo corresponde a la identidad visual de la cabecera. Desde sus propiedades se accede a la configuración específica del logotipo del sitio.
Buscador
El bloque Buscador aparece como sección independiente dentro de la estructura de la página.
Sus propiedades se organizan en las siguientes categorías:
- Contenido
- Diseño
- Imágenes
- Animaciones
- Comportamiento
- Avanzado
Estas categorías permiten configurar el aspecto y funcionamiento del buscador integrado del sitio.
Banner de Cookies
El bloque Banner de Cookies permite configurar el aviso de cookies mostrado al usuario.
Sus propiedades se organizan en:
- Contenido
- Diseño
- Comportamiento
- Avanzado
Desde aquí se controla tanto el texto como el estilo visual y la lógica de comportamiento del aviso.
Agregar sección
Tanto desde el panel izquierdo como desde la plantilla se puede usar la opción Agregar sección para incorporar nuevas secciones al contenido de la página.
El selector de secciones incluye:
- Todas
- Estructura
- Contenido
- eCommerce
Categoría: Estructura
Las secciones disponibles en Estructura son:
- Hero Banner
- Hero Slider
Categoría: Contenido
Las secciones disponibles en Contenido son:
- Texto + imagen
- Call to Action
- Testimonios
- Características
- Vídeo
- Carrusel de Marcas
- Cuenta regresiva
- FAQ
- Equipo / Team
- Tabla de precios
- Cronología / Pasos
- Newsletter
- Antes y Después (slider)
- Galería de imágenes
- Texto
- Botón
- Imagen
Categoría: eCommerce
Las secciones disponibles en eCommerce son:
- Grid de productos
- Productos con Filtro
- Slider de Categorías
- Producto destacado
Plantilla
La sección Plantilla representa el cuerpo principal editable de la página.
Cuando no hay componentes, el sistema lo indica con el mensaje correspondiente y permite añadir nuevas secciones.
Desde Agregar sección dentro de Plantilla se pueden incorporar todos los tipos de secciones descritos anteriormente:
- Estructura
- Contenido
- eCommerce
Footer
El Footer corresponde al pie del sitio.
En el panel izquierdo se observa compuesto por varios bloques ya definidos, como:
- Columnas de enlaces
- Columna de contacto
- Barra de copyright
Importante sobre bloques del Footer
En el Footer, los bloques visibles son los que ya están disponibles en la estructura actual.
No se contempla la incorporación de nuevos tipos adicionales más allá de los que ya aparecen definidos.
Propiedades del Footer
Al seleccionar el Footer completo se muestran las siguientes categorías:
- Diseño
- Espaciado
- Avanzado
Estas opciones permiten configurar su apariencia general, separación y ajustes técnicos.
Resumen funcional
El PageBuilder es el entorno visual avanzado para construir y configurar páginas del sitio web. Permite trabajar con vistas responsive para móvil, tablet y ordenador, guardar cambios, previsualizar el resultado final y editar tanto la estructura general como los componentes individuales de una página.
A nivel global, incorpora una configuración completa del sitio para controlar diseño, tipografía, colores, carrito, búsqueda, integraciones y rendimiento. A nivel estructural, permite trabajar con áreas clave como Header, Buscador, Banner de Cookies, Plantilla y Footer, además de añadir nuevas secciones de tipo estructural, de contenido o eCommerce.
En conjunto, este sistema ofrece una edición visual completa, flexible y escalable, orientada tanto a la maquetación de páginas como a la personalización funcional del sitio web.