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.

¿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.

CSS Personalizado en las opciones de Avada

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.

Editar 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.

CSS personalizado desde el fichero Styles.css

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.

Añadir CSS en una página de Avada

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«.

CSS Personalizado en el front builder de Avada

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?

¡Comparte esta noticia!

Categorías: Avada /

Últimas entradas

Categorías

¡Entrada destacada!

Cómprar mejor portátil calidad precio

¡Ayúdame a mejorar el contenido del blog y coméntame tus impresiones!

Noticias relacionadas

Responsable de los datos: Javier Vallejo.
Finalidad: Introducir comentarios.
Legitimación: Tu consentimiento expreso.
Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de tus datos.