En la mayoría de tutoriales hacemos uso de css para añadirle estilos personalizados a nuestros diseños. A veces surgen dudas de dónde exactamente añadir estos estilos css dentro de Divi. Hoy veremos tres lugares dónde podemos pegar nuestro css personalizado.

Antes de empezar, ¿Ya tienes el tema Divi con licencia?

Divi es sin lugar a dudas el mejor tema para WordPress y la mejor inversión que puedes hacer para tu web. Si deseas adquirir licencias de Divi para sitios ilimitados y con el soporte de Elegant Themes, puedes obtenerlo desde la web oficial con un 20% de descuento desde aquí.

Por otro lado, si sólo necesitas una licencia para 1 sitio web, puedes adquirirla desde Rapihosting, la web de nuestro servicio de Hosting para WordPress, que también ofrece el servicio de activaciones del tema Divi para 1 sitio web con una licencia original de por vida, a un precio accesible para todos. Así que si deseas el tema Divi con actualizaciones automáticas de por vida, acceso a las plantillas Premium y todas las funciones desbloqueadas, sigue éste enlace.

Cómo añadir css personalizado a Divi

1. Css Personalizado en el módulo Código

El módulo código sirve para añadir código html personalizado a nuestro diseño en divi. Y puesto que también puede agregarse tanto css como javascript a través de etiquetas html, este módulo será un gran aliado en nuestra causa.
Para añadir css, agregamos en nuestro diseño el módulo código y luego escribimos las siguientes etiquetas:

OBSERVACIÓN:
Éste método tiene el inconveniente de que cómo el código está en un módulo, si tienes un diseño más complejo con muchos elementos, se hace un poco engorroso encontrar el módulo código cada vez que debas agregar css. Fuera de eso éste método es perfectamente funcional.

2. Sección de CSS personalizado de Divi de Opciones del tema

En el panel de administración de WordPress, dentro de Divi en la pestaña Opciones de tema, hay una casilla para agregar código css directamente.

En ésta casilla, simplemente podemos pegar nuestro código css directamente.

OBSERVACIÓN:
Éste método es para pegar el código css directamente. Su único inconveniente es que estos estilos son globales, es decir, se aplican a toda la página. Es perfecto para estilos que se aplicarán a elementos que se repetirán a toda la web, como por ejemplo menús, footers, etc.

Pero no para estilos que se aplicarán solo en páginas específicas porque cargarás ese código en toda la web innecesariamente.

3. Sección de CSS personalizado de Divi de Ajustes de página

Divi trae también una sección especial para agregar css en cada publicación individual que estemos editando.

Para acceder a ésta debemos hacer click a la tuerca del menú inferior de divi, cuando estamos en modo edición. Luego vamos a la pstaña avanzado y allí encontraremos la sección de css personalizado.

Puedes ver cómo acceder con la siguiente imagen:

OBSERVACIÓN:
Ésta forma es sin duda mi favorita y la que más uso. Porque es individual para cada página. Así que sólo afectará a la misma. Perfecto para no sobrecargar las otras páginas con código innecesario.

Por otro lado es muy fácil de encontrar y acceder cada vez que necesites añadir css personalizado así que agiliza mucho tu trabajo.

Ahora ya sabes dónde añadir los fragmentos de código que damos en los tutoriales. Subimos dos por semana así que no pierdas nada y sígueme en mis redes.