¿Cómo trabajar con HTML, CSS y Code editor en el Editor de bloques de Waclis?

El Editor de bloques de Waclis permite realizar la mayoría de las personalizaciones mediante herramientas visuales, sin necesidad de escribir código.

Sin embargo, cuando necesitas un diseño o comportamiento más específico también dispones de herramientas para trabajar directamente con HTML y CSS, además de un Code editor más amplio.

Estas posibilidades permiten realizar personalizaciones avanzadas como:

• modificar la estructura de un elemento;

• agregar clases o atributos;

• crear estilos específicos;

• aplicar efectos que no están disponibles desde el panel visual;

• adaptar diseños mediante CSS;

• trabajar con código generado por ChatGPT, Claude o Gemini;

• revisar la estructura técnica de una sección;

• incorporar determinados comportamientos personalizados.

Antes de utilizar estas herramientas es importante comprender que no todas cumplen la misma función.

Cuatro herramientas diferentes relacionadas con código

Dentro del Editor de bloques puedes encontrarte con:

1. Editar código HTML <>

2. CSS

3. Code editor

4. Componente Code

Aunque sus nombres pueden parecer similares, no debes confundirlas.

Diferencia rápida

Antes de utilizar código: intenta primero las herramientas visuales

Para modificaciones habituales recomendamos comenzar por:

Contenido

Estilo

Avanzado

Por ejemplo, no necesitas utilizar código para:

• reemplazar una imagen;

• cambiar un texto;

• modificar un enlace;

• cambiar colores;

• aumentar Margin;

• agregar Padding;

• cambiar Typography;

• agregar un borde;

• redondear esquinas;

• ocultar un elemento según dispositivo;

• configurar una animación.

Utiliza código cuando las herramientas visuales no sean suficientes o cuando necesites un comportamiento específico.

Ejemplo

Quieres cambiar el fondo de una tarjeta.

Puedes utilizar:

Estilo → Background Color

No necesitas escribir:

.mi-tarjeta {
    background-color: #f5f5f5;
}

Ambas alternativas pueden producir un resultado similar, pero la herramienta visual será generalmente más sencilla de mantener.

¿Cuándo tiene sentido utilizar código?

El código es especialmente útil cuando quieres:

• utilizar una propiedad que no aparece en Estilo;

• crear un efecto Hover avanzado;

• utilizar transform;

• crear transiciones;

• escribir media queries;

• aplicar estilos a varios elementos mediante selectores;

• modificar atributos HTML;

• trabajar con una estructura personalizada;

• realizar ajustes muy precisos;

• utilizar un bloque generado mediante una IA.

Parte 1: Editar código HTML <>

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

Entre las opciones encontrarás el icono:

<>

correspondiente a:

Editar código HTML

Al seleccionarlo, Waclis abre una ventana que permite visualizar y modificar directamente el código HTML relacionado con el elemento o estructura seleccionada.

¿Qué es HTML?

HTML define principalmente la estructura y el contenido de una página.

Por ejemplo:

<h2>Nuestros servicios</h2>

representa un título.

Otro ejemplo:

<p>Conoce todas las soluciones disponibles.</p>

representa un párrafo.

Una imagen puede verse conceptualmente así:

<img src="imagen.webp" alt="Nuestro equipo">

Un enlace:

<a href="/productos">Ver productos</a>

HTML define relaciones entre elementos

Por ejemplo:

<a href="/productos">
    <img src="productos.webp" alt="Ver productos">
</a>

significa que:

Image está dentro de Link.

Navigator mostraría conceptualmente:

Link
└── Image

Por eso comprender Navigator ayuda mucho antes de utilizar Editar código HTML.

El elemento seleccionado determina qué HTML editas

Antes de hacer clic en <>, verifica qué elemento está seleccionado.

Supongamos:

Card
├── Image
├── Heading
├── Paragraph
└── Button

Si seleccionas:

Heading

editarás la estructura relacionada con ese título.

Si seleccionas:

Card

trabajarás sobre una estructura de mayor alcance.

Utiliza Navigator antes de abrir HTML

Cuando tengas dudas:

