Flex es un modo para diseñar secciones responsivas con una precisión de píxeles perfecta y 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 creació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 añaden widgets. Las columnas flexibles tienen un diseño automático, lo que significa que los widgets que contienen se alinean automáticamente de forma vertical u horizontal. 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 de forma vertical u horizontal. 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 moverlos.
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 de ese 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):
Selecciona elementos del panel de capas . En el panel lateral, haz clic en Capas . Desde aquí, puedes seleccionar cualquier elemento de la sección seleccionada.
Selecciona elementos del panel de diseño . Haz clic en las migas de pan del panel de diseño para seleccionar un elemento.
Selecciona elementos del menú flotante . Si ya tienes un elemento seleccionado, pasa el cursor sobre su nombre en el 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 muestra 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:
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 de forma vertical u horizontal.
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 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 tu sitio en modo flexible. Primero deberás salir del modo flexible. Para más información sobre sitios multilingües, consulta Configurar un sitio multilingüe .