Los 5 mejores lugares para encontrar un patrón de fondo (+ Cómo agregarlo a WordPress)

¿Necesita el fondo de patrón perfecto para darle vida a su sitio de WordPress? Bien utilizados, los patrones de fondo le permiten mejorar el diseño de su sitio sin distraerse de su contenido. Pero requieren un poco más de esfuerzo para usar que un color sólido. Es decir, deberá encontrar un patrón de fondo que le guste antes de poder agregarlo a su sitio de WordPress.

Con ese fin, pasaré esta publicación dándote cinco lugares geniales donde puedes encontrar patrones de fondo para tu sitio de WordPress. Luego, después de decirle dónde encontrarlos, le daré algunos métodos diferentes sobre cómo agregar esos patrones de fondo a su propio sitio de WordPress, ya sea que esté usando Divi u otro tema.

5 lugares útiles para encontrar un patrón de fondo para su sitio web

A continuación, encontrará una lista de sitios donde puede explorar una variedad de fondos de imágenes de patrón que puede usar para su sitio. Estos no son fondos específicos, sino colecciones de búsqueda que puede usar para encontrar fondos de calidad.

1. Patrones sutiles de Toptal

Subtle Patterns de Toptal es una biblioteca de fondos de patrones que, como era de esperar, ofrece patrones de fondo sutiles que no dominarán el resto de su sitio.

Al momento de escribir esta publicación, Subtle Patterns by Toptal ofrece 431 fondos de patrones diferentes que puede usar de forma 100% gratuita. Lo único que necesitas hacer para usar los patrones es dejar un crédito en tu código fuente . No necesita colocar el crédito en su sitio front-end.

No es necesario registrarse para usar el sitio; todo lo que necesita hacer es hacer clic en Descargar para obtener un archivo ZIP que contiene un archivo PNG del fondo elegido.

También puede obtener una vista previa en vivo de cada fondo en el sitio de Patrones sutiles haciendo clic en el botón Vista previa cuando se desplaza sobre un patrón.

Precio: Gratis | Más información

2. La increíble biblioteca de patrones

La Biblioteca de patrones asombrosos es otra fuente útil de fondos de patrones para agregar a su sitio. En palabras de los creadores, «Este proyecto en curso compila patrones compartidos por los diseñadores más talentosos para que los uses libremente en tus diseños».

No todos los patrones son tan sutiles como los que aparecen en la colección Toptal, pero aún puedes encontrar muchas buenas opciones, así como una variedad de otros estilos.

Para navegar por los patrones, puede usar las flechas hacia arriba o hacia abajo en la parte superior derecha, o hacer clic para ver un patrón completamente aleatorio. Una vez que encuentre un patrón que le guste, todo lo que necesita hacer es colocar el cursor sobre la parte superior izquierda para descargar el archivo directamente.

Precio: Gratis | Más información

3. Patterninja

Patterninja adopta un enfoque un poco diferente, ya que en realidad es una herramienta ordenada que lo ayuda a crear fondos de patrones usted mismo, en lugar de una lista de fondos de patrones prefabricados.

Puede cargar sus propias imágenes o elegir entre un conjunto existente de imágenes que funcionan bien con fondos. También puede cambiar el color de fondo principal que aparece detrás de sus imágenes.

La herramienta es bastante fácil de usar y debería ser útil para diseñadores y no diseñadores por igual.

Una vez que termine su patrón, puede descargarlo como PNG o SVG para usarlo en su propio sitio.

Precio: Gratis | Más información

4. Patrones de héroe

Hero Patterns es un recurso de fondo de patrón gratuito del diseñador Steve Schoger. En sus propias palabras, es una «colección de patrones de fondo SVG repetibles para que los uses en tus proyectos web».

Si bien la colección no es tan amplia como las demás, ofrece una variedad sólida. Y puede cambiar fácilmente los colores de fondo y de primer plano, así como la opacidad, directamente en el sitio.

