Está viendo la ayuda para la versión:

AEM le permite dar un diseño adaptable a sus páginas mediante el componente Contenedor de diseño.

Este 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 en función del tamaño y formato del dispositivo o ventana. Este componente se utiliza en combinación con el modo Diseño, que le permite crear y editar el diseño adaptable en función del dispositivo.

El contenedor de diseños:

  • Proporciona un ajuste horizontal a la cuadrícula, además de la posibilidad de colocar componentes en la cuadrícula uno al lado de otro y de definir cuándo se deben contraer o redistribuir.
  • Utiliza puntos de interrupción predefinidos (por ejemplo, para un teléfono, una tableta, etc.) que le permiten definir el comportamiento obligatorio del contenido para dispositivos relacionados/su orientación. Por ejemplo, puede personalizar el tamaño del componente o si el componente se puede ver en determinados dispositivos.
  • Se puede anidar para aplicar el control de columnas.

El usuario puede utilizar el emulador para ver cómo se representará el contenido en determinados dispositivos.

Según su instancia, se puede utilizar como sistema de párrafos predeterminado para la página o como componente que se puede colocar en la página (o ambas opciones).

Precaución:

Aunque el componente Contenedor de diseño está disponible en la IU clásica, la funcionalidad completa solo está disponible en la IU táctil.

AEM realiza un diseño adaptable para sus páginas mediante una combinación de diferentes mecanismos:

  • Componente Contenedor de diseños
    Este componente está disponible en el navegador de componentes y proporciona un sistema de párrafos de cuadrícula que le permite añadir y colocar componentes en una cuadrícula adaptable. También se puede establecer como sistema de párrafos predeterminado en la página.
  • Modo de diseño
    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 cuadrícula adaptable.
  • Emulador
    Esta opción le permite crear y editar sitios web adaptables que reorganizan el diseño en función del tamaño del dispositivo o la ventana, mediante el redimensionado activo de los componentes. El usuario puede utilizar el emulador para ver cómo se representará el contenido.

Estos mecanismos de cuadrícula adaptables le permiten:

  • Utilizar puntos de interrupción para definir diferentes diseños de contenido según la anchura del dispositivo (en relación con el tipo de dispositivo y la orientación).
  • Utilizar estos mismos puntos de interrupción y diseños de contenido para asegurarse de que el contenido es adaptable al tamaño de la ventana del navegador en el escritorio.
  • Utilizar el ajuste horizontal a la cuadrícula (colocar componentes en la cuadrícula, cambiar su tamaño según sea necesario, definir cuándo deben contraerse o redistribuirse lateralmente o arriba/abajo).
  • Ocultar componentes de diseños de dispositivo específicos.
  • Realizar el control de columnas.

En función de su proyecto, el contendor de diseños se puede usar como el sistema de párrafos predeterminado de las páginas, además de estar disponible para la selección en el navegador de componentes (como componente que puede agregar a la página).

Nota:

El uso de los mecanismos anteriores se habilita en la configuración de la plantilla. Consulte Configuración del diseño adaptable para obtener más información.

Definiciones de diseños, emulación de dispositivos y puntos de interrupció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 le permite definir diseños en función de la anchura del dispositivo:

  • El emulador le permite emular estos diseños en una serie de dispositivos. Al igual que el tipo de dispositivo, la orientación, que se selecciona en Girar 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.
    • Definen efectivamente la anchura máxima (en píxeles) de cualquier dispositivo que utilice un diseño específico.
    • Normalmente, los puntos de interrupción son válidos para una selección de dispositivos, en función del ancho de sus pantallas.
    • El alcance de un punto de interrupción se extiende hacia la izquierda hasta el siguiente punto de interrupción.
    • No puede seleccionar específicamente un punto de interrupción; al seleccionar el dispositivo y la orientación se selecciona automáticamente el punto de interrupción adecuado.

El dispositivo Escritorio no tiene una anchura específica y está relacionado con el punto de interrupción predeterminado (p. ej., todo lo que está por encima del último punto de interrupción configurado).

