Saltar al contenido principal

Sitio web avanzado: Habilitación de diseños de sitio web adaptables

Los iPads con iPadOS muestran la misma vista que un ordenador de escritorio. Habilita el diseño adaptable para ordenadores de escritorio y tabletas para garantizar que todas las personalizaciones permanezcan visibles en los sitios web en funcionamiento.

El diseño adaptable muestra el encabezado de navegación superior en ordenadores de sobremesa más grandes y cambia automáticamente al encabezado del menú de hamburguesa cuando el tamaño de la pantalla es de 1024 píxeles o inferior.

Antes de comenzar

  • Guesty habilita esta función automáticamente para la mayoría de los sitios. Si no aparece el interruptor, la función ya está activada. Una vez habilitada, no se puede desactivar.
  • CSS y puntos de interrupción : El CSS permanece igual tanto para pantallas de escritorio grandes como para pantallas de escritorio pequeñas/tabletas. No verá un CSS diferente para tabletas.
  • Visibilidad de los elementos : Puede ocultar elementos para puntos de interrupción específicos.
  • Transiciones : Las transiciones de diseño se basan en el tamaño de la pantalla para garantizar una experiencia fluida.
  • Diseños automáticos : Las siguientes personalizaciones utilizan automáticamente el diseño de escritorio y no requieren ajuste manual :
    • Diseños de galerías de fotos
    • Reglas de personalización de tabletas
    • Animaciones
  • Si tu sitio contiene elementos ocultos, hazlos visibles antes de activar el Diseño adaptable. Si los elementos se distorsionan, desactiva el Diseño adaptable, muestra todos los elementos y vuelve a activarlo antes de ocultar los elementos necesarios. Aprende cómo mostrar elementos ocultos .
  • Las reglas de personalización no incluirán un dispositivo tableta específico. Los ajustes seleccionados para la versión de escritorio también se aplicarán a las vistas de tableta.

Utilice diseños de sitio web adaptables.

Siga los pasos que se indican a continuación para habilitar los diseños adaptables y gestionar los puntos de interrupción de la pantalla.

  1. En el panel lateral del editor, haga clic en Tema .
  2. Haga clic en Diseño del sitio .
  3. En la sección "Escritorio", active la opción Diseño adaptable.
    • Seleccione un diseño de sitio para pantallas de más de 1024 píxeles.
    • Seleccione un diseño de sitio para pantallas de 1024 píxeles o menos.
    • Active o desactive la opción "Ocultar botón para volver al principio" en dispositivos móviles .

Tras habilitar el diseño adaptable, utilice el selector de vista en la barra de navegación superior para alternar entre Escritorio grande (superior a 1024 px), Escritorio pequeño/Tableta (1024 px o inferior) y Móvil. Aprenda cómo cambiar de vista .

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0