Componente 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 componente Institucional o link é exibido no formato "link arrow" mas o componente continua sendo 100% clicável.- 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"
Vídeo com tutorial para criar o componente Institucional
Título Institucional
Subtítulo 9 cards - Sombreamento HABILITADO
Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Tí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 5 cards - Sombreamento DESABILITADO (default)
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Rodapé 2 - ID Link âncora: INSTITUCIONAL-ANCORA-02 link =>
Título Institucional
Subtítulo 3 cards - SEM LINKS - Sombreamento HABILITADO
Título Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Institucional
Subtítulo 2 cards - SEM LINKS - Sombreamento DESABILITADO (default)
Título Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo
Título Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo 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é 4 [FULL] ID Link âncora: INSTITUCIONAL-ANCORA-04 link => e e
Título Institucional
Subtítulo 1 card - SEM LINK - Sombreamento HABILITADO
Título Título Título Título Título Título
Subtítulo Subtítulo Subtítulo 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é 5 - ID Link âncora: INSTITUCIONAL-ANCORA-05
Título Institucional
Subtítulo 1 card - Sombreamento DESABILITADO (default)
Rodapé 6 - ID Link âncora: INSTITUCIONAL-ANCORA-06