Descripción general de DudaFlex

¿Qué es DudaFlex?

Nota

Esta función está todavía en desarrollo y se implementará gradualmente para todos los clientes.

DudaFlex es un nuevo modo para diseñar secciones y páginas en Duda, basado en la nueva tecnología de edición en línea y en diseños flexibles como: cuadrícula CSS, flex, alineación mejorada, etc. DudaFlex permite una total capacidad de respuesta y una precisión de píxeles para cualquier elemento mediante puntos de ruptura.

DudaFlex se integra perfectamente en el editor existente para que los usuarios puedan elegir cuándo y dónde utilizarlo. Esto significa que DudaFlex contiene todas las mismas ventajas de nuestro editor, pero con muchas más capacidades de diseño.

Añadir secciones de DudaFlex

Para añadir una sección de DudaFlex:

  1. Mantenga el cursor entre las filas y luego haga clic en el botón Añadir sección. Las secciones se muestran en el panel lateral. También puede hacer clic con el botón derecho para abrir el menú contextual y, luego, hacer clic en Añadir sección.
  2. En el panel lateral, haga clic en Secciones Flex.
  3. Haga clic en la sección Flex que desee añadir y, en la parte superior de la pantalla, haga clic en Guardar.
  4. Se abre el modo Flex con la sección a editar.

Para obtener más información, consulte Añadir y editar secciones de DudaFlex.

Descripción general del Modo Flex

Panel de capas

El panel de capas se muestra en la parte izquierda del editor y presenta los elementos de la página (cuadrículas, widgets, flexboxes, cuadros de texto, etc.). Desde aquí se pueden seleccionar, reorganizar y renombrar los elementos. El panel de capas siempre comienza con la sección, debajo de ella están las cuadrículas seguidas de los widgets o contenedores.

layers_panel.png

Además, puede navegar entre los elementos de las siguientes formas:

  • Seleccione un elemento en la cuadrícula y señale el elemento en el menú que aparece arriba.
    navigate_elements.png
  • Haga clic en la ruta de navegación arriba del panel de diseño.

Panel de diseño

El panel de diseño se muestra en la parte derecha del editor y contiene sus controles de diseño para el elemento seleccionado (contenedor, flexbox, widget). Las opciones de diseño incluyen el diseño, el tamaño, la alineación, y más.

design_panel.png

Medidas del tamaño del panel de diseño

En DudaFlex tiene varias medidas de tamaño.

  • Píxel (px). El tamaño permanece igual en cada punto de ruptura.
  • Ancho de ventana (vw). % de la anchura del elemento cuando se muestra en una pantalla determinada. 10 vw es el 10 % de la anchura de la ventana. 100 vw ocupa el 100 % del ancho de la pantalla. De forma predeterminada, los márgenes y los tamaños de los widgets se establecen en %.
  • Alto de ventana (vh). % de la altura de un elemento cuando se muestra en una pantalla determinada. 10 vh es el 10 % de la altura de la ventana en cada tamaño de pantalla.
  • A. El contenido determina automáticamente el tamaño.
  • Mínimo y máximo. La medida más pequeña/más grande de un elemento. Este ajuste garantiza que un elemento no se haga más pequeño/más grande que esto cuando se cambia el tamaño.

Alineación

Ordenar

Puede reorganizar los objetos superpuestos tanto en el panel de diseño como en el de capas, simplemente arrastrando el objeto por debajo o por encima.

arrange.png

Alineación automática de Flexbox vs alineación

Para los flexboxes, hay dos configuraciones diferentes de alineación automática en el panel de diseño.

  • En Diseño, seleccione Diseño vertical u Horizontal para establecer un eje para los elementos dentro del flexbox.
  • En Alineación en Flexbox, seleccione cómo se colocarán los elementos en el eje seleccionado.
    flexbox_align.png
  • En Alinear, seleccione cómo se alineará todo el flexbox con respecto a la cuadrícula. Únicamente se puede alinear bajo el eje contrario.
    flexbox_align2.png
  • En Alinear, seleccione dónde se alinea un elemento dentro de un flexbox (por ejemplo, un botón) en el eje de diseño automático elegido.
    flexbox_align3.png
PIN

En el panel de diseño, puede anclar elementos a una posición específica en una celda, de modo que la ubicación permanezca igual en relación con la celda cuando el tamaño de esta cambie.

Para anclar un elemento a una posición en una celda:

  1. Seleccione el elemento y, en el panel de diseño, desplácese a Posición.
  2. Junto a Anclar, haga clic en la flecha correspondiente al lugar donde desea anclar el elemento en la celda.
    pin.png

El elemento se mantiene anclado a esta ubicación en la celda cuando el tamaño de la cuadrícula cambia.

Puntos de ruptura

Nota

Para obtener más información, consulte Tableta adaptable.

Un punto de ruptura es el tamaño en el que el diseño se ajusta a un ancho de pantalla específico. Los puntos de ruptura permiten que los diseños se adapten a medida que se escalan hacia arriba y hacia abajo. 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.

breakpoints.png

Los cambios hechos en el punto de ruptura principal (desktop) afectan a todos los puntos de ruptura. Sin embargo, si necesita hacer cambios en la posición y el tamaño de los elementos para un punto de ruptura específico (por ejemplo, móvil horizontal), estos cambios no afectarán a los otros modos. Los cambios hechos en el punto de ruptura de móvil afectan al punto de ruptura de móvil horizontal.

Nota

Si realiza un cambio estructural cuando se encuentra en un punto de ruptura que no sea el principal (desktop), aparecerá un mensaje de advertencia para informarle que el cambio afecta a todos los puntos de ruptura.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 1

Comentarios sobre este artículo

0 comentarios

Inicie sesión para dejar un comentario.

×

Inicie sesión como profesional

El soporte telefónico prioritario está disponible exclusivamente para profesionales. Inicie sesión en su cuenta Pro ahora para ver nuestros números de soporte internacional.

Entrar
¿No es un profesional? ¡Compre un plan Pro!