Utilizar diferentes fondos en Extra según el dispositivo

Al crear una web con WordPress podemos encontrar ciertas dificultades para realizar alguna configuración personalizada. Las opciones establecidas en el personalizador no son suficientes para, por ejemplo, utilizar diferentes fondos en Extra según el dispositivo en el que mostremos la web.

Cambiar la imagen de fondo en dispositivos móviles y ordenadores

Muchas veces, el tema o plantilla elegido no termina de adaptarse a nuestras necesidades o deseos, pero gracias a poder añadir nuestro propio código CSS, realizar algunos cambios serán "pan comido".

El planteamiento es el siguiente: configurar la imagen de fondo general para la web desde el personalizador de Extra y hacer que cambie cuando el sitio se muestre en un dispositivo móvil.

Preparar las imágenes para los diferentes fondos de Extra

Ya que las imágenes las vamos a utilizar en diferentes dispositivos, hay que configurarlas y adaptarlas adecuadamente, estaremos desaprovechando recursos si mostramos una imagen muy grande en un móvil donde la resolución no es la misma que la de una pantalla.

El tema Extra es un tema "responsive" que se va adaptando según se reduce la pantalla, de esta forma tenemos unas medidas de anchura ya preestablecidas:

Cuando la visualización del tema se muestra en una medida inferior a 1024 px., la cabecera y el footer se adaptan automáticamente, pero el resto de elementos no lo hacen hasta tener una medida inferior a 980 px., así que esta será la medida que tomaremos como inicial para cambiar la imagen de fondo.

Como sabemos como funcionan las medidas "responsives" del tema, ya podemos configurar las imágenes para los diferentes fondos en Extra. Tendremos en cuenta el formato horizontal de las pantallas de escritorio y el vertical del móvil.

Para mantener cierta calidad en las imágenes, los tamaños que usaré serán de 1680x1050 px. para pantallas de escritorio y de 768x1280 px. para dispositivos móviles (tablets y smartphones). Las imágenes que voy a utilizar las he descargado del banco gratuito Pixabay.

Cuando las tengamos preparadas las subimos a nuestro WordPress a la carpeta medios, a través de la administración de la web.

Configura la imagen de escritorio en Extra

Creo que no es necesario explicar cómo colocar una imagen de fondo, pero no estará de más explicar el proceso para los que empiezan.

Si habéis instalado el tema y os aparece en inglés, que es lo norma, os dejo un enlace al artículo donde explico como traducirlo al español.

Desde la barra superior accedemos al personalizador del tema en "Extra > Personalizador de tema" (Extra > Theme Customizer), o si estamos en la administración también podemos ir desde "Apariencia > Personalizar", ambos caminos llevan a la mismo sitio.

En las pestañas de la izquierda hay una que pone "Imagen de fondo" (Background image), que nos permitirá colocar una imagen en nuestra web debajo de todo el contenido.

Una vez que subes la imagen aparecen diferentes opciones de configuración que puedes utilizar a conveniencia y según te guste más o menos como queda la foto.

Configurar la imagen de fondo en Extra para mostrar en dispositivos móviles

Con la imagen de escritorio colocada, ahora hay que indicar a nuestra web que se comporte de otra manera cuando se muestre en medios con pantallas más pequeñas, como vimos más arriba, cuando sean inferiores a 980 px.

Esta opción podemos hacerla muy complicada creando funciones especiales en los archivos del tema o creando un código CSS muy sencillo que nos hará el trabajo de sustituirla cuando se produzca esa condición.

El código de CSS las podemos añadir en el mismo personalizador en la pestaña "CSS adicional".

Ahora sustituimos "url de la imagen" que hay entre los paréntesis por la url completa de la imagen, que subimos antes en el apartado de medios.

Guardamos los cambios antes de acceder a la pestaña "medios" desde la administración de WordPress, seleccionamos la foto y copiamos la url que aparece a la derecha, donde está toda la la información.

Volvemos a la pestaña de "CSS adicional" y procedemos a realizar la sustitución. Si no nos hemos comido ninguna letra y el código está correcto, en cuanto pulsemos en la opción para ver el sitio en formato tablet o móvil, aparecerá la nueva imagen.

Lo ideal sería añadir este código en el archivo "style.css" de un tema hijo, para liberar a la base de datos de almacenar exceso de información. Si realizas o vas a realizar muchos cambios a nivel CSS, te recomiendo que crees un Child Theme o tema hijo para tener bien optimizado tu sitio. Te dejo aquí debajo un enlace de cómo hacerlo por si estás interesado.

Suscríbete para no perderte ningún artículo nuevo, te aviso por email

Prueba a personalizar tu web y cuéntanos los resultados, los problemas que has tenido o si necesitas realizar algún cambio que no te sale. Deja un comentario con tu opinión.