Cómo agregar una imagen de fondo en sus publicaciones y páginas de WordPress

¿Le gustaría agregar un elemento de belleza adicional a su sitio? Una forma de hacerlo es agregar una imagen de fondo a sus páginas de WordPress. Una imagen de fondo es una imagen o diseño que se coloca detrás del contenido de una página para embellecer la página. Y hay diferentes formas de agregar imágenes de fondo a los sitios de WordPress. En esta guía, le mostraremos tres formas de hacerlo con bastante facilidad. Pero antes de eso, discutamos algunos de los beneficios de las imágenes de fondo de WordPress. Por supuesto, si simplemente desea averiguar “cómo”, pase a esa sección.
Contenido:
Por qué agregar una imagen de fondo
Desventajas de agregar una imagen de fondo
Cómo agregar una imagen de fondo
La opción de tema predeterminada
Desventajas de la opción de tema predeterminada
Uso de complementos de WordPress
Cómo agregar una imagen de fondo a WordPress usando Elementor
Agregar superposición de fondo
Fondos avanzados de WordPress (AWB)
Cómo usar el complemento AWB
Agregue manualmente la imagen de fondo usando CSS
Cómo agregar una imagen de fondo a las páginas de WordPress
Agregue una imagen de fondo en las páginas de publicación
Agregar una imagen de fondo a las páginas de categoría
Conclusión
¿Por qué agregar un fondo de pantalla a WordPress simplemente embellece su sitio? Mostrar una imagen en el fondo de su sitio agrega estética y profesionalismo, en oposición al uso de un fondo simple.
En el pasado, las personas han tratado de mantener sus diseños de sitios web lo más simples posible. Aunque funcionó bien en ese momento, las cosas han cambiado desde entonces. Con el aumento en el número de sitios web a nivel mundial, es importante asegurarse de notar entre la competencia. Una forma de lograr esto es mejorar el diseño de su sitio web. El uso de una imagen de fondo hace exactamente esto para su sitio de WordPress. Las desventajas de agregar una imagen de fondo como en el caso de todo lo que tiene ventajas, probablemente haya desventajas si no se usan correctamente. A continuación discutiremos algunos de ellos. En primer lugar, algunas imágenes de fondo pueden parecer totalmente desplazadas y pueden interrumpir el contenido de su página. Esto resultaría en que los usuarios se pierdan el mensaje que tiene la intención de enviar en su página en segundo lugar, las imágenes de fondo que no son responsables de los dispositivos móviles pueden afectar el uso de su sitio web en su móvil. La mayoría de los usuarios acceden a Internet en sus dispositivos móviles. Y por esta razón, la compatibilidad con los dispositivos móviles debería ser su principal preocupación como propietario de un sitio. Finalmente, si usa una imagen con un tamaño de archivo grande, esto puede aumentar el tiempo de carga de su sitio, como resultado, un aumento en el tiempo de carga puede conducir a altas tasas de rechazo, lo que a su vez podría afectar su SEO de página.
Por supuesto, puede evitar esto utilizando un complemento de compresión de imagen o simplemente comprimiendo la imagen en línea antes de cargarla en su sitio web. Cómo agregar una imagen de fondo en sus publicaciones y páginas de WordPress Hay tres formas de agregar una imagen de fondo a los sitios de WordPress. Utilizan la opción de tema implícito, con complementos o usan códigos CSS personalizados. A continuación, le mostraremos cómo usar cada uno de ellos. La opción de tema predeterminada algunos temas de WordPress tienen soporte para usar una imagen como fondo de sus páginas. Si su tema lo acepta, puede activarlo desde la página de personalización en el panel de administración. Para comenzar, inicie sesión en el tablero de WordPress y luego acceda a la personalización. Esto mostrará la página de personalización de WordPress.
En el lado derecho, verá una vista previa en vivo de su sitio con cambios recientes. El panel izquierdo contiene las diferentes personalizaciones ofrecidas por su tema para establecer la imagen de fondo, haga clic en el fondo.
En el menú “Fondo”, puede usar una imagen o colores para el fondo. Para usar una imagen, haga clic en el botón Seleccionar imagen.

Luego seleccione una imagen de su biblioteca Media WordPress. Para cargar una nueva imagen, seleccione la pestaña “Cargar archivos”. Luego haga clic en Seleccione los archivos y elija la imagen en su computadora.

Una vez que haya subido su imagen en su sitio, haga clic en el botón Pick.

Para cambiar el tamaño y la visualización de la imagen, haga clic en el menú desplegable “Presetado” y seleccione de las opciones disponibles. Puede probar cada opción para determinar cuál funciona mejor con su imagen en la “posición de la imagen”, puede elegir el ángulo con el que desea alinear la imagen. Cuando haya terminado de personalizar la imagen, haga clic en Publicación para realizar los cambios. Puede visitar cualquier página en su sitio web para ver cómo se ve el fondo. Las desventajas de la opción de fondo del tema predeterminado La desventaja de usar la opción de fondo predeterminada ofrecida por la mayoría de los temas es que no ofrece mucha flexibilidad y control sobre cómo se muestran las imágenes de fondo en sus páginas.