1. abre Navigator;

2. selecciona el elemento exacto;

3. comprueba su jerarquía;

4. utiliza <>.

Esto reduce considerablemente el riesgo de modificar una estructura diferente de la que pretendías.

¿Qué puedes modificar mediante HTML?

Entre otras posibilidades, HTML permite trabajar con:

• etiquetas;

• textos;

• atributos;

• Classes;

• IDs;

• enlaces;

• atributos de accesibilidad;

• estructura interna;

• elementos anidados.

Ejemplo: agregar una Class

Puedes encontrarte con:

<div class="card">

y necesitar agregar una Class propia:

<div class="card servicio-card">

Ahora ese elemento dispone también de:

servicio-card

que puedes utilizar desde CSS.

Ejemplo: agregar un ID

Puedes tener:

<section class="servicios-section">

y convertirlo en:

<section class="servicios-section" id="servicios">

Recuerda que un ID debe mantenerse único dentro de la página.

Ejemplo: modificar un enlace

Código original:

<a href="#">Ver más</a>

Puedes modificarlo a:

<a href="/productos">Ver productos</a>

Sin embargo, para este tipo de modificación sencilla normalmente es preferible utilizar las opciones visuales de Contenido → URL.

Ejemplo: texto alternativo

Código:

<img src="producto.webp" alt="">

podría convertirse en:

<img src="producto.webp" alt="Botella térmica negra">

Pero nuevamente, si Waclis ofrece el campo Alt desde Contenido, es preferible utilizarlo allí.

No utilices HTML para tareas que ya tienen una opción visual

Por ejemplo:

Cambiar imagen

Utiliza:

Set Image

Cambiar URL

Utiliza:

Contenido → URL

Cambiar Class

Utiliza:

Contenido → Class

Cambiar ID

Utiliza:

Contenido → ID

Cambiar color

Utiliza:

Estilo

Reserva Editar código HTML para modificaciones donde realmente sea necesario intervenir sobre la estructura.

Cuidado al eliminar etiquetas

Supongamos:

<div class="card">
    <img src="imagen.webp">
    <h3>Servicio</h3>
    <p>Descripción</p>
</div>

Si eliminas accidentalmente:

<div class="card">

o su cierre correspondiente, puedes alterar la estructura.

Las etiquetas HTML suelen abrirse y cerrarse.

Por ejemplo:

<div>
    contenido
</div>

Una estructura incorrecta puede provocar resultados inesperados.

Elementos anidados

HTML utiliza elementos dentro de otros.

Ejemplo:

<section>
    <div>
        <div>
            <h2>Título</h2>
            <p>Texto</p>
        </div>
    </div>
</section>

Conceptualmente:

Section
└── Div
    └── Div
        ├── Heading
        └── Paragraph

Esto es precisamente lo que Navigator ayuda a interpretar visualmente.

Parte 2: CSS

Dentro de las herramientas avanzadas del Editor de bloques encontrarás las pestañas:

Variables | CSS

La pestaña CSS permite escribir reglas CSS directamente y comprobar su efecto sobre el diseño.

¿Qué es CSS?

CSS controla principalmente la apariencia y comportamiento visual de los elementos HTML.

Por ejemplo:

.servicio-card {
    background-color: #ffffff;
}

cambia el fondo de los elementos que utilicen:

class="servicio-card"

Otro ejemplo

.servicio-titulo {
    font-size: 28px;
    font-weight: 600;
}

permite modificar títulos pertenecientes a esa Class.

HTML y CSS cumplen funciones diferentes

Puedes pensarlo así:

HTML

Construye:

Tarjeta
├── Imagen
├── Título
└── Texto

CSS

Define:

Tarjeta
→ fondo
→ borde
→ espacio
→ tamaño

Título
→ tipografía
→ color

Ejemplo completo

HTML:

<div class="servicio-card">
    <h3 class="servicio-titulo">Diseño web</h3>
    <p>Desarrollamos soluciones para tu empresa.</p>
</div>

CSS:

.servicio-card {
    padding: 24px;
    border-radius: 16px;
}

.servicio-titulo {
    font-weight: 700;
}

