Flex es un modo para diseñar secciones responsivas con una precisión de píxeles perfecta, y con funciones de diseño adicionales. Flex te permite crear y editar sitios web de Guesty rápidamente, sin perder las funciones de creación del editor clásico que ya conoces. A diferencia del editor clásico, Flex ofrece diseño automático, alineación y distribución de múltiples elementos, unidades de tamaño responsivas y mayor control sobre las columnas. Esto te permite crear y editar diseños responsivos con mayor rapidez que en el editor clásico.
Puedes añadir una sección flexible a un sitio web existente o crear uno nuevo con una plantilla flexible. Si usas una plantilla flexible, todas las secciones se crean con Flex. El encabezado no se crea con Flex, y si añades una página, tienda, blog o página de membresía, no se crearán con Flex de forma predeterminada, pero puedes añadir secciones flexibles a estas páginas.
Nota:
Este artículo solo es relevante para los usuarios que comenzaron a usar Flex después del 18 de julio de 2022. Si usas la versión 1.0 de Flex, consulta el Resumen de Flex (1.0).
Terminología flexible
A continuación se proporcionan definiciones de terminología específicamente relacionada con Flex.
Modo flexible. Permite crear y editar secciones flexibles. En este modo, se accede a funciones de diseño que no están disponibles en el editor clásico, pero se mantienen las funciones de construcción del editor clásico.
Sección flexible. Una fila con columnas flexibles predeterminadas que crean un diseño. Puedes 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 agregan widgets. Las columnas flexibles tienen un diseño automático, lo que significa que los widgets que contienen se alinean automáticamente vertical u horizontalmente. Debido a este diseño, no es posible mover elementos libremente dentro de una columna flexible; en su lugar, se deben usar los ajustes de alineación, espaciado y márgenes para moverlos.
Flexboxes verticales y horizontales. Un contenedor que alinea automáticamente los widgets dentro de él vertical u horizontalmente. Debido al diseño automático, no es posible mover elementos libremente dentro de un flexbox vertical u horizontal; en su lugar, se deben usar los ajustes de alineación, espaciado y márgenes para mover los elementos.
Cuadrícula avanzada. Se utiliza para crear composiciones de forma libre o elementos superpuestos. La cuadrícula avanzada no ofrece diseño automático ni alineación vertical como las columnas flexibles. Por ello, recomendamos revisar el diseño en todos los puntos de interrupción.
Punto de interrupción. Rangos de píxeles que corresponden al ancho de diferentes dispositivos, como computadoras de escritorio, tabletas y dispositivos móviles. Cuando el ancho de un dispositivo se encuentra dentro del rango de píxeles predefinido de un punto de interrupción, el diseño del sitio se ajusta para optimizar el contenido y la orientación del dispositivo.
Elementos flexibles. Una cuadrícula avanzada o un cuadro flexible, horizontal o vertical, que se coloca dentro de una columna flexible.
Jerarquía de elementos
En el modo flexible, las secciones flexibles contienen columnas flexibles, y estas contienen widgets. Esta es una jerarquía predeterminada, lo que significa que no se puede agregar un widget a una sección flexible sin 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 el cursor sobre un elemento, busque el contorno azul que indica qué elemento se seleccionará al hacer clic.
Seleccione elementos del panel de capas. En el panel lateral, haga clic en Capas. Desde aquí, puedes seleccionar cualquier elemento de la sección seleccionada.
Seleccionar elementos del panel de diseño. Haga clic en las migas de pan del panel de diseño para seleccionar un elemento.
Seleccione elementos del menú flotante. Si ya tiene un elemento seleccionado, pase el cursor sobre su nombre, encima del menú flotante, y aparecerá una ruta de navegación con elementos flexibles.
Modo flexible
Panel de capas
El panel de capas se muestra a la izquierda del modo flexible y presenta los elementos flexibles de la sección seleccionada. Los elementos se muestran según su jerarquía, con las secciones como el nivel superior. Desde el panel de capas, puedes agregar, seleccionar, reorganizar, renombrar y ocultar o mostrar elementos en puntos de interrupción específicos.
Panel de diseño
El panel de diseño se muestra a la derecha del modo flexible 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 al seleccionar un elemento. Desde él, puedes alternar entre elementos, añadirlos, abrir los paneles de contenido o diseño, duplicar el elemento, ajustar la alineación, eliminarlo y mucho más.
Preguntas frecuentes
¿Cuál es la diferencia entre Flex y el editor clásico?
En comparación con el editor clásico, Flex ofrece funciones de diseño adicionales que permiten crear sitios web adaptables de forma más rápida y sencilla. Las siguientes son funciones de diseño que Flex ofrece, 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 interrupción.
Alineación de contenido. Permite alinear todos los elementos de una columna flexible simultáneamente. En el editor clásico, es necesario alinear cada elemento individualmente.
Alineación automática. Las columnas flexibles y los cuadros flexibles alinean automáticamente los elementos vertical u horizontalmente.
Número de columnas. En el modo flexible, puedes añadir más de 4 columnas a una sección, con hasta el 100% del ancho de la pantalla.
Espacio entre elementos. Permite establecer el espacio entre elementos una vez y se aplica a todos los elementos de una columna flexible.
Tamaño de los 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 Flex capacidades de diseño avanzadas: puedes editar un diseño existente mucho más rápido que en el editor clásico.
¿Cuál es la diferencia entre la versión 1.0 y la versión 2.0 de Flex?
Cualquier cosa creada con Flex antes del 18 de julio de 2022, fue creada usando Flex versión 1.0. Las plantillas o secciones de equipo creadas previamente se continuarán editando con Flex versión 1.0, pero en el futuro, los diseños nuevos utilizarán Flex versión 2.0. Si estás editando una plantilla o sección de equipo creada en Flex 1.0, habrá un indicador que lee Flex 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 Flex versión 2.0 y no se puede acceder a Flex versión 1.0.
Flex la versión 2.0 es más sencilla y similar al editor clásico que la versión 1.0. Ofrece más componentes predefinidos para que los usuarios puedan crear y editar diseños con mayor rapidez. En lugar de usar una cuadrícula para colocar objetos, ahora se pueden añadir columnas que actúan como un diseño para colocar widgets. Las columnas permiten al usuario un diseño automático, lo que significa que los objetos se verán perfectos en cada punto de interrupción sin necesidad de edición adicional.
Limitaciones
Actualmente, no es posible agregar idiomas adicionales a su sitio en modo flexible. Primero deberá salir del modo flexible. Para más información sobre sitios multilingües, consulte Configurar un sitio multilingüe.
