Guía completa del entorno del Editor de bloques de Waclis

El Editor de bloques de Waclis es el espacio de trabajo visual desde el cual puedes crear, organizar y personalizar contenido dentro de las áreas editables de tu Página web.

Desde una misma interfaz puedes insertar secciones prediseñadas, trabajar con componentes individuales, modificar textos e imágenes, cambiar estilos, organizar elementos, adaptar el diseño a diferentes dispositivos e incluso trabajar con HTML y CSS cuando necesitas una personalización avanzada.

En esta guía conocerás las principales áreas del editor y para qué sirve cada una.

Antes de comenzar

El Editor de bloques trabaja sobre las áreas editables de contenido de la Página web.

El Header y el Footer pertenecen a la plantilla general y no se modifican directamente desde este editor.

Dependiendo de la página que estés editando, puedes acceder:

• directamente al contenido de una sección creada por ti;
• o a una de las áreas editables disponibles en Home, Blog, Productos, Servicios o Contacto.

Una vez dentro, encontrarás un entorno dividido principalmente en:

• barra superior;
• panel lateral izquierdo;
• área central de diseño;
• Navigator;
• barra de acciones de los elementos;
• selector de elementos inferior;
• Code editor.

1. Área central de trabajo

La zona central muestra visualmente el contenido que estás construyendo.

Es la representación de la sección o área editable sobre la que estás trabajando.

Desde aquí puedes seleccionar:

• secciones;
• contenedores;
• filas;
• columnas;
• títulos;
• imágenes;
• botones;
• enlaces;
• textos;
• galerías;
• carruseles;
• y otros componentes.

Cuando seleccionas un elemento, Waclis lo identifica visualmente mediante un borde y muestra las herramientas disponibles para ese elemento.

También se actualiza automáticamente el panel izquierdo con sus configuraciones.

2. La barra superior

En la parte superior del Editor de bloques encontrarás diferentes herramientas para controlar el área de trabajo.

Algunas acciones pueden variar según el elemento seleccionado, pero las principales son las siguientes.

Deshacer

Permite volver atrás una modificación realizada recientemente.

Es especialmente útil si:

• eliminaste un elemento por error;
• moviste un componente;
• modificaste un estilo incorrectamente;
• realizaste un cambio que no deseas conservar.

Recuerda que eliminar un elemento no solicita confirmación, por lo que Deshacer es una herramienta importante durante la edición.

Rehacer

Permite volver a aplicar una modificación que previamente habías deshecho.

3. Modo diseñador: Arrastre libre

El icono identificado como:

Modo diseñador (Arrastre libre)

permite trabajar mediante un modo de movimiento visual más libre.

Esta herramienta puede resultar útil en determinadas composiciones, aunque para estructuras complejas recomendamos prestar atención a la jerarquía de los elementos para evitar mover un componente fuera de su contenedor correspondiente.

4. Vista previa

La opción:

Vista previa

permite visualizar el diseño con menos elementos de edición visibles.

Es útil para comprobar cómo se comporta visualmente el contenido antes de guardarlo.

La Vista previa no reemplaza la comprobación final mediante Ver página, ya que esta última permite observar el resultado dentro de la Página web.

5. Vista de pantalla completa

La barra superior también dispone de una opción para ampliar el espacio de trabajo y utilizar una vista más extensa del editor.

Puede ser especialmente útil cuando trabajas con:

• diseños grandes;
• varias columnas;
• galerías;
• estructuras complejas;
• pantallas pequeñas.

6. Navigator

Uno de los elementos más importantes del Editor de bloques es Navigator.

Navigator muestra la estructura jerárquica de los elementos que forman el contenido.

Por ejemplo, puedes encontrarte con algo similar a:

Section
 └── Container
      └── Grid Row
           ├── Grid Column
           │    ├── Heading
           │    └── Image
           └── Grid Column
                └── Html Button

