Puntos de quiebre (también denominados tamaños de pantalla) son rangos de píxeles que corresponden al ancho de diferentes dispositivos, como computadoras de escritorio, tabletas y dispositivos móviles. Cuando el ancho de un dispositivo está dentro de un rango de píxeles predefinido por un punto de interrupción, el diseño del sitio se ajusta para que el contenido y el diseño se optimicen para el tamaño y la orientación de ese dispositivo. Por ejemplo, si visito un sitio web en un ordenador de escritorio, puedo ver el menú completo del sitio, pero cuando lo veo en mi dispositivo móvil, aparece un menú tipo hamburguesa en su lugar
Los siguientes son los puntos de interrupción que se ofrecen en el editor:
-
Escritorio (1025px-1399px). Este es el punto de interrupción predeterminado.
-
Escritorio ancho (1400 px y más). Esto solo está disponible en modo flex en el Editor clásico.
-
Tableta (768px-1024px)
-
Móvil (767px y menos). Siempre recomendamos comprobar los cambios en los puntos de interrupción de los dispositivos móviles en un dispositivo móvil, en lugar de cambiar el tamaño de la pantalla de un ordenador
-
Panorama móvil (468px-767px). Esto solo está disponible en modo flex en el Editor clásico.
Si haces diseño, maquetación o contenido cambia al punto de interrupción predeterminado del escritorio, los cambios se aplican automáticamente a los demás puntos de interrupción. Si cambias el contenido, como añadir un widget, editar texto o añadir o eliminar una sección, el cambio se aplica automáticamente a todos los demás puntos de interrupción, independientemente del punto en el que se haya realizado el cambio. Por ejemplo, si añades un widget en el punto de interrupción de la tableta, el widget también se añadirá en todos los demás puntos de interrupción
Sin embargo, si realiza cambios en el posición o tamaño de un elemento en puntos de interrupción específicos, los cambios no se aplicarán a otros puntos de interrupción. Por ejemplo, si cambias el tamaño de un elemento en el punto de interrupción móvil, el cambio solo se aplicará a los puntos de interrupción móviles y del entorno móvil, y no a otros puntos de interrupción
Nota
Este contenido es relevante tanto para el modo Flex de Classic Editor como para el Editor 2.0. Para identificar la versión actual de tu editor, .
Hay ocasiones en las que es necesario anular un punto de interrupción. Por ejemplo, en el punto de interrupción principal, una imagen está a la derecha de un párrafo, pero en dispositivos móviles necesitas que la imagen esté en la parte superior y el párrafo en la
Los siguientes son los cambios que puede realizar en un elemento y anular el punto de interrupción principal:
-
Alineación
-
Posición
-
Talla
-
Espaciado
Una vez que anule un punto de interrupción, no podrá revertir el cambio cambiando el estilo del punto de interrupción principal del mismo objeto.
Nota
Este contenido es relevante tanto para el modo Flex de Classic Editor como para el Editor 2.0. Para identificar la versión actual de tu editor, .
Puedes ocultar ciertos elementos en puntos de rotura específicos desde el panel de capas o desde el menú flotante del elemento. Por ejemplo, puedes ocultar una imagen en dispositivos móviles y no afectará a otros puntos de interrupción
Nota
Si oculta un elemento que contiene otros elementos anidados, todos los elementos anidados también se ocultarán en ese punto de interrupción. Por ejemplo, si ocultas una columna flexible, también ocultarás los widgets que estén dentro de esa
Para ocultar un elemento en un punto de interrupción específico:
-
Cambie al punto de interrupción en el que desea ocultar el elemento haciendo clic en la vista de la barra de navegación superior.
-
Haz clic en el elemento que quieres ocultar.
-
Haga clic en el icono de los tres puntos horizontales (
) en el menú flotante y selecciona Ocultar en este punto de interrupción. O bien, en el panel de capas, haga clicEscóndete en este punto de interrupciónal lado del elemento.
Casi todo en el editor, con la excepción del encabezado y el pie de página, se puede editar para cada dispositivo haciendo que el contenido sea específico para ese dispositivo.
Para editar el contenido por dispositivo:
-
Copia el contenido que quieres que sea específico para cada dispositivo. Haga clic con el botón derecho en el widgetcopiary, a continuación, haga clicpegar.
-
Haga clic con el botón derecho en uno de los widgets y seleccioneOcultar en el dispositivoy, a continuación, selecciona el dispositivo en el que quieres que se oculte el widget. Por ejemplo, configurar un botón paraOcultar en el escritorioelimina el botón del escritorio, pero lo muestra en los sitios para tabletas y dispositivos móviles.
-
Haga clic en el contenido original y seleccioneOcultar en el dispositivoy, a continuación, oculte el contenido de los dispositivos en los que no desee cambiar este contenido. Por ejemplo, si configuras el botón de copia enOcultar en el escritorio, configurarías el botón original comoOcultar en la tabletayEsconderse en el móvil. De esta forma, tendrá dos botones diferentes: uno en su escritorio y otro en su tableta y dispositivo móvil.
-
Si quieres que el contenido sea diferente en los tres dispositivos, puedes volver a copiarlo (para tener un total de tres copias del mismo contenido) y mostrar un botón diferente en cada dispositivo.
-
Ahora tienes dos (o tres) contenidos idénticos pero diferentes, cada uno de los cuales se muestra en un dispositivo diferente. Cualquier otro cambio que realices en este contenido solo afectará al dispositivo en el que está configurado para mostrarse.
Es posible que el contenido oculto siga apareciendo en el código del sitio activo (después de publicarlo o volver a publicarlo). Esto es previsible y se debe a la tecnología utilizada. Cuando ocultas un widget, una sección o cualquier contenido en el editor de un dispositivo específico, lo ocultamos mediante CSS Media Queries. Esto significa que el código HTML (aunque esté oculto en el sitio web) sigue existiendo en la página web cuando el usuario ve el contenido. En ocasiones, esto puede provocar que una herramienta de auditoría que escanee el sitio web identifique este contenido oculto, aunque creyeras que se había eliminado de la página.
Los sitios web adaptables funcionan en computadoras de escritorio, tabletas y dispositivos móviles. Por este motivo, nuestro editor adaptable te permite previsualizar el sitio en cada una de estas vistas mientras editas. Esto te permite comprobar el aspecto de tu sitio en diferentes dispositivos antes de publicarlo, lo que garantiza que tus clientes tengan una experiencia positiva independientemente del dispositivo que utilicen para ver el sitio.
Para cambiar las vistas del dispositivo, haz clic en uno de los botones del dispositivo en la barra de navegación superior:
Las diferentes vistas del dispositivo no son versiones independientes de tu sitio. Al eliminar un elemento de una vista (por ejemplo, en una vista móvil), se elimina ese elemento de todo el sitio (escritorio, tableta y dispositivo móvil). En lugar de eliminarlo, haz clic con el botón derecho en el elemento y selecciona ocultarlo en un dispositivo específico.
Las vistas previas de los dispositivos no siempre reflejan con precisión lo que ves en un dispositivo real. Algunas características como las fuentes, el tamaño de la ventana del dispositivo, la interfaz de usuario y el comportamiento del navegador pueden provocar que estas previsualizaciones sean imprecisas en diversos grados. Para obtener la versión más precisa del sitio, compruébalo en un dispositivo real.
Las modificaciones realizadas en un dispositivo aparecen en todos los dispositivos. Por ejemplo, cuando se elimina una fila de la vista de tableta de tu sitio, la fila también desaparecerá en las vistas de escritorio y móvil del sitio. Esto se debe a que el contenido se puede compartir en todos los dispositivos. Sin embargo, es posible que desee diferenciar qué contenido aparece en qué dispositivos. Para ello, puedes usar nuestras funciones de edición por dispositivo y ofrecer a tus visitantes el contenido que sea apropiado para el dispositivo desde el que acceden a tu sitio.
Al realizar modificaciones en un dispositivo específico, a menudo es necesario cambiar de vista. Para obtener más información, consulteCambiar de vista.
Muchos ajustes indicarán a qué dispositivos afectan. Por ejemplo, una configuración puede decir que la opción Cambiar afecta al escritorio y a la tableta, junto con un icono que represente los dispositivos.
Hay varias ediciones en el editor que se pueden cambiar sin afectar a los dispositivos móviles. Estas son las siguientes
-
Espaciado (márgenes y relleno)
-
Posicionamiento
-
Anchura
-
Altura
-
Fondo del sitio/página
-
Tamaño de fuente (no afectará al texto que se haya editado anteriormente en dispositivos móviles)
-
Los cambios en el encabezado y el pie de página en la vista de tableta no afectan a la vista de escritorio y móvil
Cualquier otra edición que realices en la vista de cada dispositivo afectará a los demás dispositivos.
Si bien algunos widgets funcionan bien en todos los dispositivos, existen algunas diferencias drásticas entre los dispositivos, lo que hace que sea necesario un conjunto diferente de funciones o preferencias de diseño por dispositivo.
A continuación se muestra una lista de widgets con sugerencias de diseño y notas para personalizar determinados widgets en determinados dispositivos.
Imágenes de fondo
Debido a las drásticas diferencias en las relaciones de aspecto entre los dispositivos, es importante tener especial cuidado con la forma en que diseñas las imágenes de tu sitio web. Por ejemplo, el fondo de una página completa en una fila puede verse muy bien en un dispositivo de escritorio, pero horrible en un dispositivo móvil. Esto puede deberse a que los dispositivos de escritorio son más adecuados para imágenes de mayor ancho, mientras que los dispositivos móviles son exactamente lo contrario. Puedes establecer un fondo de página diferente para cada dispositivo en la configuración del tema del sitio. Se recomienda usar una imagen de fondo ancha para el escritorio y una imagen estrecha para dispositivos móviles o tabletas.
Widget deslizante
Al igual que con la imagen de fondo, es posible que las imágenes que seleccionaste para la versión de escritorio del widget deslizante no se vean tan bien para tabletas o computadoras de escritorio. Se recomienda hacer lo siguiente:
-
Ajusta el tamaño del marco para que el cursor quepa en el móvil, o
-
Oculta el control deslizante en el escritorio y, en su lugar, crea una versión específica para dispositivos móviles.
Widget de imágenes e iconos
El tamaño del widget de imagen no se ajusta automáticamente en la versión móvil. Es importante comprobar los dispositivos móviles en los que se utiliza el widget de imagen para realizar los ajustes necesarios para que quepa.
Efectos Hover en dispositivos móviles o tabletas
En comparación con los dispositivos de escritorio, las tabletas y los dispositivos móviles no tienen ningún efecto de desplazamiento. Cualquier diseño u opción al pasar el ratón por el ratón está desactivado en tabletas o
Widget de mapas
El widget Mapa tiene opciones específicas del dispositivo para mostrar cuándo se mostrará como un botón o un mapa.
Widget de formulario de contacto
Los formularios de contacto siempre aparecerán una entrada por línea en los dispositivos móviles.
Widget de cita
El widget de programación en línea de vcita tiene la opción de mostrar solo un botón en el dispositivo que elijas.
Debido aLanzamiento de Apple para iPads (iPadOS), los iPads muestran la misma vista que los de escritorio. Sin embargo, puedes cambiar a un diseño adaptable de escritorio y tableta para asegurarte de que todas las personalizaciones estén visibles
diseño adaptable muestra el encabezado de navegación superior en los escritorios más grandes y cambia automáticamente al encabezado del menú de hamburguesas cuando el tamaño de la pantalla es de 1024 píxeles o menos. El diseño de la pantalla pequeña se puede personalizar,
Nota
-
La mayoría de los sitios tendrán esta función habilitada automáticamente y la opción que se indica a continuación no estará disponible.
-
En los sitios en los que esta opción no esté activada, una vez activada, se eliminará la opción de desactivarla.
-
La vista móvil de un sitio creado en el editor clásico, incluido el encabezado, viene determinada por el dispositivo utilizado, no por el tamaño de la ventana del navegador. Por lo tanto, cambiar el tamaño del navegador de escritorio para simular una ventana gráfica móvil no representará con precisión el aspecto del sitio o del encabezado en los dispositivos móviles reales. Para ver la verdadera presentación móvil del sitio, incluido el encabezado, es mejor verlos directamente en un dispositivo móvil
Para usar diseños de sitio adaptables:
-
Haga clic Diseño del sitio.
-
En Escritorio, haga clic enDiseño responsivoalternar. Dispone de las siguientes opciones:
-
Selecciona un diseño de sitio de más de 1024 px.
-
Selecciona un diseño de sitio de 1024px y menos.
-
Después de cambiar a diseños de sitio adaptables, puedes cambiar de vista en la barra de navegación superior para mostrar Escritorio grande (más de 1024 píxeles), Escritorio o tableta pequeño (1024 píxeles o menos) y Móvil. Para obtener más información, consultaCambiar de vista.
A continuación encontrará información adicional sobre la tableta responsiva:
-
El CSS es el mismo para los puntos de interrupción de escritorios grandes y de escritorios/tabletas pequeños, y no verás un CSS para tabletas.
-
Las transiciones son más fluidas y no se basan en agentes de usuario.
-
Si tienes elementos ocultos en tu sitio, asegúrate de que estén visibles antes de activar el diseño adaptable. Para solucionarlo, desactiva el diseño adaptable y muestra todos los elementos ocultos. A continuación, puedes activar el diseño adaptable y volver a ocultar los elementos ocultos
-
La personalización ya no muestra una tableta. La selección del escritorio también afecta a las vistas de la tableta.
-
Tenga en cuenta que las siguientes personalizaciones para tabletas muestran automáticamente el diseño del escritorio y no es necesario personalizarlas:
-
Diseños de galería de fotos
-
Reglas de personalización de tabletas
-
Animaciones
-