Uso del editor de código dentro de un bloque en Waclis

En este tutorial vas a aprender cómo utilizar el editor de código dentro de un bloque para modificar el contenido HTML que se genera en ese bloque, y así tener un mayor control sobre la estructura y el comportamiento de los elementos.

Este nivel de edición es ideal cuando necesitas algo más que los ajustes visuales básicos.

¿Qué es el editor de código del bloque?

El editor de código es una opción disponible que te permite editar directamente el HTML del contenido del bloque.

Desde ahí puedes:

• modificar la estructura del contenido

• agregar o reorganizar etiquetas HTML

• usar clases e identificadores

• ajustar el marcado de los elementos

Todo esto se aplica solo al contenido del bloque, no al sitio completo.

Qué se puede editar desde el editor de código

Desde el editor de código del bloque puedes trabajar sobre:

• etiquetas HTML (div, p, span, img, etc.)

• contenedores internos

• jerarquía de elementos

• clases (class)

• identificadores (id)

• Script

Esto te permite separar correctamente el contenido y evitar que todos los elementos se comporten igual.

Qué NO se puede editar desde el editor de código

Es importante tener en cuenta que el editor de código:

• no modifica la estructura general del sitio

• no cambia el HTML base del sistema

• no altera el encabezado, menú o pie

• no edita contenido dinámico del catálogo

Su alcance está limitado al bloque que estás editando.

Cuándo conviene usar el editor de código

Conviene usar el editor de código cuando:

• necesitas separar elementos dentro de un mismo bloque

• quieres aplicar clases o IDs específicos

• necesitas más control que el editor visual

• el contenido requiere una estructura HTML personalizada

Si el problema se puede resolver separando bloques, siempre es recomendable hacerlo primero.

Ejemplo práctico

Situación común

Tienes un bloque con:

• un título

• dos párrafos

• un botón

Y al cambiar algo, todos los elementos se ven afectados.

Solución con editor de código

Desde el editor de código puedes:

• envolver cada parte en contenedores distintos

• asignar clases diferentes a cada elemento

• estructurar el HTML de forma más clara

Esto permite editar y personalizar cada parte sin afectar al resto.

Buenas prácticas al editar código en bloques

• Mantén una estructura HTML clara y ordenada

• Usa clases descriptivas y simples

• Evita duplicar IDs dentro del mismo bloque

• No agregues código innecesario

• Guarda los cambios con frecuencia y revisa el resultado

Un código limpio facilita futuras ediciones.

Relación con el editor de CSS

El editor de código del bloque define la estructura, mientras que el editor de CSS define la apariencia visual.

Ambos trabajan en conjunto:

• el HTML organiza el contenido

• el CSS controla colores, tamaños, márgenes y estilos

Para cambios visuales avanzados, el CSS es el complemento natural del editor de código.

Recomendación final

Usa el editor de código como una herramienta de control fino, no como primer recurso.

Primero:

• organiza bien los bloques

  Luego:

• ajusta el HTML interno si hace falta

Este enfoque evita complejidad innecesaria.