El selector determina qué elemento recibe el estilo

En CSS, la parte anterior a { es el selector.

Por ejemplo:

.servicio-card {
}

El selector es:

.servicio-card

Selector de Class

Una Class se identifica mediante:

.

Por ejemplo:

.boton-principal {
    border-radius: 8px;
}

afecta a elementos con:

class="boton-principal"

Selector de ID

Un ID se identifica mediante:

#

Por ejemplo:

#banner-principal {
    min-height: 500px;
}

afecta al elemento con:

id="banner-principal"

Selector por etiqueta HTML

Puedes utilizar:

img {
    border-radius: 10px;
}

pero esta regla puede afectar muchas imágenes.

Por eso, en bloques personalizados recomendamos evitar selectores excesivamente generales cuando no sea necesario.

Scope: limitar el alcance del CSS

Una de las mejores prácticas consiste en identificar una sección y utilizarla como ámbito o scope.

Por ejemplo:

class="servicios-section"

Luego:

.servicios-section .servicio-card {
    padding: 24px;
}

Esto significa:

aplicar este estilo a .servicio-card cuando se encuentre dentro de .servicios-section.

¿Por qué es mejor?

Porque puede existir otra:

.servicio-card

o una estructura similar en otro sector.

Limitar el alcance reduce el riesgo de modificar contenido fuera de la sección que estás trabajando.

Ejemplo de CSS demasiado amplio

h3 {
    color: red;
}

Puede afectar todos los h3 alcanzados por esa regla.

Una alternativa más segura

.servicios-section h3 {
    color: red;
}

Ahora se limita a los títulos h3 dentro de esa sección.

Una alternativa todavía más clara

.servicios-section .servicio-titulo {
    color: red;
}

Esto expresa mejor qué elemento quieres modificar.

CSS y Linked styles

Cuando varios elementos comparten una Class, una regla CSS puede afectar a todos.

Por ejemplo:

Card 1 → .servicio-card
Card 2 → .servicio-card
Card 3 → .servicio-card

CSS:

.servicio-card {
    background-color: #f5f5f5;
}

modificará las tres.

Esto es equivalente al concepto que Waclis muestra mediante Linked styles.

CSS para una única excepción

Puedes utilizar un ID:

#servicio-premium {
    border: 3px solid;
}

mientras mantienes los estilos generales:

.servicio-card {
    border: 1px solid;
}

CSS y Hover

CSS permite crear estados más avanzados.

Por ejemplo:

.servicio-card {
    transition: transform .3s ease;
}

.servicio-card:hover {
    transform: translateY(-5px);
}

El resultado es que la Card se desplaza suavemente hacia arriba cuando el visitante coloca el cursor encima.

CSS y transición

La propiedad:

transition

permite suavizar cambios visuales.

Por ejemplo:

.boton-principal {
    transition: background-color .3s ease;
}

CSS responsive mediante media queries

Cuando las opciones visuales no son suficientes, puedes utilizar reglas como:

@media (max-width: 768px) {
    .servicios-section .servicio-card {
        padding: 16px;
    }
}

Esto permite aplicar una configuración específica en pantallas pequeñas.

No utilices media queries antes de revisar las herramientas responsive

Antes de escribir CSS responsive comprueba:

• Grid Row;

• columnas;

• tamaños por dispositivo;

• Wrap;

• Width;

• Max Width;

• Margin;

• Padding;

• Hide based on device screen width.

Muchas adaptaciones pueden resolverse visualmente.

CSS y Cover / Contain

Puedes encontrarte con propiedades como:

object-fit: cover;

o:

object-fit: contain;

Cover

La imagen llena el espacio disponible aunque pueda recortarse.

Es útil, por ejemplo, en:

• tarjetas;

• banners;

• fotografías decorativas.

Contain

La imagen intenta mostrarse completa dentro de su espacio.

Puede ser útil para:

• productos;

• logotipos;

• objetos que no deberían recortarse.

Ejemplo

.producto-imagen {
    width: 100%;
    height: 300px;
    object-fit: contain;
}

Esto puede utilizarse para mantener visible el producto completo dentro de una altura determinada.

