Los puntos de interrupción (denominados tamaños de pantalla en Editor 2.0) son intervalos de pixeles que corresponden al ancho de diferentes dispositivos, como desktop, tabletas y dispositivos móviles. Cuando el ancho de un dispositivo se encuentra dentro de un rango de pixeles predefinido de puntos de interrupción, el diseño del sitio se ajusta para que el contenido y el diseño estén optimizados para el tamaño y la orientación de ese dispositivo. Por ejemplo, si estoy viendo un sitio en una computadora desktop , puedo ver el menú completo del sitio, pero cuando veo el sitio en mi dispositivo móvil, veo un menú de hamburguesas en su lugar.
A continuación se muestran los puntos de interrupción que se ofrecen en el editor:
-
desktop (1025px-1399px). Este es el punto de interrupción predeterminado.
-
Amplio desktop (1400 px y superior). Esto solo está disponible en el modo flex en el Editor tradicional.
-
Tableta (768px-1024px)
-
Celular (767px e inferior). 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 flex en el Editor tradicional.
Si realiza cambios en el diseño, la presentación o el contenido en el punto de interrupción 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óviles y del entorno 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 la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu sitio.
Hay ciertas ocasiones en las que es necesario invalidar 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 necesita que la imagen esté en la parte superior 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 borde
-
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 la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu 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 bien, en el panel de capas, haga clic en Ocultar en 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 (anteriormente conocido como el Editor All-Flex). Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu 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 cambiar este contenido. Por ejemplo, si configura el botón de copia en Ocultar al 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 diferente 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 el contenido oculto siga apareciendo en el código del sitio en tiempo real (luego de publicar/volver a publicar). Esto es esperable y debido 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 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 (anteriormente conocido como el Editor All-Flex). Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu sitio.
Las ediciones 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 desktop y celular de su 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. 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 que acceden a su sitio.
Al realizar ediciones en un dispositivo específico, a menudo es necesario cambiar de vista. Para obtener más información, consulte Cambiar vistas.
Muchos ajustes indicarán a qué dispositivos afectan. Por ejemplo, una configuración puede decir "El cambio 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 escritorio 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 y widget de iconos
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 desktop dispositivos, 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 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 (anteriormente conocido como el Editor All-Flex). Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu 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 desktopreceptivo 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 1024px 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, está determinada por el dispositivo utilizado, no por el tamaño de la ventana del navegador. Como resultado, cambiar el tamaño de su navegador de escritorio para simular una ventana de visualización de móvil no representará con precisión 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 hacerlo directamente en un dispositivo móvil.
Para usar diseños responsivos de sitios:
-
En el panel lateral del editor, haga clic en Tema y, a continuación, haga clic en Diseño del sitio.
-
En desktop haga clic en el botón de alternancia Diseño adaptable. Tiene 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 sitios 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 receptiva:
-
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
-