Utilice el modo Diseño para cambiar el tamaño de los componentes para los formularios adaptables use-layout-mode-to-resize-components
Adobe recomienda utilizar la captura de datos moderna y ampliable Componentes principalespara crear un nuevo formulario adaptableo añadir formularios adaptables a páginas de AEM Sites. Estos componentes representan un avance significativo en la creación de formularios adaptables, lo que garantiza experiencias de usuario impresionantes. Este artículo describe un enfoque más antiguo para crear Formularios adaptables con componentes de base.
La interfaz de creación de formularios adaptables le permite cambiar el tamaño de los componentes mediante el modo Diseño. Arrastre los puntos azules dentro de las columnas para definir los puntos iniciales y finales para colocar los componentes. Aparecen puntos azules tras pulsar el componente en la cuadrícula adaptable. La cuadrícula adaptable consta de 12 columnas iguales. El sombreado de color blanco y azul en las columnas alternativas diferencia una columna de la otra.
Puede utilizar el modo Diseño para cambiar el tamaño de los componentes de todos los tipos de dispositivos, como escritorio, tableta, teléfono y otros dispositivos más pequeños. La tableta deriva automáticamente la configuración del diseño de la versión de escritorio y los dispositivos más pequeños derivan la configuración del diseño del teléfono. Con todo, puede anular las configuraciones derivadas automáticamente para definir una configuración diferente para cada tipo de dispositivo.
Acceder al modo Diseño access-layout-mode
Seleccione Diseño en la lista desplegable que aparece en la parte superior de la interfaz de creación de formularios adaptables junto a la opción Vista previa. El formulario se muestra en el modo Diseño.
-
Inicie sesión en la instancia de autor de Adobe Experience Manager, vaya a Adobe Experience Manager > Formularios > Formularios y documentos.
-
Cree un nuevo formulario adaptable o abra uno existente.
-
Seleccione Diseño en la lista desplegable que aparece en la parte superior junto a la opción Vista previa. El formulario se muestra en el modo Diseño.
Cambiar el tamaño de los componentes resize-components
-
En el modo Diseño, seleccione el componente para cambiar su tamaño. Los puntos azules se muestran al principio y al final de la cuadrícula adaptable.
-
Arrastre y suelte los puntos azules para definir la posición del componente en la cuadrícula adaptable.
La barra de herramientas que se muestra después de pulsar los componentes consta de las siguientes opciones:
- Principal: Seleccione el elemento principal de un componente.
- Revertir diseño de punto de interrupción: Deshacer todos los cambios de tamaño y aplicar el diseño predeterminado al componente.
- Flotar a una línea nueva: Mover el componente a la línea siguiente si hay varios componentes dentro de la misma línea.
También puede usar la opción Revertir diseño de punto de interrupción ( ) en el nivel de panel para deshacer todos los cambios de tamaño.
note note NOTE No puede cambiar el tamaño de los componentes de la columna de tabla, barra de herramientas, botón de barra de herramientas y área de destino con el modo Diseño. Utilice el modo Estilo para cambiar el tamaño de estos componentes.
Ejemplo example
Objetivo: Desea insertar un componente de tabla y un componente de imagen y colocarlos en paralelo en un formulario adaptable.
-
Inserte los componentes de tabla e imagen con el modo Editar en el formulario adaptable. El componente de imagen se muestra después del componente de tabla.
-
Cambie al modo Diseño y seleccione el componente Tabla. Los puntos azules para cambiar el tamaño del componente se muestran en las columnas 1 y 12.
-
Arrastre el punto azul en la columna 12 a la columna 6 de la cuadrícula adaptable.
-
De forma similar, seleccione el componente Imagen y arrastre el punto azul en la columna 1 a la columna 7 de la cuadrícula adaptable. Los componentes de tabla e imagen se muestran paralelos entre sí.
Puede seleccionar el componente Imagen y la opción Flotar a una línea nueva, disponible en la barra de herramientas para cambiar el componente Imagen a la línea siguiente.
Cambiar el tamaño de los paneles resize-panels-layout-mode
Ejecute los siguientes pasos si desea cambiar el tamaño de todo el panel en lugar de componentes individuales:
-
Seleccione cualquiera de los componentes del panel cuyo tamaño desee cambiar, seleccione y seleccione la primera opción de la lista desplegable, si el panel es el elemento principal inmediato del componente.
Los puntos azules se muestran al principio y al final de la cuadrícula adaptable.
-
Arrastre y suelte los puntos azules para definir la posición del panel en la cuadrícula adaptable. Puede repetir los pasos 1 y 2 y seleccionar para desplazar el panel cuyo tamaño se ha cambiado a la línea siguiente.
Definir el diseño de varias columnas para un panel
Ejecute los siguientes pasos para definir el número de columnas para un panel:
-
En el modo Editar, seleccione el panel, seleccione y luego la opción Adaptable: Todo lo que hay en la página sin navegación de la lista desplegable Diseño del panel.
-
Seleccione para guardar las propiedades.
-
En el modo Diseño, seleccione cualquiera de los componentes del panel y seleccione y seleccione el panel.
-
Seleccione y seleccione el número de columnas de la lista desplegable. El número de columnas puede oscilar entre 1 y 12. El panel se divide en un diseño de varias columnas.
Habilitar la nueva cuadrícula adaptable para los diseños adaptables antiguos enableresponsivegrid
Habilite la nueva cuadrícula adaptable para los formularios que cree mediante Adobe Experience Manager Forms 6.4 o una versión inferior para cambiar el tamaño de los componentes.
Realice los siguientes pasos para habilitar la nueva cuadrícula adaptable:
- Seleccione Diseño en la lista desplegable que aparece en la parte superior junto a la opción Vista previa. Aparece una confirmación para habilitar el modo Diseño.
- Seleccione Sí para habilitar el modo Diseño para el formulario.
Integrar un fragmento antiguo en un formulario adaptable con un nuevo diseño adaptable embed-an-old-fragment-in-an-adaptive-form-with-new-responsive-layout
El nuevo diseño adaptable del formulario adaptable te permite añadir un fragmento de formulario adaptable con el antiguo diseño adaptable al formulario. Con todo, el nuevo diseño descarta las propiedades de diseño ya definidas para los componentes utilizados en el fragmento. Puede cambiar al modo Diseño para definir las propiedades de diseño de los componentes utilizados en el fragmento.
Integrar un fragmento con un nuevo diseño adaptable en un antiguo formulario adaptable embed-a-fragment-with-new-responsive-layout-in-an-old-adaptive-form
Si integra un fragmento con el nuevo diseño adaptable en un formulario adaptable con un diseño adaptable antiguo, el sistema le indicará que habilite el modo Diseño para el formulario y vuelva a integrar el fragmento.
Para habilitar el modo Diseño, seleccione Diseño en la lista desplegable que aparece en la parte superior junto a la opción Vista previa y seleccione Sí para confirmar. Seleccione el modo Editar para volver a integrar el fragmento.
Desactivar el modo Diseño para formularios con un diseño adaptable antiguo disable-layout-mode-for-forms-with-old-responsive-layout
Puede desactivar el modo Diseño para formularios con un diseño adaptable antiguo editando las propiedades de la plantilla utilizada en el formulario.
Siga estos pasos para desactivar el modo Diseño:
-
Seleccione Herramientas > General > Plantillas y abra la plantilla utilizada en el formulario en el modo Editar.
-
Seleccione el contenedor del formulario en el panel izquierdo y seleccione Directiva.
-
Seleccione la pestaña Configuración de diseño y Desactivar el modo Diseño.
-
Seleccione para guardar las propiedades de la plantilla.
Consulte también see-also
- Crear un formulario adaptable de AEM
- Agregar un formulario adaptable de AEM a la página de AEM Sites
- Aplicar temáticas a un formulario adaptable de AEM
- Añadir componentes a un formulario adaptable de AEM
- Usar el servicio Captcha en un formulario adaptable de AEM
- Generar la versión en PDF (DoR) de un formulario adaptable de AEM
- Traducir un formulario adaptable de AEM
- Habilitar Adobe Analytics para un formulario adaptable con el fin de hacer un seguimiento del uso del formulario
- Conectar el formulario adaptable a Microsoft SharePoint
- Conectar formularios adaptables a Microsoft Power Automate
- Conectar el formulario adaptable a Microsoft OneDrive
- Conectar el formulario adaptable al almacenamiento de Microsoft Azure Blob
- Conectar el formulario adaptable a Salesforce
- Uso de Adobe Sign en un formulario adaptable de AEM
- Agregar una nueva configuración regional para un formulario adaptable
- Enviar datos de formulario adaptable a una base de datos
- Enviar datos de formulario adaptable a un punto final REST
- Enviar datos de formulario adaptable al flujo de trabajo de AEM
- Utilizar el portal de Forms para ver una lista de Formularios adaptables de AEM en un sitio web de AEM
- Añadir versiones, comentarios y anotaciones a un formulario adaptable
- Comparar formularios adaptables