Teste Automatizado Institucional

Como criar o Componente Institucional

Tutorial

  • Componente Institucional aceita os itens abaixo:
    - Título
    - Subtítulo
    - Link : Interno ou Externo, abertura na mesma aba ou nova aba
    - Imagem em formato JPG: Padrão, Tablet e  Mobile (266x355px)
    - Layout: opção de habilitar/desabilitar sombreamento no menu "Opções" na página onde será inserido o componente institucional.
     
    Regras de Funcionamento:
     - No desktop só é exibido o botão swipper se tivermos 5 cards ou mais -
     - O botão swipper não deve ser exibido se tivermos de 1 a 4 cards.
     - No Mobile só é exibido o botão swipper se tivermos 2 cards ou mais, o botão swipper não deve ser exibido se tivermos somente 1 card.
     
  • Navegar em: Conteúdo>Conteúdos Compartilhados>Institucional>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, tudo minúsculo e separados por hífen, se pf ou pj:
    Ex: "item-institucional-banda-larga-pf".
    3 - Será exibido a tela com os campos "Imagem", "Título", "Subtítulo" e "Link"
    4 - Para os campos de "Imagem e link", podemos selecionar um já existente nos combos apresentados ou copiar um já existente (Ver no Índice do Manual "Como copiar componentes") e preenchê-los nos campos necessários>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-institucional-banda-larga-pf".
    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>Links>Clicar em +Item
    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-institucional-home-produtos-banda-larga-pf>Salvar
    4 - O sistema exibe a tela para preenchimento dos campos para o Link
    5 - Preencher campos obrigatórios6 - Para o campo "URL" escolha onde o seu link do atalho 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) 
  • 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 "Institucional" criado anteriormente;
    4- Isso irá criar um bloco com o nome "Institucional vazio". Clicar nele;
    5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Institucional";
    6- Isso ira exibir uma lista com os itens de Institucional. Clique no Institucional 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 Institucional

Subtítulo 5 cards - Sombreamento HABILITADO

Confira as tarifas dos Estados Unidos, um dos destinos mais procurados

Título Institucional 7

Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo

Rodapé 1 - ID Link âncora: INSTITUCIONAL-ANCORA-01 link:

Título Institucional

Subtítulo 4 cards - Sombreamento DESABILITADO(default)

Rodapé 2 - ID Link âncora: INSTITUCIONAL-ANCORA-02 link:

Título Institucional

Subtítulo 2 cards - Sombreamento DESABILITADO(default)

Rodapé 4 - ID Link âncora: INSTITUCIONAL-ANCORA-04