Puede atenuar una imagen de fondo en WordPress sin escribir ningún código. Sólo se tarda un par de minutos, y es mucho más fácil de lo que la mayoría de la gente espera.
WordPress incluye un sencillo ajuste que permite añadir una superposición de color transparente a cualquier imagen de fondo. Esto ayuda a que el texto siga siendo legible sin dejar de mostrar el diseño.
En esta guía, te explicaré exactamente dónde encontrar la opción y cómo ajustarla. Es una de las formas más rápidas de mejorar el diseño de tu sitio sin cambiar nada más.
Pasos rápidos para atenuar una imagen de fondo de WordPress:
- Paso 1: Instalar y activar el plugin SeedProd
- Paso 2: Elegir un kit de sitio web o una plantilla de página de destino
- Paso 3: Añada su imagen de fondo a WordPress
- Paso 4: Añadir una superposición transparente para atenuar la imagen de fondo
- Paso 5: Publique sus cambios
- Preguntas frecuentes sobre la atenuación de imágenes de fondo en WordPress
¿Qué es una imagen de fondo de WordPress?
Una imagen de fondo de WordPress es cualquier imagen que aparece detrás del contenido principal de su sitio web. Por ejemplo, puedes tener una imagen de fondo detrás de todo así:
También puede mostrar una imagen detrás de elementos de contenido específicos, como barras laterales, pies de página, cabeceras, etc.
Estas imágenes añaden interés a su sitio web y pueden ayudar a mantener a los visitantes interesados en su contenido. También son esenciales para la imagen de marca de su empresa, ya que ayudan a los usuarios a diferenciar su sitio web de los de la competencia.
¿Por qué debería atenuar las imágenes de fondo en WordPress?
A veces, las imágenes de fondo pueden dificultar la lectura del contenido. Eche un vistazo a este ejemplo:
Es bastante difícil ver lo que dice el texto porque la imagen de fondo es muy vibrante.
Sin embargo, si oscurece la imagen de fondo, conseguirá que el contenido destaque más, lo que facilitará que los visitantes lean, conozcan mejor sus productos y servicios y se conviertan en clientes potenciales.
¿La forma más fácil de atenuar una imagen de fondo en WordPress?
Para atenuar una imagen de fondo en WordPress, la opción más sencilla es añadir una superposición de color transparente. Esto crea contraste entre la imagen y su contenido, por lo que todo es más fácil de leer.
Si utiliza SeedProd, puede hacerlo en unos pocos pasos rápidos:
- Haga clic en la sección con su imagen de fondo
- Abrir el panel de configuración
- Utilice el control deslizante Atenuar fondo para ajustar el brillo
- (Opcional) Añada una capa de color que se adapte a su marca
No se necesita CSS ni HTML. Puede previsualizar los resultados en tiempo real y hacer que su contenido destaque al instante.
Por qué SeedProd es la mejor forma de atenuar las imágenes de fondo
SeedProd es la mejor manera de atenuar las imágenes de fondo en WordPress, ya que no requiere codificación. Viene con un constructor de páginas de arrastrar y soltar, lo que le permite apuntar y hacer clic para personalizar su sitio.
Con su sencilla función de superposición, puedes oscurecer una imagen de fondo arrastrando un simple control deslizante. También puedes crear una superposición de colores y cambiar la posición de la imagen de fondo eligiendo una opción de un práctico menú desplegable.
Además de ayudarle a personalizar las imágenes en su sitio de WordPress, SeedProd también le permite:
- Crear un tema de WordPress desde cero
- Crea tiendas WooCommerce completas
- Cree páginas de destino que conviertan
- Gestione suscriptores y haga crecer su lista de correo electrónico
- Prelance su sitio con una página de próxima creación
- Ponga su sitio web en modo de mantenimiento
- Y mucho más
En resumen: SeedProd hace que sea fácil de personalizar cualquier parte de su sitio de WordPress sin código.
Pasos para atenuar una imagen de fondo en WordPress sin código
Siga estos sencillos pasos para atenuar una imagen de fondo en WordPress sin código CSS o HTML con SeedProd. Prometemos que es mucho más fácil que aprender código y proporciona resultados impresionantes.
Tutorial en vídeo
Paso 1: Instalar y activar el plugin SeedProd
En primer lugar, deberá visitar el sitio web de SeedProd y elegir un nivel de suscripción. Recomendamos SeedProd Pro porque incluye funciones avanzadas de creación de temas.
Una vez que hayas elegido un plan y abierto tu cuenta, dirígete a la sección Descargas de tu panel de usuario y descarga el plugin en tu ordenador. Una vez allí, copia la clave de licencia del plugin para utilizarla más tarde.
A continuación, vaya a su sitio web WordPress e instale y active el plugin SeedProd. Si nunca has hecho esto antes, sigue esta guía para instalar un plugin de WordPress.
Después de activar SeedProd, diríjase a la página SeedProd " Configuración y pegue su clave de licencia en el campo correspondiente.
Una vez que haga clic en el botón Verificar clave, podrá acceder a todas las funciones Pro de SeedProd.
Paso 2: Elegir un kit de sitio web o una plantilla de página de destino
Hay 2 maneras de utilizar SeedProd en su sitio web WordPress. Usted puede:
- Crear un tema de WordPress personalizado desde cero y sustituir el tema actual
- Cree una página de destino independiente y mantenga su tema de WordPress existente
Para esta guía, crearemos un tema personalizado, pero si en su lugar desea crear una página de aterrizaje, puede seguir nuestra guía paso a paso: Cómo crear una página de aterrizaje en WordPress.
Después de configurar tu página, puedes volver a este tutorial para aprender a oscurecer tus imágenes de fondo.
Dado que estamos creando un tema de WordPress para este tutorial, usted tendrá que navegar a SeedProd " Theme Builder de su área de administración de WordPress y haga clic en el botón Temas.
En la siguiente pantalla, verás una galería de kits de sitios web que puedes utilizar para crear un tema de WordPress al instante.
Cada kit viene con todas las páginas y plantillas temáticas que su sitio web necesita. A continuación, puede personalizar cada página con el constructor de páginas de arrastrar y soltar de SeedProd.
Desplácese por los kits hasta que encuentre uno que se adapte a su negocio y, a continuación, pase el ratón por encima de la miniatura del kit y haga clic en el icono de la marca de verificación.
Tras importar el kit de sitio web, verás una lista de las partes que componen tu nuevo tema de WordPress. Para personalizar cualquier parte, haz clic en el enlace Editar diseño, y se abrirá en el constructor visual de páginas, donde podrás añadir tu imagen de fondo personalizada.
Empecemos por editar el diseño de la página de inicio.
Paso 3: Añada su imagen de fondo a WordPress
Cuando abra una plantilla en el constructor de páginas de SeedProd, verá un diseño similar al del ejemplo siguiente.
Hay bloques y secciones para añadir contenido a la izquierda y una vista previa en vivo de tu diseño a la derecha con elementos utilizados en el kit de tu sitio web.
Puedes personalizar tu plantilla fácilmente haciendo clic en cualquier elemento de la vista previa. Se abrirá un panel con los ajustes de ese elemento y las opciones de personalización.
También puede arrastrar un bloque de la izquierda a su página para añadir más contenido, como formularios de suscripción, iconos de redes sociales, vídeos, imágenes, botones, etc.
Añadir una imagen de fondo a cualquier sección es igual de fácil. Haga clic en el área que desea editar y elimine la imagen de fondo predeterminada.
A continuación, puede cargar una nueva imagen desde su ordenador o desde la biblioteca multimedia de WordPress.
Paso 4: Añadir una superposición transparente para atenuar la imagen de fondo
Como puede ver en nuestro ejemplo anterior, la imagen de fondo que estamos utilizando no contrasta lo suficiente con el titular, lo que dificulta su lectura.
Arreglarlo es muy fácil y sólo requiere unos pocos clics. Simplemente busque el encabezado Fondo atenuado en la configuración de la sección y arrastre el control deslizante hacia la derecha hasta que su encabezado destaque.
También puede utilizar el mismo panel para añadir una superposición de color a su imagen de fondo. Es una forma excelente de vincular los colores de tu marca al diseño web y hacer que tu sitio sea más reconocible.
Para ello, busque el encabezado Color de superposición y haga clic en el selector de color para seleccionar un color personalizado. Elegir un color es bastante sencillo. Puede apuntar y hacer clic para encontrar un color que funcione o utilizar las flechas para introducir un:
- Valor hexadecimal
- Valor RGBA
- Valor HSLA
Es una solución excelente si ya sabes qué color quieres utilizar.
También puedes:
- Ajustar la posición de la imagen de fondo
- Cambiar el color de fondo de una sección
- Utilizar un degradado en lugar de una imagen
Por ejemplo, si haces clic en la flecha desplegable, podrás colocar el fondo de las siguientes formas:
- Cubierta de pantalla completa
- Cubierta de pantalla completa - Fija
- Pantalla completa Contener
- Contenedor de pantalla completa - Fijo
- 100% Ancho Superior
- 100% Anchura Fondo
- Repetición de fondo
- Repetición Horizontal Superior
- Repetición Horizontal Inferior
- Repetir centro vertical
- Posición personalizada
Al elegir la opción Posición personalizada se abren opciones de personalización más detalladas.
Por ejemplo, puede cambiar la posición X o Y para mostrar una parte específica de su imagen. También puedes cambiar el tipo de adjunto a fijo o de desplazamiento, establecer cómo se repite la imagen y cambiar el tamaño del fondo.
Como resultado, puede adaptar cada área de sus imágenes de fondo para conseguir el aspecto y la sensación perfectos.
¿Puedo atenuar las imágenes de fondo en otras partes de WordPress?
Ahora que sabe cómo atenuar las imágenes de fondo con SeedProd, puede utilizar el conocimiento en otras partes de su diseño web.
Por ejemplo, puede añadir una imagen de fondo a filas y columnas y añadir una propiedad de filtro para atenuarla, de modo que su contenido destaque.
Incluso puedes personalizar la barra lateral de tu blog con una imagen de fondo, para que sea más fácil de ver en comparación con las entradas de tu blog. Solo tienes que subir tu imagen, ajustar rápidamente la configuración y estarás listo para publicar.
Paso 5: Publique sus cambios
Para que los visitantes de su sitio web vean sus nuevas imágenes de fondo, tendrá que asegurarse de habilitar su tema SeedProd personalizado. Para ello, dirígete a SeedProd " Theme Builder y activa la opción Enable SeedProd Theme en la posición "Yes".
Ya está. Ahora puedes previsualizar tu tema y ver tus fondos superpuestos en acción.
He aquí un ejemplo de la nueva imagen de fondo de nuestra página de inicio:
También puede ver nuestra sección "Quiénes somos" y las imágenes de fondo de la barra lateral:
Preguntas frecuentes sobre la atenuación de imágenes de fondo en WordPress
Si tu imagen de fondo es bonita pero dificulta la lectura del texto, atenuarla es una solución sencilla que puede transformar tu página.
Le mostré cómo hacerlo con SeedProd utilizando el control deslizante de Fondo Atenuado y el color de superposición opcional. Usted puede utilizar esto para las imágenes de ancho completo héroe, fondos de sección, o incluso barras laterales - en cualquier lugar que desee un mejor contraste sin perder su diseño.
¿Y lo mejor? No necesitas meterte con CSS o archivos de temas. Solo tienes que arrastrar, ajustar y publicar.
¿Quieres más formas de personalizar tu sitio sin tocar código? Echa un vistazo a estos tutoriales:
- La navegación en las páginas de aterrizaje está muerta: he aquí por qué
- Cómo crear animaciones de texto en WordPress (pasos sencillos)
- Cómo crear divisores de sección elegantes para sitios web de WordPress
¿Listo para sumergirte y personalizar tu sitio WordPress sin código?
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