Esto permite comprender qué elementos están contenidos dentro de otros.

¿Para qué sirve Navigator?

Navigator resulta especialmente útil cuando:

• no puedes seleccionar fácilmente un elemento desde la vista visual;
• tienes varios elementos superpuestos;
• quieres identificar el padre de un componente;
• necesitas localizar una imagen específica;
• estás trabajando con estructuras complejas;
• quieres comprender por qué una modificación afecta a varios elementos.

Puedes hacer clic directamente sobre un elemento de Navigator para seleccionarlo.

Al hacerlo, Waclis también actualiza el panel de configuración correspondiente.

7. Panel lateral izquierdo

El panel izquierdo es una de las áreas principales del editor.

Dependiendo de la herramienta seleccionada, desde aquí puedes acceder a:

• Secciones;
• Secciones de Página;
• Componentes;
• Contenido;
• Estilo;
• Avanzado;
• Variables;
• CSS.

8. Secciones

La pestaña Secciones contiene diseños completos prediseñados que puedes utilizar como punto de partida.

En lugar de construir todo desde cero, puedes insertar una composición ya preparada y luego personalizarla.

Actualmente puedes encontrar categorías 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;
• Tabla de precios;
• Formularios de contacto;
• Newsletters;
• Características;
• Mapas y localización;
• Portafolio;
• Citas o frases;
• Redes sociales;
• Equipo o colaboradores;
• Contenidos destacados;
• Servicios;
• Timeline.

Puedes desplegar cada categoría para ver sus alternativas disponibles.

9. Secciones de Página

Junto a Secciones encontrarás la pestaña:

Secciones de Página

Aquí puedes visualizar las secciones que forman parte del contenido que estás editando.

Al seleccionar una de ellas mediante el icono de configuración, Waclis permite acceder a sus propiedades.

Por ejemplo, una Section puede ofrecer configuraciones como:

Title

Permite asignar un título o identificación a la sección.

Container width

Puedes elegir entre:

Boxed: contenido limitado dentro de un ancho determinado.

Full: contenido extendido al ancho disponible.

Container height

Puedes elegir:

Auto: la altura depende del contenido.

Full: la sección utiliza una altura completa.

Background

Puedes utilizar:

• None;
• Image;
• Video.

Overlay

Permite utilizar una capa superpuesta sobre el fondo.

Puede resultar útil, por ejemplo, para mejorar la lectura de un texto ubicado sobre una imagen.

Top Separator

Permite incorporar un separador visual en la parte superior.

Bottom Separator

Permite incorporar un separador visual en la parte inferior.

10. Componentes

El segundo gran grupo del panel izquierdo corresponde a Componentes.

Mientras que una Sección es una composición completa, un componente es una pieza individual que puedes incorporar al diseño.

Puedes combinarlos libremente para construir estructuras personalizadas.

11. Componentes Base

Dentro de Base encontrarás elementos fundamentales como:

• Heading;
• Image;
• Horizontal Rule;
• Form;
• Input;
• Text Area;
• Select Input;
• Checkbox;
• Radio Button;
• Link;
• Html Button;
• Paragraph;
• Blockquote;
• List;
• Table;
• Preformatted;
• Audio;
• Iframe.

Estos componentes permiten construir gran parte del contenido básico de una página.

12. Elementos

En la categoría Elementos encontrarás componentes más elaborados, como:

• Font Icon;
• Carousel;
• Gallery;
• Slider;
• Tabs;
• Accordion;
• Flip box;
• Counter;
• SVG Icon;
• Figure;
• Social icons;
• Code;
• Image Compare.

Pueden utilizarse individualmente dentro de una composición personalizada.

13. Componentes estructurales

El editor incorpora también una categoría de componentes basada en estructuras de Bootstrap.

En la interfaz puede aparecer identificada como Bootstrap 5.

Dentro de ella encontrarás recursos como:

