Crear o añadir CSS personalizado suelen tareas habituales en el desarrollo web, incluso cuando por fin se encuentra el tema perfecto, es posible que se necesite modificar o adecuar el diseño a través de código CSS.
Índice de contenidos
¿Qué es el código CSS?
El código CSS (Hojas de estilo en cascada) es un código que se utiliza para crear, mejorar o modificar el diseño de una página: selección de colores, uso de tipografías, tamaños de letras, alturas de elementos, efectos visuales, retocar el diseño responsive, etc. Toda esta «configuración» se hace a través de CSS.
¿Dónde añadir el CSS personalizado en Avada?
En el tema de Avada existen varias opciones para añadir CSS personalizado: de forma general dentro del panel de Opciones, por cada elemento de Avada (botones, texto, contenedores, etc.) e incluso una única página.
Opciones del tema
Dentro de la adminsitración de WordPress, acudir a Avada > Opciones de tema > CSS personalizado.
El CSS que se introduzca aquí «anulará» el CSS del tema predeterminado.
Hay que tener en cuenta que, en ciertos casos, se deberá de añadir la declaración «!important» para que el CSS se aplique correctamente.
Con el tema hijo de Avada
Si se está utilizando el tema hijo de Avada, también se puede introducir el CSS en el fichero style.css, para ello, se debe acudir a Apariencia > Editor de temas > style.css
Es importante que se seleccione el tema hijo de Avada (Avada Child) y dentro del tema, el fichero style.css.
Este fichero también tendrá prioridad sobre el CSS del tema. El añadir el CSS personalizado en el fichero style.css o en las Opciones de tema, es una preferencia puramente personal.
Por cada página
También se puede introducir CSS personalizado en una única página, para ello, desde la adminsitración se debe hacer clic sobre el icono de CSS personalizado </>, en la barra de administración del Fusion Builder, que se encuentra en la parte superior de cada página.
Informar que el CSS añadido por este método, solo se aplicará a la página donde se ha introducido el CSS.
Front Builder de Avada
En la edición «en vivo» de la página, al hacer clic sobre el icono de Toggle Sidebar, se muestra la opción de Opciones de página o bien Opciones globales, independientemente de la opción seleccionada, se mostrará la opción de «CSS personalizado«.
Conclusión
Se ha presentado varias maneras de incluir código CSS en Avada, particularmente, solemos usar introducir las modificaciones en la opción de CSS personalizado. ¿Con qué opción te quedas?
Deja tu comentario