El panel de diseño se muestra en el lado derecho del modo flex y contiene las propiedades de diseño para el elemento seleccionado (sección, columna, , flexbox o cuadrícula avanzada). Cada elemento tiene propiedades diferentes que se pueden ajustar en el panel de diseño, lo que significa que las propiedades de diseño son diferentes en función del elemento seleccionado. Las propiedades de diseño incluyen la alineación, el diseño, el espaciado, el tamaño y más, según el elemento seleccionado.
Para abrir el panel de diseño, haga clic en un elemento mientras está en modo flex y luego haga clic en Diseño.El panel de diseño se abre del lado derecho del modo flex para que no interfiera con su capacidad de ver y editar su diseño.También puede hacer clic en el ícono de Editar diseño en el menú flotante.Después de cerrar el panel de diseño, puede abrirlo de nuevo haciendo clic en el ícono de Editar diseño que está en la esquina superior derecha.
Términos de diseño
Los siguientes son términos de diseño y abreviaturas utilizadas en el panel de diseño:
Px. Los píxeles son una unidad de medida que permanece igual sin importar el tamaño del dispositivo. Por ejemplo, si un botón tiene 280px, tendrá el mismo tamaño en móvil que en tableta o desktop.
- Vw. El ancho de la ventana es una unidad basada en el ancho de la pantalla (ventana) en la que se ve el sitio. Por ejemplo, 10 Vw significa que el elemento escalará para ocupar el 10 % del ancho de la pantalla en la que se ve.
- Vh. La altura de la ventana es una unidad basada en la altura de la pantalla (ventana) en la que se ve el sitio. Por ejemplo, 25 Vh significa que el elemento se escalará para ocupar el 25 % de la altura de la pantalla en que se ve.
- %. Porcentaje del contenedor (sección, columna, flexbox o cuadrícula avanzada) que ocupa el elemento. Por ejemplo, si el tamaño de un elemento es 10 %, significa que el elemento se escalará para ocupar el 10 % del contenedor en el que está.
- R. Unidad de medida automática determinada 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 diseño automático vertical se pueden alinear a la izquierda, al centro, a la derecha o estirarse horizontalmente para adaptarse al 100 % del ancho de su contenedor.
Los elementos también se pueden alinear desde el menú flotante haciendo clic en el icono de Alinear (
).
Disposición
Sangrado completo
Disponible solo para secciones y solo puede cambiarse desde el punto de ruptura principal del desktop. Cuando se activa, permite que el contenido abarque todo el ancho de la pantalla. Cuando se desactiva, el ancho del contenido puede abarcar un máximo de 1200 píxeles. En forma predeterminada, la configuración de sangrado completo está desactivada .
Para obtener más información sobre los puntos de ruptura, consulte Puntos de ruptura de DudaFlex.
Alinear elementos
Le permite alinear verticalmente varios elementos en una columna o flexbox a la vez. En el editor clásico, los elementos solo se pueden alinear en forma individual y de manera horizontal. La alineación vertical es útil porque mantiene la posición de los elementos constante entre todos los puntos de ruptura, sin necesidad de hacer ajustes adicionales. Para obtener más información, consulte Alineación y espaciado de DudaFlex.
Diseño automático
Le permite seleccionar si los elementos que están dentro de columnas y flexboxes se alinean automáticamente en forma horizontal o vertical. En forma predeterminada, los elementos se alinean verticalmente. Los elementos solo se pueden mover en la misma dirección que la alineación automática del diseño. Por ejemplo, si los elementos están alineados verticalmente, solo se pueden mover los elementos en forma vertical y no horizontal. El diseño automático ayuda a garantizar que su diseño esté optimizado para coincidir con cualquier punto de ruptura.
Ajustar
Disponible para columnas y flexboxes solo cuando se selecciona Horizontal para el diseño automático. Cuando se establece en Ajustar, permite que los elementos que están dentro de la columna o flexbox mantengan sus dimensiones y se ajusten cuando cambie el ancho de la pantalla.
Alinear filas
Disponible para columnas y flexboxes solo cuando se selecciona Ajustar para el diseño automático. Permite establecer la alineación de las filas que están dentro de una columna o flexbox. Esta configuración no afecta la alineación de los elementos que están dentro de las filas, solo las filas en sí.
Espaciado
Para aprender sobre el espaciado, vea el siguiente video:
Espacio entre elementos
Permite establecer el espacio entre columnas o s una vez y se aplica a todas las columnas de una sección o a todos los s de una columna. Para las columnas, si la propiedad de diseño automático se establece en vertical, el espacio entre los s se mide en píxeles. Si el diseño automático es horizontal, el espacio entre los s se mide en porcentajes. Esta propiedad no se aplica a elementos que están dentro de flexboxes o cuadrículas avanzadas.
Configurar márgenes y espaciado interno
Los márgenes son el espacio entre el borde del elemento y el borde de la sección, columna, flexbox o cuadrícula avanzada en la que se encuentra.
El relleno es el espacio interior del elemento. Haga clic en el número de margen o relleno para escribir un nuevo valor y, a continuación, use el menú desplegable para seleccionar la unidad en la que se mide el espacio (px, %, vh o vw). En forma predeterminada, el espaciado horizontal se mide en porcentajes y el espaciado vertical se mide en píxeles.
Por ejemplo, si selecciona una columna y establece el relleno izquierdo en 5 px, se agregarán 5 px de espacio entre el borde izquierdo de la columna y el borde exterior de los elementos que están dentro de la columna. Si para esa misma columna establece el margen izquierdo en 5 px, se agregará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 el margen
Cuando se hace 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 borde
Según el elemento seleccionado, puede ajustar la altura y el ancho, y los valores máximo y mínimo. En el modo flex, la altura se puede medir en px, vh, porcentaje y A. Sin embargo, la altura de las columnas flex y el espacio entre columnas solo se pueden medir en porcentaje.
Las unidades de tamaño predeterminadas son diferentes para cada elemento. Por ejemplo, en forma predeterminada, los cuadros de texto tienen un ancho del 100 %, y los botones tienen un ancho de 280px.
Para las secciones, solo puede cambiar la altura. El dispositivo define el ancho de la sección, mientras que el ancho del contenido de la sección se establece mediante la configuración Ancho del contenido en Tema del sitio. Para 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. Para flexboxes y , puede establecer la altura y el ancho, junto con los valores mínimo y máximo para cada uno. Se puede usar cualquier tamaño de unidad.
Animación y fondo
Las propiedades de animación y fondo en el modo flex son las mismas que en el editor clásico. Para obtener más información sobre las propiedades de animación y fondo, consulte Añadir 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 capacidad de crear composiciones de estilo libre y elementos superpuestos. Le recomendamos que revise su diseño en distintos puntos de ruptura.
Alinear
Los elementos únicos de una cuadrícula avanzada se pueden alinear y estirar en cualquier dirección porque no están restringidos por el diseño automático.
Ordenar
En la sección Organización del panel de diseño, esta propiedad solo se puede usar cuando hay varios elementos dentro de una cuadrícula avanzada. Permite llevar un elemento seleccionado al frente, hacia adelante, al fondo o hacia atrás. Para obtener más información, consulte Crear elementos superpuestos en DudaFlex
Reorganizar diseño
Permite seleccionar cómo se organizan las columnas y filas en la cuadrícula avanzada para crear un diseño.
Personalizar diseño
Usa los menús desplegables para seleccionar el número de columnas y filas que quiere que tenga su cuadrícula avanzada. También puede usar el campo Espacio para especificar el espacio entre sus columnas. El espacio para las columnas puede definirse en píxeles o en vw, y el espacio para filas puede definirse en píxeles o en vh.
PIN
Le permite definir la posición del elemento dentro de la cuadrícula. Una vez configurado, 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 los elementos dentro de cuadrículas avanzadas que se han dividido en columnas o en filas para crear un diseño. Muestra dónde está el elemento en la cuadrícula.
Conservar proporciones
Cuando se cambia a Activado, se asegura que los elementos que están dentro de una cuadrícula avanzada conserven sus proporciones, incluso cuando el tamaño de la cuadrícula cambie.
El de imagen también contiene un botón de alternancia de Mantener proporción, que mantiene sus proporciones originales.