La semana pasada presentamos Divi 2.4 , la mayor actualización en la historia de Divi y un gran paso adelante para nuestro tema de WordPress más popular. Hay tantas funciones excelentes para explorar en esta actualización que fue difícil describirlas todas en la publicación de lanzamiento, por lo que hemos decidido hacer una serie de publicaciones de blog informativas de 2 semanas que tendrán como objetivo enseñarle cómo tomar aprovecha al máximo Divi 2.4 y sus nuevas opciones. En la décima parte de esta serie, voy a explorar las nuevas opciones de CSS personalizado y cómo puedes usarlas junto con la Biblioteca Divi en lugar de agregar CSS personalizado con un tema secundario .
Aprenda todo sobre Divi 2.4 aquí
Las secciones, filas y módulos tienen sus propias pestañas CSS personalizadas en Divi Builder. Esto le permite agregar css personalizado a su página e incluso más específicamente, directamente a elementos individuales en la página. No hay nada de malo en hacer esto a través de un tema secundario o dentro del ePanel de Elegant Themes, pero es posible que use esos métodos mucho menos con estas nuevas funciones al alcance de su mano.
Opciones de CSS personalizadas de sección y fila
Las secciones y las filas le permiten definir CSS personalizado para el elemento principal, que es la sección completa o el elemento de fila en el html, y los pseudo elementos :after y :before. Echa un vistazo a algunos ejemplos a continuación.
Usar pseudoelementos para agregar un divisor de sección
Agregué CSS al campo Después de la sección para crear una zanahoria que apunte a la siguiente sección. Este elemento está hecho de una forma cuadrada que es del mismo color que el color de fondo de la sección y luego se gira un 45%.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
display: block;position: absolute;content: '';width: 40px;height: 40px;bottom: -20px;left: 50%;margin-left: -20px;background-color: #1e73be;-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);z-index: 1; |
Dale estilo al contenedor de sección a través del campo «Elemento principal»
Aquí, agregué una sombra insertada transparente para darle a mi sección un bonito efecto de borde transparente.
|
01
02
03
|
-webkit-box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);-moz-box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3); |
CSS de fila personalizado
Agregar CSS personalizado a las filas le dará estilo al contenedor que contiene sus columnas y módulos. Agregué un borde simple y un relleno personalizado para agregar un cuadro agradable alrededor del contenido de la fila.
|
01
02
|
border: 4px solid rgba(0,0,0,0.4);padding: 40px; |
El módulo personalizado CSS le brinda más control que nunca
Además de poder agregar CSS personalizado al contenedor externo de un módulo y sus pseudo elementos, también puede agregar estilos a piezas individuales de un módulo. Revisaré algunos ejemplos a continuación e incluso le mostraré cómo la Biblioteca Divi puede llevar estos ejemplos a un nivel completamente nuevo de increíble.
Crear imágenes de Blurb redondeadas con CSS
Este CSS le da a la imagen de la propaganda un gran radio de borde, restringiendo efectivamente sus imágenes a círculos perfectos si sus imágenes son cuadrados perfectos para empezar. Incluso agregué un poco de espacio entre la imagen de la propaganda y el título al aumentar el margen inferior de la imagen.
|
01
02
03
04
05
06
07
|
line-height: 0;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;overflow: hidden;xmax-width: 200px;margin: 0 auto 50px; |
Agregue bordes personalizados a cualquier módulo con CSS personalizado
Aquí, simplemente agregué un borde doble superior y algo de relleno personalizado a los módulos de texto. Esta es una manera fácil de llamar la atención sobre un bloque de texto.
|
01
02
|
border-top: 4px double rgba(255,255,255,0.5);padding-top: 20px; |
¡Use filtros CSS en cualquier módulo!
Los filtros CSS funcionan muy bien para cosas como imágenes, retratos de miembros del equipo e incluso Google Maps.
De izquierda a derecha, los filtros css son los siguientes: escala de grises, sepia, saturación, desenfoque, inversión. Puede cambiar los valores entre paréntesis para lograr diferentes niveles de estos efectos. Simplemente agregue cualquiera de los estilos a continuación al campo CSS Elemento principal de cualquier módulo.
escala de grises
|
01
02
|
-webkit-filter: grayscale(1);filter: grayscale(1); |
Sepia
|
01
02
|
-webkit-filter: sepia(1);filter: sepia(1); |
Saturar
|
01
02
|
-webkit-filter: saturate(2);filter: saturate(2); |
Difuminar
|
01
02
|
-webkit-filter: blur(5px);filter: blur(5px); |
Invertir
|
01
02
|
-webkit-filter: invert(1);filter: invert(1); |
Uso de CSS de módulo personalizado con la biblioteca Divi para disminuir el tiempo de desarrollo
Si logra un efecto increíble con CSS personalizado, como el filtro de escala de grises o la imagen de propaganda circular, y cree que podría usarlo nuevamente, simplemente guárdelo en su Biblioteca Divi para usarlo más adelante. Si el css personalizado es lo único que desea guardar, elija guardar solo la pestaña CSS personalizado cuando se le solicite hacerlo.
Cada vez que desee agregar un módulo con ese efecto, simplemente agréguelo a la página desde su biblioteca, y no importa qué contenido coloque en ese módulo, su css personalizado aún tendrá efecto. Si cree que incluso podría editar ese css guardado en el futuro, puede configurarlo como un módulo global. Luego, cada vez que necesite editar el CSS, solo tiene que hacerlo una vez.
Un ejemplo paso a paso
Digamos que agregué un CSS personalizado para hacer el retrato en un módulo de testimonios en escala de grises. Ahora quiero que este efecto tenga lugar en todo mi sitio web cada vez que agregue un nuevo módulo de testimonios a mi página. Así es como configuraría esto usando CSS personalizado y la Biblioteca Divi.
Paso 1. Cree un módulo de testimonios
Esto se puede hacer desde dentro de su Biblioteca Divi o en una página real. Cualquiera de los dos servirá. Voy a hacer esto a través de la Biblioteca Divi porque aún no he comenzado a construir mi sitio. Después de navegar por la pestaña Divi Admin, seleccione el enlace Biblioteca Divi y elija Agregar nuevo .
Elija su configuración : nombré mi módulo apropiadamente, le dije a la biblioteca que quiero hacer un módulo, que solo quiero incluir su pestaña CSS personalizado y quiero que sea global (en caso de que quiera actualizar mi filtro de retrato testimonial en el futuro).
Enviar y configurar : después de enviar, se me solicita que elija un módulo (elegí un módulo de testimonios) y luego me llevan inmediatamente a la pestaña CSS, ya que es la única pestaña que elegí para sincronizar. Después de colocar mi filtro css en el campo Retrato testimonial, puedo guardar y actualizar mi nuevo elemento de la biblioteca.
Paso 2. Agregue el elemento de biblioteca guardado en un diseño
Dado que creé este módulo desde la Biblioteca Divi, necesito crear una nueva página para mis testimonios. Quiero agregar tres testimonios, así que agregué mi nuevo módulo global en cada columna de una fila de 3 columnas.
Paso 3. ¡Guarde y obtenga una vista previa de su increíble trabajo!
Revisar y modificar : después de ver esto, creo que las imágenes necesitan un poco más de color, por lo que voy a disminuir el nivel de filtro al 50 %. Todo lo que tengo que hacer es abrir la configuración de un módulo de testimonios y cambiar la cantidad de mi filtro a 0.5. Tenga en cuenta que la pestaña CSS es verde, lo que me dice que es la única pestaña global en este módulo.
Después de guardar el módulo y actualizar mi página, puedo ver que todas las instancias de mi módulo global de testimonios tienen imágenes de retrato con un filtro de escala de grises del 50 %. Hermoso.
Todo lo anterior sin dejar Divi
Es difícil creer que acabamos de hacer todo eso con las herramientas nativas de Divi. Este es solo un ejemplo de cómo puede usar Custom CSS y Divi Library para mejorar su flujo de trabajo. Sin mencionar la posibilidad de exportar su biblioteca Divi para usarla en otros sitios web.