Hay diferentes tipos de formas de diseñar secciones destacadas en su sitio web. Puede usar colores simples, imágenes de fondo o también puede usar fondos con textura que hacen que su sitio web sea más sofisticado y moderno al mismo tiempo. En esta publicación, compartiremos 5 fondos texturizados prefabricados que puedes descargar de forma gratuita. Además de eso, también le mostraremos cómo usar estos fondos texturizados con Divi y modificar la paleta de colores según sus necesidades.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los diferentes fondos texturizados que podrá descargar de forma gratuita después de agregarlos a una página y modificarlos con Divi.
Fondo texturizado #1
Fondo texturizado #2
Fondo texturizado #3
Fondo texturizado #4
Fondo texturizado #5
Descargar los archivos de este tutorial
Para poner sus manos en estos fondos texturados gratuitos, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondades de Divi y un paquete de 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Descargue 5 texturas de fondo de sección de héroe únicas, abstractas y gratuitas para Divi
Suscríbete a nuestro canal de Youtube
Recrear sección de héroe
Ajustes de sección
Espaciado
Comience creando una nueva sección estándar y agregue el siguiente relleno a la subcategoría Espaciado:
- Arriba: 228px
- Abajo: 228px
Configuración de la primera fila
Estructura de la columna
Continúe inmediatamente agregando una fila a esa sección con la siguiente estructura de columnas:
Configuración de la segunda fila
Estructura de la columna
Justo debajo de la fila que acaba de crear, agregue otra fila con una columna.
Primer módulo de texto
Configuración de texto
Ahora, regrese a la primera fila que creó, agregue un módulo de texto a la segunda columna y use ‘Oscuro’ como color de texto en la subcategoría de texto.
Ajustes de texto de encabezado
A continuación, abra la subcategoría Texto de encabezado y aplique la siguiente configuración:
- Fuente del título: Poppins
- Peso de la fuente del título: Regular
- Alineación del texto del título: Centro
- Tamaño del texto del encabezado: 56 px
- Altura de la línea de encabezado: 1,3 em
Espaciado
Continúe abriendo la subcategoría Espaciado y agregando ’10px’ al margen inferior.
Segundo módulo de texto
Configuración de texto
Justo debajo del módulo de texto anterior, agregue también otro módulo de texto y aplique la siguiente configuración a la subcategoría de texto:
- Color del texto: oscuro
- Fuente del texto: Poppins
- Peso de fuente de texto: regular
- Tamaño del texto: 16px
- Altura de línea de texto: 2em
- Orientación del texto: Centro
Alineación
Ahora que ha terminado con la primera fila, pase a la siguiente fila, agregue un Módulo de botones y elija ‘centrar’ como Alineación de botones.
Configuración de botones
A continuación, abra la subcategoría Botón y haga uso de las siguientes configuraciones:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Color del texto del botón: #FFFFFF
- Color de fondo del botón: #000000
- Fuente del botón: Poppins
- Peso de fuente: semi negrita
- Estilo de fuente: Mayúsculas
Espaciado
Por último, abra la subcategoría Espaciado y agregue el siguiente Relleno personalizado a su botón:
- Superior: 12px
- Derecha: 24px
- Abajo: 12px
- Izquierda: 24px
Agregar fondo texturizado #1
Configuración de la imagen de fondo
Ubique el archivo ‘ texture-background-1.png ‘ en la carpeta que descargó al comienzo de esta publicación y agréguelo como imagen de fondo de su sección junto con las siguientes configuraciones:
- Tamaño de la imagen de fondo: conversión
- Posición de la imagen de fondo: centro inferior o centro
- Repetición de la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: Normal
Fondo degradado
Los fondos texturizados incluyen algunas partes con formas transparentes que le permiten agregar un degradado o un fondo de un solo color sin tener que aplicarlo a toda la imagen. Puede elegir el fondo degradado que desee (uno que coincida con la paleta de colores de su sitio web), pero para el ejemplo que hemos configurado a continuación, hemos elegido las siguientes configuraciones:
- Primer color: #2a00ff
- Segundo color: #baffdb
- Tipo de gradiente: Radial
- Dirección radial: Centro
- Posición de inicio: 0%
- Posición final: 100%
Agregar fondo texturizado #2
Configuración de la imagen de fondo
Si desea agregar el segundo fondo texturizado, ubique el archivo ‘ texture-background-2.png ‘ en la carpeta que descargó al comienzo de esta publicación, utilícelo como imagen de fondo de su sección y aplique la siguiente configuración a él:
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: centro inferior o centro
- Repetición de la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: Normal
Fondo degradado
Use el siguiente fondo degradado (o cualquier otro tipo de fondo degradado) junto con él:
- Primer color: rgba(255,229,102,0.66)
- Segundo Color: rgba(172,95,232,0.68)
- Tipo de gradiente: lineal
- Dirección del gradiente: 102 grados
- Posición inicial: 44%
- Posición final: 58%
Agregar fondo texturizado #3
Configuración de la imagen de fondo
Para el tercer fondo texturizado, ubique el archivo ‘ texture-background-3.png ‘ en la carpeta descargada y use la misma configuración que para los dos fondos texturizados anteriores.
Fondo degradado
Hemos usado este fondo texturizado junto con el siguiente fondo degradado:
- Primer color: #dd008c
- Segundo Color: #ecef4c
- Tipo de gradiente: lineal
- Dirección del gradiente: 120 grados
- Posición inicial: 19%
- Posición final: 19%
Agregar fondo texturizado #4
Configuración de la imagen de fondo
Para el siguiente fondo texturizado, ubique el archivo ‘ texture-background-4.png ‘ en la carpeta descargada y use la misma configuración que en los ejemplos anteriores.
Fondo degradado
Junto con el fondo texturizado, use el siguiente fondo degradado:
- Primer color: rgba(198,198,198,0.84)
- Segundo Color: #0eafea
- Tipo de gradiente: lineal
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 50%
Agregar fondo texturizado #5
Configuración de la imagen de fondo
El último archivo de imagen de fondo texturizado se llama ‘ texture-background-5.png ‘. Cárguelo como imagen de fondo de su sección y mantenga la misma configuración que para los fondos texturizados anteriores. 
Fondo degradado
Para este último ejemplo, estamos usando el siguiente fondo degradado:
- Primer color: #e04f47
- Segundo Color: rgba(131,0,233,0.68)
- Tipo de gradiente: lineal
- Dirección del gradiente: 190 grados
- Posición de inicio: 0%
- Posición final: 100%
Agregue CSS Parallax para la interacción
Configuración de la imagen de fondo
Puede aplicar este efecto de paralaje a cada uno de los fondos texturizados yendo a la pestaña de imagen de fondo, habilitando la opción ‘Usar efecto de paralaje’ y seleccionando el Método de paralaje ‘CSS’.
Resultado
Ahora que hemos repasado todos los fondos texturizados, echemos un vistazo final al resultado.
Fondo texturizado #1 en acción
Fondo texturizado #2 en acción
Fondo texturizado #3 en acción
Fondo texturizado #4 en acción
Fondo texturizado #5 en acción
Pensamientos finales
Esperamos que haya disfrutado de esta publicación de blog y de todos los recursos gratuitos que la acompañan. El uso de fondos texturizados para su próximo proyecto realmente puede ayudar a elevar el diseño de su sitio web, especialmente en el sector creativo. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!