CSS y variables

También es posible utilizar variables CSS dentro de bloques personalizados.

Por ejemplo:

.servicios-section {
    --card-radius: 16px;
}

y después:

.servicio-card {
    border-radius: var(--card-radius);
}

Esto facilita reutilizar valores dentro de una composición avanzada.

Parte 3: Code editor

Además de Editar código HTML y CSS, el Editor de bloques dispone de:

Code editor

Esta herramienta aparece en la zona inferior del entorno y permite trabajar sobre una estructura de código considerablemente más amplia.

Code editor no es lo mismo que Editar código HTML

Esta diferencia es muy importante.

Editar código HTML <>

Está orientado al elemento o estructura que tienes seleccionado.

Code editor

Puede mostrar el código completo o una parte mucho más extensa del documento con el que está trabajando el editor.

¿Qué puedes encontrar dentro del Code editor?

Dependiendo del contenido de la página, puedes encontrarte con:

• <html>;

• <head>;

• <body>;

• HTML de las secciones;

• estilos;

• etiquetas <style>;

• scripts;

• etiquetas <script>;

• recursos externos;

• integraciones;

• código asociado a diferentes componentes.

En el ejemplo real de una sección que analizamos durante este relevamiento, el Code editor incluía incluso la estructura general del documento, dependencias externas, CSS, JavaScript y el contenido específico de la sección.

Esto cambia la forma en que debes utilizar Code editor

No debes asumir que todo el código que aparece allí pertenece exclusivamente a:

“la tarjeta que estoy mirando”

o

“la sección que quiero cambiar”.

Puede existir mucho más contenido.

Ejemplo conceptual

Puedes encontrarte con algo similar a:

<html>
<head>

    recursos generales

    <style>
        estilos
    </style>

</head>

<body>

    otras estructuras

    <section class="mi-seccion">
        contenido que quiero modificar
    </section>

    <script>
        comportamiento
    </script>

</body>
</html>

Si solamente quieres cambiar .mi-seccion, no necesitas modificar el resto.

Recomendación fundamental

Cuando utilices Code editor:

modifica solamente el código que puedas identificar con seguridad.

Evita alterar indiscriminadamente:

• <head>;

• scripts generales;

• dependencias externas;

• recursos de otras funcionalidades;

• código de integraciones;

• otras secciones.

Localiza primero tu sección

Una buena práctica consiste en asignar nombres claros a tus Classes.

Por ejemplo:

<section class="categorias-home">

Después, dentro del Code editor, puedes localizar:

categorias-home

y trabajar únicamente sobre esa estructura.

Utiliza identificadores propios

En bloques complejos puedes trabajar con nombres como:

catgrid-section
catgrid-grid
catgrid-card
catgrid-title

Esto hace mucho más sencillo reconocer tu código dentro de un documento extenso.

Code editor y CSS incluido dentro de una sección

Una sección avanzada puede contener:

<style>
...
</style>

junto con:

<section>
...
</section>

y también:

<script>
...
</script>

Esto permite crear componentes muy personalizados.

Sin embargo, aumenta el nivel técnico necesario para mantenerlos.

HTML + CSS + JavaScript

Un bloque complejo puede tener tres capas.

HTML

Estructura.

<div class="card">
    <h3>Servicio</h3>
</div>

CSS

Apariencia.

.card {
    border-radius: 16px;
}

JavaScript

Comportamiento.

document.querySelector(...)

No modifiques JavaScript si no sabes qué función cumple

Un script puede controlar:

• animaciones;

• sliders;

• integraciones;

• eventos;

• carga de contenido;

• formularios;

• componentes externos.

Eliminar o cambiar una línea sin comprenderla puede afectar el comportamiento del bloque.

Ejemplo: animación mediante JavaScript

Una sección personalizada podría utilizar un observador para detectar cuándo aparecen elementos en pantalla.

Esto es distinto de utilizar simplemente:

Avanzado → Animate on scroll

Si la sección ya dispone de JavaScript personalizado, debes comprender qué comportamiento controla antes de modificarlo.

Dependencias externas

