Tamaños de pantalla y dispositivos

Los breakpoints (también llamados tamaños de pantalla) son rangos de píxeles que corresponden al ancho de los distintos dispositivos, como el escritorio, la tablet y el móvil. Cuando el ancho de un dispositivo cae dentro del rango de píxeles de un breakpoint, el sitio ajusta su diseño para que el contenido y el diseño queden optimizados para ese tamaño y orientación. Por ejemplo, en un ordenador de escritorio ves el menú completo del sitio, mientras que en un móvil ves en su lugar un menú de hamburguesa.

Estos son los breakpoints disponibles en el editor:

• Desktop (1025px-1399px). Es el breakpoint predeterminado.
• Wide desktop (1400px y más). Solo está disponible en Flex mode en el Classic Editor.
• Tablet (768px-1024px)
• Mobile (767px y menos). Recomendamos siempre comprobar los cambios del breakpoint Mobile en un móvil real, en lugar de reducir el tamaño de una ventana de escritorio.
• Mobile landscape (468px-767px). Solo está disponible en Flex mode en el Classic Editor.

Los cambios de diseño, distribución o contenido que hagas en el breakpoint Desktop predeterminado se aplican automáticamente a los demás breakpoints. Con el contenido esto vale sin importar el breakpoint: si añades un widget, editas un texto o añades o eliminas una sección, el cambio se aplica automáticamente a todos los demás breakpoints, sin importar en cuál lo hayas hecho. Así, un widget que añades en el breakpoint Tablet aparece también en todos los demás.

En cambio, si cambias la posición o el tamaño de un elemento en breakpoints concretos, esos cambios no pasan a los demás breakpoints. Por ejemplo, si cambias el tamaño de un elemento en el breakpoint Mobile, el cambio solo vale para los breakpoints Mobile y Mobile landscape, y para ningún otro.

Ajustes por tamaño de pantalla (Flex mode y Editor 2.0)

Nota: este contenido vale tanto para el Flex mode del Classic Editor como para Editor 2.0.

A veces necesitas sobrescribir un breakpoint. Por ejemplo, en el breakpoint principal una imagen está a la derecha de un párrafo, pero en el móvil quieres la imagen arriba y el párrafo debajo.

Estos son los cambios en un elemento que sobrescriben el breakpoint principal:

• Alineación
• Posición
• Tamaño
• Espaciado

Una vez que sobrescribes un breakpoint, ya no puedes revertir el cambio modificando el estilo del mismo objeto en el breakpoint principal.

Ocultar en un tamaño de pantalla concreto (Flex mode y Editor 2.0)

Nota: este contenido vale tanto para el Flex mode del Classic Editor como para Editor 2.0.

Puedes ocultar ciertos elementos en breakpoints concretos desde el panel Capas o desde el menú flotante del elemento. Por ejemplo, puedes ocultar una imagen en móviles sin que ello afecte a los demás breakpoints.

Nota: si ocultas un elemento que contiene otros elementos anidados, en ese breakpoint también se ocultan todos los elementos anidados. Por ejemplo, si ocultas una columna flex, se ocultan también los widgets que hay dentro de esa columna flex.

Para ocultar un elemento en un breakpoint concreto:

1. Cambia al breakpoint en el que quieras ocultar el elemento haciendo clic en la vista correspondiente de la navegación superior.
2. Haz clic en el elemento que quieras ocultar.
3. Haz clic en el icono de los tres puntos horizontales del menú flotante y selecciona Ocultar solo desde este dispositivo. O bien, en el panel Capas, haz clic en Ocultar solo desde este dispositivo junto al elemento.

Ocultar en un tamaño de pantalla concreto (Classic Editor)

Casi todo en el editor se puede editar por dispositivo, salvo el header y el footer. Para ello, creas contenido que solo es visible en un dispositivo concreto.

Para editar contenido por dispositivo:

