Darle a su sitio web esa atención adicional a los detalles puede influir en su estilo general de diseño web más de lo que piensa. Por lo general, son los pequeños detalles los que ayudan a las personas a distinguir un tipo de sitio web de plantilla de uno personalizado.
Hay varias formas en las que puede abordar el logro de diseños elevados. Una de las cosas que puede hacer es usar patrones sutiles de repetición de fondo para cualquier elemento de diseño en su página. Esto no solo lo ayuda a reducir el tamaño de las imágenes de fondo, sino que también lo ayuda a llenar fondos en blanco sin sobrecargarlos.
En esta publicación, podrá descargar 6 patrones de fondo básicos pero versátiles que puede usar al crear cualquier tipo de sitio web con Divi . Estos patrones son excelentes para guardarlos en la parte de atrás de su bolsillo cuando necesite darle vida a su diseño web.
Echemos un vistazo al tipo de resultado que puede lograr en su sitio web utilizando estos patrones de fondo:
Descarga los patrones de fondo GRATIS
Para poner sus manos en los patrones de fondo gratuitos, primero deberá descargarlo 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 y viernes! 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!
Acercarse
- Una vez que haya descargado la carpeta y la haya descomprimido, encontrará 5 carpetas diferentes
- Cada una de estas carpetas representa un conjunto de dimensiones diferente: 1000×1000, 500×500, 100×100, 50×50 y 25×25
- Aunque estos son técnicamente los mismos patrones, el resultado final en su sitio web se verá diferente según el conjunto de dimensiones que decida usar.
- Estamos combinando estos patrones con las opciones de fondo de Divi para crear el efecto de repetición de fondo.
- Esto no solo mantendrá la coherencia de la imagen de fondo, sino que también disminuirá la necesidad de imágenes de fondo de alta resolución.
Cómo funciona
Elija una sección en su página
Puede aplicar estos patrones de fondo a cualquier elemento de diseño en su página. Lo demostraremos agregando como fondo de sección. Pero no dude en agregar estos mismos patrones a otros elementos de diseño, como filas, columnas y módulos. Cuanto más pequeño sea el elemento de diseño, más pequeño deberá ir con la dimensión de su patrón, dependiendo de cómo desee que se vea y se sienta.
Elija sus dimensiones preferidas
Patrón 1: 1000×1000
Configuración de fondo
Para lograr el resultado que compartimos anteriormente, continúe y ubique el patrón n. ° 1 en la carpeta 1000 × 1000 de su descarga. Luego, súbalo a la configuración de fondo de su sección y use las siguientes configuraciones junto con él:
- Tamaño de la imagen de fondo: Tamaño real
- Posición de la imagen de fondo: Centro
- Imagen de fondo Repetir: Repetir
Con superposición de degradado
¿Quieres mezclar el patrón usando fondos degradados? Puedes hacer eso también. En el siguiente ejemplo, hemos usado un color sólido y uno semitransparente en combinación con la colocación del degradado sobre la imagen de fondo para crear el efecto de fusión.
- Color 1: #E2E2E2
- Color 2: rgba (255.255.255, 0,37)
- Tipo de gradiente: lineal
- Dirección del gradiente: 181 grados
- Posición inicial: 7%
- Posición final: 35%
Patrón #1 : 500×500
Configuración de fondo
También puede hacer que el patrón aparezca solo horizontal o verticalmente usando las opciones de fondo integradas de Divi. Para el ejemplo anterior, hemos utilizado el archivo de imagen del patrón #1 de 500 × 500 dimensiones. Después de cargarlo, 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: centro superior
- Imagen de fondo Repetir: Repetir X (horizontal)
Patrón #2 : 500×500
Configuración de fondo
Hemos hecho lo mismo usando el segundo patrón en tu carpeta de 500×500.
- Tamaño de la imagen de fondo: Tamaño real
- Posición de la imagen de fondo: centro superior
- Imagen de fondo Repetir: Repetir X (horizontal)
Patrón #3 : 100×100
Configuración de fondo
Para el siguiente ejemplo, ubique el patrón #3 en la carpeta de dimensiones 100×100 y combínelo con las siguientes opciones de fondo que harán que el patrón ocupe toda la sección:
- Tamaño de la imagen de fondo: Tamaño real
- Posición de la imagen de fondo: Centro
- Imagen de fondo Repetir: Repetir
Patrón #4 : 50×50
Configuración de fondo
Cuanto más pequeñas sean las dimensiones, mayor será la frecuencia del patrón. Ubique el fondo #4 en la carpeta de dimensiones 50×50 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 superior
- Imagen de fondo Repetir: Repetir
Patrón #5 : 100×100
Configuración de fondo
El quinto patrón brinda un diseño sorprendente y sutil cuando usa el conjunto de dimensiones de 100 × 100 con la siguiente configuración de fondo:
- Tamaño de la imagen de fondo: Tamaño real
- Posición de la imagen de fondo: centro superior
- Imagen de fondo Repetir: Repetir
Patrón #6 : 25×25
Configuración de fondo
Por último, pero no menos importante, ubique el patrón #6 en la carpeta de dimensiones 25×25 y cárguelo en el fondo de su sección junto con la siguiente configuración de fondo:
- Tamaño de la imagen de fondo: Tamaño real
- Posición de la imagen de fondo: centro superior
- Imagen de fondo Repetir: Repetir
Use patrones para fondos de filas, columnas y módulos también
Los ejemplos que hemos manejado anteriormente son solo algunas de las opciones que tiene. Obtendrá un resultado diferente para cada patrón si experimenta con las diferentes dimensiones que se incluyen. Además de eso, también puede usar las opciones de fondo de Divi para crear varios resultados. No está limitado a usar estos patrones de fondo solo para secciones. Puede usarlos para cada elemento de diseño en Divi’s Visual Builder. El tamaño de su patrón debe coincidir con el tamaño de su elemento. Utilice los patrones para fondos de filas, columnas y módulos para crear diseños únicos y personalizados.
Avance
Ahora que manejó algunos resultados finales diferentes que puede obtener con los patrones de fondo, echemos un vistazo final al resultado final:
Pensamientos finales
En el diseño web, es importante prestar atención a los detalles. Hay muchas maneras de hacerlo, pero en esta publicación, hemos manejado específicamente el uso de patrones de fondo para obtener fondos sutiles para elementos de diseño usando Divi. Le proporcionamos 6 patrones diferentes que puede descargar y usar de forma gratuita. Para cada uno de los patrones, también proporcionamos diferentes dimensiones que conducen a diferentes resultados una vez que se usan en una página. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!