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
- Método 2: Ocultar imágenes en la vista móvil de las páginas de destino
- Método 3: Ocultar una imagen en el móvil con CSS
- Preguntas frecuentes sobre la ocultación de imágenes en la vista móvil
Método 1: Ocultar la imagen en la vista móvil del sitio web
Para el primer método utilizaremos un potente plugin de WordPress para ocultar imágenes en la vista móvil.
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.
Paso 3. Personalice el diseño de su sitio web
Verás el editor visual de páginas de SeedProd cuando abras una plantilla de tema. Tiene bloques y secciones a la izquierda para añadir contenido personalizado y una vista previa en vivo a la derecha.
Puede hacer clic en cualquier elemento para ver su configuración y cambiar el diseño y la disposición. Por ejemplo, el elemento titular permite editar el contenido, la alineación, el nivel de encabezamiento, etc.
También es fácil añadir nuevos elementos a tu diseño. Basta con arrastrar un bloque de la izquierda y soltarlo en la vista previa en vivo.
En este ejemplo hemos utilizado el bloque "Cuenta atrás". Los temporizadores de cuenta atrás son una forma excelente de añadir urgencia a su sitio y animar a los visitantes a actuar antes de perderse algo.
Como todos los bloques SeedProd, puede hacer clic en él para:
- Cambiar el tipo de temporizador
- Ajustar la alineación del temporizador
- Añadir un mensaje personalizado
- Redirigir a los usuarios cuando finalice el temporizador
- Cambiar el tamaño del temporizador
También puedes hacer clic en la pestaña "Plantillas" para elegir rápidamente un estilo diferente.
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
Usted no tiene que reconstruir su tema para ocultar las imágenes en el móvil. Con el constructor de páginas de destino de SeedProd, puedes aplicar la misma configuración de Visibilidad de Dispositivos a cualquier página independiente.
Esto es perfecto para embudos de ventas, inscripciones a seminarios web o páginas promocionales en las que desea una vista móvil limpia sin tocar todo el diseño de su sitio.
Simplemente cree una nueva página de destino en SeedProd " Páginas de destino, elija una plantilla y ábrala en el editor visual.
A continuación, seleccione la imagen que desea ocultar, vaya a Avanzado → Visibilidad del dispositivo y active Ocultar en móvil.
Previsualiza en tu teléfono, publica la página y listo.
Método 3: Ocultar una imagen en el móvil con CSS
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.
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.
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;
}
}
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.
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.