• Container;
• Grid Row;
• Button;
• Button Group;
• Button Toolbar;
• Alert;
• Card;
• List Group;
• Badge;
• Progress Bar;
• Nav Bar;
• Breadcrumbs;
• Pagination.

Estos componentes permiten construir estructuras y distribuciones más complejas.

14. Grid Row y columnas

Uno de los componentes más importantes para construir diseños desde cero es Grid Row.

Permite crear una fila y dividirla en diferentes columnas.

Desde sus opciones puedes configurar:

• Direction;
• Vertical align;
• Horizontal align;
• Wrap;
• cantidad de columnas;
• tamaño de cada columna según el dispositivo.

Por ejemplo, puedes construir tres columnas y definir para cada una un comportamiento diferente según el ancho de pantalla.

Tamaños por dispositivo

Cada columna puede configurarse según diferentes rangos de pantalla, como:

• Extra small;
• Small;
• Medium;
• Large;
• Extra large;
• Extra extra large.

Esto permite crear diseños responsive.

Por ejemplo, puedes tener:

Desktop: tres columnas.

Celular: una columna debajo de otra.

15. Widgets

Dentro de Widgets encontrarás herramientas destinadas a incorporar contenido externo o funcionalidades específicas.

Entre ellas pueden aparecer:

• Google Maps;
• Embed Video;
• Lottie;
• Paypal;
• Twitter;
• Open Street Map.

La disponibilidad puede depender de la configuración del editor.

16. Incrustados

La categoría Incrustados permite agregar contenido procedente de diferentes plataformas externas.

Entre las alternativas visibles puedes encontrar:

• Embed;
• YouTube;
• Vimeo;
• Dailymotion;
• Flickr;
• SmugMug;
• Scribd;
• Twitter;
• SoundCloud;
• SlideShare;
• Spotify;
• Imgur;
• Issuu;
• Mixcloud;
• TED;
• Animoto;
• Tumblr;
• Kickstarter;
• ReverbNation;
• Reddit;
• Speaker Deck;
• Screencast;
• Amazon;
• Someecards;
• TikTok;
• Pinterest;
• Wolfram;
• Anghami.

Estas opciones permiten insertar contenido compatible dentro de una sección.

17. Componentes personalizados

El editor también puede disponer de Componentes personalizados creados específicamente para determinadas necesidades.

Estos componentes pueden variar con el tiempo según las funcionalidades incorporadas en Waclis.

18. Buscar componentes

En la parte superior del panel de Componentes encontrarás un buscador.

Puedes utilizarlo cuando conoces el nombre del elemento que necesitas y no quieres recorrer manualmente todas las categorías.

19. Contenido, Estilo y Avanzado

Cuando seleccionas un elemento, el panel cambia y muestra tres pestañas principales:

Contenido | Estilo | Avanzado

Estas opciones son fundamentales para editar cualquier componente.

20. Contenido

La pestaña Contenido contiene las propiedades propias del elemento seleccionado.

Las opciones cambian según el tipo de componente.

No todos los elementos tienen las mismas configuraciones.

Ejemplo: Heading

Al seleccionar un Heading puedes encontrar opciones como:

• Size;
• ID;
• Class.

La configuración de Size permite determinar su nivel estructural, por ejemplo Heading 1.

21. Ejemplo: Image

Cuando seleccionas una imagen puedes configurar diferentes propiedades.

Entre ellas:

• imagen utilizada;
• Width;
• Height;
• Alt;
• Align;
• Link;
• ID;
• Class.

Set Image

La opción:

Set Image

permite reemplazar la imagen actual.

Alt

El campo Alt permite agregar un texto alternativo a la imagen.

Es recomendable describir brevemente qué contiene la imagen.

Por ejemplo:

Botella térmica blanca sobre fondo celeste

Esto mejora la accesibilidad y ayuda a interpretar correctamente la imagen cuando no puede visualizarse.

Habilitar enlace

