Aprende a personalizar tu sitio web con IA, el editor de bloques HTML, el editor CSS personalizado y el editor JS de Waclis. Guía paso a paso para modificar secciones, estructura, diseño visual y funcionalidades sin conocimientos técnicos.
02/06/2026
Diseñar y personalizar un sitio web sin programar ya no es una promesa lejana. Si tienes tu sitio en Waclis y utilizas herramientas de inteligencia artificial como ChatGPT, Gemini, Claude, Copilot o cualquier otra IA con la que prefieras trabajar, puedes crear nuevas secciones visuales, mejorar bloques existentes, modificar el diseño general de tu plantilla y agregar funcionalidades personalizadas sin escribir código por tu cuenta.
La clave está en combinar las herramientas de edición de Waclis con la capacidad de la inteligencia artificial para generar código HTML, CSS y JavaScript a partir de instrucciones simples.
Con Waclis puedes trabajar de distintas maneras:
Insertar bloques visuales ya disponibles en la plataforma.
Modificar bloques existentes con ayuda de IA.
Crear nuevas secciones HTML personalizadas.
Cambiar el diseño general de la plantilla con CSS personalizado.
Ajustar elementos puntuales del sitio inspeccionando su código.
Agregar comportamientos o funcionalidades nuevas mediante el Editor JS.
En esta guía te explicamos cómo hacerlo paso a paso, sin necesidad de saber programar.
Tu sitio web es muchas veces el primer contacto que tiene una persona con tu negocio. Puede llegar desde una búsqueda en Google, una campaña, una recomendación, una red social o un enlace compartido por WhatsApp.
Si al entrar no encuentra claridad, confianza y una imagen coherente con tu marca, probablemente se vaya antes de conocer lo que ofreces.
Un sitio bien diseñado no necesita ser complejo. Necesita estar ordenado, transmitir profesionalismo y mostrar la información importante de forma clara.
El problema es que muchas personas creen que para lograr un sitio visualmente atractivo necesitan contratar a un diseñador, depender de una agencia o saber programar.
Hoy eso ya no es necesariamente así.
Con Waclis y la ayuda de la inteligencia artificial, puedes transformar la apariencia de tu sitio, crear secciones personalizadas y ajustar el diseño de tu plantilla de una forma mucho más simple.
Waclis cuenta con distintas herramientas que permiten modificar el diseño, la estructura y el comportamiento de tu sitio web.
Las principales son:
Permite crear o modificar secciones visuales dentro de una página. Puedes trabajar con bloques de contenido, banners, textos, imágenes, formularios, galerías y otros elementos.
También puedes pegar código HTML generado por una IA para crear secciones completamente personalizadas.
Permite modificar el diseño general de la plantilla seleccionada, incluso cuando no puedes cambiar directamente el código HTML original.
Con CSS personalizado puedes ajustar tipografías, colores, tamaños, márgenes, espaciados, fondos, botones, tarjetas, cabeceras, menús, comportamiento responsive y muchos otros aspectos visuales del sitio.
Esta herramienta es ideal cuando quieres cambiar la estética general de tu sitio o adaptar una plantilla existente a la identidad visual de tu marca.
Permite agregar funcionalidades o comportamientos nuevos al sitio mediante JavaScript.
Por ejemplo, puedes agregar efectos al hacer scroll, mostrar u ocultar elementos, crear botones con acciones especiales, modificar comportamientos visuales, agregar interacciones o mejorar la experiencia del usuario.
No necesitas escribir JavaScript por tu cuenta. Puedes describirle a una IA lo que quieres lograr y luego pegar el código generado en el Editor JS de Waclis.
Para acceder al editor visual de una sección de tu sitio en Waclis, sigue estos pasos:
Ingresa a tu panel de administración de Waclis.
Ve a Configuraciones.
Haz clic en Editar sitio.
Ingresa en Menúes.
Elige la sección del sitio que deseas modificar o crea una nueva.
Haz clic en el ícono de la paleta de pintor para abrir el editor visual.
Desde allí podrás editar el contenido de esa sección, agregar bloques, modificar elementos existentes o trabajar con código HTML según lo que necesites construir.
[Imagen sugerida: captura del panel mostrando la ruta Configuraciones > Editar sitio > Menúes > sección del sitio > ícono de paleta de pintor.
Alt text: "Panel de Waclis mostrando cómo acceder al editor visual desde Configuraciones, Editar sitio y Menúes"]
La forma más recomendable de trabajar con IA no es empezar desde cero, sino partir de una base visual ya compatible con Waclis.
Puedes hacerlo de dos maneras.
Waclis pone a disposición cientos de bloques listos para usar, como galerías de imágenes, formularios, textos con imágenes, banners, secciones informativas, bloques de beneficios, llamados a la acción y muchas otras estructuras visuales.
Puedes insertar uno de esos bloques en tu sección y luego copiar su código HTML para pedirle a una IA que lo modifique.
Para hacerlo:
Inserta el bloque que más se parezca a lo que necesitas.
Haz clic en Code editor, ubicado en la parte inferior derecha de la pantalla.
Copia el código HTML del bloque.
Pégalo en tu IA favorita.
Explícale qué cambios quieres realizar.
Copia el nuevo código generado por la IA.
Vuelve al editor de Waclis y pega el HTML actualizado.
Por ejemplo, puedes pedirle:
Te paso este código HTML de una sección de mi sitio web en Waclis. Quiero que lo modifiques para que sea una sección moderna de presentación de marca, con un título principal, un texto descriptivo, una imagen a la derecha y un botón de acción. Mantén una estructura responsive y compatible con Bootstrap 4. No necesito explicación, solo el código HTML completo listo para pegar.
La IA tomará el código existente como base y generará una versión ajustada a lo que necesitas.
También puedes comenzar con una estructura HTML base compatible y pedirle a la IA que construya dentro de ella la sección que necesitas.
Puedes usar este código como punto de partida:
Luego puedes pedirle a la IA algo como:
Usando este HTML como base, genera una sección moderna para mi sitio web. Quiero un banner promocional con fondo claro, una imagen a la derecha, un título grande, un texto breve y un botón de acción. Debe verse bien en computadoras y celulares. Utiliza Bootstrap 4. No necesito explicación, solo el código HTML completo listo para pegar.
La IA generará el código y tú solo tendrás que copiarlo y pegarlo en el editor de Waclis.
Usando el editor de bloques HTML de Waclis junto con una IA, puedes construir prácticamente cualquier elemento que tu imaginación y las necesidades de tu sitio requieran.
Algunos ejemplos son:
Banners promocionales con imagen, texto y botón de acción.
Secciones de presentación de marca.
Bloques de beneficios o propuesta de valor.
Carruseles de productos destacados.
Secciones de testimonios o reseñas.
Formularios personalizados.
Galerías de imágenes.
Separadores visuales y elementos decorativos.
Bloques informativos para explicar servicios, procesos o ventajas.
Secciones de preguntas frecuentes.
Llamados a la acción para recibir consultas, pedidos o solicitudes.
Cualquier elemento personalizado que tu sitio necesite.
En algunos casos, si tu sitio utiliza funcionalidades específicas de comercio, también podrías crear secciones orientadas a destacar productos, promociones, categorías, medios de pago o formas de envío. Pero el mismo método sirve para cualquier tipo de sitio web, no solamente para sitios enfocados en ventas online.
Además de crear secciones nuevas, Waclis también permite modificar de forma más profunda el diseño general de la plantilla seleccionada.
Esto es especialmente útil cuando quieres cambiar la apariencia completa del sitio, por ejemplo:
Cambiar la tipografía general.
Modificar colores principales y secundarios.
Cambiar el diseño de botones.
Ajustar márgenes y espaciados.
Modificar el menú superior.
Cambiar el aspecto de tarjetas, listados o bloques.
Rediseñar secciones existentes sin cambiar su HTML original.
Mejorar la visualización en celulares.
Darle una estética más moderna, elegante, minimalista o comercial a toda la plantilla.
En estos casos, muchas veces no necesitas modificar el HTML. Puedes mantener la estructura original de la plantilla y cambiar su apariencia mediante CSS personalizado.
Si quieres que la IA te ayude a modificar el diseño general de la plantilla, puedes darle como referencia el código fuente de la página.
Para hacerlo:
Abre tu sitio web en el navegador.
Haz clic derecho sobre la página.
Selecciona Ver código fuente.
Copia el código HTML que aparece.
Pégalo en la IA.
Explícale que no puedes modificar ese HTML directamente y que necesitas generar CSS personalizado.
Este punto es importante: si vas a trabajar desde el editor CSS de Waclis, debes indicarle a la IA que el HTML no se puede modificar.
La IA debe entender que solo puede crear reglas CSS para cambiar el diseño sobre la estructura existente.
Puedes usar un prompt como este:
Tengo el siguiente código HTML de mi sitio web en Waclis. No puedo modificar este código HTML directamente. Solo puedo introducir CSS personalizado desde el panel de Waclis. Necesito que generes un código CSS para cambiar el diseño general del sitio. Quiero lograr lo siguiente: - Cambiar la tipografía para que se vea más moderna. - Mejorar los tamaños de títulos y textos. - Cambiar la paleta de colores a una estética más profesional. - Rediseñar los botones para que tengan bordes redondeados, mejor espaciado y efectos hover. - Mejorar los márgenes y espaciados entre secciones. - Darle una apariencia más limpia y moderna al menú principal. - Mejorar la visualización en celulares. - Mantener compatibilidad con la estructura HTML actual. Te paso el HTML a continuación. Genera únicamente el código CSS listo para pegar en el editor CSS personalizado de Waclis.
Luego pegas debajo el código fuente de tu sitio.
La IA debería devolverte un bloque CSS que podrás copiar y pegar en Waclis.
Para pegar el código CSS generado por la IA:
Ingresa a tu panel de Waclis.
Ve a Configuraciones.
Haz clic en Editar sitio.
Ingresa en Diseño.
Haz clic en Personalizar plantilla.
Abre el Editor CSS.
Pega el código CSS generado por la IA.
Guarda los cambios.
Revisa visualmente el sitio en computadora y celular.
[Imagen sugerida: captura del panel mostrando la ruta Configuraciones > Editar sitio > Diseño > Personalizar plantilla > Editor CSS.
Alt text: "Panel de Waclis mostrando dónde pegar CSS personalizado para modificar el diseño del sitio"]
También puede pasar que no quieras modificar toda la plantilla, sino solamente un elemento específico.
Por ejemplo:
El tamaño del logo.
El color de un botón.
La altura de una sección.
El espacio entre una imagen y un texto.
El diseño de una tarjeta.
El color del menú.
El comportamiento visual de un bloque en celular.
La separación entre productos, servicios o contenidos.
El estilo de un formulario.
Para estos casos, puedes usar la herramienta Inspeccionar elemento del navegador.
Para inspeccionar un elemento:
Abre tu sitio web en el navegador.
Ubica el elemento que quieres modificar.
Haz clic derecho sobre ese elemento.
Selecciona Inspeccionar o Inspeccionar elemento.
El navegador abrirá una herramienta mostrando el fragmento de HTML correspondiente.
Copia ese fragmento de código.
Pégalo en la IA.
Explícale qué cambio quieres realizar.
Pide que te genere únicamente el CSS necesario.
Copia ese CSS y pégalo en el Editor CSS de Waclis.
Esta opción es muy útil porque permite que la IA trabaje sobre un fragmento específico del sitio, sin tener que analizar toda la página.
Puedes usar un prompt como este:
Tengo el siguiente fragmento de código HTML de un elemento de mi sitio web en Waclis. No puedo modificar el HTML directamente. Solo puedo agregar CSS personalizado en el editor CSS de Waclis. Necesito modificar únicamente este elemento. Quiero que el botón se vea más moderno, con fondo violeta, texto blanco, bordes redondeados, más espacio interno, una sombra suave y un efecto hover. Te paso el fragmento HTML a continuación. Genera únicamente el código CSS necesario, usando selectores específicos para no afectar otros elementos del sitio.
Luego pegas el fragmento de HTML inspeccionado.
La IA debería devolverte un CSS similar a este:
.mi-boton-personalizado {
background: #7c3aed;
color: #ffffff;
border-radius: 14px;
padding: 14px 28px;
font-weight: 600;
box-shadow: 0 12px 30px rgba(124, 58, 237, 0.25);
transition: all 0.25s ease;
}
.mi-boton-personalizado:hover {
background: #5b21b6;
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(124, 58, 237, 0.35);
}
El código exacto dependerá de las clases y estructura de tu sitio. Por eso es importante copiar el fragmento real desde Inspeccionar elemento.
Cuando pidas CSS a una IA, intenta que el prompt sea lo más específico posible.
En lugar de pedir:
Mejora el diseño.
Es mejor pedir:
Quiero que esta sección tenga más aire visual, títulos más grandes, tarjetas con bordes redondeados, sombras suaves, mejor separación entre columnas y que en mobile se vea una tarjeta debajo de la otra.
También conviene pedirle a la IA que use selectores específicos, para evitar que un cambio pensado para una sección afecte otras partes del sitio.
Puedes agregar esta frase al prompt:
Usa selectores lo más específicos posibles para que el CSS no afecte otras secciones del sitio.
Además del HTML y el CSS, Waclis también permite complementar el sitio con JavaScript mediante el Editor JS.
El Editor JS sirve para agregar comportamientos o funcionalidades visuales que no dependen solamente del diseño.
Por ejemplo, puedes usarlo para:
Mostrar un botón flotante.
Crear efectos al hacer scroll.
Ocultar o mostrar elementos al hacer clic.
Agregar animaciones de entrada.
Cambiar textos dinámicamente.
Crear una alerta o mensaje personalizado.
Agregar una barra superior informativa.
Crear interacciones en banners o botones.
Modificar el comportamiento de ciertos elementos del sitio.
Mejorar la experiencia del usuario en una página específica.
Al igual que con CSS, no necesitas saber programar. Puedes pedirle a la IA que genere el código JavaScript necesario.
Supongamos que quieres mostrar un botón flotante que lleve al usuario al inicio de la página cuando hace scroll.
Puedes pedirle a la IA:
Necesito agregar una funcionalidad JavaScript a mi sitio web en Waclis. Quiero crear un botón flotante de "volver arriba" que aparezca cuando el usuario baja más de 400 píxeles en la página. Al hacer clic, debe volver suavemente al inicio del sitio. No puedo modificar el HTML principal del sitio, pero puedo pegar código en el Editor JS de Waclis. Si necesitas crear el botón desde JavaScript, hazlo directamente con JS. Genera únicamente el código JavaScript listo para pegar en el Editor JS.
La IA podría generar un código similar a este:
document.addEventListener("DOMContentLoaded", function () {
var button = document.createElement("button");
button.innerText = "↑";
button.setAttribute("aria-label", "Volver arriba");
button.style.position = "fixed";
button.style.right = "24px";
button.style.bottom = "24px";
button.style.width = "48px";
button.style.height = "48px";
button.style.borderRadius = "50%";
button.style.border = "none";
button.style.background = "#7c3aed";
button.style.color = "#ffffff";
button.style.fontSize = "24px";
button.style.cursor = "pointer";
button.style.boxShadow = "0 10px 24px rgba(0,0,0,0.18)";
button.style.display = "none";
button.style.zIndex = "9999";
document.body.appendChild(button);
window.addEventListener("scroll", function () {
if (window.scrollY > 400) {
button.style.display = "block";
} else {
button.style.display = "none";
}
});
button.addEventListener("click", function () {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
});
Luego solo debes copiarlo y pegarlo en el Editor JS de Waclis.
IMPORTANTE! Recuerda siempre que pegues codigo dentro del editor JS debe estar entre las etiquetas
Imagina que quieres mostrar una barra superior con un mensaje importante, por ejemplo:
“Envíos a todo el país”
“20% de descuento por tiempo limitado”
“Solicita asesoramiento personalizado”
Puedes pedirle a la IA:
Necesito agregar una barra superior informativa a mi sitio web en Waclis usando JavaScript. No puedo modificar el HTML principal, pero puedo pegar código en el Editor JS. Quiero que la barra se agregue automáticamente al inicio del body, con fondo negro, texto blanco, buena altura, texto centrado y diseño responsive. El texto debe decir: "Solicita asesoramiento personalizado para encontrar la mejor solución para tu negocio". Genera únicamente el código JavaScript listo para pegar.
La IA generará un código que puedes pegar en el Editor JS para insertar esa barra automáticamente en tu sitio.
Para pegar el código JavaScript generado por la IA:
Ingresa a tu panel de Waclis.
Ve a Configuraciones.
Haz clic en Editar sitio.
Ingresa en Diseño.
Haz clic en Personalizar plantilla.
Abre el Editor JS.
Pega el código generado por la IA.
Guarda los cambios.
Revisa visualmente el sitio y prueba la funcionalidad.
[Imagen sugerida: captura del panel mostrando la ruta Configuraciones > Editar sitio > Diseño > Personalizar plantilla > Editor JS.
Alt text: "Panel de Waclis mostrando dónde pegar JavaScript personalizado para agregar funcionalidades al sitio"]
Para entender cuándo usar cada herramienta, puedes pensarlo de esta manera:
Es la estructura del contenido.
Sirve para crear bloques, secciones, textos, imágenes, botones, columnas, formularios y elementos visibles dentro de una página.
Ejemplo: crear una nueva sección de beneficios con tres columnas.
Es el diseño visual.
Sirve para cambiar colores, tipografías, tamaños, espaciados, sombras, bordes, fondos, distribución y comportamiento responsive.
Ejemplo: hacer que todos los botones del sitio se vean más modernos, con bordes redondeados y efecto hover.
Es el comportamiento.
Sirve para agregar acciones, interacciones y funcionalidades dinámicas.
Ejemplo: mostrar un botón flotante, abrir un mensaje al hacer clic o modificar un elemento cuando el usuario hace scroll.
No necesitas dominar estos lenguajes. Solo necesitas saber cuál es el objetivo del cambio y pedirle a la IA el tipo de código correcto para pegar en Waclis.
Puedes utilizar la herramienta de inteligencia artificial con la que te sientas más cómodo. Algunas de las más conocidas son:
ChatGPT
Gemini
Claude
Copilot
También puedes usar cualquier otra IA que ya utilices en tu trabajo diario. Lo importante no es la herramienta en sí, sino la claridad con la que le expliques qué quieres construir.
Mientras más específico seas con el resultado esperado, mejor será el código que recibas.
Supongamos que tienes una sección de tu sitio que funciona bien, pero visualmente se ve antigua.
Quieres modernizarla, pero no puedes modificar su HTML directamente.
El proceso sería:
Abres tu sitio.
Haces clic derecho sobre la sección.
Seleccionas Inspeccionar elemento.
Copias el fragmento HTML.
Se lo das a la IA.
Le explicas el cambio visual que necesitas.
La IA genera CSS.
Pegas ese CSS en Waclis desde Configuraciones > Editar sitio > Diseño > Personalizar plantilla > Editor CSS.
Guardas y revisas el resultado.
Prompt sugerido:
Tengo el siguiente fragmento HTML de una sección de mi sitio web en Waclis. No puedo modificar el HTML, solo puedo agregar CSS personalizado. Quiero que esta sección tenga un diseño mucho más moderno, con mayor separación entre elementos, fondo suave, tarjetas con bordes redondeados, sombras delicadas, títulos más grandes y mejor visualización en celulares. También quiero que el diseño se vea profesional, limpio y actual. Genera únicamente el CSS necesario para pegar en el Editor CSS de Waclis. Usa selectores específicos para no afectar otras partes del sitio.
Este método permite realizar mejoras muy profundas sin tocar la estructura original.
Supongamos que quieres agregar un mensaje flotante en la parte inferior del sitio que invite al visitante a contactarte.
Puedes pedirle a la IA:
Necesito agregar una funcionalidad JavaScript a mi sitio web en Waclis. No puedo modificar el HTML principal, pero puedo pegar código en el Editor JS. Quiero crear una pequeña caja flotante en la parte inferior derecha con el texto: "¿Necesitas ayuda? Contáctanos". Debe tener un botón que diga "Enviar consulta" y al hacer clic debe abrir WhatsApp en una nueva pestaña. El diseño debe ser moderno, con bordes redondeados, sombra suave y debe verse bien en mobile. Genera únicamente el código JavaScript listo para pegar en el Editor JS.
La IA puede generar el código necesario para insertar automáticamente esa caja flotante, darle estilos básicos y agregar la acción del botón.
Antes de publicar o dejar activos los cambios en tu sitio, revisa siempre:
Que el sitio se vea bien en computadora.
Que el sitio se vea bien en celular.
Que los botones funcionen correctamente.
Que los enlaces lleven al lugar correcto.
Que los textos sean claros.
Que no se hayan modificado otras secciones por error.
Que el sitio mantenga coherencia con tu marca.
Que el diseño no afecte la lectura ni la navegación.
Si algo no queda bien, puedes volver a la IA y pedirle ajustes.
Por ejemplo:
El CSS funciona, pero afectó otros botones del sitio. Necesito que lo ajustes para que solo se aplique a esta sección.
O también:
En computadora se ve bien, pero en celular las columnas quedan muy juntas. Ajusta el CSS para mejorar la vista mobile.
[Espacio para capturas — Alt text sugerido: "Antes y después de un sitio web Waclis personalizado con editor HTML, CSS personalizado, JavaScript e IA"]
La diferencia entre un sitio genérico y uno que representa tu marca no depende necesariamente de grandes presupuestos ni de semanas de trabajo. Muchas veces depende de saber aprovechar las herramientas disponibles.
Con Waclis puedes partir de bloques ya creados, modificarlos con ayuda de IA, cambiar el diseño general de la plantilla con CSS personalizado y agregar funcionalidades dinámicas mediante el Editor JS.
El editor de bloques, el Editor CSS y el Editor JS forman parte de un conjunto de herramientas que permiten personalizar tu sitio web en Waclis de una forma flexible.
Puedes crear secciones nuevas, adaptar una plantilla a tu identidad visual, mejorar la experiencia de navegación, agregar interacciones y construir un sitio mucho más alineado con las necesidades de tu negocio.
Esto no significa que debas convertirte en programador. Significa que puedes usar la inteligencia artificial como asistente técnico y Waclis como plataforma para aplicar esos cambios de forma práctica.
Diseñar y personalizar tu sitio web sin programar es posible con las herramientas que ya tienes disponibles.
El editor de bloques HTML de Waclis te permite crear y modificar secciones visuales.
El Editor CSS te permite cambiar el diseño general y la estructura visual de la plantilla seleccionada.
El Editor JS te permite agregar funcionalidades e interacciones nuevas.
Combinando estas herramientas con inteligencia artificial, puedes transformar tu sitio web de forma mucho más rápida, flexible y accesible.
Puedes partir de bloques existentes, copiar HTML desde el Code editor, pedirle mejoras a una IA, inspeccionar elementos específicos, generar CSS personalizado o crear funcionalidades con JavaScript.
Sin necesidad de saber programar.
Sin depender de una agencia.
Sin esperar semanas para hacer cambios simples.
Solo necesitas saber qué quieres lograr, explicarlo con claridad y utilizar la IA como asistente para convertir esa idea en código listo para pegar en Waclis.