DudaFlex es un modo para diseñar secciones de píxeles perfectos y adaptables con capacidades de diseño adicionales. DudaFlex le permite crear y editar sitios rápidamente, al tiempo que usted sigue usando las funciones de construcción del editor clásico que ya conoce. En comparación con el editor clásico, DudaFlex ofrece diseño automático, alineación y distribución de varios elementos, unidades de tamaño adaptables y más control sobre las columnas. Esto es lo que te permite crear y editar diseños adaptables más rápidamente que en el editor clásico.
Puede agregar una sección flexible a un sitio actual o crear un nuevo sitio usando una plantilla flexible. Si usa una plantilla flexible, todas las secciones se crean con flex. El encabezado no está hecho con flex y si agrega una nueva página, tienda, blog o página de membresía, no se crearán con flex de forma predeterminada, pero puede agregar secciones flexibles a estas páginas.
Este artículo solo es relevante para los usuarios que comenzaron a usar DudaFlex después del 18 de julio de 2022. Si tiene DudaFlex versión 1,0, consulte Descripción general de DudaFlex (1.0).
Para obtener más información sobre DudaFlex, vea el siguiente video:
Terminología de Flex
A continuación se proporcionan definiciones de terminología relacionada específicamente con DudaFlex.
Modo Flex. Donde se crean y editan secciones flexibles. En el modo Flex, tiene acceso a funciones de diseño que no están presentes en el editor clásico, pero sigue teniendo acceso a las funciones de diseño del editor clásico.
Sección Flex. Una fila con columnas flexibles predeterminadas que crean un diseño. Puede agregar, eliminar o cambiar el orden de las columnas flexibles dentro de una sección flexible. Las secciones flexibles se pueden guardar como plantillas para uso futuro.
Columna flexible. Donde se añaden los widgets. Las columnas flexibles tienen un diseño automático, lo que significa que los widgets que están dentro se alinean automáticamente en forma vertical u horizontal. Debido al diseño automático, usted no puede mover elementos libremente dentro de una columna flexible, sino que debe usar las opciones de alineación, espaciado y margen para mover los elementos.
Flexboxes verticales y horizontales . Un contenedor que alinea automáticamente los widgets dentro de él en forma vertical u horizontal. Debido al diseño automático, usted no puede mover elementos libremente dentro de un flexbox vertical u horizontal, sino que debe usar las opciones de alineación, espaciado y margen para mover los elementos.
Cuadrícula avanzada. Se usa para crear composiciones con formato libre o elementos superpuestos. La cuadrícula avanzada no proporciona diseño automático ni alineación vertical como las columnas flex. Debido a esto, le recomendamos que verifique su diseño en todos los puntos de ruptura.
Punto de ruptura. Rangos de píxeles que corresponden al ancho de distintos dispositivos, como la computadora de escritorio, la tableta y el dispositivo 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.
Elementos flex. Una cuadrícula avanzada o flexbox horizontal o vertical que se coloca dentro de una columna flex.
Jerarquía de elementos
En el modo Flex, las secciones flexibles contienen columnas flexibles y las columnas flexibles contienen widgets. Esta es una jerarquía predeterminada, lo que significa que no podrá agregar un widget a una sección flexible sin tener una columna flexible.
Seleccionar elementos
Hay varios métodos para seleccionar un elemento (sección flexible, columna flexible o widget):
Pase el cursor sobre el elemento y haga clic en. Al pasar por encima de un elemento con el cursor, busque el contorno azul que indica qué elemento seleccionará su clic.
Seleccionar elementos desde el panel de capas. En el panel lateral, haga clic en Capas. Desde allí, puede seleccionar cualquier elemento de la sección correspondiente.
Seleccionar elementos desde el panel de diseño. Haga clic en la ruta de navegación del panel de diseño para seleccionar un elemento.
Seleccione elementos en el menú flotante. Si ya tiene un elemento seleccionado, coloque el cursor sobre el nombre del elemento en el menú flotante y aparecerán otros elementos dentro de esa sección.
MODO FLEX
Panel de capas
El panel de capas se muestra en la parte izquierda del modo Flex y muestra los elementos flexibles en la sección seleccionada. Los elementos se muestran según su jerarquía, con las secciones en el nivel superior. En el panel de capas, puede agregar elementos nuevos, seleccionar elementos, reorganizarlos, cambiarles el nombre y ocultarlos o mostrarlos en ciertos puntos de ruptura.
Panel de diseño
El panel de diseño se muestra en el lado derecho del modo Flex y contiene los controles de diseño para el elemento seleccionado (sección flexible, columna flexible o widget). Las opciones de diseño incluyen diseño, tamaño, alineación y más, según el elemento seleccionado.
Menú flotante
El menú flotante aparece cuando seleccionas un elemento. Desde el menú flotante, puede alternar entre elementos, agregar elementos, abrir los paneles de contenido o diseño, duplicar el elemento, ajustar la alineación, eliminar el elemento y mucho más.
Preguntas frecuentes
¿Cuál es la diferencia entre DudaFlex y el editor clásico?
En comparación con el editor clásico, DudaFlex ofrece capacidades de diseño adicionales que le permiten crear sitios adaptables con mayor rapidez y facilidad. Las siguientes son capacidades de diseño que ofrece DudaFlex pero el editor clásico no:
Ahorra tiempo . Flex se basa en el diseño automático, lo que significa que el diseño está optimizado para adaptarse a cualquier punto de ruptura.
Alineación de contenido. Le permite alinear todos los elementos de una columna flexible al mismo tiempo. En el editor clásico, debe alinear cada elemento en forma individual.
Alineación automática. Las columnas flexibles y los flexboxes alinean automáticamente los elementos en forma vertical u horizontal.
Número de columnas. En el modo Flex, puede agregar más de 4 columnas a una sección con hasta un 100 % de ancho de pantalla.
Espacio entre elementos. Le permite establecer el espacio entre elementos una vez y se aplica a todos los elementos de una columna flexible.
Dimensionamiento de elementos. Ajusta el tamaño de los elementos para optimizar la altura de la pantalla en píxeles y el ancho de la pantalla en porcentaje.
Edición más rápida . Con las funcionalidades de diseño avanzadas de DudaFlex, puede editar un diseño existente mucho más rápido que en el editor clásico.
¿Cuál es la diferencia entre DudaFlex versión 1.0 y versión 2.0?
Todo lo creado con DudaFlex antes del 18 de julio de 2022 se creó con la versión 1.0 de DudaFlex . Las plantillas o secciones de equipo creadas anteriormente se seguirán editando con DudaFlex versión 1.0, pero en adelante los diseños de nueva creación utilizarán DudaFlex versión 2.0. Si está editando una plantilla o sección de equipo creada en DudaFlex 1.0 habrá un indicador que dice DudaFlex versión 1.0 en la barra superior, en el nombre de la sección y en el panel de capas. Después del 18 de julio de 2022, todos los sitios nuevos o sitios que no usaban flex anteriormente están en DudaFlex versión 2.0 y no pueden acceder a DudaFlex versión 1.0.
La versión 2.0 de DudaFlex es más simplificada y similar al editor clásico que la versión 1.0. La versión 2.0 ofrece componentes más predefinidos para que los usuarios puedan crear y editar diseños de manera más rápida. En lugar de usar una cuadrícula para colocar los objetos, los usuarios ahora pueden agregar columnas que actúan como un diseño para colocar widgets. Las columnas proporcionan al usuario un diseño automático, lo que significa que los objetos se verán muy bien en cada punto de ruptura sin necesidad de editarlos más.