¿Qué es el Editor de bloques de Waclis y qué puedes hacer con él?

El Editor de bloques de Waclis es una herramienta visual que permite crear y personalizar secciones de contenido dentro de tu Página web.

Puedes utilizarlo para construir desde contenidos sencillos, como un título acompañado de una imagen, hasta secciones más completas con columnas, botones, galerías, banners, testimonios, formularios, mapas, carruseles y diseños personalizados.

No necesitas conocimientos de programación para realizar las modificaciones habituales. Sin embargo, el editor también incorpora herramientas avanzadas para trabajar con HTML y CSS cuando necesitas una personalización mayor.

En este tutorial conocerás qué puedes hacer con el Editor de bloques, en qué partes de tu Página web puedes utilizarlo y cuáles son los contenidos que se administran por otros medios.

¿Qué es un bloque?

Cuando hablamos de bloques en Waclis, nos referimos al contenido que puedes construir y organizar visualmente dentro del editor.

Una composición puede estar formada por diferentes niveles de elementos.

Por ejemplo:

Sección → Contenedor → Fila → Columna → Título + Imagen + Botón

Esto permite que una sección pueda incluir varios elementos relacionados entre sí y que cada uno pueda tener sus propias configuraciones.

Por ejemplo, dentro de una misma sección puedes tener:

• un título;
• un texto descriptivo;
• una imagen;
• varios botones;
• diferentes columnas;
• enlaces;
• íconos;
• un formulario;
• una galería;
• un video;
• u otros componentes.

No es necesario crear una sección independiente para cada texto o imagen. Puedes construir estructuras completas y organizar sus elementos desde el propio editor.

¿Qué puedes hacer con el Editor de bloques?

El editor permite trabajar visualmente sobre el contenido y modificar gran parte de su diseño.

Entre otras posibilidades, puedes:

• agregar nuevas secciones;
• utilizar secciones prediseñadas;
• construir secciones desde cero;
• agregar títulos y textos;
• incorporar y reemplazar imágenes;
• crear botones y enlaces;
• insertar galerías y carruseles;
• agregar formularios;
• incorporar videos;
• mostrar mapas;
• utilizar columnas y diferentes distribuciones;
• modificar colores;
• cambiar tipografías y tamaños;
• configurar márgenes y espacios internos;
• agregar fondos;
• aplicar bordes y esquinas redondeadas;
• adaptar el contenido para celular, tablet y computadora;
• ocultar determinados elementos según el tamaño de pantalla;
• agregar animaciones;
• reorganizar elementos;
• duplicar elementos;
• eliminar elementos;
• personalizar HTML;
• incorporar CSS personalizado.

Esto permite utilizar el Editor de bloques tanto para modificaciones sencillas como para diseños considerablemente más avanzados.

Dos formas principales de utilizar el Editor de bloques

En Waclis puedes acceder al editor en dos situaciones diferentes.

1. Crear una nueva sección

Puedes crear una nueva sección de tu Página web y diseñar libremente el contenido que quieras mostrar.

Al acceder mediante el icono de la paleta, se abre el Editor de bloques.

Dentro de esa sección puedes comenzar desde cero o utilizar los diferentes recursos disponibles en el editor para construir el diseño.

Esta alternativa es útil, por ejemplo, para crear:

• páginas institucionales;
• páginas informativas;
• landing pages;
• páginas de servicios;
• campañas;
• contenidos promocionales;
• páginas con galerías;
• páginas de contacto personalizadas;
• presentaciones de empresas, productos o proyectos.

2. Agregar bloques dentro de páginas que ya tienen contenido propio

Waclis también dispone de páginas que contienen información generada automáticamente por el sistema.

Por ejemplo:

• Home;
• Blog;
• Productos;
• Servicios;
• Contacto.

Estas páginas tienen su propia estructura y, en algunos casos, contenido dinámico que no debe ser reemplazado.

Para permitirte personalizarlas sin interferir con ese contenido, Waclis dispone de áreas editables predeterminadas.

Por ejemplo, en Home puedes agregar contenido:

• debajo del menú;
• debajo del banner;
• arriba de los productos destacados;
• arriba del menú inferior.