Dentro de Code editor también puedes encontrar recursos cargados desde otras direcciones.

Por ejemplo, etiquetas conceptualmente similares a:

<script src="https://..."></script>

o:

<link rel="stylesheet" href="https://...">

Pueden ser necesarias para que determinados componentes funcionen.

No las elimines solamente porque no pertenezcan visualmente a la sección que estás editando.

No copies todo el Code editor a una IA sin necesidad

Esta es una recomendación especialmente importante.

Si quieres que ChatGPT, Claude o Gemini te ayude con una tarjeta concreta, no es conveniente copiar automáticamente:

• todo <html>;

• todo <head>;

• todos los scripts;

• todas las integraciones;

• todo el documento.

¿Qué deberías enviar?

Intenta aislar:

1. HTML de la sección;

2. CSS relacionado;

3. JavaScript relacionado, solamente si el problema depende de él;

4. explicación exacta de lo que quieres modificar.

Ejemplo de pedido poco preciso

Te paso todo el código de mi página. Arregla las tarjetas.

Esto aumenta el riesgo de que la IA:

• modifique código no relacionado;

• elimine dependencias;

• cambie otras secciones;

• genere selectores demasiado amplios.

Un pedido mejor

Quiero modificar únicamente la sección .servicios-section.

Las tarjetas utilizan .servicio-card.

Necesito que en desktop aparezcan tres por fila y en celular una por fila.

No modifiques otras clases, scripts ni secciones.

Esto delimita claramente el alcance.

Conserva el scope

Si una IA te devuelve:

.card {
    margin: 20px;
}

pregúntate:

¿Existe .card en otras partes de mi Página web?

Si la respuesta puede ser sí, considera una regla más específica:

.servicios-section .card {
    margin: 20px;
}

o utiliza tu propia Class:

.servicios-section .servicio-card {
    margin: 20px;
}

No reemplaces todo cuando solo necesitas una corrección

Supongamos que tienes una sección de 200 líneas que funciona correctamente y solamente quieres cambiar:

object-fit: cover

por:

object-fit: contain

Es más seguro realizar ese cambio puntual que pedir una reescritura completa del bloque.

Realiza cambios pequeños y comprobables

Para modificaciones avanzadas recomendamos:

1. identifica el problema;

2. localiza el código;

3. realiza un cambio;

4. comprueba el resultado;

5. continúa con el siguiente.

Evita realizar diez cambios estructurales simultáneos si después no podrás identificar cuál provocó un problema.

Utiliza Deshacer cuando corresponda

Si una modificación realizada desde el editor produce un resultado inesperado, utiliza:

Deshacer

cuando esté disponible para recuperar el estado anterior.

Si estás realizando cambios avanzados, también es recomendable conservar una copia del fragmento original antes de sustituir una cantidad importante de código.

Copiar solamente el fragmento que vas a modificar

Por ejemplo, antes de cambiar:

.servicio-card {
    border-radius: 14px;
    padding: 20px;
}

puedes guardar temporalmente ese pequeño fragmento para poder restaurarlo fácilmente.

No necesitas necesariamente copiar todo el documento.

Parte 4: Componente Code

Dentro de:

Componentes → Elementos

también existe un componente denominado:

Code

Cuando lo seleccionas puedes encontrar un campo como:

Text

No confundas el componente Code con Code editor

Son herramientas diferentes.

Componente Code

Es un elemento que puedes agregar dentro de la estructura de la página.

Code editor

Es una herramienta de edición del código con el que está trabajando el editor.

Tampoco es lo mismo que Editar código HTML

Recuerda:

Editar código HTML <>
→ estructura del elemento seleccionado

CSS
→ reglas visuales

Code editor
→ código amplio del documento

Componente Code
→ componente insertable

¿Qué herramienta utilizar en cada caso?

Quiero cambiar una imagen

Contenido → Set Image

Quiero cambiar un color

Estilo

Quiero cambiar una URL

Contenido → URL

Quiero agregar una Class

Contenido → Class

Quiero modificar el HTML de un elemento concreto

Editar código HTML <>

Quiero crear una regla CSS personalizada

CSS

Quiero revisar la estructura amplia del código

