Los puntos de ruptura son rangos de píxeles que corresponden al ancho de diferentes dispositivos, como escritorio, tableta y móvil. Cuando el ancho de un dispositivo está dentro del rango de píxeles predefinido de un punto de ruptura, el diseño del sitio se ajusta para que el contenido y el diseño se optimicen en relación con el tamaño y la orientación de ese dispositivo. Por ejemplo, si estoy viendo un sitio en una computadora de escritorio, puedo ver el menú completo del sitio, pero cuando veo el sitio en mi dispositivo móvil, veo un menú de tres rayas en su lugar.
A continuación se muestran los puntos de interrupción ofrecidos en el editor:
-
desktop (1025px-1399px). Este es el punto de interrupción predeterminado.
-
Amplio desktop (1400px y más). Esto solo está disponible en el modo flexible en el Editor tradicional.
-
Tableta (768px-1024px)
-
Celular (767px y menos). Siempre recomendamos comprobar los cambios en los puntos de interrupción móviles en un dispositivo móvil, en lugar de cambiar el tamaño de una pantalla desktop .
-
Paisaje móvil (468px-767px). Esto solo está disponible en el modo flexible en el Editor tradicional.
Si realiza cambios en el diseño, la presentación o el contenido en el punto de interrupción de desktop predeterminado, los cambios se aplican automáticamente a los demás puntos de interrupción. Si cambia el contenido, como agregar a widget, editar texto o agregar o eliminar una sección, el cambio se aplica automáticamente a todos los demás puntos de interrupción, independientemente del punto de interrupción en el que se realizó el cambio. Por ejemplo, si agrega un widget en el punto de interrupción de la tableta, el widget también se agregará en todos los demás puntos de interrupción.
Sin embargo, si realiza cambios en la posición o el 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 cambia 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óvil y horizontal móvil y a ningún otro punto de interrupción.
Nota
Este contenido es relevante tanto para el modo Flex en el Editor tradicional como para el Editor 2.0. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Hay ciertas 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 el celular es necesario que la imagen esté arriba y el párrafo debajo.
A continuación, se muestran los cambios que puede hacer en un elemento y anular el punto de ruptura principal:
-
Alineación
-
Posición
-
Tamaño
-
Espaciado
Una vez que se anula un punto de ruptura, no se puede revertir el cambio cambiando el estilo en el punto de ruptura principal del mismo objeto.
Nota
Este contenido es relevante tanto para el modo Flex en el Editor tradicional como para el Editor 2.0. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Puede ocultar determinados elementos en puntos de ruptura específicos del panel de capas o en el menú flotante del elemento. Por ejemplo, puede ocultar una imagen en los dispositivos móviles y no afectará a otros puntos de ruptura.
Nota
Si oculta un elemento que tiene otros elementos dentro, todos los elementos anidados también se ocultarán en ese punto de ruptura. Por ejemplo, si oculta una columna flexible, también se ocultarán los widgets que estén dentro de esa columna flexible.
Para ocultar un elemento en un punto de ruptura específico:
-
Cambie al punto de ruptura en el que quiere ocultar el elemento haciendo clic en la vista de la barra de navegación superior.
-
Haga clic en el elemento que quiere ocultar.
-
Haga clic en el icono de tres puntos horizontales (
) en el menú flotante y seleccione Ocultar en este punto de interrupción. O en el panel de capas, haga clic en Ocultar este punto de interrupción junto al elemento.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Casi todo en el editor, con la excepción del encabezado y el pie de página, se puede editar en función de cada dispositivo al hacer que el contenido sea específico de ese dispositivo.
Para editar contenido por dispositivo:
-
Copie el contenido que desea que sea específico del dispositivo. Haga clic con el botón derecho en el widget, haga clic en copiar y, a continuación, haga clic en pegar.
-
Haga clic con el botón derecho en una de las widget, seleccione Ocultar en el dispositivo y, a continuación, seleccione el dispositivo en el que desea que se oculte el widget. Por ejemplo, si se establece un botón en Ocultar al desktop se quita el botón del desktop, pero se muestra el botón en los sitios para tabletas y dispositivos móviles.
-
Haga clic en el contenido original y seleccione Ocultar en el dispositivo, luego oculte el contenido en los dispositivos en los que no desea cambiarlo. Por ejemplo, si configura el botón de copia en Ocultar en desktop, establecería el botón original en Ocultar en tableta y Ocultar en celular. De esta manera, tendrás dos botones diferentes; uno que se muestra en su desktop y otro que se muestra en su tableta y móvil.
-
Si desea que el contenido sea diferente en los tres dispositivos, puede copiarlo de nuevo (para tener un total de tres copias del mismo contenido) y hacer que se muestre un botón diferente en cada dispositivo.
-
Ahora, tiene dos (o tres) fragmentos de contenido idénticos, pero diferentes, y cada uno se muestra en un dispositivo distinto. Cualquier otro cambio realizado en este contenido solo afectará al dispositivo en el que el contenido está configurado para mostrarse.
Es posible que aún se muestre contenido oculto en el código del sitio activo (luego de publicarlo o volver a publicarlo). Esto es esperable y se debe a la tecnología empleada. Cuando ocultas un widget, una sección o cualquier contenido del editor en un dispositivo específico, lo ocultamos mediante consultas de medios CSS. Lo que esto significa es que el HTML (aunque esté oculto en el sitio web) todavía existe dentro del sitio web cuando un espectador mira el contenido. Esto a veces puede causar un problema en el que un tool de auditoría que escanea el sitio web identificará este contenido oculto, aunque pensara que se eliminó de la página.
Los sitios web adaptables funcionan en desktop, tabletas y móviles. Por esta razón, nuestro editor adaptable le permite obtener una vista previa del sitio en cada una de estas vistas durante la edición. Esto le permite verificar cómo se ve su sitio en diferentes dispositivos antes de publicar, asegurando que sus clientes tengan una experiencia positiva sin importar qué dispositivo estén utilizando para ver el sitio.
Para cambiar las vistas de dispositivo, haga clic en uno de los botones de dispositivo en la barra de navegación superior:
Las vistas para distintos dispositivos no son versiones independientes de su sitio. Al eliminar un elemento en una vista (por ejemplo, móvil), ese elemento se elimina de todo el sitio (dispositivo de escritorio, tableta y móvil). En lugar de eliminarlo, haga clic en el botón derecho encima del elemento y seleccione para ocultarlo en un dispositivo específico.
Las vistas previas de dispositivos no siempre reflejan con exactitud lo que verá en un dispositivo real. Características como fuentes, tamaño de la ventana del dispositivo, interfaz de usuario y comportamiento del navegador pueden hacer que estas vistas previas sean inexactas en distinta medida. Para la versión más precisa del sitio, verifique en un dispositivo real.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Las modificaciones realizadas en un dispositivo aparecen en todos los dispositivos. Por ejemplo, cuando se elimina una fila en la vista de tableta de su sitio, la fila también faltará en las vistas de desktop y celular de su sitio. Esto se debe a que el contenido se puede compartir entre todos los dispositivos. Sin embargo, es posible que desees diferenciar qué contenido aparece en qué dispositivos. Puede emplear nuestras funciones de edición por dispositivo para lograr esto y ofrecer a sus visitantes contenido que sea apropiado para el dispositivo desde el cual acceden a su sitio.
Al realizar modificaciones en un dispositivo específico, a menudo es necesario cambiar de vista. Para obtener más información, consulte Cambiar vistas.
Muchas configuraciones indicarán a qué dispositivos afectan. Por ejemplo, una configuración puede decir "Cambiar afecta a desktop y tableta" junto con un icono que representa los dispositivos.
Hay varias ediciones en el editor que se pueden cambiar sin afectar los dispositivos móviles. Son las siguientes:
-
Espaciado (márgenes y relleno)
-
Ubicación
-
Ancho
-
Altura
-
Fondo del sitio/página
-
Tamaño de la fuente (no afectará el texto que se ha editado antes para 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 desktop y móvil
Cualquier otra edición que realice en la vista de cada dispositivo afectará a los demás dispositivos.
Si bien algunos widgets funcionan adecuadamente en todos los dispositivos, hay algunas diferencias marcadas entre dispositivos que generan la necesidad de un conjunto diferente de características o de preferencias de diseño por dispositivo.
A continuación encontrará una lista de widgets con sugerencias de diseño y notas para elaborar ciertos widgets en ciertos dispositivos.
Imágenes de fondo
Debido a marcadas diferencias en las relaciones de aspecto entre los dispositivos, es importante prestar atención especial a cómo diseña usted las imágenes para su sitio web. Por ejemplo, un fondo de página completa en una fila puede lucir magnífico 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 anchura, mientras que con los dispositivos móviles ocurre exactamente lo contrario. Puedes establecer un fondo de página diferente por dispositivo en la configuración del tema del sitio. Se recomienda usar una imagen de fondo ancha para escritorios y una imagen estrecha para móviles o tabletas.
Widget Deslizador
Al igual que con la imagen de fondo, las imágenes que seleccionó para la versión de escritorio del widget de deslizador pudieran no lucir tan bien en tableta o escritorio. Se recomienda:
-
Ajustar el tamaño del marco para que se adapte a móviles, u
-
Ocultar el deslizador en dispositivos de escritorio y crear en su lugar una versión específicamente para móviles
Imágenes e iconos widget
El tamaño del widget de imágenes no se ajusta automáticamente en la versión móvil. Es importante revisar tus dispositivos móviles en los que el widget de imágenes se usa para realizar los ajustes necesarios en el encuadre.
hover efectos en dispositivos móviles o tabletas
En comparación con los dispositivos desktop , las tabletas y los dispositivos móviles no tienen ningún efecto hover . Cualquier diseño u opción hover está deshabilitado en tabletas/dispositivos celulares.
Widget Mapas
El widget Mapa tiene opciones específicas del dispositivo para cuándo se mostrará como un botón o un mapa.
Formulario de contacto widget
Los formularios de contacto siempre aparecerán con una entrada por línea en el celular.
Widget vCita
El widget de programación en línea de vCita tiene una opción para mostrar solo un botón, en el dispositivo de su elección.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Debido al lanzamiento de Apple para iPad (iPadOS), iPad mostrar la misma vista que desktop. Sin embargo, puede cambiar a un diseño de tableta desktopadaptable para cerciorar de que todas las personalizaciones sean visibles en los sitios en tiempo real.
El diseño responsivo muestra el encabezado de navegación superior en los equipos desktop más grandes y cambia automáticamente al encabezado del menú de hamburguesa cuando el tamaño de la pantalla es de 1024 px e inferior.Si es necesario, puede personalizarse el diseño para pantalla pequeña.
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 no se haya activado, 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 una ventana del navegador. Como resultado, redimensionar su navegador desktop para simular un viewport móvil no representará con exactitud cómo se ve el sitio o el encabezado en dispositivos móviles reales. Para ver la verdadera presentación móvil del sitio, incluido el encabezado, lo mejor es verlos directamente en un dispositivo móvil.
Para usar diseños responsivos de sitios:
-
En el panel lateral del editor, haga clic en Tema y luego en Diseño del sitio.
-
En desktop haga clic en el botón de alternancia Diseño adaptable. Tienes las siguientes opciones:
-
Seleccionar un diseño de sitio mayor a 1024 px.
-
Seleccionar un diseño de sitio de 1024 px o menor.
-
Luego de cambiar a diseños de sitio adaptables, puede cambiar las vistas en la navegación superior para mostrar desktop grande (por encima de 1024 px), desktoppequeño /tableta (1024 px y menos) y móvil. Para obtener más información, consulte Cambiar vistas.
A continuación se muestra información adicional sobre la tableta responsiva:
-
El CSS es el mismo para los puntos de interrupción de Desktop grande y Desktop pequeño/tablet, y no verá un CSS para tableta.
-
Las transiciones son más suaves y no están basadas en agentes usuarios.
-
Si ocultó elementos en su sitio, asegúrese de que estén visibles antes de activar Diseño adaptable. Para solucionarlo, desactive Diseño adaptable, y muestre todos los elementos ocultos. Luego puede activar Diseño adaptable y volver a ocultar los elementos ocultos.
-
La personalización ya no muestra una tableta. Seleccionar el escritorio también afecta la s vistas de tableta.
-
Tenga en cuenta que las siguientes personalizaciones de la tableta muestran automáticamente el diseño para desktop, y no es necesario personalizarlas:
-
Diseños de galería fotográfica
-
Reglas de personalización dela tableta
-
Animaciones
-