En Blog, Productos, Servicios y Contacto puedes agregar contenido:

• debajo del menú;
• arriba del menú inferior.

Al elegir una de estas posiciones, Waclis abre el Editor de bloques y te permite construir el contenido que quieras mostrar exactamente en esa ubicación.

El contenido que agregues convive con el contenido propio de la página y no lo reemplaza.

En un próximo tutorial veremos en detalle todas estas ubicaciones.

Header y Footer: una diferencia importante

El Header y el Footer forman parte de la plantilla general seleccionada para tu Página web.

Por ese motivo, no se editan mediante el Editor de bloques.

Esto significa que agregar un bloque:

Debajo del menú

no modifica el Header.

De la misma manera, agregar contenido:

Arriba del menú inferior

no modifica el Footer.

Son áreas independientes ubicadas inmediatamente antes o después de esas partes de la plantilla.

Cuando necesitas realizar personalizaciones adicionales sobre el Header o Footer mediante código, estas se gestionan con las herramientas correspondientes de CSS y JavaScript.

¿Qué sucede con los productos y otros contenidos dinámicos?

No todos los elementos que ves en una Página web son bloques editables.

Waclis genera automáticamente determinada información a partir de los datos configurados en el sistema.

Por ejemplo:

• listados de productos;
• tarjetas de productos;
• fichas de productos;
• información del catálogo;
• determinados carruseles o listados automáticos;
• otros elementos que dependen de información dinámica.

Este contenido no se modifica directamente desde el Editor de bloques, porque no corresponde a una sección estática independiente.

El Editor de bloques puede utilizarse para agregar contenido antes o después de determinadas áreas dinámicas cuando Waclis dispone de una posición editable para hacerlo.

Para modificar la apariencia visual de componentes dinámicos pueden utilizarse otras herramientas de personalización de Waclis, como el Editor CSS, según el tipo de cambio que necesites realizar.

Secciones prediseñadas o diseño desde cero

No es necesario comenzar siempre con una página vacía.

El Editor de bloques incluye una biblioteca de secciones prediseñadas que puedes utilizar como punto de partida.

Encontrarás alternativas para diferentes necesidades, como:

• galerías de imágenes;
• beneficios;
• testimonios;
• preguntas frecuentes;
• acordeones;
• carruseles;
• sliders de imágenes;
• banners;
• llamados a la acción;
• texto e imagen;
• quiénes somos;
• tablas de precios;
• formularios de contacto;
• newsletters;
• características;
• mapas y localización;
• portafolios;
• citas o frases;
• redes sociales;
• equipos o colaboradores;
• contenidos destacados;
• servicios;
• timeline.

Puedes insertar una de estas secciones y posteriormente reemplazar sus textos, imágenes, enlaces, colores y demás configuraciones.

También puedes construir una sección completamente personalizada utilizando componentes individuales.

Componentes: las piezas con las que construyes tus diseños

Además de las secciones prediseñadas, el editor dispone de componentes individuales que puedes combinar.

Entre ellos puedes encontrar elementos como:

• títulos;
• imágenes;
• párrafos;
• enlaces;
• botones;
• formularios;
• campos de texto;
• áreas de texto;
• listas;
• tablas;
• íconos;
• galerías;
• carruseles;
• sliders;
• acordeones;
• pestañas;
• contadores;
• contenedores;
• filas y columnas;
• tarjetas;
• navegación;
• videos;
• mapas;
• contenido incrustado;
• código.

Por lo tanto, puedes trabajar de dos maneras:

Partir de una sección prediseñada y personalizarla

o

Construir una composición desde cero utilizando componentes.

Ambas alternativas pueden combinarse dentro de una misma Página web.

¿Necesitas conocimientos de programación?

Para las modificaciones habituales, no.

El Editor de bloques dispone de controles visuales para modificar contenidos y estilos sin necesidad de escribir código.

Por ejemplo, puedes cambiar:

• textos;
• imágenes;
• colores;
• tamaños;
• tipografías;
• alineaciones;
• márgenes;
• espacios internos;
• bordes;
• fondos;
• enlaces;
• visibilidad;
• animaciones.

