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 nomenclatura:

Antes de saber cómo crear plantillas de varias zonas personalizadas para utilizarlas en un proyecto de AEM Screens, es necesario que entienda el lenguaje de las plantillas que desea crear.

Cree un proyecto de AEM Screens titulado como customtemplate.

Vaya a CRXDE Lite AEM en la instancia de su > Herramientas > CRXDE Lite.

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

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

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

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

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

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

En referencia al paso (4) en el que ha copiado 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 cq:cssClass , por ejemplo, my-custom-layout-top-left para r1c1 nodo.

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

Copiar /libs/settings/wcm/designs/screens hasta /apps/settings/wcm/designs/ y cambie el nombre del diseño copiado por custom-template-designs.

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

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

Copie el contenido en static.css archivo:

    /*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 hasta /apps/settings/wcm/designs/customtemplate-designs para poder cargar los estilos configurados en static.css.

Vaya al proyecto de Screens que ha creado en el paso (1) y haga clic en Canales carpeta.

Clic Crear en la barra de acciones y haga clic en la plantilla Left20-LandscapeHD3Zone desde el Crear asistente.

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.