Una imagen puede convertirse en un elemento clicable activando su opción de enlace.

22. Ejemplo: Link

Al seleccionar un enlace aparecen configuraciones como:

URL

Dirección a la que llevará el usuario.

Rel

Permite definir atributos relacionados con el vínculo.

Target

Determina cómo se abrirá el enlace.

Por ejemplo, puede configurarse para abrirlo en otra pestaña según las opciones disponibles.

Download

Permite utilizar el enlace para determinadas descargas cuando corresponde.

ID y Class

Permiten identificar y estilizar el elemento.

23. Ejemplo: Html Button

Un botón HTML dispone de configuraciones como:

• Text;
• Name;
• Type;
• Autofocus;
• Disabled;
• ID;
• Class.

Por ejemplo, desde Text puedes cambiar el texto visible del botón.

24. Estilo

La pestaña Estilo permite modificar visualmente el elemento seleccionado.

Encontrarás diferentes grupos de configuraciones.

Entre ellos:

• Display;
• Typography;
• Size;
• Margin;
• Padding;
• Border;
• Border radius;
• Background Image.

25. Estados de estilo

En la parte superior de Estilo aparece un selector:

- State -

Este permite trabajar con determinados estados del elemento.

Entre los disponibles se encuentran:

• hover;
• active;
• nth-of-type(2n).

Hover

hover representa el estado que se activa cuando el usuario coloca el cursor sobre el elemento.

Puedes utilizarlo, por ejemplo, para:

• cambiar un color;
• cambiar un fondo;
• modificar un borde;
• generar un efecto visual.

Active

active permite establecer estilos para el estado activo de determinados elementos.

nth-of-type(2n)

Es una opción avanzada destinada a aplicar estilos según la posición de determinados elementos dentro de una estructura.

Si no tienes conocimientos de CSS, recomendamos utilizar esta opción únicamente cuando el diseño o un código específico lo requiera.

26. Display

Dentro de Display puedes controlar aspectos relacionados con el comportamiento visual y la posición del elemento.

Entre las opciones que pueden aparecer encontrarás:

• Display;
• Position;
• Top;
• Left;
• Bottom;
• Right;
• Float;
• Opacity;
• Background Color;
• Text Color.

27. Opacity

La opción Opacity determina el nivel de transparencia del elemento.

Un valor alto hace que se muestre normalmente.

Al reducirlo, el elemento se vuelve progresivamente transparente.

28. Typography

Desde Typography puedes controlar la apariencia de los textos.

Entre las configuraciones disponibles puedes encontrar:

• Font size;
• Font weight;
• Font family;
• Text align;
• Line height;
• Letter spacing;
• Text decoration;
• Decoration color;
• Decoration style.

Font size

Define el tamaño de la tipografía.

Font weight

Controla el grosor visual del texto.

Por ejemplo:

• normal;
• medium;
• diferentes niveles disponibles según la tipografía.

Text align

Permite alinear el contenido:

• izquierda;
• centro;
• derecha;
• otras opciones disponibles.

Line height

Controla el espacio vertical entre las líneas de texto.

Letter spacing

Permite aumentar o reducir la separación entre caracteres.

29. Size

Desde Size puedes controlar las dimensiones del elemento.

Entre las propiedades disponibles pueden aparecer:

• Width;
• Height;
• Min Width;
• Min Height;
• Max Width;
• Max Height.

Width y Height

Definen el ancho y la altura.

Min Width y Min Height

Establecen dimensiones mínimas.

Max Width y Max Height

Permiten limitar hasta dónde puede crecer el elemento.

Estas opciones son especialmente útiles en diseños responsive.

30. Margin

Margin es el espacio exterior de un elemento.

Puedes configurarlo independientemente para:

• Top;
• Right;
• Bottom;
• Left.

Por ejemplo, si quieres separar una imagen del contenido que aparece debajo, puedes aumentar su margen inferior.

