Saltar al contenido

Cómo añadir CSS personalizado a Divi

2xOFRUV

Una de las ventajas de Divi es su gran cantidad de funciones de personalización.

Esto incluye múltiples métodos para añadir CSS personalizado a Divi, y dónde añadir CSS personalizado en Divi.

En este artículo veremos seis maneras de añadir CSS personalizado a Divi (cuatro de ellas son exclusivas de Divi) y mostraremos cuál es nuestro favorito y por qué.

Cómo (y dónde) añadir CSS personalizado a Divi

Los métodos no están en ningún orden en particular. Aunque, guardé lo mejor para el final. Espere hasta el final para obtener algunos enlaces útiles.

1. CSS en línea

Podemos añadir CSS como texto en línea, como cualquier página o post de WordPress. Esto puede ser engorroso, pero funciona.

Esto significaría que tendrías que estilizar cada elemento individualmente. Los navegadores no almacenan en caché el CSS en línea, por lo que tendría que cargarse cada vez.

Además, no podemos utilizar consultas de los medios de comunicación o pseudoelementos.

2. WordPress Campo CSS adicional

También podríamos añadir nuestro CSS al campo predeterminado del Personalizador de Temas de WordPress. Este campo está numerado y resaltará la sintaxis del código.

Esto incluso coloca el CSS en el Panel de opciones de Divi Theme (como veremos más adelante). El campo estrecho puede ser difícil de usar.

Este es el código para añadir una imagen en el encabezado de tu Divi desde el artículo 9 de ET Recortes útiles de Divi CSS que puedes añadir a ePanel en segundos.

3. Secciones, filas y módulos Ficha Avanzado

Secciones, Filas, y casi todos los módulos Divi tienen una pestaña Avanzada donde puedes ingresar tu CSS. Incluyen ID de CSS, Clase CSS, Antes, Elemento principal y Después.

Muchos módulos incluyen campos de especialidad para apuntar a otros elementos CSS para ese módulo específico. Los campos Antes y Después permiten utilizar pseudoelementos.

Las filas tienen campos para cada columna, lo que le permite personalizar cada columna individualmente.

Este método es ideal para algunas personalizaciones de CSS.

Si planea usar CSS en más de un puñado de secciones, filas o módulos, es mejor usar un método que le permita apuntar a más elementos desde una sola ubicación. Estos campos no incluyen numeración ni formato.

Incluso si utiliza un método diferente, puede utilizar la ficha Avanzado para acceder a los selectores. Abra el módulo y haga clic en la pestaña Avanzado. Haga clic dentro del área para ver el Elemento Principal.

Esto mostrará el selector del elemento. Copie este selector y péguelo en su CSS para apuntar a este módulo específico.

4. En la página o en la publicación

Puedes añadir tu CSS a cada página individual seleccionando los ajustes (el icono de la hamburguesa) en la parte superior del Divi Builder.

Esto abre la pantalla de configuración de Divi Builder y muestra un campo llamado CSS personalizado. Esto le permite personalizar una sola página.

Debe utilizar el selector cuando utilice este campo para que sepa a qué aplicar el CSS. Esta es la cabecera CSS que utilicé anteriormente.

Se mostrará la imagen en el encabezado de esta página solamente.

Este campo CSS no incluye números de línea ni formato.

Además, no se exporta si se utiliza la herramienta de exportación junto al icono Configuración.

5. Panel de opciones de Divi Theme

Para acceder al campo Custom CSS vaya a Divi > Theme Options en el menú del panel de control. Desplácese hasta la parte inferior y verá el campo. Puedes escribir o pegar tu CSS aquí.

La ventaja de esto es que todo su CSS está en el mismo lugar.

Este campo no se sobrescribe cuando se actualiza Divi. Las líneas están numeradas y muestra el código de colores y el formato para ayudarle con su código. Además, este campo es más amplio y fácil de usar que el campo CSS adicional en el Personalizador de temas.

6. Hoja de estilo de temas infantiles

La hoja de estilo CSS es la mejor opción para añadir CSS a Divi. Sólo debe agregar CSS a un tema hijo. Si agrega CSS al tema padre, se sobrescribirá cuando Divi se actualice. En el dashboard de WordPress vaya a Apariencia > Editor. Seleccione style.css en la lista Archivos temáticos de la derecha. Puedes crear o pegar tu código aquí. También puede subir su archivo CSS a través de FTP.

Este método tiene varias ventajas:

  • Usted puede incluir esta hoja de estilo en los temas de su hijo que usted proporciona a los clientes, clientes, o para usted mismo.
  • Puedes trabajar con herramientas de código como Brackets o cualquier otra herramienta que prefieras.
  • Toda tu CSS está en una sola ubicación de fácil acceso.

WordPress te avisará de que es mejor añadir tu CSS al editor CSS incorporado en el Editor de Temas (que es el mismo que el Panel de Opciones de Temas Divi). Esto es cierto si estás usando un tema estándar de WordPress pero, como hemos visto en este artículo, con Divi tenemos muchas más opciones.

Puedes encontrar más información sobre temas infantiles y usar el Generador de Temas Infantiles de Divi Cake aquí en el blog de Divi Cake:

  • Generador de temas infantiles
  • Cómo crear un tema infantil para su sitio web Divi
  • Cómo empaquetar un tema de Divi Child para la venta

Pensamientos finales

Divi es una potencia cuando se trata de opciones de CSS personalizadas. Hay varios métodos y todos tienen sus ventajas. Los métodos estándar de WordPress no sólo funcionan, sino que Elegant Themes nos proporciona algunas formas que son exclusivas de Divi que pueden apuntar a varios elementos, a una sola página o incluso a todo el sitio web, al mismo tiempo. Usar una hoja de estilo de tema infantil es el mejor método en general debido a las herramientas externas y la capacidad de incluirlas en sus temas infantiles premium.

¿Cuál es tu forma favorita de añadir CSS personalizado a Divi? ¿Dónde lo añades normalmente? Háganoslo saber en los comentarios