TL;DR: Cómo ocultar imágenes en la vista móvil en WordPress
Tres maneras de ocultar imágenes en dispositivos móviles con WordPress. El método 1 utiliza SeedProd e impide que las imágenes se carguen por completo, no solo las oculta visualmente.
- ¿Por qué ocultar imágenes en dispositivos móviles ? Las imágenes grandes ralentizan los tiempos de carga y hacen que el contenido quede fuera de la vista en pantallas pequeñas.
- Método del sitio web SeedProd : utilice la opción Visibilidad del dispositivo en la pestaña Avanzado para activar o desactivar la opción Ocultar en dispositivos móviles en cualquier imagen o sección.
- Páginas de destino de SeedProd : se aplican los mismos pasos en SeedProd » Páginas de destino, no es necesario realizar cambios en el tema.
- Método CSS : agregue una consulta de medios display:none, pero tenga en cuenta que el navegador seguirá descargando la imagen en dispositivos móviles.
Las grandes imágenes de escritorio pueden romper el diseño móvil. Ralentizan los tiempos de carga, empujan el contenido demasiado hacia abajo y hacen que su sitio parezca desordenado en pantallas pequeñas. La solución es sencilla: oculte las imágenes en los móviles para que los visitantes vean sólo lo importante.
En esta guía, te mostraré tres formas sencillas de ocultar imágenes en la vista móvil en WordPress, incluyendo una opción sin código y un método CSS rápido.
¿Por qué ocultar la imagen en el móvil en WordPress?
Ocultar las imágenes en la vista móvil mantiene su sitio limpio y fácil de usar. Una foto gigante o un banner promocional que se ve muy bien en el escritorio puede abrumar a las pantallas pequeñas, ralentizar los tiempos de carga, y empujar el contenido importante fuera de la vista. En algunos casos, es posible que también desee ejecutar ofertas sólo para escritorio sin confundir a los visitantes del teléfono.
En resumen: ocultar las imágenes en el móvil ofrece a los usuarios una experiencia más rápida y clara.
Cómo mostrar y ocultar imágenes en la vista móvil de WordPress
Las soluciones para ocultar imágenes en pantallas móviles pueden parecer complejas para los usuarios poco familiarizados con los lenguajes de codificación. Una rápida búsqueda en Google revela instrucciones para escribir CSS personalizado, clases div y todo tipo de jerga técnica.
No se preocupe. No necesitarás ningún conocimiento técnico para los métodos que te explicamos a continuación. Todo lo que necesitas es un plugin de WordPress, un sitio web de WordPress y la capacidad de seguir unos sencillos pasos.
Método 1: Ocultar la imagen en la vista móvil del sitio web
Usaremos SeedProd para ocultar imágenes en dispositivos móviles en WordPress sin escribir código.
SeedProd es el mejor creador de sitios web para WordPress. Te permite crear temas de WordPress, páginas de destino y diseños responsivos sin escribir código.
Incluye cientos de plantillas prediseñadas, y puedes personalizar cada centímetro de tu sitio web con el constructor visual de páginas, bloques y secciones de arrastrar y soltar. También puedes utilizar la configuración de Device Visibility para ocultar contenido específico en las vistas de móvil y escritorio.
SeedProd también ofrece modos integrados, como próximamente, modo de mantenimiento, página 404 y página de inicio de sesión. Puede activar y desactivar cada modo con un solo clic, lo que le permite ocultar su sitio web al público mientras trabaja en su diseño.
Siga los pasos que se indican a continuación para ocultar imágenes en la vista móvil de su sitio web WordPress.
Paso 1. Instalar y activar SeedProd Instale y active SeedProd
En primer lugar, haga clic en el botón de abajo para obtener su copia de SeedProd.
Nota: Para utilizar la función de creación de sitios web de SeedProd, necesita una licencia de SeedProd Pro.
Después de descargar el plugin, instálalo y actívalo en tu sitio WordPress. Puedes seguir esta guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.
A continuación, vaya a SeedProd " Configuración e introduzca su clave de licencia.
Encontrará su clave en el panel de control de su cuenta SeedProd, en la sección "Descargas".
Haga clic en el botón Verificar Clave para desbloquear su licencia SeedProd, luego continúe con el siguiente paso.
Paso 2. Elija una plantilla de sitio web
El siguiente paso consiste en crear un tema de WordPress personalizado. Esto le permitirá utilizar la configuración de "Visibilidad de dispositivos" de SeedProd para mostrar y ocultar contenidos diferentes en ordenadores de sobremesa y móviles.
Vaya a SeedProd " Creador de temas y haga clic en el botón Temas para elegir una plantilla de sitio web.
Hay muchos temas disponibles para distintos sectores y tipos de sitios web, como comercio electrónico, blogs, portfolios, etc.
Cuando encuentres un tema que te guste, sitúate sobre él y haz clic en el icono de la marca de verificación para importarlo a tu sitio.
Ahora verá las diferentes partes que componen su tema de WordPress.
Normalmente, tendría que personalizar estos manualmente con código, pero con SeedProd, puede editar visualmente cada parte de su sitio web con el constructor de páginas de arrastrar y soltar.
Para personalizar cualquier parte de tu sitio web, pasa el ratón por encima de una plantilla de tema y haz clic en el enlace de diseño "Editar diseño". Para esta guía, vamos a empezar con la página de inicio.
Una vez que hayas elegido una plantilla, puedes personalizar el diseño con el editor de arrastrar y soltar de SeedProd. Cuando estés listo, pasa al paso 4 para ocultar la imagen.
Paso 4. Ocultar imágenes de sitios web en móviles con Device Visibility
Ocultar imágenes en la vista móvil es fácil con la configuración de 'Visibilidad de dispositivos' de SeedProd. Puede ocultar imágenes individualmente o secciones enteras de imágenes con un solo clic.
Para ocultar imágenes individualmente, busque la imagen que desea ocultar y haga clic en ella para abrir los ajustes de contenido.
A continuación, haz clic en la pestaña "Avanzado" y despliega la sección "Visibilidad de dispositivos".
Para ocultar la imagen en el móvil, haz clic en el conmutador situado junto al título "Ocultar en el móvil".
Esa imagen ahora sólo se mostrará a los visitantes de escritorio y estará oculta en los móviles.
Puede seguir los mismos pasos para ocultar filas enteras de imágenes con SeedProd. Simplemente abra la configuración de la fila y, en la pestaña "Avanzado", utilice la configuración "Visibilidad del dispositivo" para ocultar la fila de imágenes en móviles.
Puedes previsualizar los cambios haciendo clic en el icono "Vista previa móvil" de la barra de herramientas inferior.
Las imágenes "atenuadas" no serán visibles para los visitantes de sitios web para móviles.
Cuando estés satisfecho con el aspecto de tu diseño, haz clic en el botón Guardar situado en la esquina superior derecha de la pantalla.
Sigue los pasos anteriores para ocultar imágenes en la vista móvil para cualquier otra plantilla de tema, como tu Barra Lateral, Entradas Individuales, Páginas, etc.
Por ejemplo, si quieres ocultar las imágenes destacadas de las entradas de tu blog en dispositivos móviles, puedes editar tu plantilla de entrada única y cambiar la configuración de visibilidad del bloque Imagen destacada de esta forma:
Paso 5. Publique su sitio web WordPress
Cuando esté listo para activar su tema personalizado, vaya a SeedProd " Theme Builder y active la opción 'Enable SeedProd Theme'.
Ahora puede previsualizar su sitio web para ver los cambios. Como puede ver en este ejemplo, las imágenes que elegimos antes están ocultas en el móvil.
Método 2: Ocultar imágenes en la vista móvil de las páginas de destino
Los mismos pasos funcionan para las páginas de destino independientes. Crea una página en SeedProd » Páginas de destino , ábrela en el editor y activa la opción Ocultar en dispositivos móviles en la pestaña Avanzado.
Método 3: Ocultar una imagen en el móvil con CSS
Nota: Sólo recomiendo este método si te sientes cómodo trabajando con lenguajes de codificación. Puede utilizar el personalizador integrado de WordPress para añadir CSS personalizado a su sitio web.
Entiendo que algunos propietarios de sitios web prefieren personalizar sus sitios manualmente. Por esa razón, el siguiente método le mostrará cómo ocultar imágenes en el móvil usando CSS personalizado.
En primer lugar, busque la clase del elemento de contenido que contiene la imagen. Por ejemplo, la imagen destacada de las entradas de tu blog. A continuación, puedes ocultarla utilizando la siguiente clase CSS:
@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}
Importante: display:none Oculta la imagen visualmente, pero el navegador la descarga igualmente en dispositivos móviles. Si la velocidad de carga es el objetivo, el Método 1 es la mejor opción. La función Device Visibility de SeedProd impide por completo la carga de la imagen.
Tendrás que sustituir 'your-element-class' por la clase CSS que contiene tu imagen. Es posible que también tengas que ajustar el ancho máximo del dispositivo para adaptarlo a tu tema de WordPress y a la consulta de medios.
En este ejemplo, ocultamos la imagen destacada de la entrada en el móvil mediante la clase '.featured-media img':
@media only screen and (max-width: 782px) {
.featured-media img{
display: none;
}
}
Como puede ver, la imagen desaparece automáticamente en los tamaños de pantalla más pequeños.
Si utilizas el editor de bloques de WordPress sin SeedProd, comprueba si hay una opción para "Ocultar en dispositivos móviles" en el panel Avanzado de la configuración del bloque. WordPress 6.x añadió esta opción para la mayoría de los bloques principales.
Preguntas frecuentes sobre la ocultación de imágenes en la vista móvil
Espero que este artículo te haya ayudado a aprender cómo ocultar imágenes en la vista móvil en WordPress. Puede que también te gusten las siguientes guías:
- Cómo añadir una barra lateral diferente para diferentes páginas en WordPress
- Cómo añadir CSS personalizado en WordPress (para principiantes)
- Cómo añadir una sombra de caja en WordPress
- Cómo ocultar los títulos de las páginas en WordPress
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.
