Erstellen benutzerdefinierter Vorlagen für Mehrzonen-Layouts

Auf dieser Seite wird erläutert, wie Sie eine benutzerdefinierte Vorlage für ein Mehrzonen-Layout erstellen können.

Wichtige Überlegungen

Es gibt zwei wichtige Aspekte, die Sie beachten müssen, bevor Sie eine benutzerdefinierte Vorlage für ein Mehrzonen-Layout erstellen:

1. Feste Pixel-Größe oder Prozentwerte:

   Sie müssen entscheiden, 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.

   HINWEIS

   Die Verwendung von Prozentwerten zum Festlegen von Zonen für Ihr benutzerdefiniertes Layout ermöglicht es Ihnen, die Vorlage für verschiedene Bildschirmgrößen wiederzuverwenden.

2. Namenskonvention:

   Bevor Sie sich damit vertraut machen, wie Sie benutzerdefinierte Mehrzonen-Vorlagen zur Verwendung in einem AEM Screens-Projekt erstellen, sollten Sie die Terminologie der zu erstellenden Vorlagen kennen.

   Layoutname	Beschreibung
   Left20-LandscapeHD3Zone	Bezieht sich auf ein Querformatlayout mit 3 Zonen, bei dem Zone 1 20 % des horizontalen und vertikalen Bildschirms von links, Zone 2 80 % des horizontalen Bildschirms und 20 % des vertikalen Bildschirms von rechts und Zone 3 100 % des horizontalen und 80 % des vertikalen Bildschirms mit einem Seitenverhältnis von 16:9 einnimmt.
   Upper20-PortraitHD2Zone	Bezieht sich auf eine 2-Zonen-Hochformatvorlage, die 20 % des Bildschirms von oben abdeckt und ein Seitenverhältnis von 16:9 aufweist.
   Right20-LandscapeSD3Zone	Bezieht sich auf eine 3-Zonen-Vorlage, die 20 % des Bildschirms von rechts abdeckt und ein Seitenverhältnis von 4:3 aufweist.

   WICHTIG

   Die im benutzerdefinierten Layout definierten Zonen passen möglicherweise nicht zum Seitenverhältnis des gesamten Layouts. Mit der in diesem Dokument verwendeten Namenskonvention wird das Seitenverhältnis des benutzerdefinierten Layouts als Ganzes angegeben.

Anwendungsbeispiel Layout „Left20-LandscapeHD3Zone“

Gehen Sie wie folgt vor, um die benutzerdefinierte Vorlage Left20-LandscapeHD3Zone mit der folgenden Konfiguration zu erstellen:

• Left20 bezieht sich auf den oberen Bereich links, der 20 % der horizontalen und vertikalen Bildschirmgröße umfasst.
• Querformat beschreibt sich auf die Bildschirmausrichtung
• HD bezieht sich auf das Seitenverhältnis 16:9
• 3Zone weist auf drei Bereiche der Anzeige hin

Visuelle Darstellung des Mehrzonen-Layouts

Das Layout Left20-LandscapeHD3Zone ermöglicht Ihnen das Erstellen des folgenden Layouts mit mehreren Zonen in Ihrem Projekt:

Erstellen eines Left20-LandscapeHD3Zone-Layouts

Gehen Sie wie folgt vor, um ein Left20-LandscapeHD3Zone-Layout für ein AEM Screens-Projekt zu erstellen:

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

   

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

3. Erstellen Sie unter Apps einen Ordner mit dem Titel customtemplate. Erstellen Sie in gleicher Weise unter customtemplate einen weiteren Ordner mit dem Titel template, wie in der folgenden Abbildung dargestellt.

   

   HINWEIS

   Jedes Mal, wenn Sie Inhalte auf einem Knoten erstellen, bearbeiten oder kopieren, sollten Sie in der Aktionsleiste von CRXDE Lite auf Alle speichern klicken. Andernfalls können Sie die Änderungen nicht übernehmen.

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

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

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

   

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

   

8. Navigieren Sie über /apps/customtemplate/template/my-custom-layout/jcr:content zur Eigenschaft jcr:content von my-custom-template und ändern Sie die Eigenschaft cq:cssClass in aem-Layout my-custom-layout.

   

9. 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.

   HINWEIS

   Diese benutzerdefinierten Klassen werden im CSS verwendet, um die Breite/Höhe für die responsiven Raster festzulegen.

   HINWEIS

   Je nachdem, wie viele Raster insgesamt benötigt werden, können Sie responsive Raster hinzufügen oder entfernen. In diesem Beispiel sehen Sie zwei Raster in der ersten Zeile und ein Raster in der zweiten Zeile. Insgesamt gibt es also drei responsive Raster („r1c1“, „r1c2“, „r2c1“).

10. 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.

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

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

13. 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%;
      }
    

    HINWEIS

    Sie können die Prozentwerte entsprechend den Anforderungen für Ihre benutzerdefinierte Vorlage ändern.

14. 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.

    HINWEIS

    Alle Stile sollten manuell eingegeben werden, da bei der Eingabe durch Kopieren und Einfügen Leerzeichen hinzugefügt werden könnten, die zu Problemen im Zusammenhang mit den CSS-Stilen führen.

Anzeigen des Ergebnisses

Gehen Sie wie folgt vor, um obige benutzerdefinierte Vorlage in Ihrem AEM Screens-Projekt zu verwenden:

1. Navigieren Sie zum in Schritt 1 erstellten Projekt und wählen Sie den Ordner Kanäle aus.

   

2. Klicken Sie in der Aktionsleiste auf Erstellen. Wählen Sie anschließend im Assistenten Erstellen die Vorlage Left20-LandscapeHD3Zone aus.

   

3. 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.

   

Einfügen eines Bildes als Hintergrundebene

Sie können ein Bild als Hintergrundebene in das Layout einfügen:

Sie können die CSS-Regel so anpassen, dass sie den sogenannten „data-uri“ verwendet und das Bild (Base64-codiert) direkt in die CSS-Datei static.css einbindet, die Sie in Schritt 13 erstellt haben.

Dies geschieht wie folgt:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }

Sie können auch die folgenden Schritte ausführen:

1. Stellen Sie sicher, dass das Bild in der Offline-Konfiguration für den Kanal enthalten ist.
2. Verwenden Sie einen direkten Link zum Bild im obigen CSS anstelle der „data-uri“-Variante.

Aktualisieren der Hintergrundfarbe

Fügen Sie der xml-Datei static.css, die Sie in Schritt 13 erstellt haben, den folgenden Code hinzu, um die Hintergrundfarbe zu ändern.

.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }

Ressourcen für Business.Adobe.com

Auto Form Fill Personalized Communications Content As A Service Content Management Headless Cms Digital Signage