Efecto superposición de contenidos con las opciones de fondo de Divi
Cómo simular una Superposición de Contenidos con las Nuevas Opciones de Fondo en Divi
En las últimas semanas los chicos de Elegant Themes nos han traído varias actualizaciones de su tema estrella, Divi. Estas actualizaciones han repercutido en notables mejoras en sus funciones. Nuevos controles para textos, sombras para cualquier contenido, fondos más personalizables en secciones, filas o módulos, etc.
Y, aunque vamos a usar algunas de estas mejores en el tutorial de hoy, nos centraremos en cómo simular un efecto de superposición de contenidos trabajando con la configuración de los fondos que nos proporciona Divi.
También experimentaremos con los ajustes de sombras. Crearemos efectos que posiblemente no se te hubieran ocurrido con estas modificaciones. Vamos al grano.
Para que te hagas una idea, a continuación tienes una muestra de lo que queremos conseguir. Son dos secciones estándar (no es una imagen) con la práctica terminada.
Este es el título del modulo CTA
CTA es llamada a la acción en inglés.
Hemos elegido este módulo pero se podría haber utilizado cualquier otro.
Esta es la primera sección.
La Estructura
La estructura de nuestro tutorial es sencilla. Dos secciones normales (aunque podríamos haber utilizado secciones de ancho completo). Cada sección contiene una fila de una columna con un modulo cada una. El primer módulo es un módulo llamado a la accion y el módulo de la segunda sección es un módulo de imagen. Aquí puedes verlo.
La Primera Sección
Cuando creamos una nueva página o entrada, al pulsar en usar constructor Divi, se nos da ya una sección estándar. Así que abrimos la configuración de la sección y, en contenido, buscamos donde pone fondo, y en la primera opción aplicamos un color sólido. En nuestro caso, #0c71c3.
Ahora insertamos una fila de una columna y acto seguido añadimos nuestro primer módulo. Podríamos haber elegido un módulo anuncio, o de texto o cualquier otro. Pero nos ha parecido bien usar un módulo de llamada a la acción.
Una vez hemos creado el módulo, abrimos la configuración de éste. Estos son nuestros ajustes:
Contenido: ponemos el título y el texto normal.
Diseño: color de texto claro, orientación centrado,nos hemos decantado por estas tipografías: Playfair Display, tamaño 34 píxeles, negrita y mayúscula para el título, y Droid Sans, 14 px para el cuerpo de fuente. Puedes usar estos valores o usar los tuyos propios.
Asegúrate que en la pestaña contenido > Fondo, está desactivada la opción usar color de fondo.
Ya hemos terminado con la primera sección. Vamos a por la segunda.
La Segunda Sección
Así pues, generamos la segunda sección, estándar como la anterior, una columna también, y agregamos un módulo; en esta ocasión tipo imagen. En el módulo imagen, importamos la imagen que queramos y cerramos el módulo. Luego volveremos para hacer los ajustes finales. Elige una imagen con anchura suficiente para no quedarnos cortos. Entre 800px y 1200 px puede ser suficiente.
Configurando la sección
Empezamos editando los ajustes de nuestra segunda sección. Pulsamos entonces en configurar sección y en la pestaña contenido, vamos a fondo > degradado y editamos de la siguiente manera:
color 1 el azul que habíamos elegido en la sección anterior.
Color 2: color que contraste. Yo he usado #ffbf00, que es un naranja tirando a mostaza.
Dirección de degradado, lo dejamos como está, en 180 grados.
La posición inicial y final la marcamos en 40%. Este valor puede variar dependiendo de si estas usando barra lateral o no. Si cambiamos los valores de estos campos se creará un fundido/transición entre los colores elegidos. Pero nosotros queremos que haga el efecto de continuación con la sección anterior y ésta para nuestro efecto de superposición. Por eso hacemos coincidir las posiciones inicial y final. Echa un vistazo a la imagen.
Ahora, sin salir de la configuración de la sección, activamos la pestaña diseño y, en el panel espaciado, relleno personalizado, inferior 10%. Esto dará un poco de aire bajo la sección. Reduce o aumenta según te convenga. Con esto, ya hemos terminado con la sección.
Configurando la fila
Es el turno ahora de la fila. De modo que, en los ajustes de la fila (imagen izquierda), activamos la pestaña diseño (en contenido no hay nada que hacer). Queremos reducir un poco la anchura de nuestra fila para que se posicione correctamente, así que en tamaño, marcamos usar ancho personalizado y ajustamos al 80%.
A continuación, nos interesa eliminar cualquier espacio que haya alrededor de nuestra fila para que la sombra que vamos a aplicar se vea bien. Así que, en separación > relleno personalizado, ponemos todos los valores a cero (superior, derecha, inferior, izquierda).
Aplicando la sombra a la fila
La fila será el elemento que mostrará la sombra, por lo tanto, vamos a la zona de configuración de sombras, todavía en la pestaña diseño de los ajustes de la fila. Pulsamos cualquier cuadro para aplicar una sombra y estos son los ajustes que debemos introducir.
Posición horizontal de sombra: 0 px.
Posición vertical de sombra: 0 px.
Fuerza de desenfoque de sombra: 50 px.
Fuerza de extensión de sombra: 20 px.
Dejamos el valor por defecto en color, que es negro con transparencia al 30% y el tipo de sombra en exterior. Acompaño captura.
Guardamos y salimos de la configuración de la fila.
Configuración del módulo imagen
Finalmente volvemos a nuestro módulo de imagen para crear un marco blanco a la imagen. Pero lo haremos con los ajustes de sombras. ¿Por qué lo vamos a hacer con estos ajustes si podemos usar la opción borde en los ajustes de la imagen? Lo haremos con la configuración de sombra por varios motivos. En primer lugar, por practicar con las sombras. Otro motivo es que si usáramos otros módulos, como por ejemplo vídeo, no tenemos la opción borde y con los ajustes de sombra sí que podemos aplicar un contorno. Además, podemos elegir entre interno o externo en la opción de sombra, lo que nos da un poco más de control.
Dicho esto, abrimos la configuración del módulo y, en la pestaña diseño, zona de configuración de sombras, ajustamos:
Posición horizontal de sombra: 0 px.
Posición vertical de sombra: 0 px.
Fuerza de desenfoque de sombra: 0 px.
Fuerza de extensión de sombra: 20
En color de sombra, seleccionamos blanco y el tipo de sombra lo dejamos en exterio, pero cámbialo solo para comprobar lo que te decía mas arriba. Y listo, no ha sido complicado, verdad?
Si quieres crear superposición de contenidos con otro método, puedes visitar este otro tutorial pulsando AQUÍ
Si te ha parecido interesante no olvides compartir y como siempre, ¡Gracias por tu tiempo!
