Crear plantillas personalizadas para diseños de varias zonas creating-custom-templates-multizone

Tamaño de píxel fijo o porcentajes:

Decida si desea utilizar un tamaño de píxel fijo para diferentes zonas del diseño personalizado o si desea crear un diseño personalizado utilizando porcentajes.

Convención de nombres:

Ayuda a comprender cómo crear plantillas de varias zonas personalizadas para utilizarlas en un proyecto de AEM Screens. Pero primero, debe comprender el lenguaje de las plantillas que desea crear.

Cree un proyecto de AEM Screens titulado customtemplate.

Vaya a CRXDE Lite AEM desde su instancia de > Herramientas > CRXDE Lite.

Cree una carpeta en apps con el título customtemplate. Del mismo modo, cree otra carpeta con el título plantilla en customtemplate, como se muestra en la figura siguiente.

Copie la plantilla de la izquierda de la barra de herramientas de /libs/screens/core/templates/splitscreenchannel/lbar-left a /apps/customtemplate/template.

Cambie el nombre de lbar-left (/apps/customtemplate/template) copiado a my-custom-layout.

Vaya a /apps/customtemplate/template/my-custom-layout y actualice las propiedades jcr:description a Plantilla paraLeft20-LandscapeHD3Zone y jcr:title para Left20-LandscapeHD3Zone.

Vaya al nodo offline-config desde /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config y actualice jcr:title a Left20-LandscapeHD3Zone.

Vaya a la propiedad jcr:content de my-custom-template desde /apps/customtemplate/template/my-custom-layout/jcr:content y actualice la propiedad cq:cssClass para que pueda usar aem-Layout my-custom-layout.

En referencia al paso (4) en el que copió la plantilla de la barra izquierda, puede ver tres cuadrículas adaptables en my-custom-layout/jcr:content. Agregue una clase css personalizada a cada una de las cuadrículas adaptables de la propiedad cq:cssClass; por ejemplo, my-custom-layout-top-left para el nodo r1c1.

Del mismo modo, agregue my-custom-layout-top-right para r1c2 y my-custom-layout-bottom para el nodo r2c1.

Copie /libs/settings/wcm/designs/screens a /apps/settings/wcm/designs/ y cambie el nombre del diseño copiado a diseños de plantilla personalizados.

Vaya a /apps/settings/wcm/designs/custom-template-designs y actualice la propiedad jcr:title de custom-template-designs a customtemplate-design.

Vaya a /apps/settings/wcm/designs/custom-template-designs y cree un archivo static.css.

Copie el contenido en el archivo static.css:

    /*my-custom-layout styles*/
   .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
    width:20%;
    height: 36%;
   float: left !important;
   }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
   width:80%;
   height: 36%;
  float: left !important;
  }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
  width:100%;
  height: 64%;
  }

Vaya a /apps/<project>/templates/my-custom-layout/jcr:content y actualice la propiedad cq:designPath a /apps/settings/wcm/designs/customtemplate-designs para que pueda cargar los estilos configurados en static.css.

Vaya al proyecto de Screens que creó en el paso (1) y haga clic en la carpeta Canales.

Haga clic en Crear en la barra de acciones y luego haga clic en la plantilla Left20-LandscapeHD3Zone del asistente Crear.

Después de crear un canal con la plantilla personalizada, puede agregar recursos al canal desde el editor. La siguiente vista previa muestra las imágenes en una plantilla personalizada.