1. Copia el contenido que quieras hacer específico para un dispositivo. Haz clic con el botón derecho en el widget, haz clic en copiar y luego en pegar.
2. Haz clic con el botón derecho en uno de los widgets, selecciona la opción para ocultar según el dispositivo y luego el dispositivo en el que quieras ocultar el widget. Por ejemplo, si ocultas un botón en el escritorio, el botón desaparece del escritorio, pero se muestra en las versiones de tablet y móvil.
3. Haz clic en el contenido original y selecciona la opción para ocultar según el dispositivo; después, ocúltalo en los dispositivos en los que no quieras cambiar este contenido. Por ejemplo, si has ocultado tu botón copiado en el escritorio, oculta el botón original en tablet y móvil. Así tendrás dos botones distintos: uno que se muestra en el escritorio y otro que se muestra en la tablet y el móvil.
4. Si quieres que el contenido sea distinto en los tres dispositivos, puedes copiarlo otra vez (para tener un total de tres copias del mismo contenido) y mostrar un botón diferente en cada dispositivo.
5. Ahora tienes dos (o tres) contenidos idénticos pero separados, cada uno mostrado en un dispositivo distinto. Cualquier cambio posterior en este contenido solo afectará al dispositivo en el que está configurado para mostrarse.

El contenido oculto puede seguir apareciendo en el código del sitio publicado (tras publicar o volver a publicar). Es normal y se debe a la tecnología empleada. Cuando ocultas un widget, una sección o cualquier contenido en el editor para un dispositivo concreto, se oculta mediante CSS Media Queries. Esto significa que el HTML (aunque esté oculto en el sitio web) sigue existiendo dentro de la página cuando alguien mira el contenido. Por eso, a veces una herramienta de auditoría que analiza el sitio detecta este contenido oculto, aunque creías que lo habías quitado de la página.

Cambiar entre las vistas de dispositivo

Los sitios web responsive funcionan en escritorio, tablet y móvil. Por eso, el editor responsive te deja previsualizar el sitio en cada una de estas vistas mientras editas. Así compruebas cómo se ve tu sitio en los distintos dispositivos antes de publicar y te aseguras de que tus clientes tengan una buena experiencia, sea cual sea el dispositivo con el que abran el sitio.

Para cambiar de vista de dispositivo, haz clic en uno de los botones de dispositivo de la barra de navegación superior.

Las distintas vistas de dispositivo no son versiones separadas de tu sitio. Si eliminas un elemento en una vista (por ejemplo, la de móvil), se elimina de todo el sitio (escritorio, tablet y móvil). En lugar de eliminarlo, haz clic con el botón derecho en el elemento y elige la opción de ocultarlo en un dispositivo concreto.

Las vistas previas de dispositivo no siempre reflejan con exactitud lo que ves en un dispositivo real. Aspectos como las fuentes, el tamaño de la ventana del dispositivo, la interfaz y el comportamiento del navegador pueden hacer que estas vistas previas se desvíen en mayor o menor medida de la realidad. Para ver la versión más fiel del sitio, compruébalo en un dispositivo real.

Editar por dispositivo (Classic Editor)

Los cambios que haces en un dispositivo aparecen en todos los dispositivos. Por ejemplo, si eliminas una fila en la vista de tablet de tu sitio, la fila también faltará en las vistas de escritorio y móvil, porque el contenido es el mismo en todos los dispositivos. Pero si quieres mostrar contenido distinto en cada dispositivo, usa las funciones de edición por dispositivo: así ofreces a tus visitantes el contenido que mejor encaja con el dispositivo desde el que acceden a tu sitio.

Cuando haces cambios para un dispositivo concreto, a menudo tienes que cambiar de vista. Para más información, consulta más arriba "Cambiar entre las vistas de dispositivo".

Cambios que no afectan a otros dispositivos

Muchos ajustes indican a qué dispositivos afectan. Un ajuste puede mostrar, por ejemplo, "Change affects desktop and tablet" junto a un icono que representa los dispositivos.

Hay varios cambios en el editor que puedes hacer sin afectar al móvil. Son estos:

• Espaciado (márgenes y relleno)
• Posicionamiento
• Ancho
• Alto
• Fondo del sitio o de la página
• Tamaño de fuente (no afecta al texto que ya se haya editado antes en móvil)
• Los cambios en el header y el footer en la vista de tablet no afectan a las vistas de escritorio y móvil

Cualquier otro cambio que hagas en una vista de dispositivo afectará a los demás dispositivos.

Cambios específicos por widget

Muchos widgets funcionan bien en todos los dispositivos, pero entre ellos hay diferencias a veces muy grandes, así que algunos widgets necesitan un conjunto distinto de funciones o de preferencias de diseño en cada dispositivo.

Abajo tienes una lista de widgets con sugerencias de diseño y notas para adaptar ciertos widgets a ciertos dispositivos.

Imágenes de fondo

