Las secciones flexibles son filas con dos columnas flexibles predeterminadas que crean un diseño básico. Una vez agregada una sección, puede agregar, eliminar o reorganizar columnas adicionales, cuadros flexibles o cuadrículas avanzadas para crear el diseño deseado. Después, puede agregar widgets a ese diseño.
Nota:
Este artículo solo es relevante para los usuarios que empezaron a usar Flex después del 18 de julio de 2022. Si usas la versión 1.0 de Flex, consulta "Agregar y editar secciones de Flex (1.0)".
Añadir sección
Para agregar una sección:
- Inicie sesión en su cuenta de Guesty.
- En la barra de navegación superior, haga clic en el selector de modo y seleccione Modo de crecimiento.
- Haga clic en Distribución.
- Haga clic en la miniatura de Sitios web de Guesty.
- A la derecha del sitio web correspondiente, haga clic en Editar.
- Pase el cursor entre las filas y haga clic +Agregar sección. O bien, haga clic derecho para abrir el menú contextual y haga clic en Agregar y luego seleccione Sección flexible.
- En el panel lateral, haga clic en Secciones flexibles.
- Seleccione la sección flexible deseada.
- Haga clic Guardar.
Nota:
Guardar sección
Para guardar una sección:
- Coloque el cursor sobre la sección deseada y haga clic Sección flexible en la esquina superior izquierda de la sección.
- Haga clic Guardar como Sección y luego haga clic Seleccionar solo esta fila.
- Escriba un nombre para la sección, seleccione la categoría en la que se guardará la sección y seleccione los permisos para la sección.
- Haga clic Empezar a crear.
- Haga clic Hecho.
Eliminar sección
Para eliminar una sección, haga clic derecho para abrir el menú contextual y seleccione Eliminar. O bien, haga clic en el borrar icono en el menú flotante.
Agregar columna
Una vez que hayas añadido una sección a tu sitio, puedes añadir columnas para incluir widgets dentro de ella. Todas las secciones contienen columnas por defecto, pero puedes añadir más.
Nota:
Al agregar un elemento a una columna, su posición se determina mediante los ajustes de diseño automático. Para cambiar la dirección del diseño automático, abra el panel de diseño y, en la sección Diseño , seleccione horizontal o vertical.
Para agregar una columna:
Haga clic para seleccionar una columna existente.
En el menú flotante, haga clic en el icono de tres puntos horizontales (
), luego seleccione Agregar columna. O bien, haga clic en el icono "+" en el borde izquierdo o derecho de la columna.
Columna duplicada
Puedes duplicar una columna y se añadirá a la derecha de la tarjeta original. No puedes añadir columnas que superen el 100 % del ancho, incluido el espaciado.
Para duplicar una columna:
Haga clic para seleccionar una columna.
En el menú flotante, haga clic en el Duplicar icono. O bien, puede hacer clic derecho en la columna para abrir el menú contextual y seleccionar Duplicar.
Eliminar columna
Puedes eliminar una columna para quitarla de la sección. Sin embargo, cada sección debe contener al menos una columna, lo que significa que no puedes eliminar la última columna de una sección.
Para eliminar una columna:
Haga clic para seleccionar la columna.
En el menú flotante, haga clic en el Borrar icono. O bien, puede hacer clic derecho en la columna para abrir el menú contextual y seleccionar Borrar.
Agregar widget
Puedes añadir widgets a columnas, cuadros flexibles o cuadrículas avanzadas de varias maneras. Si ya estás en modo flexible, puedes añadir widgets directamente desde el panel lateral haciendo clic en Widgets y seleccionando el widget deseado.
Nota:
Mientras esté en el editor clásico, no puedes arrastrar y soltar un widget en una columna flexible desde el panel lateral.
Para agregar un widget:
- Haga clic en una columna, un cuadro flexible o una cuadrícula avanzada para seleccionarlo.
- Haga clic en el icono del signo más en el centro de la columna, el cuadro flexible o la cuadrícula avanzada. O bien, haga clic en el icono del signo más en el menú flotante.
- Seleccione un widget.
También puedes agregar widgets desde el panel de capas.
Para agregar un widget desde el panel de capas:
- Haga clic para seleccionar una columna.
- En el panel lateral, haga clic en Capas.
- En el panel de capas, pase el cursor sobre la columna, el cuadro flexible o la cuadrícula avanzada a la que desea agregar un widget y haga clic en el ícono más.
- Seleccione un widget.
Clases CSS para elementos flexibles (modo flexible)
En el modo flexible, puedes añadir clases CSS a elementos flexibles (sección, columna, columna interna y cuadrículas avanzadas). Usar clases CSS te ahorra tiempo al aplicar estilo a los elementos. Por ejemplo, en lugar de usar el panel de diseño para cambiar el relleno y el tamaño de una sola columna, puedes crear una clase CSS y aplicar estos cambios de estilo a cualquier número de columnas.
La misma clase se puede aplicar a múltiples elementos en la misma página, y múltiples clases se pueden aplicar al mismo elemento.
Nota:
Debe tener acceso al modo de desarrollador para utilizar esta función.
Para agregar o editar una clase CSS:
- Seleccione el elemento flexible deseado (sección, columna, columna interna o cuadrícula avanzada).
- Seleccione Agregar nombre de clase CSS desde el menú flotante o el menú contextual.
- Escriba un nuevo nombre de clase CSS o seleccione un nombre de clase existente en el menú desplegable (puede seleccionar varias clases).
- (Opcional) Si aún no ha agregado la clase CSS al código, haga clic en Abrir modo Dev.
- Haga clic en Listo.