31. Padding

Padding es el espacio interior entre el contenido y los límites del propio elemento.

También puede configurarse individualmente para:

• Top;
• Right;
• Bottom;
• Left.

Una forma sencilla de recordar la diferencia es:

Margin = espacio exterior.

Padding = espacio interior.

32. Border

Desde Border puedes crear un borde alrededor del elemento.

Puedes configurar:

• Style;
• Width;
• Color.

Para que un borde se vea correctamente debes seleccionar un estilo y un ancho diferente de cero.

33. Border radius

Border radius permite redondear las esquinas.

Puedes controlar independientemente:

• Top Left;
• Top Right;
• Bottom Left;
• Bottom Right.

Por ejemplo, puedes utilizar el mismo valor en las cuatro esquinas para obtener una tarjeta con bordes redondeados.

34. Background Image

Esta opción permite utilizar una imagen como fondo del elemento.

Puedes configurar:

• Image;
• Repeat;
• Size;
• Position X;
• Position Y.

Repeat

Determina si la imagen de fondo se repite.

Size

Controla cómo se adapta la imagen al espacio disponible.

Dependiendo de las opciones seleccionadas, puedes hacer que la imagen cubra el área o se adapte manteniendo determinadas proporciones.

Position X y Position Y

Permiten determinar qué sector de la imagen queda como referencia dentro del fondo.

35. Linked styles: estilos vinculados

En determinadas situaciones Waclis puede mostrar una advertencia:

Linked styles

Esto significa que el elemento comparte estilos con otros elementos.

Por ejemplo, si varios elementos utilizan la misma clase CSS, cambiar determinadas propiedades puede afectar a todos ellos.

La advertencia incluso puede indicar cuántos elementos comparten esos estilos.

¿Qué hacer si solo quieres modificar un elemento?

Antes de realizar cambios importantes:

1. verifica qué elemento está seleccionado;
2. revisa Navigator;
3. comprueba sus clases;
4. utiliza un identificador único cuando sea necesario.

Este concepto será explicado en profundidad en el tutorial específico sobre clases, IDs y estilos vinculados.

36. Avanzado

La pestaña Avanzado reúne opciones relacionadas principalmente con:

• visibilidad según el dispositivo;
• animaciones.

37. Ocultar según el tamaño de pantalla

Dentro de:

Hide based on device screen width

puedes determinar en qué tamaños de pantalla se ocultará el elemento.

Las opciones disponibles incluyen:

• Extra small devices;
• Small devices;
• Medium devices;
• Large devices;
• XL devices;
• XXL devices.

Esto permite, por ejemplo:

• mostrar un elemento solamente en desktop;
• ocultarlo en celular;
• crear versiones diferentes de un mismo contenido según el dispositivo.

Importante

Ocultar un elemento según dispositivo no es lo mismo que cambiar la vista del editor a celular o desktop.

Las vistas de dispositivo sirven para comprobar cómo se ve el diseño.

Las opciones de Avanzado realmente modifican cuándo se mostrará u ocultará el elemento.

38. Animate on scroll

Desde Animate on scroll puedes configurar una animación que se ejecutará cuando el usuario llegue al elemento mientras recorre la página.

Puedes establecer:

• Animation type;
• Duration;
• Delay.

Animation type

Determina el tipo de animación.

Duration

Controla cuánto tiempo tarda en completarse.

Delay

Permite retrasar su inicio.

Play animation

El botón:

Play animation

permite comprobar la animación dentro del propio editor.

39. Barra de acciones del elemento

Cuando seleccionas determinados elementos aparece una barra de acciones sobre ellos.

Esta barra permite realizar operaciones sin tener que utilizar Navigator.

Entre las acciones verificadas se encuentran:

• Arrastrar elemento;
• Seleccionar padre;
• Mover elemento arriba;
• mover elemento abajo;
• Editar código HTML;
• Clonar elemento;
• Eliminar elemento.