Sin embargo, si necesitas una personalización más avanzada, Waclis también pone a disposición herramientas para trabajar directamente con HTML y CSS.

Estas opciones están pensadas para usuarios con conocimientos técnicos o para quienes utilizan asistentes de inteligencia artificial como ChatGPT, Claude o Gemini para ayudarlos a generar y modificar código.

Contenido, Estilo y Avanzado

Cuando seleccionas un elemento dentro del editor, Waclis muestra diferentes opciones según el componente elegido.

Las tres áreas principales son:

Contenido

Permite modificar la información propia del elemento.

Por ejemplo, al seleccionar una imagen puedes cambiar la imagen, su texto alternativo o su enlace.

Al seleccionar un botón puedes modificar su texto y otras propiedades.

Las opciones disponibles cambian según el tipo de elemento seleccionado.

Estilo

Permite controlar su apariencia visual.

Desde aquí puedes trabajar, entre otras configuraciones, con:

• tipografía;
• tamaño;
• márgenes;
• padding;
• bordes;
• esquinas redondeadas;
• colores;
• fondos;
• dimensiones;
• posición.

Avanzado

Incluye herramientas adicionales como:

• visibilidad según el tamaño de pantalla;
• animaciones al desplazarse por la página;
• duración de la animación;
• demora antes de comenzar la animación.

Estas herramientas serán explicadas en profundidad en los próximos tutoriales.

Diseños adaptados a celular, tablet y computadora

Una Página web puede verse de manera diferente según el dispositivo utilizado.

El Editor de bloques incluye vistas que te permiten comprobar cómo se comporta el diseño en:

• celular;
• tablet;
• computadora.

Además, determinadas configuraciones permiten establecer comportamientos diferentes según el ancho de pantalla.

Por ejemplo, puedes decidir que un determinado elemento:

• se vea en computadora pero no en celular;
• cambie la distribución de sus columnas;
• utilice diferentes proporciones;
• se adapte al espacio disponible.

Por eso recomendamos revisar siempre el diseño en diferentes tamaños de pantalla antes de finalizar una sección.

Trabajar con elementos y jerarquías

Una sección puede contener muchos elementos dentro de otros.

Para facilitar su administración, el Editor de bloques incorpora herramientas que permiten comprender y recorrer esta estructura.

Puedes:

• seleccionar elementos;
• seleccionar su elemento padre;
• moverlos;
• arrastrarlos;
• duplicarlos;
• eliminarlos;
• localizarlos mediante Navigator;
• acceder a su HTML.

Esto resulta especialmente útil en diseños complejos donde seleccionar directamente un elemento desde la vista visual puede resultar difícil.

Importante al eliminar elementos

La acción de eliminar un elemento no solicita una confirmación adicional.

Por eso recomendamos verificar qué elemento está seleccionado antes de utilizar la opción Eliminar.

Si eliminas accidentalmente un elemento mientras estás trabajando, utiliza Deshacer inmediatamente para recuperarlo antes de continuar realizando otros cambios.

¿Qué es Navigator?

Navigator muestra de manera jerárquica los elementos que componen el diseño.

Por ejemplo, puedes encontrarte con una estructura similar a:

Section
 └── Container
      └── Row
           └── Column
                ├── Heading
                ├── Image
                └── Link

Esto te permite saber exactamente qué elemento estás modificando y comprender cuáles están contenidos dentro de otros.

Navigator se vuelve especialmente útil cuando trabajas con secciones complejas.

Personalización avanzada con HTML y CSS

Aunque no es necesario utilizar código para las tareas habituales, el editor incluye herramientas avanzadas para quienes necesitan mayor control sobre el diseño.

Entre ellas encontrarás diferentes opciones para:

• editar HTML;
• incorporar reglas CSS;
• trabajar con clases e identificadores;
• utilizar estados como hover y active;
• personalizar estructuras;
• crear diseños completamente personalizados.

Estas herramientas permiten ampliar considerablemente las posibilidades del editor.

Sin embargo, recomendamos utilizarlas únicamente cuando comprendas qué elemento estás modificando o cuando dispongas del código adecuado.