Además, la imagen de fondo se aplica globalmente en las publicaciones y páginas de todo el sitio web. Entonces, si desea usar un fondo diferente para otras páginas y publicaciones, puede ser difícil para usted. Afortunadamente, con los complementos de WordPress para agregar imágenes de fondo, obtiene mucho control y flexibilidad al agregar una foto de fondo a cualquier sección o página en su sitio, use complementos de WordPress si los conjuntos de temas no tienen una opción para agregar una imagen como fondo , puede usar un complemento para agregar. En esta sección, mostraremos cómo hacer esto usando dos complementos.

Cómo agregar una imagen de fondo a WordPress usando elemento elemental es una de las páginas más populares que generan arrastrar y soltar para WordPress. El complemento viene con muchas características que le permiten construir un sitio web completo utilizando un tablero interactivo, sin tener que escribir una línea de una sola línea. Aquí usaremos la función de fondo para agregar una imagen de fondo en las secciones de un sitio web de WordPress . Para comenzar, debe instalar y activar el complemento elemental en el tablero de WordPress. Lea nuestra guía sobre cómo instalar complementos de WordPress para obtener ayuda a este respecto.

Después de activar el complemento, puede usar el tablero intuitivo para editar sus publicaciones y páginas de WordPress. Para comenzar, acceda a páginas >> todas las páginas y luego seleccione Editar en la página que desea cambiar.
En el editor de páginas, haga clic en el botón Editar con Elementor para abrir el tablero. El tablero de primeros está lleno de muchas funciones para ayudarlo a editar cualquier sección en su sitio. Puede agregar textos, títulos, imágenes, videos, etc. Desde la pestaña “Contenido”. Supongamos que queremos agregar una imagen de fondo a una sección de su página, haga clic en el icono de seis puntos para resaltar toda la sección, como se ve a continuación.
En la pestaña “Estilo”, haga clic en el menú de fondo. Luego seleccione el icono de la pluma y luego haga clic en Seleccionar imagen.

Ahora elija una imagen de su biblioteca de medios WordPress o suba una nueva imagen. Agregar superposición de fondo después de seleccionar la imagen, puede agregar una superposición de fondo para que la imagen no interrumpa su contenido. Para hacer esto, haga clic en el menú vertical que superpone el fondo. Luego seleccione el color que desea usar en la sección “Color”.
Cuando haya terminado de agregar la imagen y los efectos, haga clic en el botón Actualizar para guardar los cambios. Con este método, puede agregar imágenes de fondo ilimitadas en cualquier sección o página de su sitio. Simplemente seleccione la página, luego edite con el complemento elemental y agregue la imagen de fondo. Advanced WordPress Fondices (AWB) Otro complemento que puede usar para agregar imágenes de fondo a WordPress es el avanzado WordPress Fondicles. Además de agregar imágenes de fondo, también puede usar un video como fondo. Los videos pueden ser de su biblioteca de medios, videos de YouTube o Vimeo. También hay efectos especiales que puede aplicar a sus imágenes, como los efectos del desfile de paralaje. Aquí, nos centraremos en agregar una imagen de fondo, pero si desea obtener más información sobre los efectos de fondo, consulte nuestra guía detallada sobre cómo agregar efectos de Paralax en WordPress. Para comenzar, debe instalar y activar el complemento en el tablero de WordPress. Para esto, vaya a complementos >> Agregar nuevo. En el cuadro de búsqueda, escriba “Fondos avanzados de WordPress”. Luego presione el botón Instalar ahora y active el complemento después de completar la instalación.

Cómo usar el complemento AWB para usar este complemento, Páginas de acceso >> todas las páginas. Luego seleccione Editar en la página donde desea agregar el fondo. En el editor, haga clic en el icono Agregar bloque, luego escriba “AWB” en el cuadro de búsqueda. Cuando aparezca, seleccione el bloque de fondo (AWB).

Luego seleccione el tipo de fondo que desea agregar al lado derecho. Puede usar colores de fondo, imágenes o videos. Seleccione la pestaña “Imagen” y haga clic en Seleccionar imagen.

Después de eso, elija una imagen de su biblioteca de medios.

Puede cambiar el tamaño de la imagen y el fondo utilizando las opciones de “tamaño” y el “tamaño de fondo” respectivamente. Después de agregar la imagen, haga clic en el botón Actualizar para guardar los cambios. Si usa el editor clásico, navegue por la página o la publicación, desea agregar una imagen de fondo. Una vez que llegue allí, haga clic en el icono de fondo avanzado de WordPress.

En la pestaña “General”, haga clic en el menú Tipo de fondo desplegable y luego seleccione la opción de imagen.


Luego haga clic en el botón Seleccionar y luego elija una imagen de su Media WordPress.

También puede actualizar el tamaño y la posición de la imagen. Si desea agregar una superposición, haga clic en la selección de color en “Color de superposición”. Luego elija el color que desee usar.

Y ahora, haga clic en Inserción después de personalizar la imagen de fondo.

