Teste Automatizado Mosaico
Como criar o Componente Mosaic
Tutorial
- 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.2 - REGRA TABLET
As imagens devem ser distribuídas SEMPRE em 2 colunas não importando a quantidade de banner e o tamanho da tela.
Subtítulo - Deve estar sempre visível3 - REGRA SMARTPHONE
As imagens devem ser distribuídas SEMPRE em 1 coluna (empilhar) não importando a quantidade de banner e o tamanho da tela. Subtítulo - Deve estar sempre visível
OBS> Temos a aopçã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) - Navegar em: Conteúdo>Conteúdos Compartilhados>Mosaic>Itens>+Item e inserir o nome do arquivo,O nome do arquivo deve seguir a semântica:1 - Nome do componente2 - Caminho de onde se encontra o componente3 - 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 arquivoO nome do arquivo deve seguir a semântica:1 - Nome do link, se interno, externo, modal2 - Nome do componente3 - 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>Imagens>Clicar em +Item e inserir o nome do arquivoO nome do arquivo deve seguir a semântica:1 - Nome imagem2 - Nome do componente3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj: Ex: "img-mosaic-banda-larga-pj". Salvar>4 - Do lado direto da tela será exibido as opções para fazer upload das imagens, sendo:Padrão, Mobile e Tablet>Clicar em "Upload New" para cada imagem>Preencher campos obrigatórios>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 componente2 - Caminho de onde se encontra o componente3 - 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"
Título Mosaic
Subtítulo 6 banners
Rodapé 1 - COM sombreamento - ID Link âncora: MOSAICO-ANCORA-01 link =>
Título Mosaic
Subtítulo 5 banners
Rodapé 2 - SEM sombreamento - ID Link âncora: MOSAICO-ANCORA-02 link =>
Título Mosaic
Subtítulo 2 banners
Rodapé 5 - COM sombreamento - ID Link âncora: MOSAICO-ANCORA-05 =>
Botões flutuantes
Botões flutuantes