Hace unos años, la mayoría de las plataformas usaban un diseño de diseño fijo, donde se necesita tener un sitio web móvil separado para dispositivos más pequeños. Esto ha cambiado con la popularidad del diseño web adaptable, ya que el diseño único puede funcionar en todos los tamaños de dispositivos. La última tendencia en el mundo de WordPress tiene un diseño con menos barra lateral. De hecho, el tema predeterminado de WordPress de veintidós ni siquiera tiene una barra lateral sobre el tema. Esto está en línea con la edición completa del sitio, donde puede crear plantillas o diseños de página usted mismo. Sin embargo, muchos usuarios todavía quieren tener una barra lateral en el escritorio, pero quieren eliminar el desorden innecesario en los dispositivos móviles. Si está buscando ocultar un bloque o widget específico en dispositivos móviles, así es como puede hacerlo en WordPress.
Ocultar bloques y widgets específicos
Digamos que tiene tres widgets en la barra lateral. Estos dispositivos pueden ocupar mucho espacio en dispositivos móviles más pequeños e interrumpir la experiencia del usuario. La mejor solución es mantener todos los widgets en su escritorio y ocultarlos en el puerto de vista móvil. Del mismo modo, puede tener un bloque de ancho completo como un sitio para compartir contenido social. Esto es innecesario, ya que los navegadores móviles tienen sus propias opciones para compartir. Lo que puede hacer aquí es simplemente ocultar la unidad de intercambio social en su dispositivo móvil y guardarla en su computadora de escritorio.
La situación puede ser diferente cuando se quiere ocultar un elemento de dispositivos de escritorio más grandes y mostrarlo en dispositivos móviles.Podemos dar muchos ejemplos y casos de uso para ocultar bloques específicos de dispositivos específicos.
Controles de gadgets y visibilidad
Hay muchas formas de controlar la visibilidad de los widgets y bloques en WordPress. Te explicaremos las siguientes opciones y podrás utilizar la que se adapte a tus necesidades.
- Usando un suplemento para Gutenberg
- Controla la visibilidad del widget con otro complemento
- Propiedad CSS para ancho máximo
1. Spectra - Complemento de bloques de WordPress Gutenberg
El editor de bloques de Gutenberg tiene muchas características ocultas que muchos usuarios desconocen. También hay complementos que agregan funciones al editor de bloques. Ultimate Add-ons for Gutenberg es uno de esos complementos de Brainstorm Force, que está detrás del tema Astra más popular. El complemento se renombró recientemente como "Spectra - WordPress Gutenberg Blocks". Entonces, busque con estas palabras clave e instale el complemento en su sitio. Este complemento agregará un metacampo adicional a los editores de publicaciones y widgets de bloque condicional.
- Después de activar el complemento, edite cada una de sus publicaciones existentes en las que desea ocultar un bloque. En este ejemplo, ocultaremos un párrafo con fondo verde en dispositivos móviles.
- Seleccione el bloque y haga clic en el icono "Opción" con tres puntos. Si muestra "Mostrar más configuraciones", haga clic en esta opción. Si el menú muestra "Ocultar más configuraciones", ya muestra las configuraciones en la barra lateral.
- En la barra lateral derecha, seleccione "Bloquear" y desplácese hasta la sección inferior que muestra "Avanzado".
- Expanda la sección "Avanzado" para ver que hay un nuevo metacampo "Condiciones de visualización".
- Haga clic en su menú desplegable para ver muchas opciones.El complemento ofrece ocultar o mostrar muchas condiciones basadas en bloques, como el estado del usuario (cerrado o cerrado), la función del usuario, el navegador y el sistema operativo.
- Para ocultar el bloque seleccionado en los teléfonos móviles, seleccione la opción "Visibilidad receptiva".
- Verás que se despliegan opciones adicionales y activarás la opción "Ocultar dispositivos móviles".
Ahora publique su publicación y verifíquela en un dispositivo de escritorio para ver si el bloque de párrafo de color está disponible. Sin embargo, el párrafo desaparecerá automáticamente cuando vea la página móvil.
Nota: El complemento agregará el metacampo "Condiciones de visualización" a cada bloque, incluso si deshabilita todos sus módulos en la sección "Configuración> UAG". Si deshabilita el complemento, los bloques serán visibles en todos los dispositivos.
Del mismo modo, para ocultar el widget de bloqueo, vaya a la sección "Apariencia> Gadgets". Seleccione cualquier widget y establezca "Ocultar dispositivos móviles" en "Condiciones de visualización" para ocultar este bloqueo.
2. Opciones de widgets - complemento
Aunque el complemento Spectra es una excelente opción para ocultar cualquier bloque o widget, solo funciona si usa el editor Gutenberg. Por lo tanto, esta no es una opción si todavía usa el antiguo editor clásico o usa tipos personalizados de publicaciones que no son compatibles con Gutenberg. En este caso, tiene otro complemento que solo funciona para ocultar widgets en la barra lateral y el pie de página.
- Vaya al menú "Configuración> Opciones de gadgets" y asegúrese de que la "Pantalla de gadgets clásicos" se muestre como activada (mostrar el botón Desactivar significa que la opción está habilitada).
- Esto deshabilitará los bloques de widgets de Gutenberg y activará la interfaz clásica de widgets. Tiene varias otras configuraciones de página para controlar la visibilidad de la página, agregar clases de CSS personalizadas, etc., que puede configurar si es necesario.
- Ahora ve a la sección "Apariencia > Widgets" y expande el widget que quieres ocultar en los teléfonos móviles. Encontrará que el complemento ha agregado muchas opciones al widget.
- Haga clic en el icono "Dispositivos" y luego seleccione la opción "Ocultar dispositivos marcados" en el menú desplegable "Ocultar/Mostrar". Luego marque la casilla "Móvil" y haga clic en el botón "Guardar".
Revise su sitio en un dispositivo móvil y no encontrará este widget. Recuerde que el complemento actualmente solo funciona con la interfaz clásica de widgets, y tampoco puede ocultar elementos de contenido.
3. CSS personalizado
Finalmente, esta es una opción manual que no necesita un complemento. Puede usar la propiedad max-width de CSS para ocultar cualquier bloque o widget en dispositivos móviles.
- Cuando esté en el editor de publicaciones de Gutenberg, seleccione el bloque y expanda la configuración "Avanzada" en la barra lateral derecha.
- Ingrese un nombre de clase de CSS personalizado en el cuadro de texto "Clase (s) de CSS adicional". Por ejemplo, agregamos una nueva clase llamada hideonmobile al cuadro de texto.
- Publica tu publicación y ve a la sección "Apariencia > Personalización > CSS avanzado".
- Agregue el siguiente código CSS y publique sus cambios.
@media (max-width: 767px){
.hideonmobile{
display: none;
}
}- Debería verse a continuación en la pantalla de personalización.
El bloque ahora estará oculto en cualquier dispositivo de menos de 767 píxeles de ancho. Del mismo modo, también puede ocultar widgets agregando CSS personalizado al editor de bloques de widgets. Puede aprovechar el uso de la misma clase de CSS (hideonmobile en nuestro ejemplo) para varios bloques y widgets para ocultarlos todos en un dispositivo móvil usando el mismo CSS.
Ultimas palabras
Como puede ver, WordPress tiene muchas opciones para mostrar u ocultar un bloque en dispositivos móviles. Si usa Gutenberg, la mejor opción es usar el último método manual, ya que no necesita complementos de terceros. De lo contrario, los bloques se harán visibles cuando desactive el complemento. Sin embargo, para obtener funciones adicionales, como ocultar un bloque en un navegador o sistema operativo específico, puede usar el complemento Spectra. Si todavía usa widgets clásicos, entonces Widget Options es el complemento que debe elegir.
Deja una respuesta