Cómo usar clases, IDs y atributos en los bloques de Waclis

En este tutorial vas a aprender dónde y cómo modificar clases (class), identificadores (id) y atributos como alt dentro de los bloques de Waclis, y en qué casos conviene usar el editor visual o el editor de código.

Esto es clave para evitar que, al editar un elemento, se modifique todo el contenido del bloque.

Dónde se pueden editar clases, IDs y atributos en Waclis

En Waclis existen dos niveles de edición dentro del editor de bloques:

1️⃣ Editor visual de propiedades (nivel visual)

Desde el panel de propiedades del bloque o del elemento, puedes editar directamente:

• class

• id

• alt (en imágenes)

• atributos básicos del elemento

• estilos simples asociados al elemento seleccionado

Este panel aparece cuando seleccionas:

• un contenedor

• un texto

• una imagen

• un botón

2️⃣ Editor de código del bloque (nivel avanzado)

El editor de código permite modificar directamente el HTML del bloque.

Desde ahí puedes:

• crear nuevos contenedores

• reorganizar la estructura HTML

• definir clases e IDs manualmente

• agregar atributos personalizados

• separar elementos que antes estaban agrupados

👉 Este nivel está pensado para:

• estructuras más complejas

• control total del marcado

• usuarios con conocimientos básicos de HTML

Qué se puede hacer desde el editor visual

Desde el editor visual puedes:

• Asignar clases distintas a cada elemento

• Cambiar o agregar un ID único

• Modificar el atributo alt de una imagen

• Editar estilos del elemento seleccionado sin afectar a otros

• Seleccionar elementos individuales aunque estén dentro del mismo bloque

Esto NO modifica la estructura HTML, solo los atributos del elemento seleccionado.

Cuándo usar el editor de código del bloque

Conviene usar el editor de código cuando:

• necesitas dividir un bloque en varios contenedores

• varios elementos están “pegados” en el mismo div

• quieres reorganizar jerarquías (contenedores dentro de contenedores)

• el editor visual no te permite el nivel de control necesario

Clases (class) y cuándo usarlas

Usa clases cuando:

• varios elementos deben compartir estilo

• quieres reutilizar el mismo diseño

• necesitas aplicar CSS de forma grupal

Ejemplos comunes:

• textos secundarios

• botones del mismo tipo

• columnas con el mismo diseño

Las clases:

• pueden repetirse

• se pueden editar tanto desde el editor visual como desde el editor de código

IDs (id) y cuándo usarlos

Usa IDs cuando:

• el elemento es único

• necesita un comportamiento o estilo exclusivo

• no debe verse afectado por otros cambios

Reglas importantes:

• un ID debe ser único dentro del bloque

• no reutilices el mismo ID en varios elementos

• no uses IDs si una clase es suficiente

Los IDs también pueden editarse desde el panel visual o desde el editor de código.

Atributo alt en imágenes

El atributo alt:

• se edita desde el panel visual de la imagen

• no requiere usar el editor de código

• es importante para accesibilidad y SEO

Cada imagen dentro de un bloque puede tener su alt independiente.

Problema típico: “cuando edito algo, se edita todo”

Esto suele ocurrir cuando:

• todos los elementos comparten la misma clase

• no hay IDs diferenciados

• todo el contenido está dentro de un solo contenedor

• los estilos se aplican al contenedor padre

Solución recomendada:

1. Seleccionar el elemento puntual

2. Asignarle su propia clase o ID desde el editor visual

3. Solo si no alcanza, reorganizar el HTML desde el editor de código

Relación con el editor de CSS

Las clases e IDs cobran verdadero sentido cuando se usan junto con el editor de CSS.

Flujo recomendado:

1. estructurar el bloque (visual o código)

2. asignar clases e IDs

3. aplicar estilos desde CSS

Esto evita:

• duplicar estilos

• romper otros bloques

• perder control visual

Limitación importante (muy importante)

El editor de bloques NO permite modificar contenido dinámico, por ejemplo:

• ficha de producto

• tarjetas del listado de productos

• carruseles de productos

• contenido que depende de datos del sistema

Estos casos se trabajan:

• desde el editor de CSS

• a nivel avanzado

• con conocimientos de CSS

El editor de bloques solo afecta contenido estático.

Buenas prácticas

• usa el editor visual siempre que sea posible

• reserva el editor de código para estructura

• no abuses de IDs

• nombra clases de forma clara

• separa contenido antes de estilizar