¿Quieres agregar una imagen de fondo a tu sitio web de WordPress?
Las imágenes de fondo se pueden utilizar para hacer que su sitio web sea más atractivo y estéticamente agradable.
En este artículo, le mostraremos cómo agregar fácilmente una imagen de fondo a su sitio web de WordPress.
Si prefiere las instrucciones escritas, continúe leyendo.
Método 1. Agregue una imagen de fondo usando la configuración de su tema de WordPress
En las Temas de WordPress más populares vienen con soporte de fondo personalizado. Esta función le permite configurar fácilmente una imagen de fondo en su sitio web de WordPress.
Si su tema de WordPress admite la funcionalidad de fondo personalizado, recomendamos usar este método para agregar una imagen de fondo a su sitio web.
Sin embargo, si su tema de WordPress no es compatible con esta función, o si no le gusta la forma en que implementa las imágenes de fondo, puede probar las otras opciones mencionadas en nuestro tutorial.
Primero debes visitar la página Apariencia »Personalizar en su administrador de WordPress. Esto iniciará el Personalizador. tema de WordPress donde puedes cambiar diferentes configuraciones de este tema mientras visualizas una vista previa en tiempo real.
Entonces tienes que hacer clic en la opción 'Imagen de fondo'. El panel se deslizará y le mostrará las opciones para cargar o seleccionar una imagen de fondo para su sitio web.
Haga clic en el botón Seleccionar imagen para continuar.
Esto abrirá una ventana emergente de WordPress donde puede cargar una imagen desde su computadora. También podrá seleccionar una imagen descargada previamente de la biblioteca de medios.
Luego, debe hacer clic en el botón Elegir imagen después de cargar o seleccionar la imagen que desea usar en segundo plano.
Esto cerrará la ventana emergente del cargador de medios y verá la vista previa de la imagen seleccionada en la personalización del tema de WordPress.
Debajo de la imagen también podrá ver las opciones de la imagen de fondo. Debajo " PreestablecidoPuede seleccionar cómo desea que aparezca la imagen de fondo: llenar pantalla, ajustar pantalla, repetir o personalizar.
También puede seleccionar la posición de la imagen de fondo haciendo clic en las flechas a continuación. Al hacer clic en el centro, la imagen alineará la imagen con el centro de la pantalla.
No olvides hacer clic en el botón « Cuestión Para almacenar su configuración. Eso es todo, ha agregado con éxito una imagen de fondo a su sitio web de WordPress.
Visite su sitio web para verlo en acción.
Método 2. Agregue una imagen de fondo personalizada en WordPress usando un complemento
Este método es mucho más flexible. Funciona con cualquier tema de WordPress y le permite configurar múltiples imágenes de fondo.
También puede configurar diferentes fondos para cualquier publicación, página, categoría o cualquier otra sección de su sitio web de WordPress.
Automáticamente hace que todas sus imágenes de fondo sean de pantalla completa y receptivas. Esto significa que su imagen de fondo cambiará de tamaño automáticamente en dispositivos más pequeños.
En primer lugar, debe instalar y activar el complemento. Fondo de pantalla completa Pro. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Después de la activación, debe visitar la página Apariencia »Imagen de GS en pantalla completa para configurar los ajustes del complemento.
Se le pedirá que agregue su clave de licencia. Puede obtener esta información del correo electrónico que recibió después de comprar el complemento o de su cuenta en el sitio web del complemento.
Entonces tienes que hacer clic en el 'Guardar configuración'para almacenar sus cambios. Ahora está listo para comenzar a agregar imágenes de fondo a su sitio web de WordPress.
Sigue adelante y haz clic en el botón Añadir nueva imagen En la página de configuración del complemento. Esto lo llevará a la pantalla de descarga de la imagen de fondo.
Haga clic en el botón 'Seleccione imagen'para descargar o seleccionar una imagen. Tan pronto como seleccione la imagen, podrá ver una vista previa en tiempo real de la imagen en su pantalla.
Entonces debe proporcionar un nombre para esta imagen. Este nombre se usará internamente, por lo que puede usarlo en cualquier lugar.
Finalmente, debe seleccionar dónde desea que se use esta imagen como imagen de fondo.
Full Screen Background Pro también le permite configurar imágenes de fondo para todo el sitio web, o puede elegir entre diferentes secciones de su sitio web como categorías, archivos, página de inicio o blog.
No olvide guardar para almacenar su imagen de fondo.
Puede agregar tantas imágenes como desee visitando la página Apparence »Imagen BG en pantalla completa
Si define varias imágenes para su uso global, el complemento mostrará automatiquement imágenes de fondo como una presentación de diapositivas.
Puede ajustar el tiempo que tarda una imagen en desaparecer y el tiempo después del cual aparece una nueva imagen de fondo.
El tiempo que ingresa aquí es en milisegundos. Si desea que una imagen de fondo se desvanezca después de 20 segundos, deberá ingresar 20000.
No olvides hacer clic en el botón Guardar opciones para guardar tus cambios.
Imágenes de fondo para publicaciones, páginas y categorías
Full Screen Background Pro también te permite configurar imágenes de fondo para publicaciones, páginas, categorías, etiquetas y más.
Simplemente edite la publicación / página donde desea mostrar una imagen de fondo diferente. En la página de edición del artículo, verá el nuevo grupo " Imagen de fondo de pantalla completa »En el editor de artículos.
Para usar una imagen de fondo para una categoría específica, debe visitar la página Apariencia »Imagen de fondo de pantalla completa, luego haga clic en el "Seleccione imagen ".
Después de cargar su imagen, puede seleccionar "categoría" como el contexto donde desea mostrar la imagen de fondo.
Ingrese el ID de la Categoría o Slug específica donde desea mostrar la imagen.
Recuerde guardar su imagen para almacenar su configuración.
Método 3. Agregue imágenes de fondo personalizadas en cualquier lugar de WordPress usando código CSS
De forma predeterminada, WordPress agrega varias clases de CSS a diferentes elementos HTML en su sitio web de WordPress. Puede agregar fácilmente imágenes de fondo personalizadas a publicaciones, categorías, autores y otras páginas utilizando estas clases CSS generadas por WordPress.
Por ejemplo, si tiene una categoría en su sitio web llamada TV, WordPress agregará automáticamente estas clases CSS a la etiqueta del cuerpo cuando alguien vea la página de categoría de TV.
Se puede utilizar herramienta de inspección para ver exactamente qué clases CSS agrega WordPress a la etiqueta del cuerpo.
Puede usar cualquiera de las clases CSS para diseñar esta página de categoría de manera diferente.
categoría-tvcategory-4
Agreguemos una imagen de fondo personalizada a una página de archivo de categorías. Deberá agregar este CSS personalizado a su tema de WordPress.
cuerpo.categoría-tv { background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); posición de fondo: centro centro; tamaño de fondo: cubierta; repetición de fondo: sin repetición; archivo adjunto de fondo: fijo; }
También puede agregar fondos personalizados a publicaciones y páginas individuales. WordPress agrega una clase CSS con el ID de la publicación o la página en el cuerpo de la etiqueta. Puede usar el mismo código CSS simplemente reemplazando .category-tv con la clase CSS de una publicación específica.
Descubre también algunos complementos premium de WordPress
Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.
Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.
1. Easy Custom JS y CSS
Ce Plugin de WordPress premium es un poderoso editor de código CSS y JavaScript que te permite agregarlos a cualquier sección de tu sitio web. Le permite mantener sus personalizaciones incluso después de una actualización importante de su tema de WordPress. 
Tiene la posibilidad de limitar el campo de uso de su código personalizado. Por ejemplo, puede usar su código solo para un artículo que tenga el formato de video.
Vea nuestros artículos sobre Cómo exigir la aceptación de los términos de uso en WordPress
O puede limitar su código a un tema específico de WordPress; Lo cual es útil si actualmente está cambiando temas para su blog de WordPress.
Descargar | Demo | alojamiento web
2. Lápiz amarillo: Visual CSS Style Editor
Yellow Pencil es un editor de estilo visual que puedes usar con cualquier tema para personalizar tu sitio web en minutos (fuentes, colores, animaciones y más…).
Ce Plugin de WordPress premium creará estilos CSS por fondo mientras juegas con los colores como si fuera un juego, fue diseñado tanto para principiantes como para usuarios experimentados.
Descubre también nuestro Complementos 5 WordPress para mostrar notificaciones
No se requieren conocimientos de codificación. sin embargo, el Plugin de WordPress tiene un buen editor de CSS para aquellos a los que les gusta codificar. Puede codificar en vivo con este editor y personalizar su CSS.
Descargar | Demo | alojamiento web
3. Widget de comentarios recientes de Facebook
Este widget le permite mostrar una lista de los últimos comentarios de Facebook de su blog de WordPress en la primera página, o en cualquier lugar donde haya un widget utilizado por el sitio web.
Como características tendrás entre otras: la visualización de todos los últimos comentarios de tu sitio web o blog de WordPress, laAprobación automática o manual de los comentarios que se mostrarán en el widget,enviar una notificación por correo electrónico cuando una persona comenta a través del complemento de comentarios de Facebook, buen SEO, compatibilidad con cualquier tema de WordPress, oopciones para personalizar el widget y mucho más.
Descargar | Demo | alojamiento web
Recursos recomendados
Conozca otros recursos recomendados para ayudarlo a construir y administrar su sitio web.
- Cómo ocultar un widget de WordPress en un dispositivo móvil
- Complementos de WordPress de 10 para mejorar el aspecto visual de su sitio web.
- Cómo migrar manualmente un sitio web de WordPress: la guía
- 7 complementos de WordPress para botones de llamada a la acción en WordPress
Conclusión
Listo ! Eso es todo por este tutorial. Esperamos que este artículo le haya ayudado a aprender cómo agregar una imagen de fondo en WordPress. No dude en comparte con tus amigos en tus redes sociales favoritas.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.
Si tienes sugerencias o comentarios, déjalos en nuestra sección comentarios.
...