40. Arrastrar elemento

La herramienta Arrastrar elemento permite cambiar visualmente la ubicación de un componente.

Debes utilizarla con cuidado en estructuras complejas para mantener la jerarquía correcta.

41. Seleccionar padre

La opción Seleccionar padre es especialmente útil.

Supongamos que tienes seleccionada una imagen:

Section
└── Link
    └── Image

Al seleccionar el padre puedes pasar de Image a Link.

Si vuelves a subir en la jerarquía, podrías llegar posteriormente a otros contenedores superiores.

Esto permite trabajar con la estructura sin tener que encontrar cada elemento manualmente.

42. Mover arriba y mover abajo

Estas acciones permiten modificar el orden del elemento dentro de su contenedor.

Por ejemplo, si tienes:

Título
Imagen
Botón

puedes mover el botón hacia arriba para obtener:

Título
Botón
Imagen

El comportamiento final dependerá de la estructura donde se encuentre.

43. Editar código HTML

La opción identificada mediante:

<>

permite utilizar Editar código HTML.

Al seleccionarla se abre un editor donde puedes modificar directamente el HTML del elemento o estructura seleccionada.

Esta es una herramienta avanzada.

Puede resultar útil para:

• modificar atributos;
• agregar clases;
• ajustar una estructura;
• trabajar con código generado mediante una IA;
• realizar personalizaciones que no están disponibles visualmente.

Antes de modificar HTML recomendamos identificar correctamente qué elemento está seleccionado.

44. Clonar elemento

Clonar elemento crea una copia del elemento seleccionado.

Es muy útil cuando necesitas repetir una estructura conservando su estilo.

Por ejemplo, puedes:

1. diseñar una tarjeta;
2. clonarla;
3. cambiar su imagen;
4. modificar su texto.

Así evitas construir cada tarjeta desde cero.

45. Eliminar elemento

La papelera elimina el elemento seleccionado.

Importante: esta acción no solicita confirmación.

Antes de eliminar verifica el elemento seleccionado mediante Navigator o la etiqueta visible sobre el componente.

Si lo eliminas accidentalmente, utiliza Deshacer inmediatamente.

46. Breadcrumbs inferiores

En la parte inferior del área de diseño puedes encontrar una ruta que muestra la jerarquía del elemento seleccionado.

Por ejemplo:

body > section > div > a > img

Esta ruta permite comprender dónde se encuentra el elemento dentro de la estructura HTML.

También puede ayudarte a seleccionar elementos superiores.

Es especialmente útil para usuarios que trabajan con estructuras avanzadas.

47. Variables

Desde el icono de herramientas avanzadas puedes acceder a:

Variables

Aquí encontrarás configuraciones generales relacionadas con el entorno visual.

Entre ellas aparecen grupos como:

• Bootstrap Variables;
• Font;
• Color;
• Dimensions.

48. Font

Desde Variables puedes encontrar configuraciones para familias tipográficas como:

• Font family sans serif;
• Font family monospace.

Estas configuraciones son más avanzadas que cambiar simplemente la tipografía de un elemento individual.

49. Color

Dentro de Variables aparece una colección de colores de referencia.

Entre ellos:

• Blue;
• Indigo;
• Purple;
• Pink;
• Red;
• Orange;
• Yellow;
• Green;
• Teal;
• Cyan;
• White;
• Gray;
• Gray dark;
• Primary;
• Secondary;
• Success;
• Info;
• Warning;
• Danger;
• Light;
• Dark.

Estas variables permiten trabajar con una paleta reutilizable.

50. Dimensions y breakpoints

La sección Dimensions muestra puntos de corte utilizados para adaptar el diseño según el ancho de pantalla.

Entre los visibles se encuentran configuraciones como:

• xs;
• sm;
• md;
• lg;
• y otros tamaños disponibles.

Los breakpoints determinan a partir de qué ancho comienza a aplicarse determinado comportamiento responsive.