Más adelante encontrarás tutoriales específicos sobre cada una de estas herramientas.

Guardar los cambios

Cuando termines de realizar una modificación, haz clic en:

Guardar Cambios

Waclis guardará lo realizado y mostrará una notificación verde de confirmación.

No es necesario realizar un segundo paso de publicación dentro del Editor de bloques.

Antes de finalizar, recomendamos:

1. revisar la vista de computadora;
2. comprobar la visualización en tablet;
3. comprobar la visualización en celular;
4. verificar enlaces y botones;
5. guardar los cambios;
6. utilizar Ver página para comprobar el resultado final.

Editor de bloques vs. Editor CSS y JavaScript

Es importante utilizar cada herramienta para el objetivo correcto.

El Editor de bloques está pensado principalmente para construir y personalizar contenido dentro de las áreas editables de una Página web.

Los editores de CSS y JavaScript permiten realizar personalizaciones adicionales sobre la apariencia o el comportamiento de la Página web, incluyendo elementos que no forman parte de un bloque editable.

Por ejemplo, Header y Footer pertenecen a la plantilla general y no se modifican directamente con el Editor de bloques.

Ejemplos de lo que puedes crear

Con el Editor de bloques puedes desarrollar, entre otras cosas:

• una presentación de tu empresa;
• una página “Quiénes somos”;
• una sección de beneficios;
• un banner promocional;
• una galería;
• un portfolio;
• una sección de preguntas frecuentes;
• un bloque de testimonios;
• una tabla de precios;
• un llamado a la acción;
• una sección de servicios;
• una landing page;
• contenido adicional alrededor del catálogo;
• una página completamente personalizada.

La complejidad puede ir desde cambiar un texto o una fotografía hasta construir una sección completa combinando HTML, CSS, animaciones y diferentes comportamientos responsive.

Recomendaciones para comenzar

Si es la primera vez que utilizas el Editor de bloques, recomendamos comenzar de manera progresiva:

1. Inserta una sección prediseñada.
2. Reemplaza sus textos e imágenes.
3. Personaliza colores y tipografías.
4. Aprende a seleccionar elementos mediante Navigator.
5. Comprueba el resultado en celular, tablet y computadora.
6. Guarda los cambios.
7. Cuando ya conozcas el funcionamiento visual, avanza hacia herramientas como clases, IDs, HTML y CSS.

De esta manera podrás familiarizarte con la estructura del editor antes de realizar modificaciones más avanzadas.

¿Qué aprenderás en los próximos tutoriales?

Esta guía es una introducción general. Para aprovechar todas las posibilidades del Editor de bloques, continúa con los siguientes tutoriales:

• ¿Dónde puedo agregar contenido con el Editor de bloques en mi Página web?
• Guía completa del entorno del Editor de bloques de Waclis
• Cómo crear una nueva sección y editarla con bloques
• Cómo utilizar secciones prediseñadas
• Cómo utilizar componentes para construir una sección desde cero
• Cómo personalizar un elemento: Contenido, Estilo y Avanzado
• Cómo seleccionar, mover, duplicar y eliminar elementos
• Cómo adaptar bloques para celular, tablet y computadora
• Cómo utilizar Navigator, jerarquías y estilos compartidos
• Cómo trabajar con clases, IDs y estilos vinculados
• Cómo utilizar HTML, CSS y el Code editor
• Cómo utilizar ChatGPT, Claude o Gemini para crear y modificar bloques

En resumen

El Editor de bloques de Waclis te permite construir y personalizar contenido de manera visual, combinando secciones prediseñadas, componentes individuales y herramientas avanzadas.

Puedes comenzar realizando cambios sencillos sin conocimientos técnicos y, a medida que necesites mayor personalización, utilizar funciones más avanzadas como responsive, animaciones, HTML y CSS.

La clave es distinguir entre contenido editable mediante bloques, contenido dinámico generado por Waclis y elementos pertenecientes a la plantilla general, como Header y Footer.

Con esta base ya puedes comenzar a explorar el editor y avanzar progresivamente hacia diseños cada vez más personalizados.