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

Dimensioni pixel fisse o percentuali:

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:

Consente di comprendere come creare modelli personalizzati per più aree da utilizzare in un progetto AEM Screens. Ma prima di tutto, devi capire il limite dei modelli che vuoi creare.

Creare un progetto AEM Screens con titolo customtemplate.

Passa a CRXDE Liti dalla tua istanza AEM > Strumenti > CRXDE Liti.

Crea una cartella in app con titolo customtemplate. Analogamente, creare un'altra cartella con titolo modello in customtemplate, come illustrato nella figura seguente.

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

Rinomina lbar-left (/apps/customtemplate/template) copiato in my-custom-layout.

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

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

Passa alla proprietà jcr:content di my-custom-template da /apps/customtemplate/template/my-custom-layout/jcr:content e aggiorna la proprietà cq:cssClass per poter utilizzare aem-Layout my-custom-layout.

Con riferimento al passaggio (4) in cui è stato copiato il modello barra a sinistra, è possibile visualizzare tre griglie reattive in my-custom-layout/jcr:content. Aggiungi una classe CSS personalizzata a ciascuna griglia reattiva nella proprietà cq:cssClass, ad esempio my-custom-layout-top-left per il nodo r1c1.

Allo stesso modo, aggiungi my-custom-layout-top-right per r1c2 e my-custom-layout-bottom per il nodo r2c1.

Copiare /libs/settings/wcm/designs/screens in /apps/settings/wcm/designs/ e rinominare la progettazione copiata come custom-template-designs.

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

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

Copia il contenuto nel file 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%;
  }

Passare a /apps/<project>/templates/my-custom-layout/jcr:content e aggiornare 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 Screens creato al passaggio 1 e fai clic sulla cartella Canali.

Fare clic su Crea nella barra delle azioni e fare clic sul modello Left20-LandscapeHD3Zone nella procedura guidata Crea.

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.