AEM le permite tener un diseño adaptable para las páginas mediante el uso de la variable Contenedor de diseño componente.
Proporciona un sistema de párrafos que le permite colocar componentes en una cuadrícula adaptable. Esta cuadrícula puede reorganizar el diseño según el tamaño y el formato del dispositivo o la ventana. El componente se utiliza junto con el Diseño modo, que le permite crear y editar su diseño interactivo en función del dispositivo.
El contenedor de diseño:
Proporciona un ajuste horizontal a la cuadrícula, junto con la capacidad de colocar componentes en la cuadrícula en paralelo y definir cuándo deben contraerse o redistribuirse.
Utiliza puntos de interrupción predefinidos (por ejemplo, para un teléfono, una tableta, etc.) para permitirle definir el comportamiento del contenido necesario para la orientación o los dispositivos relacionados.
Se puede anidar para permitir el control de columnas.
A continuación, el usuario puede ver cómo se representará el contenido para dispositivos específicos mediante el emulador.
Aunque el componente Contenedor de diseño está disponible en la IU clásica, su funcionalidad completa solo está disponible y es compatible con la IU táctil.
AEM realiza un diseño interactivo para sus páginas mediante una combinación de diferentes mecanismos:
Componente Contenedor de diseño
Este componente está disponible en el navegador de componentes y proporciona un sistema de párrafos de cuadrícula que le permite agregar y colocar componentes en una cuadrícula adaptable. También se puede establecer como sistema de párrafos predeterminado en la página.
Después de colocar el contenedor de diseño en la página, puede usar el modo de diseño para colocar el contenido en la red interactiva.
Emulador
Esto permite crear y editar sitios web interactivos que reorganizan el diseño según el tamaño del dispositivo o la ventana, mediante el cambio de tamaño de los componentes de forma interactiva. A continuación, el usuario puede ver cómo se representará el contenido mediante el emulador.
Con estos mecanismos de cuadrícula adaptable puede hacer lo siguiente:
En función del proyecto, el contenedor de diseño se puede utilizar como sistema de párrafos predeterminado para las páginas o como componente disponible para añadirse a su página mediante el explorador de componentes (o ambos).
El Adobe proporciona Documentación de GitHub AEM AEM del diseño interactivo como referencia que se puede dar a los desarrolladores de front-end para que puedan utilizar la cuadrícula de la fuera de la red de la interfaz de usuario de, por ejemplo, al crear maquetas de HTML AEM estáticos para un sitio futuro en el que se vaya a realizar un seguimiento de la interfaz de usuario de la interfaz de usuario de la aplicación de red.
El uso de los mecanismos anteriores se habilita en la configuración de la plantilla. Consulte Configuración del diseño interactivo para obtener más información.
Al crear el contenido de su sitio web desea asegurarse de que el contenido se muestre correctamente según el dispositivo utilizado para ello.
AEM definir diseños según la anchura del dispositivo:
El emulador permite emular estos diseños en una amplia gama de dispositivos. Además del tipo de dispositivo, la orientación, que se selecciona mediante la opción Rotar dispositivo, puede afectar al punto de interrupción seleccionado a medida que cambia la anchura.
Los puntos de interrupción son puntos que separan las definiciones de diseño.
El dispositivo Escritorio no tiene una anchura específica y está relacionado con el punto de interrupción predeterminado (por ejemplo, todo lo que está por encima del último punto de interrupción configurado).
Es posible definir puntos de interrupción para cada dispositivo individual, pero esto incrementaría drásticamente los trabajos de definición de diseño y mantenimiento.
Al seleccionar en el emulador un dispositivo específico para emular y definir el diseño, el punto de interrupción relacionado también quedará resaltado. Cualquier cambio de diseño que realice se aplicará a otros dispositivos a los que se aplique el punto de interrupción, es decir, cualquier dispositivo situado a la izquierda del marcador del punto de interrupción activo, pero antes del marcador del siguiente punto de interrupción.
Por ejemplo, si selecciona el dispositivo iPhone 6 Plus (definido con una anchura de 540 píxeles) para emulación y diseño, se activará también el punto de interrupción Teléfono (definido como 768 píxeles). Cualquier cambio de diseño que realice en IPHONE 6 será aplicable a otros dispositivos bajo el Teléfonos punto de interrupción, como IPHONE 5 (definido como 320 píxeles).
Abra la página necesaria para editarla. Por ejemplo:
http://localhost:4502/editor.html/content/we-retail/us/en/experience.html
Seleccione el icono Emulador de la barra de herramientas superior:
Se abrirá la barra de herramientas del emulador.
La barra de herramientas del emulador muestra opciones de diseño adicionales:
Rotar dispositivo : permite girar un dispositivo desde la orientación vertical (vertical) a la orientación horizontal (horizontal) y viceversa.
Seleccionar dispositivo: le permite definir un dispositivo específico para emular de una lista (consulte el paso siguiente para obtener detalles)
Para seleccionar un dispositivo específico para emular, puede hacer lo siguiente:
Una vez que haya seleccionado un dispositivo específico, puede:
Un contenedor de diseño es un sistema de párrafos que:
Si no está disponible, la variable Contenedor de diseño debe ser explícitamente activado para un sistema de párrafos o una página (por ejemplo, utilizando Diseño modo).
El contenedor de diseño está disponible como componente estándar en el navegador de componentes. Desde aquí puede arrastrarlo a la ubicación deseada en la página tras la cual verá el marcador de posición Arrastrar componentes aquí.
A continuación, puede agregar componentes al contenedor del diseño. Estos componentes contendrán el contenido real:
Al igual que con otros componentes, puede seleccionar un contenedor de diseños (cuando se encuentra en el modo de edición) y luego realizar una acción en él (copiar, cortar, eliminar):
Como un contenedor de diseño es un sistema de párrafos, al eliminar el componente se eliminará tanto la cuadrícula de diseño como todos los componentes (y su contenido) que se encuentren dentro del contenedor.
Si pasa el puntero del ratón o toca el marcador de posición de la cuadrícula, se mostrará el menú Acción.
Debe seleccionar la opción Principal.
Si el componente de diseño está anidado, seleccione la opción Principal presenta una selección desplegable, que le permite seleccionar el contenedor de diseño anidado o sus elementos principales.
Cuando pasa el ratón sobre los nombres de contenedor en la lista desplegable, sus contornos se muestran en la página.
De esta forma se resaltará toda la cuadrícula con su contenido. Se muestra la barra de herramientas de acciones, desde donde puede seleccionar una acción como Eliminar.
Puede definir un diseño distinto para cada punto de interrupción (tal y como determinan el tipo y la orientación del dispositivo emulado).
Para configurar el diseño de una cuadrícula interactiva implementada con el contenedor de diseño, debe usar el modo Diseño.
El modo Diseño puede iniciarse de dos formas.
Mediante el uso del menú de modo de la barra de herramientas y seleccionando el modo Diseño.
Al editar un componente individual.
En el modo de diseño, puede ejecutar una serie de acciones a una cuadrícula:
Redimensionar los componentes del contenido utilizando los puntos azules. Al redimensionar, siempre se hará un ajuste a la cuadrícula. Al redimensionar, se muestra la cuadrícula de fondo como referencia para la alineación:
Se mantendrán las proporciones y relaciones al cambiar el tamaño de componentes como Imágenes.
Haga clic o toque un componente de contenido. La barra de herramientas le permite:
Principal
Permite seleccionar todo el componente del contenedor de diseños para realizar acciones en conjunto.
Flotar a una línea nueva
El componente se moverá a una nueva línea, en función del espacio disponible en la cuadrícula.
Ocultar componente
El componente se hace invisible (puede restaurarse desde la barra de herramientas del contenedor de diseño).
En el modo Diseño puede pulsar o hacer clic en Arrastrar componentes aquí para seleccionar el componente completo. Se mostrará la barra de herramientas de este modo.
La barra de herramientas tendrá diferentes opciones en función del estado del componente de diseño y de los componentes que le pertenecen. Por ejemplo:
Principal: seleccione el componente principal.
Mostrar componentes ocultos : Muestre todos los componentes o cada componente por separado. El número indica cuántos componentes ocultos hay actualmente. El contador muestra cuántos componentes están ocultos.
Revertir diseño del punto de interrupción: permite recuperar el diseño predeterminado. Es decir, no se aplicará ningún diseño personalizado.
Flotar hasta una nueva línea: suba el componente una posición si el espacio lo permite.
Ocultar componente: oculte el componente actual.
En el ejemplo anterior, las acciones de flotar y ocultar están disponibles porque este contenedor de diseño está anidado en un contenedor de diseño principal.
Mostrar los componentes: permite seleccionar los componentes principales para mostrar la barra de herramientas de acciones con la opción Mostrar componentes ocultos. En este ejemplo, hay dos componentes ocultos.
Si se selecciona la opción Mostrar componentes ocultos, se mostrarán en azul los componentes que están ocultos actualmente en sus posiciones originales.
La selección de la opción Restaurar todo permitirá que se muestren todos los componentes ocultos.