Componente Mosaico

1 - REGRA DESKTOP
As imagens devem ser distribuídas em 2 ou 3 colunas de acordo com a quantidade de banner e o tamanho da tela.
Dois Banners - DEVE exibir em 2 colunas.
Um banner em cada coluna com 570px.
Três, quatro, cinco e seis Banners - DEVE exibir em 3 colunas. Um banner em cada coluna com 380px.
Subtítulo:Deve ser exibido somente quando o mouse estiver sobre o banner;

O movimento deve ser de baixo para cima;

O Subtítulo deve ocupar o lugar o Título;

O Titulo de ser deslocado para cima quando o Subtítulo for exibido.

OBS> Temos a opção de deixá-lo com sombreamento "habilitado ou não" (Esta opção está no menu "Opções" na página onde seu Mosaic será exibido)

 

O nome do arquivo deve seguir a semântica: 

1 - Nome do componente

2 - Caminho de onde se encontra o componente

3 - Se PF ou PJ, tudo minúsculo e separados por hífen: 

Ex: item-componente-mosaic-home-pf.

 

Navegar em: Conteúdo>Conteúdos Compartilhados>Links>Clicar em +Item e inserir o nome do arquivo

O nome do arquivo deve seguir a semântica: 

1 - Nome do link, se interno, externo, modal

2 - Nome do componente

3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:

Ex: link-interno-mosaic-home-pf> Salvar
4 - O sistema exibe a tela para preenchimento dos campos para o Link
5 - Preencher campos obrigatórios
6 - Para o campo "URL" escolha onde o seu link para o mosaic será aberto, se "Link Interno" ou "URL" (não esquecer de colocar o caminho completo iniciando em "https://..." ou "Asset" (este quando for usar para criação do "Tutorial Componente", verificar no manual como criar), podemos selecionar um já existente nos combos apresentados para cada componente ou até mesmo copiar um(Veja no Indice deste manual "Como copiar Componentes">Salvar>Publicar

 

Navegar em: Conteúdo>Conteúdos Compartilhados>Mosaic>Listas>Clicar em +Item e inserir o nome do arquivo,

O nome do arquivo deve seguir a semântica: 

1 - Nome do componente

2 - Caminho de onde se encontra o componente

3 - Se PF ou PJ, tudo minúsculo e separados por hífen: 

Ex: lista-componente-mosaic-home-fixa-pj.

4 - No campo "Mosaic Itens" inserir os itens criados anteriormente para compor seu componente

 

1- Acessar a página que irá receber o componente em "Home > Site"; (Ver no índice deste manual o item "Como criar página no storyblok)

2- Na aba "Geral", clicar em "+Adicionar bloco";

3- Selecionar na lista, o item "Mosaic" criado anteriormente;

4- Isso irá criar um bloco com o nome "Mosaic vazio". Clicar nele;

5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Mosaic";

6- Isso ira exibir uma lista com os itens de Mosaic. Clique no Mosaic Item desejado;

7- Se desejar inserir um Titulo, subtítulo e rodapé para o bloco criado, clicar na aba "Opções" e em "Propriedades Avançadas" e inserir os valor nos respectivos campos.

8- Clicar em "Salvar" e "Publicar"