Utilizar diferentes fondos en Extra según el dispositivo

por | 0 Comentarios

Temas Elegant Themes
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.

Suscríbete a mi canal:

 

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:

medidas responsive del tema Extra

 

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 1680×1050 px. para pantallas de escritorio y de 768×1280 px. para dispositivos móviles (tablets y smartphones). Las imágenes que voy a utilizar las he descargado del banco gratuito Pixabay.

dimensiones de imagenes de fondo en extra.jpg

 

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

subir diferentes fondos en extra

 

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.

[su_button url=»https://www.ingresosviaweb.com/traducir-al-espanol-el-tema-extra/» style=»flat» background=»#6ab446″ size=»4″ wide=»yes» center=»yes» radius=»0″ icon=»icon: caret-right» title=»Cómo traducir al español el tema Extra»]Cómo traducir al español el tema Extra[/su_button]

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.

Colocar imagen de fondo en extra

 

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.

Imagen para móvil en tema Extra

 

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.

Colocar código CSS en tema Extra

 

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.

[su_button url=»https://www.ingresosviaweb.com/cambiar-pie-de-pagina-de-la-plantilla-extra/#Como-crear-un-child-theme-o-tema-hijo-de-Extraautomaticamente» style=»flat» background=»#6ab446″ size=»4″ wide=»yes» center=»yes» radius=»0″ icon=»icon: caret-right» title=»Como crear un child theme o tema hijo de Extra automaticamente»]Como crear un child theme o tema hijo de Extra automaticamente[/su_button]

 

Temas Elegant Themes

 

Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.


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.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Banner AzonPress

Esta web funciona gracias a:

Hosting WordPress de SiteGround

Pin It on Pinterest

Share This
Ir al contenido