Code editor

Quiero agregar el componente denominado Code

Componentes → Code

Diferencia entre CSS del Editor de bloques y Editor CSS general de Waclis

Este punto también es importante.

Waclis dispone de herramientas generales para realizar personalizaciones CSS sobre la Página web.

El CSS utilizado dentro del entorno de bloques está relacionado con el contenido que estás diseñando allí.

El Editor CSS general puede utilizarse para personalizaciones más amplias sobre la Página web, incluyendo elementos que no se editan mediante bloques.

Por ejemplo:

• Header;

• Footer;

• elementos de la plantilla;

• listados dinámicos;

• otros componentes generales.

Header y Footer

Recuerda que:

Header y Footer no se editan mediante el Editor de bloques.

Pertenecen a la plantilla general.

Si necesitas una personalización mediante código sobre esas áreas, debes utilizar las herramientas generales correspondientes, como el Editor CSS o JS según el tipo de modificación.

¿Dónde conviene colocar el CSS?

Depende del alcance.

CSS relacionado exclusivamente con un bloque personalizado

Puede ser conveniente mantenerlo claramente asociado a ese bloque y utilizar Classes específicas.

CSS que modifica elementos generales de la Página web

Puede corresponder al Editor CSS general.

La clave es mantener claro qué código controla qué parte del sitio.

Evita repetir la misma regla en varios lugares

Si tienes:

.servicio-card {
    border-radius: 16px;
}

en múltiples ubicaciones, puede ser difícil saber cuál termina aplicándose.

Siempre que sea posible mantén una organización clara del CSS.

CSS y especificidad

Si dos reglas afectan al mismo elemento, CSS utiliza distintas reglas para determinar cuál tiene prioridad.

Por ejemplo:

.servicio-card {
    background: white;
}

y:

.servicios-section .servicio-card {
    background: gray;
}

La segunda es más específica.

Este tipo de situación puede explicar por qué una modificación parece no aplicarse.

No soluciones todo agregando !important

Puedes encontrarte con:

color: red !important;

!important aumenta mucho la prioridad de una declaración.

Puede ser útil en situaciones puntuales, pero abusar de él hace más difícil mantener el CSS.

Antes de utilizarlo, revisa:

• selector;

• Class;

• ID;

• scope;

• reglas existentes.

Si un estilo no se aplica

Utiliza este orden:

1. comprueba el elemento seleccionado;

2. revisa Class;

3. revisa ID;

4. revisa Linked styles;

5. comprueba el selector;

6. verifica si existe otra regla más específica;

7. revisa si el CSS está dentro del alcance correcto.

Si un estilo modifica demasiado contenido

Haz lo contrario:

1. Deshacer.

2. Revisa el selector.

3. Comprueba si es demasiado general.

4. Agrega scope.

5. Utiliza una Class más específica.

6. Utiliza un ID si realmente se trata de un elemento único.

Ejemplo

Demasiado general:

a {
    color: red;
}

Puede afectar muchos enlaces.

Más seguro:

.servicios-section .servicio-link {
    color: red;
}

JavaScript dentro de bloques personalizados

En diseños avanzados puedes encontrarte con JavaScript.

Por ejemplo, una estructura puede necesitar:

• detectar scroll;

• cambiar clases;

• abrir un comportamiento;

• inicializar un componente.

Antes de modificarlo identifica:

• qué selector utiliza;

• qué elementos busca;

• qué evento escucha;

• qué función ejecuta.

Selectores JavaScript

Un script puede buscar:

document.querySelectorAll('.servicio-card')

Si cambias:

servicio-card

en el HTML, ese JavaScript podría dejar de encontrar los elementos.

Esto muestra por qué no conviene cambiar Classes arbitrariamente.

HTML, CSS y JavaScript están relacionados

Supongamos:

HTML:

<div class="servicio-card">

CSS:

.servicio-card {
    padding: 20px;
}

JavaScript:

document.querySelectorAll('.servicio-card')

Los tres utilizan:

servicio-card

Si cambias esa Class solamente en HTML:

servicio-tarjeta