Esto generará un código corto e insertará automáticamente en su editor en este código corto, puede ingresar el texto que desea mostrar en la imagen de fondo. Después de haber terminado, presione el botón de publicación/actualización para hacer el cambio. Ahora puede ver la página en su sitio web para ver cómo se ve la imagen de fondo. Agregue manualmente la imagen de fondo utilizando CSS si está más inclinado técnicamente, puede usar códigos CSS personalizados para agregar fondos personalizados a sus páginas y publicar su CSS personalizado le brinda mucha flexibilidad y control sobre la apariencia y colocación de las imágenes. Hay muchos destinos para colocar las imágenes de fondo disponibles utilizando el método CSS. En primer lugar, podemos crear un fondo CSS global que se mostrará en todas las páginas. Lo mismo que la opción ofrecida por algunos temas de WordPress. Alternativamente, podemos agregar imágenes de fondo específicas a la categoría o crear una clase CSS con la imagen de fondo. Luego puede aplicar la clase a publicaciones y páginas individuales. Nota: Esta sección requiere conocimientos básicos sobre CSS y cómo funcionan las clases de CSS. Si no tiene experiencia, puede usar el método de complemento anterior. Para comenzar, acceda a la personalización del aspecto >> desde el tablero de WordPress. Esto abrirá el menú Personalización. Después de eso, seleccione el menú CSS adicional.

En el cuadro “CSS adicional”, copie e inserte el código a continuación. Cuerpo {background-image: url (“ejemplo-image.jpg”); Tamaño de fondo: cubierta; Background-Read: No-Reed; Atacamiento de fondo: fijo; } Asegúrese de reemplazar ejemplo-image.jpg con la URL de la imagen que desea usar como imagen de fondo. Puede cargar una imagen desde su biblioteca de medios o usar imágenes sin derechos de autor en los sitios web de existencias. Haga clic en la publicación una vez completada. El código anterior establecerá una imagen de fondo global para todas las páginas en su sitio, pero puede usar imágenes de fondo separadas para categorías, páginas y publicaciones. A continuación le mostraremos cómo hacerlo. Cómo agregar una imagen de fondo a las páginas de WordPress de WordPress crea automáticamente clases separadas para páginas, publicaciones y otros tipos de contenido. Para encontrar esta clase, simplemente abra una página desde su sitio en su navegador. Luego, haga clic en la derecha y seleccione Inspección para abrir las opciones de desarrolladores.

En la etiqueta , verá la lista de clases para esa página.

Por lo general, el nombre de la clase debe ser “página”, pero puede diferir según su tema de WordPress. Después de haber copiado la clase, regrese al submenú “CSS adicional” en la página de personalizador. Ahora copie e inserte el código a continuación en el cuadro. .page {background-image: url (“ejemplo-image.jpg”); Tamaño de fondo: cubierta; Background-Read: No-Reed; Atacamiento de fondo: fijo; } Reemplace .Page con la clase CSS que recibió del menú de desarrollador en su navegador. Además, reemplace la URL de la imagen de fondo con el enlace a una imagen de su Media WordPress. Presione el botón de publicación una vez que haya terminado. Agregue una imagen de fondo en las publicaciones que esto funciona de manera similar a las páginas que acabamos de configurar en la sección anterior. Primero, abra una publicación desde su sitio a su navegador. Después de eso, abra la herramienta Inspect y localice la clase en la etiqueta . En mi caso, es una “publicación única”.

Esta clase se utiliza para todas las publicaciones en su sitio, por lo que las personalizaciones que aplican serán globales para sus páginas de publicación. Para agregar una imagen de fondo para las publicaciones, vuelva a la página de personalización del tema, luego copie e inserte el código a continuación en el cuadro “CSS adicional”. .single-post {background-image: url (“ejemplo-image.jpg”); Tamaño de fondo: cubierta; Background-Read: No-Reed; Atacamiento de fondo: fijo; } Del mismo modo, reemplace la “publicación única” con la clase que encuentre en la opción de desarrollador de su página de publicación. Luego reemplace la URL de la imagen de fondo con un enlace real a la imagen que desea usar. Finalmente, presione el botón de publicación para guardar los cambios. Agregar una imagen de fondo a las páginas de categoría Al crear una nueva categoría en su sitio, WordPress asigna automáticamente una clase CSS para esa categoría específica. La clase está en este formato “Nombre de categoría de categoría”, donde el nombre de categoría es el nombre de la categoría. Entonces, si el nombre de la categoría es “perros”, la clase creada por WordPress será “categorías”. Aquí hay un caso de uso práctico para esto. Supongamos que tiene una categoría sobre perros, puede usar una imagen de un perro en el fondo, que aparece cuando los usuarios ven una lista de publicaciones en esa categoría. Se puede agregar fácilmente usando la clase creada por WordPress para categorías. En la página de personalización, vaya a la opción CSS adicional, luego copie e inserte el código a continuación en el cuadro. .Category -Category-Name {Background-Image: Url (“Ejemplo-iMage.jpg”); Tamaño de fondo: cubierta; Background-Read: No-Reed;