📄 6.6.6. ¿Cómo insertar código CSS en mi sitio web?

¿Cómo insertar código CSS en mi Waclis?


Aprender a insertar y utilizar código CSS personalizado en tu sitio web de Waclis para modificar el diseño visual con mayor precisión y control.

¿Para qué sirve editar el CSS en Waclis?

La edición de CSS personalizado te permite ajustar el diseño de tu sitio web sin modificar el código HTML ni la estructura interna del sistema.

Es ideal para realizar cambios visuales específicos que no están disponibles desde las opciones básicas de diseño.

Beneficios de usar CSS personalizado

  • Personalizas el diseño con total libertad visual

  • Ajustas detalles finos de tipografía, colores y espaciados

  • Mantienes la estructura del sitio intacta

  • No afecta el contenido ni los datos del sitio

  • Puedes adaptar el diseño a la identidad exacta de tu marca


💡

Niveles de personalización del diseño en Waclis

En Waclis, la personalización del diseño se organiza en tres niveles, pensados para distintos perfiles de usuario.

👉 Este tutorial corresponde al Nivel 3 · Personalización avanzada, y está recomendado para usuarios con conocimientos técnicos o experiencia básica/intermedia en CSS.


Nivel 1 · Personalización básica

(No corresponde a este tutorial)

Ideal para usuarios sin conocimientos técnicos.

Permite cambiar colores, tipografías, logotipo, favicon, banners y carruseles desde el panel visual.


Nivel 2 · Personalización intermedia con el Editor de bloques

Permite crear y reorganizar secciones visuales sin escribir código.

👉 Tutorial recomendado:  Editor de bloques


✅ Nivel 3 · Personalización avanzada con código (este tutorial)

Este nivel te permite control total sobre el diseño visual del sitio web mediante código.

Desde aquí puedes:

  • Modificar estilos completos con CSS personalizado

  • Ajustar elementos específicos que no están disponibles en el editor visual

  • Personalizar botones, textos, formularios, banners y más

👉 Tutoriales complementarios: JavaScript personalizado


Recomendación:

Puedes comenzar con niveles básicos e ir avanzando progresivamente.

Los tres niveles son complementarios y pueden usarse en conjunto.



Pasos para acceder al Editor CSS en Waclis

  1. Ingresa al Administrador de Waclis

  2. Dirígete a Configuración > Diseño > Editar sitio

  3. Haz clic en Personalizar diseño

  4. Selecciona Editor CSS

  5. Verás un campo de texto donde puedes:

    • Escribir tu código CSS

    • Pegar código existente (Ctrl + V / Command + V)

  6. Si agregas varios estilos, colócalos uno debajo del otro

  7. Haz clic en Guardar

Los cambios se aplican automáticamente a tu sitio web.



⚠️

Te sugerimos para poder utilizar las diversas posibilidades de personalización con edición en CSS, es recomendable tener un conocimiento básico de este lenguaje. Para generar el código CSS, puedes seguir nuestro tutorial ¿Cómo obtener los códigos de CSS para hacer cambios en el diseño de mi sitio web?.


Ejemplos reales de código CSS que puedes usar en Waclis

A continuación, algunos ejemplos prácticos y habituales:

1. Cambiar color y estilo de botones principales

.btn-primary {
  background-color: #0f4c81;
  border-radius: 6px;
  font-weight: 600;
}

2. Efecto hover suave en botones

.btn-primary:hover {
  background-color: #0c3b63;
  transition: all 0.3s ease;
}

3. Tipografía más elegante en títulos

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.5px;
}

4. Separación visual entre secciones

.section {
  margin-bottom: 80px;
}

5. Fondo suave para secciones destacadas

.section-highlight {
  background-color: #f5f7fa;
  padding: 60px 0;
}

6. Bordes redondeados en tarjetas de productos

.card {
  border-radius: 12px;
  overflow: hidden;
}

7. Sombra sutil para tarjetas

.card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

8. Ajustar ancho máximo del contenido

.container {
  max-width: 1200px;
}

9. Cambiar color del encabezado (header)

header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

10. Animación suave al cargar elementos

.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


💡

Puedes conocer más sobre las modificaciones que puedes realizar con este lenguaje en ¿Qué elementos del diseño puedo modificar con códigos CSS?.


Ejemplos de casos de uso

  • Adaptar el sitio a un manual de marca específico

  • Lograr un diseño más corporativo o industrial

  • Unificar el estilo visual entre sitio web y catálogo PDF

  • Ajustar detalles finos sin cambiar la plantilla base