En la mayoría de tutoriales hacemos uso de css para añadir 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.
¿Cuál es usas tú?
¿Por qué agregar CSS Divi?
Cada elemento que agregamos a nuestro diseño con Divi puede ser personalizado a nuestro gusto fácilmente, gracias a los controles de cada módulo. Y si hablamos de estilos, principalmente desde la pestaña Diseño.
Seas consciente o no de ello, cada uno de los controles que modifican los estilos, están escribiendo código CSS. Éstos estilos que genera Divi, afectan sólo a elementos específicos, definidos por los creadores.
Si utilizamos código CSS personalizado, podemos modificar además cualquier estilo de cualquier elemento dentro de nuestro diseño. 😉
Con CSS podemos personalizar todo más allá de las limitaciones de Divi. Ejemplo de ello son las cosas fantásticas que logramos en mis tutoriales. Casi todos incluyen código CSS personalizado listo para copiar y pegar. Así que no es obligatoriamente necesario que sepas CSS a profundidad, pero sí que sepas dónde y cómo agregar CSS personalizado a Divi.
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 deseas activar la licencia en un sitio web, puedes utilizar nuestro servicio de activación de licencias para que tu sitio cuente con una licencia lifetime, a un excelente precio.
Si eres miembro premium tienes, además, un descuento adicional.
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
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 dado que, también se puede agregar tanto CSS como Javascript a través de etiquetas html, este módulo será un gran aliado en nuestra causa.
Psst si te interesa conocer lo básico de HTML para sacarle el jugo a éste módulo, éste artículo es para ti:
Para añadir CSS, debemos agregar a nuestro diseño el módulo código y luego escribimos las siguientes etiquetas:
<style>
</style>
Y entre las etiquetas podemos pegar todo el código css que querramos
OBSERVACIONES:
Personalmente me encanta usar éste método. Agrego un módulo código con estilos debajo del elemento que quiero editar, así encuentro sus estilos más rápidamente.
Si estás editando con el constructor de Divi es muy practico, ya que esta a la mano.
2. Sección de CSS personalizado de Divi de Opciones del tema
Desde el panel de administración de WordPress, dentro de la pestaña Divi, en la subpestaña Opciones de tema, encontrarás un campo para agregar código CSS directamente.
Éste campo fue creado para agregar específicamente CSS, por ende NO será necesario agregarle las etiquetas <style>.
Es importante tener en cuenta que el CSS que agregues aquí, se cargará en TODA la web.
OBSERVACIONES:
Como se mencionó, las reglas de aquí se aplicarán globalmente, es decir a todo el sitio web.
Es perfecto para estilos que se aplicarán a elementos que se repetirán en varias páginas, como por ejemplo menús, footers, etc.
Pero no es tan eficiente colocar aquí estilos que sólo se usarán en una página. porque ese código se cargará en toda la web de forma innecesaria. Y mientras más inflado con código esté nuestro sitio, pero será su rendimiento.
Si te está gustando el artículo, éstos otros te van a encantar:
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 élla debemos hacer click a la tuerca del menú inferior de divi, cuando estamos en modo edición. Luego vamos a la pestaña «avanzado» y allí encontraremos la sección de css personalizado.
Puedes ver cómo acceder con la siguiente imagen:
OBSERVACIONES:
Éste método es para pegar el código css directamente igual que en el método anterior. La diferencia es que sólo cargará los estilos en la página actual. Perfecto para no sobrecargar las otras páginas con código que no usarán.
Además es de buenas prácticas que todo el CSS esté en un mismo lugar.
Comentarios Finales
Personalmente, cuando utilizo el último método, se me hace un poco dificultoso encontrar una regla específica. Sobretodo cuando mi código CSS es largo y aplicado a muchos elementos distintos. Por eso prefiero, como ya dije, ubicar los estilos de cada elemento editado, cerca de los mismos con un módulo Código.
Sin embargo, es ya por puro gusto personal. Los tres métodos que hemos visto son igual de válidos y puedes utilizar el método que te resulte más cómodo.
Coméntame, ¿Cuál es la forma en la que prefieres agregar CSS personalizado a Divi?
0 comentarios
Trackbacks/Pingbacks