Si no necesitas una personalización avanzada, normalmente no es necesario modificar estos valores.

51. CSS

Junto a Variables encontrarás la pestaña:

CSS

Esta herramienta permite escribir directamente reglas CSS.

Por ejemplo:

.mi-titulo {
    background-color: #dc3545;
}

Los cambios pueden reflejarse visualmente dentro del editor.

¿Cuándo utilizar CSS?

Puedes utilizarlo cuando:

• una configuración no está disponible desde Estilo;
• necesitas aplicar una misma regla a varios elementos;
• quieres utilizar selectores avanzados;
• estás creando una composición personalizada;
• utilizas código generado mediante ChatGPT, Claude o Gemini.

Es una herramienta avanzada y debe utilizarse con atención para evitar afectar elementos no deseados.

52. Diferencia entre Estilo y CSS

Ambas herramientas modifican la apariencia, pero se utilizan de manera diferente.

Estilo

Utilizas controles visuales.

Por ejemplo:

• cambiar tamaño;
• margen;
• padding;
• color;
• borde.

CSS

Escribes reglas directamente.

Por ejemplo:

.mi-boton:hover {
    transform: scale(1.05);
}

Para modificaciones habituales recomendamos comenzar por Estilo.

Utiliza CSS cuando necesites mayor control.

53. Code editor

En la parte inferior derecha puedes encontrar:

Code editor

Esta herramienta abre un editor más amplio con el código del contenido sobre el que estás trabajando.

Dependiendo de la estructura de la página puede contener:

• HTML;
• estilos;
• scripts;
• elementos incorporados;
• otras partes del documento necesarias para representar el contenido.

Importante al utilizar Code editor

No debes modificar indiscriminadamente todo el código que aparece.

Antes de hacer un cambio:

1. identifica la sección que necesitas modificar;
2. localiza el código correspondiente;
3. evita alterar dependencias o scripts que no conoces;
4. realiza cambios puntuales;
5. prueba el resultado;
6. guarda solamente cuando hayas verificado su funcionamiento.

Para cambios simples, utiliza preferentemente las herramientas visuales.

54. Code editor y Editar código HTML no son lo mismo

Esta diferencia es importante.

Editar código HTML

Se abre desde la barra del elemento mediante <>.

Está orientado al HTML correspondiente al elemento o estructura seleccionada.

Code editor

Se encuentra en la zona inferior del editor y puede mostrar una estructura de código considerablemente más amplia.

No debes confundir ambas herramientas.

55. Componente Code

También existe un componente denominado:

Code

Al seleccionarlo aparece un campo de contenido llamado Text.

Este componente tampoco debe confundirse con:

• CSS;
• Editar código HTML;
• Code editor.

Son herramientas diferentes.

56. Vistas por dispositivo

En la barra superior derecha encontrarás iconos para comprobar cómo se comporta el contenido en diferentes formatos de pantalla.

Puedes alternar entre vistas como:

• celular;
• tablet;
• computadora.

Al cambiar de vista, el área central adapta su ancho para que puedas observar el comportamiento responsive.

57. Ejemplo de vista móvil

Una galería que en desktop muestra varias imágenes en columnas puede convertirse en móvil en una estructura donde las imágenes aparecen una debajo de otra.

Por eso es recomendable comprobar siempre las diferentes vistas antes de finalizar.

58. Zoom

El editor permite modificar el nivel de zoom del área de trabajo.

Por ejemplo:

100 %

Esto cambia únicamente la escala con la que visualizas el contenido dentro del editor.

No modifica el tamaño real del contenido en la Página web.

59. Ver página

La opción:

Ver página

permite abrir la Página web y comprobar el resultado fuera del entorno de edición.

Es recomendable utilizarla después de guardar.

Esto permite revisar:

• comportamiento real;
• enlaces;
• animaciones;
• responsive;
• contenido dinámico;
• interacción con otras partes de la Página web.

