Puntos de ruptura de DudaFlex

Descripción general de los puntos de ruptura

Los puntos de ruptura son rangos de píxeles que corresponden a la anchura 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.

Para conocer más sobre los puntos de ruptura de DudaFlex, vea el siguiente video:

Puntos de ruptura de DudaFlex

El punto de ruptura principal para DudaFlex es el escritorio. Si hace cambios de diseño o contenido en el punto de ruptura para computadora de escritorio, los cambios se aplican automáticamente a los otros puntos de ruptura para escritorio ancho, tableta y móvil. Si cambia el contenido, como agregar un widget, reemplazar una imagen o editar texto, el cambio se aplica automáticamente a todos los demás puntos de ruptura, independientemente de en qué punto de ruptura se haya hecho el cambio.

Sin embargo, si hace cambios en la posición o el tamaño de un elemento en puntos de ruptura específicos, los cambios no se aplicarán a otros puntos de ruptura. Por ejemplo, si cambia el tamaño de un elemento en el punto de ruptura para móvil, el cambio solo se aplicará a los puntos de ruptura para móvil y para móvil horizontal, y a ningún otro punto de ruptura.

En DudaFlex, los puntos de ruptura predeterminados son:

• Desktop (1025 px a 1399 px)

• Desktop ancho (1400 px en adelante)

• Tableta (768 px a 1024 px)

• Móvil (767 px y menos)

• Móvil horizontal (468 px a 767 px)

Usted puede cambiar entre los puntos de ruptura en la parte superior de la página haciendo clic en las diferentes vistas.

Cambios estructurales

Los cambios estructurales hechos en un punto de ruptura afectan a todos los otros puntos de ruptura. Cuando está en un punto de ruptura que no es el principal (escritorio) y hace un cambio estructural, aparece un mensaje de advertencia para informarle que el cambio afecta a todos los puntos de ruptura. Los cambios estructurales incluyen cambios de contenido o de diseño, como la adición o eliminación de secciones, columnas, flexboxes, widgets o cuadrículas avanzadas.

Ocultar en un punto de ruptura

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.

Para ocultar un elemento en un punto de ruptura específico:

1. Cambie al punto de ruptura en el que quiere ocultar el elemento haciendo clic en la vista de la barra de navegación superior.

2. Haga clic en el elemento que quiere ocultar.

3. Haga clic en el icono de los tres puntos horizontales () que está en el menú flotante y seleccione Ocultar en este punto de ruptura. O en el panel de capas, haga clic en Ocultar en este punto de ruptura junto al elemento.

Anulaciones de puntos de ruptura

Al cambiar el contenido, puede hacer el cambio desde cualquier punto de ruptura, lo que afectará a todos los puntos de ruptura. Sin embargo, hay ciertas ocasiones en las que necesita anular un punto de ruptura. Por ejemplo, en el punto de ruptura principal, una imagen está a la derecha de un párrafo, pero en móvil, necesita que la imagen esté arriba y el párrafo, abajo.

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