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 arquivoO nome do arquivo deve seguir a semântica:1 - Nome do componente2 - 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 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-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 +ItemO 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-institucional-home-produtos-banda-larga-pf>Salvar4 - 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
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 3 cards - Sombreamento HABILITADO
Título Institucional
Subtítulo 2 cards - Sombreamento DESABILITADO(default)
Rodapé 4 - ID Link âncora: INSTITUCIONAL-ANCORA-04
Título Institucional
Subtítulo 1 card - Sombreamento HABILITADO
Rodapé 5 - ID Link âncora: INSTITUCIONAL-ANCORA-05