Steve tiene planes de agregar más fondos, por lo que este recurso debería seguir mejorando.

Precio: Gratis | Más información

5. Patrón8

Pattern8 es una colección de patrones de fondo repetibles que puede usar de forma gratuita. Los estilos son amplios y diversos y cubren todo, desde fondos básicos hasta estilos con temas navideños.

Puede ordenar la colección mediante la búsqueda o el uso de filtros de color en los que se puede hacer clic para restringir los colores que se ajusten al esquema de diseño de su sitio.

Precio: Gratis | Más información

Cómo agregar el fondo de su patrón elegido a su sitio de WordPress

La mayoría de las veces, es bastante fácil agregar una imagen de fondo a su sitio de WordPress usando el Personalizador de WordPress, aunque a veces también tendrá que profundizar en el panel de configuración personalizado de su tema si no usa el Personalizador de WordPress.

En esta sección, le mostraré cómo agregar una imagen de fondo tanto a Divi como al tema Twenty Fifteen, pero siempre que use un tema bien codificado que admita imágenes de fondo, debería poder aplicar estas mismas métodos a su sitio de WordPress.

Cómo agregar un patrón de fondo a Divi

Para agregar un patrón de fondo a su sitio de WordPress con Divi, debe ir a Divi → Personalizador de temas . Luego, en la interfaz del personalizador de WordPress, haga clic en Configuración general y luego en Fondo :

Sube tu imagen deseada. Luego, siempre que esté usando un diseño en caja ( su fondo no aparecerá si está usando un diseño de ancho completo ), debería ver aparecer su fondo. También puede cambiar la configuración de mosaico y repetición debajo del lugar donde carga su imagen de fondo.

Cómo agregar un patrón de fondo a un módulo o fila Divi

Si prefiere agregar un patrón de fondo a un solo módulo o fila Divi en lugar de a todo su sitio, necesitará un enfoque ligeramente diferente.

Mientras está en el constructor Divi, haga clic para ingresar a la ventana emergente Configuración para su módulo o fila deseados. Luego, navegue a la pestaña Diseño . Al igual que con el método anterior, puede cargar su imagen de fondo y elegir su estilo:

Con las nuevas opciones de fondo en Divi Builder , también tiene muchas otras opciones para diseñar su fondo.

Cómo agregar un patrón de fondo a Twenty Fifteen

Agregar un patrón de fondo a Twenty Fifteen es similar a agregar un patrón de fondo a Divi. Dirígete a Apariencia → Personalizar . Luego elija la opción Imagen de fondo y cargue la imagen deseada:

Debería ver los cambios actualizados inmediatamente. También puede cambiar la repetición y el posicionamiento si desea modificar las cosas aún más.

Bonificación: agregue fondos con un complemento

Si su tema no le brinda una opción fácil para cambiar las imágenes de fondo , aún puede tener una opción más antes de profundizar en los archivos CSS de su tema.

Pippin Williamson tiene un complemento premium llamado Full Screen Background Images Pro que le permite agregar imágenes de fondo personalizadas a cualquier tema de WordPress codificado correctamente. Cuesta $18, pero también es más fácil de usar si no quieres ensuciarte las manos con CSS.

Envolviendo las cosas

El uso de un fondo de patrón en su sitio de WordPress le permite crear un diseño más interesante que un fondo de color estático. Sin embargo, en lugar de crear uno desde cero, cualquiera de los cinco sitios que enumeré debería poder ayudarlo a encontrar un fondo de calidad para su sitio.

Luego, puede agregar la imagen de fondo elegida a su sitio de WordPress utilizando el Personalizador de WordPress, Divi Builder, un complemento o CSS personalizado.

Ahora te toca a ti: ¿prefieres colores sólidos o fondos estampados en los sitios web? ¿O depende de la estética específica de cada sitio individual?

Imagen en miniatura del artículo por PhotoAmpRetouch / shutterstock.com