Show Menu
TEMAS×

Uso del modo Diseño para cambiar el tamaño de los componentes

La interfaz de creación de formularios adaptables y canal web de comunicación interactiva le permite cambiar el tamaño de los componentes mediante el modo Diseño. Arrastre y suelte puntos azules dentro de las columnas para definir el inicio y los puntos finales para colocar los componentes. Los puntos azules se muestran después de tocar el componente dentro de 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 el escritorio, la tablet, el teléfono y otros dispositivos más pequeños. La tablet deriva automáticamente la configuración de diseño de la versión de escritorio y los dispositivos más pequeños obtienen la configuración de diseño del teléfono. Sin embargo, puede anular las configuraciones derivadas automáticamente para definir una configuración diferente para cada tipo de dispositivo.
Si va a crear el canal Web utilizando Imprimir canal como maestro para una comunicación interactiva, los componentes disponibles para el cambio de tamaño también incluyen los subformularios y los campos que se generan automáticamente en el canal Web mediante Imprimir canal. El canal web conserva la presentación de los elementos del canal de impresión en el modo Diseño.

Modo de diseño de acceso

Seleccione Presentación en la lista desplegable que aparece en la parte superior del formulario adaptable y de la interfaz de creación de comunicación interactiva junto a la opción de Previsualización . El formulario se muestra en el modo Presentación.
  1. Inicie sesión en la instancia de creación de AEM y vaya a Adobe Experience Manager > Forms > Forms y Documentos .
  2. Cree un formulario adaptable nuevo o abra uno existente o una comunicación interactiva.
  3. Seleccione Presentación en la lista desplegable que aparece en la parte superior junto a la opción de Previsualización . El formulario se muestra en el modo Presentación.

Cambiar el tamaño de los componentes

  1. En el modo Diseño, toque el componente para cambiar el tamaño. Los puntos azules se muestran en el inicio y al final de la cuadrícula adaptable.
  2. Arrastre y suelte los puntos azules para definir la posición del componente en la cuadrícula interactiva.
    La barra de herramientas que se muestra después de tocar componentes consta de las siguientes opciones:
    • Principal: Seleccione el elemento principal de un componente.
    • Flotar a nueva línea: Mueva el componente a la línea siguiente si hay varios componentes dentro de la misma línea.
    Puede deshacer todos los cambios de tamaño y aplicar el diseño predeterminado al panel que contiene los componentes cuyo tamaño ha cambiado mediante la opción Revertir diseño de punto de interrupción ( ). Toque el elemento principal del componente cuyo tamaño ha cambiado para aplicar vista a la opción.
    No se puede cambiar el tamaño de los componentes de columna de tabla, barra de herramientas, botón de barra de herramientas y área de destinatario mediante el modo Diseño. Utilice el modo Estilo para cambiar el tamaño de estos componentes.

Ejemplo

Objetivo: Desea insertar un componente de tabla y un componente Imagen y colocarlos en paralelo en una comunicación interactiva.
  1. Inserte los componentes de tabla e imagen mediante el modo de edición en el canal web. El componente de imagen se muestra después del componente de tabla.
  2. Cambie al modo Diseño y toque el componente Tabla. Los puntos azules para cambiar el tamaño del componente se muestran en las columnas 1 y 12.
  3. Arrastre y suelte el punto azul de la columna 12 a la columna 6 de la cuadrícula adaptable.
  4. Del mismo modo, seleccione el componente Imagen y arrastre y suelte el punto azul en la columna 1 a la columna 7 de la cuadrícula adaptable. Los componentes de tabla e imagen se muestran en paralelo.
    Puede seleccionar el componente Imagen y tocar la opción Flotar a nueva línea disponible en la barra de herramientas para cambiar el componente Imagen a la línea siguiente.

Cambiar el tamaño de los paneles

Realice los siguientes pasos si desea cambiar el tamaño del panel completo en lugar de componentes individuales:
  1. Toque cualquiera de los componentes del panel cuyo tamaño desee cambiar, seleccione y, si el panel es el elemento principal inmediato del componente, seleccione la primera opción de la lista desplegable.
    Los puntos azules se muestran en el inicio y al final de la cuadrícula adaptable.
  2. Arrastre y suelte los puntos azules para definir la posición del panel en la cuadrícula interactiva. Puede repetir los pasos 1 y 2 y seleccionar para cambiar el panel cuyo tamaño ha cambiado a la línea siguiente.

Definición del diseño de varias columnas para un panel

Siga los pasos siguientes para definir el número de columnas de un panel:
  1. En el modo de edición , toque el panel, seleccione y seleccione Responsable: todo en la página sin la opción de navegación en la lista desplegable Diseño del panel.
  2. Toque para guardar las propiedades.
  3. En el modo Diseño , toque cualquiera de los componentes del panel, seleccione y seleccione el panel.
  4. Toque y seleccione el número de columnas en 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.

Activar la nueva cuadrícula adaptable para los diseños interactivos antiguos

Active la nueva cuadrícula adaptable para los formularios que cree con AEM Forms 6.4 o una versión inferior para cambiar el tamaño de los componentes.
Al cambiar a la nueva cuadrícula adaptable se descartan las propiedades de diseño ya definidas para los componentes utilizados en el formulario.
Realice los siguientes pasos para habilitar la nueva cuadrícula adaptable:
  1. Seleccione Presentación en la lista desplegable que aparece en la parte superior junto a la opción de Previsualización . Aparece una confirmación para habilitar el modo Diseño.
  2. Toque para activar el modo de presentación del formulario.

Incrustar un fragmento antiguo en un formulario adaptable con una nueva presentación adaptable

La nueva presentación adaptable para formularios adaptables permite agregar un fragmento de formulario adaptable con la presentación adaptable anterior al formulario. Sin embargo, 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.

Incrustar un fragmento con una nueva presentación adaptable en un formulario adaptable antiguo

Si incrusta un fragmento con la nueva presentación adaptable en un formulario adaptable con una presentación adaptable antigua, el sistema le pedirá que habilite el modo Diseño para el formulario y vuelva a incrustar el fragmento.
Para activar el modo Diseño, seleccione Presentación en la lista desplegable que aparece en la parte superior junto a la opción Previsualización y toque para confirmar. Seleccione el modo Editar para volver a incrustar el fragmento.

Deshabilitar el modo Diseño para formularios con presentación adaptable anterior

Puede desactivar el modo Presentación para formularios con presentación adaptable antigua editando las propiedades de la plantilla utilizada en el formulario.
Realice los siguientes pasos para desactivar el modo Diseño:
  1. Seleccione Herramientas > General > Plantillas y abra la plantilla utilizada en el formulario en el modo de edición .
  2. Seleccione el Contenedor de Documento en el panel izquierdo y toque Directiva.
  3. Puntee en la ficha Configuración de diseño y seleccione Deshabilitar modo de diseño.
  4. Toque para guardar las propiedades de la plantilla.