Como las proporciones cambian mucho de un dispositivo a otro, conviene cuidar especialmente cómo diseñas las imágenes de tu sitio. Por ejemplo, un fondo a página completa en una fila puede quedar genial en escritorio y fatal en móvil. El motivo es que el escritorio se presta más a imágenes anchas, mientras que en el móvil ocurre justo lo contrario. En los ajustes del site theme puedes definir un fondo de página distinto por dispositivo. Recomendamos usar una imagen de fondo ancha para el escritorio y una estrecha para el móvil o la tablet.

Widget de slider

Igual que con la imagen de fondo, las imágenes que elegiste para la versión de escritorio del widget de slider pueden no quedar tan bien en tablet o escritorio. Recomendamos una de estas dos opciones:

• Ajustar el tamaño del marco del slider para que encaje en móvil, o
• ocultar el slider en escritorio y crear una versión hecha específicamente para móvil.

Widget de imagen y de icono

El tamaño del widget de imagen no se ajusta automáticamente en la versión de móvil. Por eso conviene comprobar en tus móviles cada lugar donde uses el widget de imagen y hacer los ajustes necesarios para que encaje.

Efectos hover en móvil o tablet

A diferencia de los dispositivos de escritorio, las tablets y los móviles no tienen ningún efecto hover. Cualquier diseño u opción de hover queda desactivado en tablets y móviles.

Widget de mapa

El widget de mapa tiene opciones específicas por dispositivo para decidir cuándo se muestra como botón o como mapa.

Widget de formulario de contacto

En el móvil, los formularios de contacto siempre se muestran con un campo por línea.

Widget de vcita

El widget de reserva de citas en línea de vcita tiene una opción para mostrar solo un botón en el dispositivo que elijas.

Tablet responsive (Classic Editor)

Por el cambio que introdujo Apple para los iPads (iPadOS), los iPads muestran la misma vista que el escritorio. Pero puedes cambiar a un diseño responsive de escritorio-tablet para que todas las personalizaciones se vean en los sitios publicados.

Un diseño responsive muestra el header de navegación superior en escritorios grandes y cambia automáticamente al header de menú de hamburguesa cuando el tamaño de pantalla es de 1024px o menos. El diseño para pantallas pequeñas se puede personalizar si hace falta.

Nota:

• En la mayoría de los sitios esta función está activada automáticamente y la opción que se menciona abajo no está disponible.
• En los sitios en los que aún no se ha activado, una vez que se activa, se elimina la opción de desactivarlo.
• La vista de móvil de un sitio creado en el Classic Editor, incluido el header, depende del dispositivo que se use, no del tamaño de la ventana del navegador. Por eso, reducir la ventana de tu navegador de escritorio para simular un viewport móvil no reproduce con exactitud cómo se ven el sitio o el header en móviles reales. Para ver la verdadera presentación en móvil del sitio, incluido el header, lo mejor es abrirlo directamente en un móvil.

Para usar diseños de sitio responsive:

1. En el panel lateral, haz clic en Tema.
2. Haz clic en Diseño del sitio.
3. En Desktop, haz clic en la opción Diseño adaptable. Tienes las siguientes opciones:
   • Elige un diseño de sitio para más de 1024px.
   • Elige un diseño de sitio para 1024px y menos.

Tras cambiar a diseños de sitio responsive, puedes alternar las vistas en la navegación superior entre Large Desktop (más de 1024px), Small Desktop/Tablet (1024px y menos) y Mobile. Para más información, consulta más arriba "Cambiar entre las vistas de dispositivo".

Notas importantes sobre el tablet responsive

A continuación tienes información adicional sobre el tablet responsive:

• El CSS es el mismo para los breakpoints Large Desktop y Small Desktop/Tablet, y no verás un CSS de tablet.
• Las transiciones son más suaves y no se basan en la detección del navegador.
• Si tienes elementos ocultos en tu sitio, asegúrate de que estén visibles antes de activar el Diseño adaptable. Para arreglarlo, desactiva el Diseño adaptable y muestra todos los elementos ocultos. Después puedes activar el Diseño adaptable y volver a ocultar los elementos que quieras.
• La personalización ya no muestra un dispositivo de tablet. Seleccionar escritorio afecta también a las vistas de tablet.
• Ten en cuenta que las siguientes personalizaciones de tablet muestran automáticamente el diseño de escritorio y no hace falta personalizarlas:
  • Diseños de la galería de fotos
  • Reglas de personalización de tablet
  • Animaciones