📄 6.6.10. ¿Qué es el Editor de bloques en Waclis?

¿Qué es el Editor de bloques en Waclis?


Bloques es un editor de páginas visual dentro de Waclis que reemplaza la forma habitual de construir y personalizar tu sitio web por un entorno de arrastrar y soltar (drag-and-drop). Con Bloques puedes crear diseños avanzados y ver en tiempo real cómo se verá tu sitio web, sin tener que pasar de un editor a la vista previa.

El objetivo principal de Bloques es permitirte alcanzar un alto nivel de personalización y diseño, todo mientras trabajas en la parte frontal de tu sitio web. Bloques se diseñó pensando en quienes desean construir páginas dinámicas de manera rápida y eficiente.


¿Qué puedes hacer con Bloques?


  • Diseñar tu página en vivo: Observa inmediatamente los cambios que realizas sin necesidad de recargar.

  • Arrastrar y soltar: Añade bloques de texto, imágenes, videos, formularios, mapas, iframes, y más para estructurar tus páginas.

  • Edición avanzada: Si lo deseas, puedes editar el código HTML, CSS y JavaScript directamente para personalizar aún más tu sitio.

  • Un solo lugar para todo tu diseño: Desde los colores, estructuras, animaciones y hasta secciones específicas de tu sitio, con Bloques tienes el control completo.


¿Por qué usar Bloques?


  • Es intuitivo: Al ser un editor visual, incluso los usuarios sin conocimientos técnicos pueden diseñar páginas atractivas.

  • Libertad creativa: Puedes configurar cada detalle de tus secciones, desde la tipografía hasta la estructura general.

  • Ahorro de tiempo: Diseña y edita rápidamente, con la seguridad de que lo que ves en pantalla es exactamente lo que obtendrás al publicar.


¿Cómo funciona "Bloques"?


  1. Elige la sección que deseas editar: Desde la administración de tu sitio web, ve a Configuración Menúes, selecciona la sección y haz clic en el ícono del "Pintor".

  2. Accede a la interfaz de Bloques: Aparecerá el editor visual, mostrando tu página en tiempo real.

  3. Arrastra y suelta componentes: En el panel lateral izquierdo verás diferentes bloques (texto, imagen, video, etc.). Solo arrástralos al panel lateal derecho y suéltalos en la posición deseada.

  4. Personaliza: Ajusta estilos, colores, tipografías, animaciones y más desde el panel de propiedades para cada bloque.

  5. Guarda y publica: Cuando estés conforme con tu diseño, guarda los cambios y publícalos para que tus clientes puedan verlos.


Siguientes pasos


En próximos tutoriales, profundizaremos en los distintos bloques y funcionalidades para que puedas aprovechar al máximo lo que Bloques ofrece. Ya sea que necesites un sitio sencillo o requieras funciones avanzadas, Bloques te ayuda a crear tu sitio web en Waclis de forma rápida, profesional y sin complicaciones.




Preguntas frecuentes sobre bloques


¿Puedo editar el header y el footer del sitio web?

Actualmente no es posible editar el header ni el footer desde el editor de bloques.

Si necesitas realizar cambios avanzados en esas secciones, puedes hacerlo desde:

  • Editor CSS → para modificar estilos (colores, tamaños, posiciones, etc.)

  • Editor JS → para agregar comportamientos o funcionalidades adicionales

Ten en cuenta que para utilizar estas herramientas se requieren conocimientos de CSS y JavaScript.

Dentro del editor de bloques no es posible modificar directamente el header o el footer.



¿Cómo agrego un enlace a una imagen en bloques?

  1. Selecciona la imagen desde el panel derecho de bloques.

  2. Verás que en el panel izquierdo se activa el ícono de engranaje y la pestaña “Content”, donde aparecen las opciones de la imagen seleccionada.

  3. Dentro de la sección “LINK”, activa la opción “Enable Link”.

Una vez activado, podrás completar los siguientes campos:

  • URL: Es la dirección a la que llevará la imagen cuando alguien haga clic.

    Ejemplo: página de producto, categoría, archivo o sitio externo.

  • Target: Define cómo se abre el enlace:

    • Blank: Se abre en una nueva pestaña. Recomendado para sitios externos, descargas o enlaces fuera de tu web.
    • Parent: Abre el enlace en el marco padre del elemento actual. Se utiliza cuando la página está dentro de un iframe o estructura con marcos, y quieres que se abra en el contenedor principal.
    • Self: Se abre en la misma pestaña. Recomendado para páginas internas de tu sitio. 
    • Top: Abre el enlace en la ventana completa, saliendo de cualquier iframe o marco. Útil si tu sitio puede mostrarse embebido y quieres que el enlace se abra sobre toda la página.
  • Rel: Indica el tipo de relación del enlace con la página actual.

    Puedes dejarlo en blanco o utilizar los siguientes ejemplos útiles:

    • nofollow – para enlaces externos o publicitarios

    • noopener / noreferrer – mejora seguridad y privacidad cuando abre nueva pestaña

  • Download: Activa esta opción si deseas que, al hacer clic en la imagen, el archivo se descargue en lugar de abrirse.

  1. Finalmente, haz clic en “Guardar cambios” en la parte superior del editor para aplicar la configuración.