el CSS y JavaScript existentes pueden dejar de funcionar.

Antes de renombrar una Class

Comprueba si aparece en:

• HTML;

• CSS;

• JavaScript.

Si forma parte de un bloque complejo, puede estar conectando las tres capas.

Buenas prácticas para bloques con HTML, CSS y JavaScript

Utiliza nombres consistentes.

Por ejemplo:

catgrid-section
catgrid-grid
catgrid-card
catgrid-image
catgrid-title

Luego utiliza esos mismos nombres de forma coherente en:

• HTML;

• CSS;

• JavaScript.

Mantén el código de cada bloque lo más aislado posible

Un bloque personalizado debería intentar no depender innecesariamente de:

div

img

h2

como selectores globales.

Es preferible limitarlo:

.catgrid-section img

.catgrid-section h2

o utilizar Classes específicas.

Ejemplo de bloque bien delimitado

HTML:

<section class="promo-section">
    <div class="promo-card">
        <h2 class="promo-title">Promoción</h2>
    </div>
</section>

CSS:

.promo-section .promo-card {
    padding: 24px;
}

.promo-section .promo-title {
    font-weight: 700;
}

Las reglas están claramente relacionadas con Promo.

Evita CSS global innecesario

Por ejemplo:

body {
    overflow: hidden;
}

puede afectar el funcionamiento general de la Página web.

Si solamente querías controlar una sección:

.promo-section {
    overflow: hidden;
}

es mucho más específico.

Utilizar una IA para modificar código

ChatGPT, Claude o Gemini pueden ser muy útiles para personalizaciones avanzadas.

Pero la calidad del resultado depende en gran medida del contexto que proporciones.

Incluye siempre el objetivo

Por ejemplo:

Quiero que las imágenes de esta galería utilicen object-fit: contain sin modificar otras imágenes de la Página web.

Indica el scope

La sección utiliza .galeria-productos.

Indica qué no debe modificar

No cambies el Header, Footer, scripts, estructura general ni otras secciones.

Indica responsive

Debe funcionar en desktop, tablet y celular.

Indica si puede utilizar JavaScript

Si no lo necesitas:

Resuélvelo solamente con CSS. No agregues JavaScript.

Esto evita complejidad innecesaria.

Ejemplo de prompt recomendado

Tengo una sección personalizada en Waclis.

La sección principal utiliza la clase:
.productos-destacados

Las tarjetas utilizan:
.producto-card

Las imágenes utilizan:
.producto-imagen

Necesito que las imágenes se muestren completas dentro de sus tarjetas utilizando contain, sin deformarse.

No modifiques otras imágenes ni otras secciones de la Página web.

Debe funcionar correctamente en desktop, tablet y celular.

Devuélveme solamente el CSS necesario y explícame dónde aplicarlo.

Si utilizas el Code editor con una IA

No aceptes automáticamente una respuesta que reemplace todo el documento.

Compara:

• qué líneas cambiaron;

• qué Classes utiliza;

• si eliminó scripts;

• si cambió dependencias;

• si introdujo selectores globales.

Cambios pequeños son más seguros

Por ejemplo:

Necesitas cambiar solamente:

object-fit: cover;

por:

object-fit: contain;

Pide exactamente eso.

No es necesario reconstruir toda la sección.

Comprobar el resultado después de utilizar código

Después de modificar HTML o CSS:

1. revisa la vista desktop;

2. revisa tablet;

3. revisa celular;

4. comprueba Navigator;

5. prueba Hover;

6. prueba botones;

7. prueba enlaces;

8. comprueba animaciones;

9. guarda;

10. utiliza Ver página.

Si utilizaste JavaScript

Además comprueba:

• interacciones;

• scroll;

• carruseles;

• botones;

• formularios;

• elementos afectados por el script.

Guardar Cambios

Cuando estés conforme con la modificación, haz clic en:

Guardar Cambios

Waclis guardará lo realizado y mostrará la notificación verde correspondiente.

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

Ver página

Después de guardar utiliza:

Ver página

Esto es particularmente importante cuando trabajaste con código.

El comportamiento real puede incluir:

• scripts;

• recursos externos;

