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ível

    3 - 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 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>Imagens>Clicar em +Item e inserir o nome do arquivo
    O nome do arquivo deve seguir a semântica:
    1 - Nome imagem
    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: "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 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"

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 4 banners

Título Mosaic

Subtítulo 3 banners

  • teste-au-img-mosaico

Rodapé 4 - ID Link âncora: MOSAICO-ANCORA-04 link =>

Título Mosaic

Subtítulo 2 banners

  • Texto Alternativo imagem mosaico Ilustrativa desabilitado

    Título Mosaic 1 de 2 sem link ou modal

    Subtítulo Mosaic 1 de 2 sem link ou modal

  • Título Mosaic 2 de 2 sem link ou modal

    Subtítulo Mosaic 1 de 2 sem link ou modal

Rodapé 5 - COM sombreamento - ID Link âncora: MOSAICO-ANCORA-05 =>

Botões flutuantes