El panel de diseño se muestra a la derecha del modo flexible y contiene las propiedades de diseño del elemento seleccionado (sección, columna, widget, cuadro flexible o cuadrícula avanzada). Cada elemento tiene diferentes propiedades que se pueden ajustar en el panel de diseño, lo que significa que varían según el elemento seleccionado. Las propiedades de diseño incluyen alineación, disposición, espaciado, tamaño y más, según el elemento seleccionado.
Para abrir el panel de diseño, haga clic en un elemento en el modo flexible y luego en Diseño . El panel de diseño se abre a la derecha del modo flexible para que no interfiera con la visualización y edición del diseño. También puede hacer clic en el icono Editar diseño del menú flotante. Después de cerrar el panel de diseño, puede volver a abrirlo haciendo clic en el icono Editar diseño en la esquina superior derecha.
Términos de diseño
Los siguientes son términos de diseño y abreviaturas utilizados en el panel de diseño:
- Px. Los píxeles son una unidad de medida que permanece invariable independientemente del tamaño del dispositivo. Por ejemplo, si un botón mide 280 px, tendrá el mismo tamaño en un móvil que en una tableta o computadora de escritorio.
- Vw. El ancho de la ventana gráfica es una unidad basada en el ancho de la pantalla (ventana gráfica) en la que se visualiza el sitio. Por ejemplo, 10 Vw significa que el elemento se escalará para ocupar el 10 % del ancho de la pantalla en la que se visualiza.
- Vh. La altura de la ventana gráfica es una unidad basada en la altura de la pantalla (ventana gráfica) en la que se visualiza el sitio. Por ejemplo, 25 Vh significa que el elemento se escalará para ocupar el 25 % de la altura de la pantalla en la que se visualiza.
- %. Porcentaje del contenedor (sección, columna, cuadro flexible o cuadrícula avanzada) que ocupa el elemento. Por ejemplo, si el tamaño de un elemento es del 10 %, significa que se escalará para ocupar el 10 % del contenedor en el que se encuentra.
- A. Unidad de medida automática que se determina por la altura del contenido.
Alinear
Disponible para elementos individuales dentro de una columna o flexbox. Los elementos individuales dentro de una columna o flexbox vertical con disposición vertical automática se pueden alinear a la izquierda, centrar, a la derecha o estirar horizontalmente para ajustarse al 100 % del ancho del contenedor.
Nota:
Los elementos también se pueden alinear desde el menú flotante haciendo clic en el icono Alinear ( 
).
Disposición
Disponible solo para secciones y solo se puede modificar desde el punto de interrupción principal del escritorio. Al activarse, permite que el contenido ocupe todo el ancho de la pantalla. Al desactivarse, el ancho del contenido puede alcanzar un máximo de 1200 píxeles. De forma predeterminada, la configuración de sangrado completo está desactivada.
Alinear elementos
Permite alinear verticalmente varios elementos a la vez en una columna o cuadro flexible. En el editor clásico, los elementos solo se pueden alinear de forma individual y horizontal. La alineación vertical es útil porque mantiene la posición de los elementos consistente entre todos los puntos de interrupción sin realizar ajustes adicionales. Para más información, consulte
Alineación y espaciado flexibles.
Disposición automática
Permite seleccionar si los elementos dentro de columnas y flexboxes se alinean automáticamente de forma horizontal o vertical. De forma predeterminada, los elementos se alinean verticalmente. Los elementos solo se pueden mover en la misma dirección que la alineación automática de la disposición. Por ejemplo, si los elementos se alinean verticalmente, solo se pueden mover verticalmente, no horizontalmente. La disposición automática ayuda a optimizar el diseño para que coincida con cualquier punto de interrupción.
Envoltura
Disponible para columnas y flexboxes solo cuando se selecciona "Horizontal" para la disposición automática. Al configurarse como "Ajustar", permite que los elementos dentro de la columna o flexbox mantengan sus dimensiones y se ajusten al cambiar el ancho de la pantalla.
Alinear filas
Disponible para columnas y flexboxes solo cuando se selecciona "Ajustar" para la disposición automática. Permite configurar la alineación de las filas dentro de una columna o flexbox. Esta configuración no afecta la alineación de los elementos dentro de las filas, solo a las filas mismas.
Espaciado
Espacio entre elementos
Permite configurar el espacio entre columnas o widgets una sola vez, y se aplica a todas las columnas de una sección o a todos los widgets de una columna. En el caso de las columnas, si la disposición automática está configurada en vertical, el espacio entre widgets se mide en píxeles. Si la disposición automática está en horizontal, el espacio entre widgets se mide en porcentajes. Esta propiedad no se aplica a elementos dentro de flexboxes ni de cuadrículas avanzadas.
Establecer márgenes y relleno
Los márgenes son el espacio entre el borde del elemento y el borde de la sección, columna, flexbox o cuadrícula avanzada que lo contiene.
El relleno es el espacio interior del elemento. Haga clic en el margen o en el número de relleno para escribir un nuevo valor y, a continuación, utilice el menú desplegable para seleccionar la unidad de medida del espacio (px, %, vh o vw). De forma predeterminada, el espaciado horizontal se mide en porcentajes y el vertical en píxeles.
Por ejemplo, si selecciona una columna y establece el margen izquierdo en 5 px, se añadirán 5 px de espacio entre el borde izquierdo de la columna y el borde exterior de los elementos dentro de ella. Si para esa misma columna establece el margen derecho en 5 px, se añadirán 5 px de espacio entre el borde de la columna y el borde de la sección que la contiene.
Restablecer el relleno o margen
Al hacer clic en el panel de diseño o en el menú flotante, se restablece el relleno o los márgenes del elemento seleccionado a cero.
Tamaño
Según el elemento seleccionado, puede ajustar la altura, el ancho y los valores máximo y mínimo. En el modo flexible, la altura se puede medir en px, vh, porcentaje y A. Sin embargo, la altura de las columnas flexibles y el espacio entre ellas solo se pueden medir en porcentaje.
Nota:
Las unidades de tamaño predeterminadas son diferentes para cada elemento. Por ejemplo, los cuadros de texto tienen un ancho predeterminado del 100 % y los botones de 280 px.
En las secciones, solo se puede cambiar la altura. El ancho de la sección lo establece el dispositivo, mientras que el ancho del contenido de la sección se establece mediante la configuración de Ancho de Contenido en Diseño Global. En las columnas, solo se puede cambiar el ancho, mientras que la altura se define por la altura de la sección o por sus elementos internos. En los flexboxes y widgets, se puede configurar la altura y el ancho, junto con los valores mínimo y máximo de cada uno. Se puede usar cualquier unidad de tamaño.
Animación y fondo
Las propiedades de animación y fondo en el modo flexible son las mismas que en el editor clásico. Para más información sobre las propiedades de animación y fondo, consulte
Agregar animaciones y
Personalizar fondo.
Panel de diseño para cuadrículas avanzadas
Las cuadrículas avanzadas tienen propiedades de panel de diseño que no están disponibles para otros tipos de elementos debido a la posibilidad de crear composiciones libres y elementos superpuestos. Le recomendamos revisar su diseño en diferentes puntos de interrupción.
Alinear
Los elementos individuales en una cuadrícula avanzada se pueden alinear y estirar en cualquier dirección porque no están restringidos por la disposición automática.
Orden
En la sección Disposición del panel de diseño, esta propiedad solo se puede usar cuando hay varios elementos dentro de una cuadrícula avanzada. Permite mover un elemento seleccionado al frente, adelante, atrás o detrás. Para más información, consulte
Crear elementos superpuestos en Flex.
Reorganizar el diseño
Le permite seleccionar cómo se organizan las columnas y filas dentro de la cuadrícula avanzada para crear un diseño.
Personalizar el diseño
Utilice los menús desplegables para seleccionar el número de columnas y filas que desea que tenga su cuadrícula avanzada. También puede usar el campo "Espacio" para especificar el espacio entre las columnas. El espacio entre las columnas se puede definir en píxeles o en porcentaje de ancho de la ventana (vw), y el espacio entre las filas, en píxeles o en porcentaje de altura de la ventana (vh).
Alfiler
Permite definir la posición del elemento dentro de la cuadrícula. Una vez establecida, el elemento permanecerá en la misma posición incluso cuando cambie el tamaño de la cuadrícula.
Ubicación de la cuadrícula
Disponible para elementos dentro de cuadrículas avanzadas que se han dividido en columnas o filas para crear un diseño. Muestra la ubicación del elemento en la cuadrícula.
Mantener proporciones
Cuando está activado, garantiza que los elementos dentro de una cuadrícula avanzada conserven sus proporciones incluso cuando cambia el tamaño de la cuadrícula.
Nota:
El widget de imagen también contiene un interruptor para mantener proporción, que conserva sus proporciones originales.