Nota:

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. Todos los cambios que haga en el diseño se aplicarán a otros dispositivos a los que se aplique el punto de interrupción (por ejemplo, cualquier dispositivo posicionado a la izquierda del marcador de punto de interrupción activo, antes del siguiente marcador de 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 para el iPhone 6 se aplicará a los demás dispositivos que se encuentren bajo el punto de interrupción Teléfonos, como iPhone 5 (definido como 320 píxeles).

chlimage_1

Selección de un dispositivo para emular

  1. Abra la página deseada para editarla. Por ejemplo:

    http://localhost:4502/editor.html/content/geometrixx-media/en.html

  2. Seleccione el icono Emulador de la barra de herramientas superior:

    chlimage_1
  3. Se abrirá la barra de herramientas del emulador. Desde aquí puede:

    • Girar el dispositivo.
    • Seleccionar un dispositivo específico en los marcadores.
    chlimage_1
  4. Para seleccionar un dispositivo específico para emular puede efectuar cualquiera de las siguientes acciones:

    • Usar el selector desplegable.
    • Tocar o hacer clic en el indicador del dispositivo en la barra de herramientas del emulador.
    chlimage_1
  5. Una vez que haya seleccionado un dispositivo específico, puede:

    • Ver el marcador activo del dispositivo seleccionado; por ejemplo, iPad.
    • Ver el marcador activo del punto de interrupción adecuado; p. ej., Tableta.
    chlimage_1
    • Observe la línea de puntos que representa el pliegue del dispositivo actual; p. ej. iPhone 5:
    chlimage_1
    • El pliegue también se puede considerar el salto de línea de la página (no confundir con los puntos de interrupción) del contenido. Esto se muestra para mostrar qué parte del contenido verá el usuario en el dispositivo antes de efectuar el desplazamiento.
    • La línea del pliegue no se mostrará si la altura del dispositivo que se emula es superior al tamaño de la pantalla.

Adición de un contenedor de diseño y su contenido (modo de edición)

Un contenedor de diseño es un sistema de párrafos que:

  • contiene otros componentes
  • puede utilizar para definir el diseño
  • se adapta a los cambios

Nota:

Si todavía no está disponible, el contenedor de diseño debe activarse específicamente para un sistema de párrafos o página (por ejemplo, usando el modo de diseño).

  1. El contenedor de diseños está disponible como componente estándar en el navegador de componentes. Puede arrastrarlo desde aquí hasta la ubicación deseada de la página. Después verá el marcador de posición Arrastrar componentes aquí.

  2. A continuación, puede agregar componentes al contenedor de diseño. Estos componentes albergarán el contenido real:

    chlimage_1

Selección y ejecución de una acción en un contenedor de diseños (modo de edición)

Al igual que con otros componentes, puede seleccionar un contenedor de diseño (cuando se encuentra en el modo de edición) y luego realizar una acción en él (copiar, cortar, eliminar):

Precaución:

Dado que los contenedores de diseños son un sistema de párrafos, al eliminar el componente se eliminará la cuadrícula de diseño y todos los componentes (y su contenido) incluidos en el contenedor.

  1. Si pasa el ratón sobre el marcador de posición de la cuadrícula, tendrá que seleccionar el principal:

    chlimage_1
  2. Si el componente del diseño está anidado, deberá seleccionar la instancia concreta sobre la que desea realizar la acción (al pasar el ratón sobre las opciones, un borde negro indica la selección en la página):

    chlimage_1
  3. De esta forma se resaltará toda la cuadrícula con su contenido. Se mostrará la barra de herramientas del componente, desde donde puede seleccionar una acción como, por ejemplo, Eliminar:

    chlimage_1

Definición de diseños (modo de diseño)

Nota:

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 adaptable implementada con el contenedor de diseño, deberá usar el modo de diseño. Desde aquí puede realizar diversas acciones en 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 mostrará la cuadrícula de fondo como referencia para la alineación:

    chlimage_1

    Nota:

    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 efectuar las siguientes acciones:

    • Principal
      Le permite seleccionar todo el componente del contenedor de diseños para efectuar acciones en el conjunto.
    • Flotar a una línea nueva
      Se moverá el componente a una línea nueva, según el espacio disponible en la cuadrícula.
    • Ocultar componente
      El componente se volverá invisible (puede restaurarse desde la barra de herramientas del contenedor de diseño).
    chlimage_1
  • En el modo de diseño puede tocar o hacer clic en Arrastrar componentes aquí para seleccionar el componente completo. Se mostrará así la barra de herramientas de este modo; por ejemplo:

    • Principal
      Seleccionar el componente principal.
    • Mostrar componentes ocultos
      Muestra todos o algunos componentes. El número indica cuántos componentes ocultos hay.
      El indicador del siguiente ejemplo muestra que hay un componente oculto (el componente de texto superior).
    • Revertir diseño de punto de interrupción
      Recuperar el diseño predeterminado. Es decir, no se aplicará ningún diseño personalizado.
    • Flotar hasta una nueva línea
      Subir el componente una posición si el espacio lo permite.
    • Ocultar componente
      Ocultar el componente actual.
    chlimage_1

    Nota:

    En el ejemplo anterior, las acciones de flotar y ocular están disponibles porque este contenedor de diseño está anidado en un contenedor de diseño principal.

    • Mostrar componentes
      Seleccione los componentes principales para mostrar cuántos componentes ocultos contiene; por ejemplo, dos:
    chlimage_1

    A continuación podrá restaurar los componentes ocultos seleccionando Restaurar todo:

    chlimage_1

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea