Aangepaste sjablonen maken voor MultiZone-layouts creating-custom-templates-multizone

Vaste Grootte of Percentages van het Pixel:

Bepaal of u de vaste pixelgrootte voor verschillende zones wilt gebruiken voor uw aangepaste layout of dat u een aangepaste indeling wilt maken met percentages.

noemend Overeenkomst:

Het helpt om te begrijpen hoe te om douane multi-zone malplaatjes tot stand te brengen in een project van AEM Screens te gebruiken. Maar eerst moet u het gemiddelde begrijpen van de sjablonen die u wilt maken.

Maak een AEM Screens-project met de naam customtemplate .

Navigeer aan CRXDE Lite van uw AEM instantie > Hulpmiddelen > CRXDE Lite.

Creeer een omslag onder apps genoemd als customtemplate. Op dezelfde manier creeer een andere omslag die als malplaatje onder customtemplate wordt genoemd, zoals aangetoond in het hieronder cijfer.

Kopieer de sjabloon linksboven van /libs/screens/core/templates/splitscreenchannel/lbar-left naar /apps/customtemplate/template .

Verander de gekopieerde bar-verlaten (/apps/customtemplate/template) aan my-custom-lay-out.

Navigeer naar /apps/customtemplate/template/my-custom-layout en werk de eigenschappen jcr:description aan Sjabloon voorLeft20-LandscapeHD3Zone en jcr:title aan Left20-LandscapeHD3Zone bij.

Navigeer naar het knooppunt offline-config van /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config en werk de lus jcr:title to Left20-LandscapeHD3Zone bij.

Navigeer aan het jcr:content bezit van my-custom-malplaatje van /apps/customtemplate/template/my-custom-layout/jcr:content en werk het cq:cssClass bezit bij zodat kunt u aem-Lay-out my-custom-lay-out gebruiken.

Verwijzend naar stap 4 waarin u de bar-linkermalplaatje kopieerde, kunt u drie ontvankelijke netten onder my-custom-layout/jcr:content bekijken. Voeg douanecss klasse aan elk van het ontvankelijke net in het cq:cssClass bezit, bijvoorbeeld, toe my-custom-layout-top-left voor r1c1 knoop.

Op dezelfde manier voeg my-custom-layout-top-right voor r1c2 en toe my-custom-layout-bottom voor r2c1 knoop.

Het exemplaar /libs/settings/wcm/designs/screens aan /apps/settings/wcm/designs/ en noemt het gekopieerde ontwerp anders als douane-malplaatje-ontwerpen.

Navigeer aan /apps/settings/wcm/designs/custom-template-designs en werk het bezit jcr:title van douane-malplaatje-ontwerpen aan aangepast malplaatje-ontwerp bij.

Navigeer naar /apps/settings/wcm/designs/custom-template-designs en maak een bestand static.css.

Kopieer de inhoud naar het static.css -bestand:

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

Navigeer naar /apps/<project>/templates/my-custom-layout/jcr:content en werk de eigenschap cq:designPath to /apps/settings/wcm/designs/customtemplate-designs bij, zodat u de stijlen kunt laden die in static.css zijn geconfigureerd.

Navigeer aan uw project van Screens dat u in stap (1) creeerde en klik de omslag van Kanalen.

Klik creëren van de actiebar en klik het malplaatje Left20-LandscapeHD3Zone van creëren tovenaar.

Nadat u een kanaal met het aangepaste malplaatje hebt gecreeerd, kunt u activa aan uw kanaal van de redacteur toevoegen. In het volgende voorbeeld worden de afbeeldingen in een aangepaste sjabloon weergegeven.