Css personalizado divi

Clases css de divi

Básicamente, si apuntas a algo con CSS, y hay dos o más reglas CSS en conflicto en algún lugar del sitio web que apuntan al mismo elemento, el CSS en ciertas ubicaciones anulará a los otros. Tiene más poder cuanto más arriba en la jerarquía esté. De lo contrario, el navegador se confundiría y necesita seguir algunas reglas para determinar cuál es la más específica y, por lo tanto, cuál gana.
El nivel de especificidad depende de dónde se coloca el código en Divi. No sería muy útil mostrarte dónde añadir código personalizado en Divi sin mostrarte por qué. Aquí hay una lista de la jerarquía de CSS en Divi, con 1 que tiene el mayor poder y 8 el menor:
Si tu cabeza da vueltas por la confusión, no te preocupes. Tendrá más sentido a medida que avancemos y ganes experiencia práctica, y pronto entenderás claramente qué es cada uno de ellos y cuándo utilizarlos.
Los estilos inline son aquellos que se escriben directamente en la estructura html de la página o post. Por ejemplo, en el Módulo de Texto, puedes cambiar de Visual a Texto y ver el html de la página. Si tienes algo con estilo allí, lo verás en el código.

Fragmentos de css de divi

A diferencia del hijo menor de mi madre, Divi no es perfecto. Es por eso que a veces tenemos que encontrar maneras de evitar ciertas limitaciones. Como cambiar los colores y efectos de los hipervínculos, o como los llamamos nosotros, enlaces.
Cambiar el color del enlace principal es un proceso bastante sencillo, sólo tienes que entrar en el personalizador del tema Divi y luego en el panel de Ajustes Generales > Tipografía y elegir allí el color de tu enlace.    Y si quieres cambiar los colores de los enlaces del menú en la cabecera, puedes hacerlo a través del panel Cabecera y Navegación > Navegación fija.
Pero si construyes tu sitio web en secciones, y cada sección tiene diferentes colores y fondos, entonces el color de enlace de tamaño único no funciona. Por ejemplo, en este sitio web mi color de enlace por defecto es amarillo, que se ve fantástico en mis fondos naranja, verde y marrón. No tanto en fondos blancos y amarillos. Así que necesito una manera de cambiar el color de mis enlaces en esas secciones. Por suerte, podemos usar CSS personalizado para hacerlo.
Lo primero que hay que hacer es ir a su lugar de CSS personalizado de elección. Para algunos de ustedes, será su tema hijo (Ver mi artículo sobre: Cómo configurar un tema hijo en Divi), para otros será en el Personalizador de Temas en el Tablero de WordPress (cerca de la misma área donde se configura el color del enlace principal), y para otros será en el panel Divi > Opciones del Tema.    No importa cuál uses.    Yo uso un tema hijo.

Códigos css de divi

Así que cualquiera que sea tu módulo personalizado, cuando se renderiza en el front-end va a mostrar un montón de HTML. Podrías entrar en el código del módulo para determinar qué html se está creando (o tal vez codificaste el HTML tú mismo y ya lo sabes), pero la forma más sencilla de comprobarlo es añadir el módulo a una página, previsualizarlo e inspeccionar el HTML.
<div class=”et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_overlay_0 et_always_center_on_mobile et_pb_image_overlay et-animated”><img class=”main” src=”https://elegantmarketplace.com/wp-content/uploads/2016/04/overly2AW.jpg” alt=” /> <img class=”overlay” src=”https://elegantmarketplace.com/wp-content/uploads/2016/04/overly1AW.jpg” alt=”” /></div>
Como puedes ver el contenedor principal tiene bastantes clases adjuntas, pero la importante es la clase et_pb_image_overlay. Usted notará que esto es lo mismo que la babosa creado en el artículo anterior. Esto significa que podemos aplicar css a cualquier instancia de la clase et_pb_image_overlay, o cualquier elemento dentro de esa clase (en este caso las imágenes).

El css personalizado de divi no funciona

Si es la primera vez que visitas el Editor de CSS (o aún no has añadido ningún código CSS personalizado), verás un mensaje de marcador de posición en la ventana de edición. Por favor, revise el mensaje, ya que contiene algunos consejos útiles para ayudarle a empezar.
Para comparar las revisiones de CSS, seleccione una fecha de revisión utilizando el control deslizante en la parte superior de la pantalla de revisiones. La revisión seleccionada se mostrará junto a la versión actual, resaltando las diferencias entre ambas. Un resaltado rojo indica que se ha eliminado algo, mientras que un resaltado verde indica que se ha añadido algo.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad