Descargue 10 imágenes de fondo de la sección de fluidos GRATIS para Divi
Publicado: 2018-10-07Si está buscando refrescar la apariencia de sus secciones, esta podría ser la publicación ideal para usted. Hemos creado 10 imágenes de fondo de secciones fluidas diferentes que puede descargar de forma gratuita y usar en cualquier sitio web que esté creando. Además de eso, también le mostraremos cómo combinar estas imágenes de fondo de sección fluida con las opciones integradas de Divi. Podrá asignar cualquier fondo degradado a su imagen de fondo fluida y combinarlo con un fondo degradado de fila para asegurarse de que su contenido también siga siendo legible.
¡Hagámoslo!
Avance
Comencemos echando un vistazo a las 10 imágenes de fondo de la sección fluida diferentes que podrá descargar más adelante en la publicación. Hemos combinado las imágenes con fondos degradados para crear resultados únicos. También compartiremos cada una de las combinaciones de degradados en esta publicación, pero siéntase libre de experimentar con diferentes colores para lograr el resultado final deseado.
Descargue las imágenes de fondo de la sección de fluidos GRATIS
Para poner sus manos sobre las imágenes de fondo de la sección de fluidos gratis, primero deberá descargarlas usando el botón de abajo. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Recrear sección
Agregar nueva sección regular
Espaciado
Una vez que haya descargado todos los archivos de imagen, vaya a su sitio web de WordPress y abra una página nueva o existente. Luego, usando Visual Builder de Divi, agregue una nueva sección regular. Abra su configuración y cambie los valores de Espaciado.
- Relleno superior: 0px
- Acolchado inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y realice cambios en la configuración de Tamaño.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
Espaciado
Agregue también algunos valores de relleno a la configuración de Espaciado.
- Acolchado superior: 312px
- Acolchado inferior: 312px
- Relleno de la columna izquierda: 50px
- Relleno de la columna derecha: 50px
Agregar módulo de texto
Agregar contenido
¡Es hora de comenzar a agregar los módulos! El primer módulo que necesitamos es un módulo de texto. Continúe y agregue algo de contenido al cuadro de contenido, preferiblemente un título H2 y un párrafo.
Configuración de texto H2
Vaya a la configuración de texto H2 a continuación y aplique los siguientes cambios:
- Fuente del encabezado 2: Montserrat
- Peso de fuente del encabezado 2: Ultra Bold
- Color del texto del encabezado 2: #FFFFFF
- Tamaño del texto del encabezado 2: 82 px (escritorio), 60 px (tableta), 40 px (teléfono)
- Altura de línea de rumbo 2: 1.4em
Configuración de texto
Cambie también la configuración general del texto.
- Color del texto: #FFFFFF
- Tamaño del texto: 16px
- Altura de la línea de texto: 1.9em
- Orientación del texto: centro
Dimensionamiento
Continúe disminuyendo el ancho de este módulo en el escritorio.
- Ancho: 58% (escritorio), 100% (tableta y teléfono)
- Alineación del módulo: centro
Agregar módulo de botones
Agregar copia
El segundo y último módulo que necesitamos es un módulo de botones. Después de agregar el módulo debajo del Módulo de texto, agregue una copia.
Alineación de botones
A continuación, cambie la alineación de botones.
- Alineación de botones: centro
Configuración de botones
Luego, vaya a la configuración del botón y realice algunos cambios.
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 18px
- Color del texto del botón: # 000000
- Color de fondo del botón: #FFFFFF
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espacio entre letras del botón: -1px
- Fuente del botón: Montserrat
- Peso de fuente: Ultra Bold
- Estilo de fuente: mayúsculas
Espaciado
Por último, pero no menos importante, agregue algo de espacio entre el módulo anterior y este agregando un margen superior.
- Margen superior: 25px
Fondo de la sección de fluidos # 1
Fondo degradado de sección
Utilice el siguiente fondo degradado para su sección:
- Color 1: # 000000
- Color 2: # 2d5b9b
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-1.png ' que puedes encontrar en la carpeta de descargas y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: Centro
Fondo degradado de fila
Para colmo, agregue un degradado de fila en la parte superior del fondo de su sección. Esto hará que el texto sea más legible. También te ayudará a agregar algo de profundidad a tu página.
- Color 1: rgba (0,0,0,0.67)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Fondo de la sección de fluidos # 2 y # 3
Fondo degradado de sección
Las imágenes de fondo de la segunda y tercera sección de fluido utilizan el siguiente fondo de degradado de sección:
- Color 1: # 4f009e
- Color 2: # fa00ff
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-2.png ' o ' fluid-style-3.png ' que puedes encontrar en la carpeta de descargas y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: Centro
Fondo degradado de fila
Agregue también un fondo degradado de fila sutil:
- Color 1: rgba (255,48,75,0.13)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Fondo de la sección de fluidos # 4
Fondo degradado de sección
Utilice el siguiente fondo degradado para su sección:
- Color 1: # 00245e
- Color 2: # ffee00
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-4.png ' que puedes encontrar en la carpeta de descargas y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: Centro
Fondo degradado de fila
Para terminar, agregue un fondo degradado de fila usando la siguiente configuración:
- Color 1: rgba (0,0,0,0.37)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Antecedentes de la sección de fluidos # 5
Fondo degradado de sección
Agregue el siguiente fondo degradado a su sección:
- Color 1: # 04000f
- Color 2: # 00436d
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Luego, cargue el archivo ' fluid-style-5.png ' que puede encontrar en la carpeta de descargas y combínelo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: Centro
Fondo degradado de fila
Complete su diseño usando el siguiente fondo degradado de fila:
- Color 1: rgba (0,0,0,0.58)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Fondo de la sección de fluidos # 6
Fondo degradado de sección
Utilice la siguiente combinación de fondo de degradado de sección impresionante:
- Color 1: # 4800ff
- Color 2: # c854ff
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-6.png ' que puedes encontrar en la carpeta de descargas y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: Centro
Fondo degradado de fila
Por último, pero no menos importante, agregue una superposición de fondo degradado de fila.
- Color 1: rgba (0,0,0,0.51)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Fondo de la sección de fluidos # 7
Fondo degradado de sección
Aplica la siguiente configuración de fondo degradado a tu sección:
- Color 1: # ff8300
- Color 2: # 52006b
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-7.png ' que puedes encontrar en la carpeta de descargas y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: arriba a la derecha
Fondo degradado de fila
Por último, agregue un fondo degradado de fila en la parte superior de su sección.
- Color 1: rgba (106,0,198,0.34)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Fondo de la sección de fluidos # 8
Fondo degradado de sección
Aplica el siguiente fondo degradado azul a tu sección:
- Color 1: # 0b43dd
- Color 2: # 09f9ed
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-8.png ' que puedes encontrar en la carpeta de descargas y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: arriba a la izquierda
Fondo degradado de fila
Complete su diseño aplicando un fondo degradado de fila.
- Color 1: rgba (0,7,119,0.57)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: lineal
- Dirección radial: centro
Fondo de la sección de fluidos # 9
Fondo degradado de sección
Agregue el siguiente fondo degradado a su sección:
- Color 1: # 051f89
- Color 2: # 6d0272
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-9.png ' que puedes encontrar en la carpeta de descargas y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
Fondo degradado de fila
Por último, pero no menos importante, aumente la legibilidad de su contenido utilizando un fondo degradado de fila.
- Color 1: rgba (0,0,0,0.59)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Fondo de la sección de fluidos # 10
Fondo degradado de sección
El último ejemplo necesita la siguiente sección de fondo degradado:
- Color 1: # 051f89
- Color 2: # 6d0272
- Tipo de degradado: lineal
- Dirección del gradiente: 137 grados
- Posición inicial: 48%
Imagen de fondo de la sección
Sube el archivo ' fluid-style-10a.png ' que puedes encontrar en la carpeta de descarga y combínalo con las siguientes configuraciones de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: arriba a la izquierda
Fondo degradado de fila
A continuación, agregue un fondo degradado de fila.
- Color 1: rgba (0,0,0,0.59)
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
Imagen de fondo de fila
Agrega también una imagen de fondo a tu fila. Busque ' fluid-style-10b.png ' en la carpeta de descarga, cárguelo y combínelo con la siguiente configuración de fondo:
- Tamaño de la imagen de fondo: tamaño real
- Posición de la imagen de fondo: abajo a la derecha
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final.
Pensamientos finales
En esta publicación, hemos compartido 10 imágenes de fondo de sección fluida diferentes y únicas que puede usar en sus propios sitios web sin ninguna restricción. Además de eso, también le proporcionamos fondos de degradado impresionantes que puede combinar con las imágenes de fondo fluidas utilizando solo las opciones integradas de Divi. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación y háganos saber cuál de las imágenes de fondo de la sección fluida le gusta más.