Skapa anpassade mallar för MultiZone-layouter creating-custom-templates-multizone

Fastställd pixelstorlek eller procent:

Bestäm om du vill använda fast pixelstorlek för olika zoner för den anpassade layouten eller om du vill skapa en anpassad layout med procentandelar.

Namnkonvention:

Det hjälper dig att förstå hur du skapar anpassade mallar för flera zoner som kan användas i ett AEM Screens-projekt. Men först måste du förstå variationen i mallarna som du vill skapa.

Skapa ett AEM Screens-projekt med namnet customtemplate.

Navigera till CRXDE Lite från din AEM > Verktyg > CRXDE Lite.

Skapa en mapp under appar med namnet customtemplate. Skapa en annan mapp med namnet template under customtemplate, som bilden nedan visar.

Kopiera mallen längst till vänster från /libs/screens/core/templates/splitscreenchannel/lbar-left till /apps/customtemplate/template.

Byt namn på den kopierade lbar-left (/apps/customtemplate/template) till my-custom-layout.

Navigera till /apps/customtemplate/template/my-custom-layout och uppdatera egenskaperna jcr:description till Mall förLeft20-LandscapeHD3Zone och jcr:title till Left20-LandscapeHD3Zone.

Navigera till noden offline-config från /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config och uppdatera jcr:title till Left20-LandscapeHD3Zone.

Navigera till egenskapen jcr:content för my-custom-template från /apps/customtemplate/template/my-custom-layout/jcr:content och uppdatera egenskapen cq:cssClass så att du kan använda aem-Layout my-custom-layout.

Med hänvisning till steg (4) där du kopierade mallen längst till vänster kan du visa tre responsiva rutnät under my-custom-layout/jcr:content. Lägg till en anpassad CSS-klass i vart och ett av de responsiva rutnäten i egenskapen cq:cssClass, till exempel my-custom-layout-top-left för noden r1c1.

Lägg på samma sätt till my-custom-layout-top-right för r1c2 och my-custom-layout-bottom för noden r2c1.

Kopiera /libs/settings/wcm/designs/screens till /apps/settings/wcm/designs/ och byt namn på den kopierade designen till custom-template-designs.

Navigera till /apps/settings/wcm/designs/custom-template-designs och uppdatera egenskapen jcr:title för custom-template-designs till custom template-design.

Navigera till /apps/settings/wcm/designs/custom-template-designs och skapa en fil som static.css.

Kopiera innehållet till filen 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%;
  }

Navigera till /apps/<project>/templates/my-custom-layout/jcr:content och uppdatera egenskapen cq:designPath till /apps/settings/wcm/designs/customtemplate-designs så att du kan läsa in formaten som konfigurerats i static.css.

Navigera till ditt Screens-projekt som du skapade i steg (1) och klicka på mappen Kanaler.

Klicka på Skapa i åtgärdsfältet och klicka på mallen Left20-LandscapeHD3Zone i guiden Skapa.

När du har skapat en kanal med den anpassade mallen kan du lägga till resurser i kanalen från redigeraren. I följande förhandsvisning visas bilderna i en anpassad mall.