60. Guardar Cambios

Cuando hayas terminado de trabajar, haz clic en:

Guardar Cambios

Waclis guarda las modificaciones realizadas.

Cuando el proceso finaliza correctamente aparece una notificación verde confirmando el guardado.

Por ejemplo:

Se guardó su menú.

No existe un segundo paso de publicación dentro de este flujo.

61. Recomendación de trabajo antes de guardar

Para reducir errores, recomendamos seguir este orden:

1. identifica correctamente la sección;
2. selecciona el elemento;
3. utiliza Contenido para modificar su información;
4. utiliza Estilo para personalizar su apariencia;
5. revisa Navigator si la estructura es compleja;
6. comprueba desktop;
7. comprueba tablet;
8. comprueba celular;
9. prueba enlaces y botones;
10. utiliza Vista previa;
11. guarda los cambios;
12. utiliza Ver página.

62. ¿Qué herramienta conviene utilizar?

Puedes utilizar esta referencia rápida:

63. Editor visual primero, código después

Para la mayoría de las modificaciones recomendamos utilizar primero las herramientas visuales.

Por ejemplo, si quieres aumentar el espacio debajo de una imagen:

Estilo → Margin → Bottom

es normalmente preferible a escribir inmediatamente CSS.

Utiliza HTML o CSS cuando:

• el editor visual no ofrece la configuración necesaria;
• necesitas una estructura especial;
• estás creando un bloque personalizado;
• tienes conocimientos técnicos;
• utilizas una IA que te proporciona el código necesario.

64. Evita modificar un elemento incorrecto

En estructuras complejas puedes creer que seleccionaste una imagen cuando en realidad seleccionaste:

• su enlace;
• su columna;
• el contenedor;
• la sección completa.

Antes de realizar un cambio importante verifica:

• la etiqueta que aparece sobre el elemento;
• Navigator;
• la ruta inferior.

Esto permite reducir modificaciones accidentales.

65. Si cambio un elemento y cambian varios, ¿qué ocurrió?

En muchos casos significa que los elementos comparten:

• una misma clase;
• una regla CSS;
• un estilo vinculado;
• un elemento padre común.

Cuando Waclis detecta esta situación puede mostrar el aviso Linked styles.

No significa necesariamente que exista un error.

Significa que la regla que estás modificando puede alcanzar más de un elemento.

En el tutorial sobre clases, IDs y estilos vinculados explicaremos cómo trabajar correctamente en estos casos.

66. Buenas prácticas

Para trabajar de manera segura recomendamos:

• guardar periódicamente;
• comprobar qué elemento está seleccionado;
• utilizar Navigator en diseños complejos;
• revisar móvil, tablet y desktop;
• no eliminar elementos sin verificar primero la selección;
• utilizar Deshacer inmediatamente ante un error;
• comenzar por las opciones visuales;
• utilizar código solamente cuando sea necesario;
• no modificar scripts o dependencias desconocidas;
• comprobar siempre el resultado mediante Ver página.

En resumen

El Editor de bloques de Waclis reúne diferentes herramientas dentro de un mismo espacio de trabajo.

Puedes utilizar:

Secciones para comenzar con diseños prediseñados.

Componentes para construir tus propias estructuras.

Navigator para comprender la jerarquía del contenido.

Contenido para modificar la información.

Estilo para personalizar la apariencia.

Avanzado para responsive y animaciones.

Variables y CSS para personalizaciones más técnicas.

Editar código HTML y Code editor cuando necesitas trabajar directamente con código.

Y las vistas de dispositivo, Vista previa, Ver página y Guardar Cambios para comprobar y finalizar el trabajo.

No necesitas dominar todas estas herramientas desde el principio. Puedes comenzar realizando modificaciones visuales sencillas y avanzar progresivamente hacia funcionalidades más complejas a medida que las necesites.