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 octava parte de esta serie, hablaré sobre las formas nuevas y creativas en las que puede usar colores de fondo semitransparentes en Divi.
Aprenda todo sobre Divi 2.4 aquí
En Divi 2.4 presentamos nuevos selectores de color con controles alfa. Estos le permiten seleccionar e ingresar valores de color RGBa.
¿Qué es RGBa?
RGBa es un valor de color que se define por su valor RGB más un valor alfa, que es lo que significa esa pequeña ‘ a ‘. Puede pensar en el valor alfa como un valor de opacidad.
Por ejemplo…
El negro puede representarse de dos maneras diferentes: #000000; o rgb(0,0,0);
Podemos usar un tercer método que se ve así: rgba(0,0,0,1); donde el 1 representa su opacidad en una escala de 0 – 1. Usando esta escala podemos crear un negro transparente al 50% con rgba(0,0,0,0.5);
Cómo los colores de fondo transparentes pueden agregar más flexibilidad a su sitio
Agregar un poco de transparencia a los colores de fondo es una forma rápida de lograr una paleta de colores cohesiva. Puede ver a continuación que el negro verdadero sobre el blanco verdadero es un poco duro, y que los grises oscuros y claros son un poco más agradables a la vista. Quizás se esté preguntando: «¿Por qué no usar un valor de gris sólido entonces?». Esa es una buena pregunta, y difícil de discutir, hasta que comiences a agregar fondos de colores a la mezcla. Un negro ligeramente transparente cuando está sobre un fondo blanco es simplemente un gris oscuro, pero se convierte en un azul oscuro sobre un fondo azul.
Puede ver que el negro semitransparente puede verse exactamente igual que un gris oscuro cuando está sobre un fondo blanco, y cómo un blanco semitransparente puede verse igual que un gris claro, pero cuando pasa a un fondo de color, el beneficio de un valor rgba es más evidente. Es bueno tener esto en cuenta al elegir los colores de fondo para los elementos de su página.
Fondos de módulos transparentes
En Divi 2.4, los módulos ahora tienen una configuración de Color de fondo en sus pestañas de Diseño avanzado. Esto significa diferentes cosas para diferentes módulos. Por ejemplo, el color de fondo de un módulo de llamada a la acción controla el color de fondo de todo el contenedor del módulo, mientras que el color de fondo de un módulo de acordeón controla el color de fondo de los interruptores individuales. Aquí están algunos ejemplos.
Use fondos transparentes para diapositivas deslizantes
En el siguiente ejemplo, utilicé colores de fondo transparentes para cada diapositiva en mi control deslizante. Luego agregué una imagen de fondo a la sección que se puede ver debido a la transparencia.
Así es como se ve el selector de color de fondo en el contexto de una diapositiva individual
Use colores de fondo de módulo transparentes para crear una paleta de colores cohesiva
Al agregar módulos con un color de fondo a una sección que ya tiene un color de fondo, puede ser difícil hacer que esos dos colores funcionen bien juntos. Y cuando logra que esos colores funcionen bien, ¿qué sucede cuando cambia el color de fondo?
Una manera fácil de hacer que estos funcionen juntos es usar un color de fondo semitransparente en el módulo. Si desea que sea un poco más oscuro que el color de la sección, use un negro semitransparente. Si quieres que sea un poco más claro que el color de la sección, usa un blanco semitransparente. Esto elimina el problema de elegir colores de fondo cohesivos y hace que sea mucho más fácil actualizar el fondo de su sección en el futuro. En estos ejemplos utilicé un 25 % de negro y un 25 % de blanco.
Transparencia total
El Módulo de contacto es un buen ejemplo de un módulo que funciona bien con un color de fondo transparente. Incluso se ve muy bien cuando usa transparencia total y agrega un borde usando las nuevas opciones de borde de Divi. En el siguiente ejemplo, incluso uso un color de borde semitransparente para que se vea un poco del fondo.
Así es como se ven estas configuraciones en la configuración de diseño avanzado del módulo de formulario de contacto.
Agregue un color de fondo transparente para ayudar a que sus módulos se destaquen de una imagen de fondo
Muchas veces queremos lo mejor de ambos mundos. Esos mundos son a menudo texto e imagen. Desafortunadamente, estas dos cosas no siempre funcionan bien juntas, pero gracias a los selectores de color alfa, es fácil remediar este dilema con un color de fondo de módulo rápido. Tenga en cuenta que agregué 40 px de relleno personalizado a cada módulo a continuación para que el contenido no se estrelle contra los lados del módulo.
Este uso de color transparente también puede ser genial cuando se usa un efecto de paralaje en la imagen de fondo.
Llevemos este ejemplo un paso más allá
En el ejemplo anterior, utilicé el mismo valor alfa para los tres módulos. Veamos qué sucede cuando convierto esto en una fila de ancho completo, elimino las medianeras de columna y mezclo los valores alfa.
En este ejemplo, también configuré el relleno de filas y secciones en 0 para lograr una verdadera apariencia sin canaletas.
Ahora puede agregar transparencia a los colores de fondo de su navegación. Obtenga más información sobre cómo personalizar la navegación de su encabezado .
¡Incluso las columnas pueden tener un color de fondo!
Darle a una columna un color de fondo es realmente conveniente si tiene varios módulos en una columna y desea que todos se coloquen sobre un color de fondo. En lugar de darle a cada módulo un color de fondo, simplemente puede personalizar la columna en la que se encuentran. Dado que esta publicación trata sobre la transparencia, aquí hay un ejemplo de cómo puede usar fondos de columna semitransparentes para crear una hermosa superposición de imágenes.
Para lograr este aspecto, le di a la sección una imagen de fondo de paralaje, agregué una fila de dos columnas con un color de fondo semitransparente en la columna 2 y coloqué un módulo de texto simple en la columna derecha con un poco de relleno personalizado para respirar más. habitación.
Hacer que la fila ocupe todo el ancho, eliminar las medianías de las columnas y dar a la fila/sección cero valores de relleno puede darle a este diseño un aspecto completamente nuevo.
Demo en vivo
Personalice las superposiciones de desplazamiento del módulo Galería, Tienda y Portafolio
La personalización de la superposición de desplazamiento de las imágenes de la galería, los proyectos de cartera y los productos de la tienda es fácil de hacer con los nuevos selectores alfa. Supongamos que desea que las superposiciones coincidan con un color de acento de su marca, ahora puede elegir un color de superposición semitransparente para su estado de desplazamiento.
Los selectores alfa en Divi son otra pequeña adición que puede tener un gran impacto en el diseño de su sitio web. Combinado con todas las nuevas funciones de Divi 2.4, estamos muy emocionados de ver lo que va a crear a continuación. Asegúrese de publicar sus propios ejemplos en los comentarios si ya ha tenido la oportunidad de profundizar en la actualización.