RESUMEN: Cómo ocultar imágenes en la vista móvil en WordPress
Tres formas de ocultar imágenes en móvil en WordPress. El método 1 utiliza SeedProd y evita que las imágenes se carguen por completo, no solo que se oculten visualmente.
- Por qué ocultar imágenes en móvil: las imágenes grandes ralentizan los tiempos de carga y sacan el contenido de la vista en pantallas pequeñas.
- Método del sitio web SeedProd: usa la Visibilidad del dispositivo en la pestaña Avanzado para activar Ocultar en móvil en cualquier imagen o sección.
- Páginas de destino de SeedProd: los mismos pasos se aplican en SeedProd » Páginas de destino, no se necesitan cambios en el tema.
- Método CSS: añade una consulta de medios display:none, pero ten en cuenta: el navegador todavía descarga la imagen en móvil.
Las imágenes grandes de escritorio pueden romper tu diseño móvil. Ralentizan los tiempos de carga, alejan el contenido y hacen que tu sitio se sienta abarrotado en pantallas pequeñas. La solución es simple: oculta las imágenes en móvil para que los visitantes vean solo lo que importa.
En esta guía, te mostraré tres formas sencillas de ocultar imágenes en la vista móvil en WordPress, incluido un método sin código y un método CSS rápido.
¿Por qué ocultar imágenes en móvil en WordPress?
Ocultar imágenes en la vista móvil mantiene tu sitio limpio y fácil de usar. Una foto de cabecera gigante o un banner promocional que se ve genial en escritorio puede abrumar las pantallas pequeñas, ralentizar los tiempos de carga y sacar el contenido importante de la vista. En algunos casos, también puedes querer ejecutar ofertas exclusivas para escritorio sin confundir a los visitantes del teléfono.
La conclusión: ocultar imágenes en 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 en WordPress
Las soluciones para ocultar imágenes en pantallas móviles pueden parecer complejas para los usuarios que no están familiarizados con los lenguajes de codificación. Una búsqueda rápida en Google revela instrucciones para escribir CSS personalizado, clases div y toda clase de jerga técnica.
No te preocupes. No necesitarás ninguna experiencia técnica para los métodos que cubrimos 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 imagen en la vista móvil en el sitio web
Usaremos SeedProd para ocultar imágenes en móvil 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 predefinidas y puedes personalizar cada centímetro de tu sitio web con el constructor de páginas de arrastrar y soltar, bloques y secciones visuales. También puedes usar la configuración de Visibilidad del dispositivo para ocultar contenido específico en vistas móviles y de 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.
Sigue los pasos a continuación para ocultar imágenes en la vista móvil de tu sitio web de WordPress.
Paso 1. Instalar y Activar SeedProd
Primero, haz clic en el botón de abajo para obtener tu copia de SeedProd.
Nota: Para usar la función de creador de sitios web de SeedProd, necesitas una licencia de SeedProd Pro.
Después de descargar el plugin, instálalo y actívalo en tu sitio de WordPress. Puedes seguir esta guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.
A continuación, ve a SeedProd » Ajustes e introduce tu clave de licencia.
Puedes encontrar tu clave en el panel de tu cuenta de SeedProd, en la sección "Descargas".
Haz clic en el botón Verificar clave para desbloquear tu licencia de SeedProd, y luego pasa al siguiente paso.
Paso 2. Elige una plantilla de sitio web
El siguiente paso consiste en crear un tema personalizado de WordPress. Eso te permitirá usar la configuración de 'Visibilidad del dispositivo' de SeedProd para mostrar y ocultar diferentes contenidos en escritorio y móvil.
Ve a SeedProd » Theme Builder y haz clic en el botón Temas para elegir una plantilla de sitio web.
Hay muchos temas disponibles para diversas industrias y tipos de sitios web, incluyendo eCommerce, blogs, portfolios, etc.
Una vez que encuentres un tema que te guste, pasa el ratón por encima y haz clic en el icono de la marca de verificación para importarlo a tu sitio.
Ahora verás las diferentes partes que componen tu tema de WordPress.
Normalmente, tendrías que personalizarlas manualmente con código, pero con SeedProd, puedes editar visualmente cada parte de tu sitio web con el creador 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, empezamos con la página de inicio.
Una vez que hayas elegido una plantilla, puedes personalizar el diseño con el creador de arrastrar y soltar de SeedProd. Cuando estés listo, pasa al Paso 4 para ocultar la imagen.
Paso 4. Ocultar imágenes del sitio web en móvil con Visibilidad del dispositivo
Ocultar imágenes en la vista móvil es fácil con la configuración de 'Visibilidad del dispositivo' de SeedProd. Puedes ocultar imágenes individualmente o secciones de imágenes enteras con un solo clic.
Para ocultar imágenes individualmente, busca la imagen que deseas ocultar y haz clic en ella para abrir la configuración de contenido.
A continuación, haz clic en la pestaña 'Avanzado' y expande la sección 'Visibilidad del dispositivo'.
Para ocultar la imagen en móvil, haz clic en el interruptor junto al encabezado 'Ocultar en móvil'.
Esa imagen solo se mostrará a los visitantes de escritorio y estará oculta en móvil.
Puedes seguir los mismos pasos para ocultar filas de imágenes enteras con SeedProd. Simplemente abre la configuración de la fila y, en la pestaña 'Avanzado', utiliza la configuración de 'Visibilidad del dispositivo' para ocultar la fila de imágenes en móvil.
Puedes previsualizar tus cambios haciendo clic en el icono 'Vista previa móvil' en la barra de herramientas inferior.
Cualquier imagen 'atenuada' no será visible para los visitantes del sitio web móvil.
Cuando estés satisfecho con el aspecto de tu diseño, haz clic en el botón Guardar en la esquina superior derecha de tu 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 deseas ocultar las imágenes destacadas de tus entradas de blog en dispositivos móviles, puedes editar tu plantilla de Entrada individual y cambiar la configuración de visibilidad en el bloque de Imagen destacada de esta manera:
Paso 5. Publica tu sitio web de WordPress
Cuando estés listo para publicar tu tema personalizado, ve a SeedProd » Theme Builder y activa el interruptor 'Habilitar tema de SeedProd' en la posición 'Activado'.
Ahora puedes previsualizar tu sitio web para ver los cambios. Como puedes ver en este ejemplo, las imágenes que elegimos anteriormente están ocultas en dispositivos móviles.
Método 2: Ocultar imágenes en la vista móvil en páginas de destino
Los mismos pasos funcionan para páginas de destino independientes. Crea una página en SeedProd » Landing Pages, ábrela en el editor y activa Ocultar en móvil en la pestaña Avanzado.
Método 3: Ocultar una imagen en móvil con CSS
Nota: Solo recomiendo este método si te sientes cómodo trabajando con lenguajes de programación. Puedes usar el personalizador de WordPress integrado para agregar CSS personalizado a tu sitio web.
Entiendo que algunos propietarios de sitios web prefieren personalizar sus sitios manualmente. Por esa razón, el siguiente método te mostrará cómo ocultar imágenes en dispositivos móviles usando CSS personalizado.
Primero, encuentra la clase del elemento de contenido que contiene tu imagen. Por ejemplo, la imagen destacada de tus entradas de blog. Luego puedes ocultarla usando 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 todavía la descarga en dispositivos móviles. Si el objetivo es la velocidad de la página, el Método 1 es la mejor opción. La visibilidad del dispositivo de SeedProd evita que la imagen se cargue por completo.
Deberás reemplazar 'your-element-class' con la clase CSS que contiene tu imagen. También es posible que necesites 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 dispositivos móviles apuntando a la clase '.featured-media img':
@media only screen and (max-width: 782px) {
.featured-media img{
display: none;
}
}
Como puedes ver, la imagen desaparece automáticamente en tamaños de pantalla más pequeños.
Si estás utilizando el editor de bloques de WordPress sin SeedProd, revisa el panel Avanzado en la configuración del bloque para ver un interruptor "Ocultar en móvil". WordPress 6.x agregó esta opción para la mayoría de los bloques principales.
Preguntas frecuentes sobre cómo ocultar 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. También te pueden interesar las siguientes guías:
- Cómo agregar una barra lateral diferente para diferentes páginas en WordPress
- Cómo añadir CSS personalizado en WordPress (Fácil para principiantes)
- Cómo añadir una sombra de caja en WordPress
- Cómo ocultar títulos de página en WordPress
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
