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

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

¿Para qué sirve editar CSS?

La edición de CSS te permite ajustar el diseño sin tocar la estructura HTML del sitio. Es ideal para afinar tipografías, colores o espaciados cuando el editor visual no alcanza.

Niveles de personalización

• Nivel 1: Cambios básicos desde el panel (colores, tipografías, logo).
• Nivel 2: Editor de bloques para reorganizar secciones sin código.
• Nivel 3 (este tutorial): CSS y JS personalizados para un control total del diseño.

Recomendación: avanza por niveles y usa CSS solo cuando necesites ajustes finos o custom branding.

Pasos para editar CSS

1. Panel → Configuración → Editar sitio → Diseño → Personalizar diseño → Editor CSS.
2. En el editor pega o escribe tu código (usa una línea por regla y comenta los cambios para tener registro).
3. Guarda para aplicar el estilo en todo el sitio.
4. Si cargas muchos estilos, ordénalos por secciones para facilitar el mantenimiento.

Cuándo usarlo

• Nivel 3 de personalización (avanzado): ajustar tipografías, colores, espaciados o elementos específicos que no están en el editor básico.
• Mantén copias de tu código y prueba en desktop/mobile.

Ejemplos rápidos

.btn-primary {
  background:#0f4c81;
  border-radius:6px;
  font-weight:600;
}
.btn-primary:hover {
  background:#0c3b63;
  transition:all .3s ease;
}
.card {
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border-radius:12px;
}

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

Casos de uso frecuentes

• Adaptar el sitio al manual de marca exactamente.
• Lograr un estilo más corporativo o industrial sin cambiar la plantilla.
• Unificar el look entre sitio web y catálogos PDF.

Complementa este tutorial con [¿Cómo obtener los códigos CSS?] y [¿Qué elementos puedo modificar con CSS?].