📄 6.6.8. ¿Qué elementos del diseño puedo modificar con códigos CSS?

¿Qué elementos del diseño puedo modificar con códigos CSS?


Conocer qué partes del diseño de tu sitio web en Waclis puedes personalizar usando código CSS, para lograr un diseño más alineado a tu marca y a tus necesidades visuales.

El lenguaje CSS (Hojas de Estilo en Cascada) se utiliza para definir la apariencia visual de un sitio web.

En Waclis, el uso de CSS te permite modificar el diseño sin tocar el contenido ni la estructura del sitio, logrando cambios visuales avanzados que no están disponibles en el editor visual.

Con CSS puedes:

  • Ajustar detalles finos del diseño

  • Personalizar elementos específicos

  • Ocultar o resaltar partes del sitio

  • Lograr una estética más profesional y personalizada


💡

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.



Elementos del diseño que puedes modificar con CSS en Waclis

A continuación, se detallan más de 40 elementos y aspectos visuales que puedes personalizar usando CSS.

1. Colores

Puedes cambiar:

  1. Color de fondo del sitio

  2. Color de fondo del header

  3. Color del footer

  4. Color de textos generales

  5. Color de títulos (H1, H2, H3, etc.)

  6. Color de enlaces

  7. Color de enlaces al pasar el mouse (hover)

  8. Color de botones

  9. Color de botones al pasar el mouse

  10. Color de bordes

  11. Color de iconos

  12. Color de etiquetas (badges, labels)

2. Tipografías y textos

Puedes modificar:

13. Tipo de letra (font-family)

14. Tamaño de texto

15. Grosor de letra (bold, light, etc.)

16. Espaciado entre letras

17. Altura de línea

18. Alineación del texto

19. Transformación de texto (mayúsculas, minúsculas)

20. Estilo de enlaces (subrayado, sin subrayar)

3. Botones

Puedes ajustar:

21. Tamaño del botón

22. Bordes redondeados

23. Sombra de botones

24. Espaciado interno (padding)

25. Iconos dentro del botón

26. Estados hover, active y focus

27. Posición del botón en la página

4. Imágenes

Puedes modificar:

28. Tamaño de imágenes

29. Bordes redondeados

30. Sombras

31. Alineación

32. Opacidad

33. Comportamiento al pasar el mouse

34. Ajuste responsivo

5. Formularios

Puedes personalizar:

35. Campos de texto

36. Tamaño de inputs

37. Bordes y colores

38. Labels de formularios

39. Botón de envío

40. Mensajes de error o validación

41. Checkbox y radio buttons

6. Estructura y layout

Puedes ajustar:

42. Márgenes entre secciones

43. Espaciados internos

44. Ancho máximo del contenido

45. Alineación de columnas

46. Orden visual de elementos

47. Separadores visuales

7. Header, menú y footer

Puedes modificar:

48. Altura del header

49. Estilo del menú

50. Espaciado entre ítems del menú

51. Submenús

52. Footer completo (fondo, texto, columnas)

8. Elementos avanzados

También puedes:

53. Ocultar elementos específicos

54. Mostrar elementos solo en desktop o mobile

55. Aplicar animaciones simples

56. Ajustar transiciones visuales

57. Personalizar banners y sliders existentes




Limitaciones del uso de CSS

Es importante tener en cuenta que:

  • ❌ No permite crear nuevos elementos

  • ❌ No modifica la lógica ni el funcionamiento del sitio

  • ❌ No reemplaza funcionalidades del sistema

CSS solo actúa sobre elementos que ya existen en el sitio.



Recomendaciones antes de usar CSS

  • Realiza cambios de forma progresiva

  • Guarda copias de tu código

  • Prueba los cambios en desktop y mobile

  • Evita reglas demasiado genéricas

  • Si no estás seguro, consulta con un diseñador o desarrollador



Próximo paso

Ahora que sabes qué elementos puedes modificar con CSS en Waclis, continúa con el tutorial:

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