• responsive;

• Hover;

• enlaces;

• contenidos dinámicos.

Si la Página web se ve diferente del editor

Comprueba:

• CSS;

• especificidad;

• responsive;

• dependencias;

• scripts;

• estructura HTML;

• estilos de la plantilla;

• Classes compartidas.

Evita realizar múltiples correcciones simultáneas sin determinar primero la causa.

Procedimiento recomendado para una modificación avanzada

Puedes seguir esta secuencia:

1. IDENTIFICAR EL ELEMENTO
↓
2. NAVIGATOR
↓
3. CLASS / ID
↓
4. ¿SE PUEDE RESOLVER VISUALMENTE?
↓
5. HTML O CSS SI ES NECESARIO
↓
6. LIMITAR EL SCOPE
↓
7. REALIZAR UN CAMBIO PEQUEÑO
↓
8. COMPROBAR RESULTADO
↓
9. REVISAR RESPONSIVE
↓
10. GUARDAR
↓
11. VER PÁGINA

Qué herramienta utilizar según la necesidad

Errores frecuentes

Confundir Editar código HTML con Code editor

No tienen el mismo alcance.

Confundir Code editor con el componente Code

El componente es un elemento insertable.

Copiar todo el Code editor cuando solo necesitas una Card

Aísla el fragmento relevante.

Modificar <head> sin necesidad

Puede contener recursos generales importantes.

Eliminar scripts porque no sabes qué hacen

Primero identifica su función.

Utilizar selectores CSS demasiado generales

Limita el alcance con Classes específicas.

Utilizar !important para solucionar cualquier conflicto

Revisa primero la especificidad.

Cambiar una Class en HTML y olvidarse de CSS o JavaScript

Los tres pueden estar relacionados.

Escribir media queries sin revisar Grid Row

Prueba primero las herramientas responsive.

Utilizar JavaScript para un efecto que puede resolverse con CSS

Mantén el bloque tan simple como sea posible.

Reemplazar todo un bloque para realizar una pequeña modificación

Los cambios puntuales son más fáciles de controlar.

No comprobar móvil después de modificar código

Todo CSS personalizado debe revisarse responsive.

Guardar sin utilizar Ver página

La prueba final debe realizarse también en la Página web.

Buenas prácticas

Cuando trabajes con código recomendamos:

• utilizar Navigator;

• identificar Class e ID;

• limitar el alcance de CSS;

• utilizar nombres descriptivos;

• conservar Classes necesarias;

• mantener IDs únicos;

• evitar selectores globales innecesarios;

• modificar solamente el código necesario;

• evitar JavaScript cuando CSS sea suficiente;

• no eliminar dependencias desconocidas;

• probar cambios progresivamente;

• revisar desktop, tablet y celular;

• comprobar el frontend después de guardar.

En resumen

Dentro del Editor de bloques de Waclis existen varias herramientas relacionadas con código y cada una tiene un objetivo diferente.

Editar código HTML <>

Permite trabajar directamente con el HTML del elemento o estructura seleccionada.

Úsalo cuando necesites modificar:

• estructura;

• atributos;

• Classes;

• IDs;

• elementos HTML.

CSS

Permite escribir reglas visuales personalizadas.

Úsalo para:

• efectos avanzados;

• selectores;

• Hover;

• transiciones;

• responsive personalizado;

• estilos que no están disponibles visualmente.

Code editor

Permite acceder a una estructura de código mucho más amplia.

Puede contener:

• HTML general;

• <head>;

• <body>;

• estilos;

• scripts;

• recursos externos;

• integraciones;

• diferentes secciones.

Por eso debes utilizarlo con mayor cuidado.

Componente Code

Es simplemente uno de los componentes disponibles dentro del editor y no debe confundirse con ninguna de las herramientas anteriores.

La regla general es:

Utiliza primero las herramientas visuales. Trabaja con código solamente cuando necesites un nivel de personalización adicional.

Y cuando utilices código:

Identifica el elemento, limita el alcance y modifica solamente lo necesario.

Esto permite mantener los bloques más seguros, comprensibles y fáciles de actualizar posteriormente.