Erstellen benutzerdefinierter Vorlagen für Mehrzonen-Layouts creating-custom-templates-multizone

Feste Pixel-Größe oder Prozentwerte:

Legen Sie fest, ob Sie für Ihr benutzerdefiniertes Layout eine feste Pixel-Größe für verschiedene Zonen verwenden möchten oder ob Sie ein benutzerdefiniertes Layout mithilfe von Prozentwerten erstellen möchten.

Namenskonvention:

Es ist hilfreich zu verstehen, wie Sie benutzerdefinierte Vorlagen für Mehrzonen erstellen, die in einem AEM Screens-Projekt verwendet werden. Zunächst müssen Sie jedoch die Formulierungen der Vorlagen verstehen, die Sie erstellen möchten.

Erstellen Sie ein AEM Screens-Projekt mit dem Titel customtemplate.

Navigieren Sie von Ihrer AEM-Instanz zu Tools > CRXDE Lite.

Erstellen Sie unter apps einen Ordner mit dem Titel customtemplate. Erstellen Sie auf gleiche Weise unter customtemplate einen weiteren Ordner mit dem Titel template, wie in der folgenden Abbildung dargestellt.

Kopieren Sie die Vorlage „lbar-left“ unter /libs/screens/core/templates/splitscreenchannel/lbar-left und fügen Sie sie unter /apps/customtemplate/template ein.

Benennen Sie die kopierte Vorlage lbar-left (/apps/customtemplate/template) in my-custom-layout um.

Navigieren Sie zu /apps/customtemplate/template/my-custom-layout und ändern Sie den Wert für die Eigenschaft jcr:description in Vorlage fürLeft20-LandscapeHD3Zone und jcr:title in Left20-LandscapeHD3Zone.

Navigieren Sie zum Knoten offline-config von /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config und ändern Sie jcr:title in Left20-LandscapeHD3Zone.

Navigieren Sie zur Eigenschaft jcr:content von my-custom-template unter /apps/customtemplate/template/my-custom-layout/jcr:content und ändern Sie die Eigenschaft cq:cssClass, damit Sie aem-layout my-custom-layout verwenden können.

Nachdem Sie in Schritt 4 die Vorlage „lbar-left“ kopiert haben, werden Ihnen nun unter my-custom-layout/jcr:content drei responsive Raster angezeigt. Fügen Sie zu jedem responsiven Raster in der Eigenschaft cq:cssClass benutzerdefinierte CSS-Klassen hinzu, beispielsweise my-custom-layout-top-left für den Knoten r1c1.

Fügen Sie auf die gleiche Weise my-custom-layout–top-right für den Knoten r1c2 und my-custom-layout-bottom für den Knoten r2c1 hinzu.

Kopieren Sie /libs/settings/wcm/designs/screens und fügen Sie es unter /apps/settings/wcm/designs/ ein. Benennen Sie das kopierte Design anschließend in custom-template-designs um.

Navigieren Sie zu /apps/settings/wcm/designs/custom-template-designs und ändern Sie die Eigenschaft jcr:title von custom-template-designs in customtemplate-design.

Navigieren Sie zu /apps/settings/wcm/designs/custom-template-designs und erstellen Sie eine Datei mit dem Namen „static.css“.

Kopieren Sie den Inhalt in die Datei 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%;
  }

Navigieren Sie zu /apps/<project>/templates/my-custom-layout/jcr:content und ändern Sie die Eigenschaft cq:designPath in /apps/settings/wcm/designs/customtemplate-designs, um die in „static.css“ konfigurierten Stile zu laden.

Navigieren Sie zum in Schritt 1 erstellten Projekt und klicken Sie auf den Ordner Kanäle.

Klicken Sie in der Aktionsleiste auf die Option Erstellen und dann im Assistenten Left20-LandscapeHD3Zone Erstellen auf die Vorlage.

Nachdem Sie einen Kanal mit der benutzerdefinierten Vorlage erstellt haben, können Sie Assets aus dem Editor zu Ihrem Kanal hinzufügen. Die folgende Vorschau zeigt die Bilder in einer benutzerdefinierten Vorlage.