Criação de modelos personalizados para layouts de várias zonas creating-custom-templates-multizone

Tamanho de pixel fixo ou porcentagens:

Decida se deseja usar tamanho de pixel fixo para zonas diferentes para o layout personalizado ou se deseja criar um layout personalizado usando porcentagens.

Convenção de nomeação:

Antes de entender como criar modelos de várias zonas personalizados para usar em um projeto do AEM Screens, entenda a explicação dos modelos que deseja criar.

Crie um projeto do AEM Screens com o título customtemplate.

Navegue até CRXDE Lite da instância do AEM > Ferramentas > CRXDE Lite.

Criar uma pasta em aplicativos intitulado como customtemplate. Da mesma forma, crie outra pasta intitulada como modelo em customtemplate, conforme mostrado na figura abaixo.

Copiar o modelo em barra à esquerda de /libs/screens/core/templates/splitscreenchannel/lbar-left para /apps/customtemplate/template.

Renomear o copiado lbar-esquerda (/apps/customtemplate/template) para my-custom-layout.

Navegue até /apps/customtemplate/template/my-custom-layout e atualizar as propriedades jcr:description para Modelo paraLeft20-LandscapeHD3Zone e jcr:title para Left20-LandscapeHD3Zone.

Navegue até a offline-config nó de /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config e atualize o jcr:title para Left20-LandscapeHD3Zone.

Navegue até a jcr:content propriedade de my-custom-template de /apps/customtemplate/template/my-custom-layout/jcr:content e atualize o cq:cssClass para que você possa usar aem-Layout my-custom-layout.

Referindo-se à etapa (4) na qual você copiou o modelo de barra à esquerda, é possível visualizar três grades responsivas em my-custom-layout/jcr:content. Adicione a classe css personalizada a cada uma das grades responsivas na cq:cssClass propriedade, por exemplo, my-custom-layout—top-left para r1c1 nó.

Da mesma forma, adicione my-custom-layout—top-right para r1c2 e, my-custom-layout—bottom para r2c1 nó.

Copiar /libs/settings/wcm/designs/screens para /apps/settings/wcm/designs/ e renomear o design copiado como custom-template-designs.

Navegue até /apps/settings/wcm/designs/custom-template-designs e atualizar a propriedade jcr:title de custom-template-designs para customtemplate-design.

Navegue até /apps/settings/wcm/designs/custom-template-designs e crie um arquivo static.css.

Copiar o conteúdo para static.css arquivo:

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

Navegue até /apps/<project>/templates/my-custom-layout/jcr:content e atualizar a propriedade cq:designPath para /apps/settings/wcm/designs/customtemplate-designs assim, você pode carregar os estilos configurados em static.css.

Navegue até o projeto do Screens criado na etapa (1) e selecione o Canais pasta.

Selecionar Criar na barra de ações e selecione o modelo Left20-LandscapeHD3Zone do Criar assistente.

Depois de criar um canal com o modelo personalizado, é possível adicionar ativos ao canal por meio do editor. A visualização a seguir mostra as imagens em um modelo personalizado.