Creazione di modelli personalizzati per i layout multizona creating-custom-templates-multizone

Dimensioni pixel o percentuali fisse:

Decidi se utilizzare dimensioni pixel fisse per aree diverse per il layout personalizzato o se desideri creare un layout personalizzato utilizzando le percentuali.

Convenzione di denominazione:

Prima di capire come creare modelli personalizzati per più aree da utilizzare in un progetto AEM Screens, è necessario conoscere la variegata quantità di modelli che si desidera creare.

Creare un progetto AEM Screens con titolo customtemplate.

Accedi a CRXDE Liti dall’istanza AEM > Strumenti > CRXDE Liti.

Crea una cartella in app con titolo customtemplate. Allo stesso modo, crea un’altra cartella con il nome modello in customtemplate, come illustrato nella figura seguente.

Copia il modello barra a sinistra da /libs/screens/core/templates/splitscreenchannel/lbar-left a /apps/customtemplate/template.

Rinomina la copia barra a sinistra (/apps/customtemplate/template) a layout personalizzato.

Accedi a /apps/customtemplate/template/my-custom-layout e aggiorna le proprietà jcr:description a Modello perLeft20-LandscapeHD3Zone e jcr:title a Left20-LandscapeHD3Zone.

Accedi a offline-config nodo da /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config e aggiorna jcr:title a Left20-LandscapeHD3Zone.

Accedi a jcr:content proprietà di my-custom-template da /apps/customtemplate/template/my-custom-layout/jcr:content e aggiorna cq:cssClass in modo da poter utilizzare aem-Layout my-custom-layout.

Con riferimento al passaggio (4) in cui hai copiato il modello barra a sinistra, puoi visualizzare tre griglie reattive in my-custom-layout/jcr:content. Aggiungere una classe CSS personalizzata a ogni griglia reattiva nella cq:cssClass proprietà, ad esempio my-custom-layout—in alto a sinistra per r1c1 nodo.

Analogamente, aggiungi my-custom-layout—in alto a destra per r1c2 e my-custom-layout—bottom per r2c1 nodo.

Copia /libs/settings/wcm/designs/screens a /apps/settings/wcm/designs/ e rinominate il progetto copiato come custom-template-designs.

Accedi a /apps/settings/wcm/designs/custom-template-designs e aggiorna la proprietà jcr:title di custom-template-designs a customtemplate-design.

Accedi a /apps/settings/wcm/designs/custom-template-designs e creare un file static.css.

Copia il contenuto in static.css file:

    /*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%;
  }

Accedi a /apps/<project>/templates/my-custom-layout/jcr:content e aggiorna la proprietà cq:designPath a /apps/settings/wcm/designs/customtemplate-designs in modo da poter caricare gli stili configurati in static.css.

Passa al progetto Schermi creato al passaggio (1) e fai clic sul pulsante Canali cartella.

Clic Crea dalla barra delle azioni e fai clic sul modello Left20-LandscapeHD3Zone dal Crea procedura guidata.

Dopo aver creato un canale con il modello personalizzato, puoi aggiungere risorse al canale dall’editor. L’anteprima seguente mostra le immagini in un modello personalizzato.