Shortcut Icon

• 1 - Regras de Negócio do Componente Shortcut Icon

  *É sugerido usar sempre um banner abaixo do Shortcut Icon com layout default no topo da página para regular os espaçamentos.

   

  *Se for usar faixa informativa na mesma página que tem o Shortcut Icon como primeiro item da página, Nesse cenário a tarja deve ser cadastrada como primeiro item da página, se tiver shortcutMobile na página quebra a regra da tarja,  e é criado um espaçamento entre tarja e banner, nesse caso a shortcutMobile precisa ser removido da página e ser substituído pelo Shortcut Icon que já resolve o problema.

  Recomendamos que se for usar faixa informativa na mesma página que tem o Shortcut Icon usa-la como primeiro item da página.

  
  Usando a partir de 5 itens na lista com ícones o 5º ícone aparece pela metade, possibilitando o deslize pelo swiper.
  
  

  O Componente Shortcut Icon aceita os itens abaixo:

   - Título

   - Texto Acessível

   - Rótulo para o Google Analytics

   - Link Interno ou Externo e Link Modal, abertura na mesma aba ou nova aba

   - Ícone Mondrian
   - Brands Mondrian
   - Imagem (Recomendamos usar imagem com tamanho 48x48px com menos de 500kb)

   - Gif (Recomendamos usar Gif com tamanho 48x48px e limitar até 1mb)

  Obs: As informações de layout estão no menu "Opções" no bloco do componente onde seu Shortcut Icon para Mobile será inserido.

   

  Regras sobre o cadastro da imagem, ícone ou brands:
  

  - Se cadastrar imagem + ícone + brands a prioridade é = ícone

  - Se cadastrar imagem + ícone = ícone

  - Se cadastrar imagem + brands = brands

  - Se cadastrar Brands + imagem = brands

  - Se cadastrar ícone + brands = ícone

   

  *Para visualizar o componente precisa estar na página no modo mobile, com o componente na página você deve inserir a lista criada anteriormente e clicar em Opções para selecionar o layout desejado:

   

  Backgroud do Bloco: 

  - Default - Background branco

  - Inverse - Background vermelho

  - Seconday - Background preto

   

  Layout:

  - Primeiro ícone: Colorir apenas o Primeiro ícone

  - Todos os Ícones: Colorir todos os ícones

  - Default: ícone sem cor de fundo, circulo do ícone "vazado".

   

  Background do Ícone:
  - Background Amarelo
  - Background Preto

  - Background Vermelho

   

• 2 - Como cadastrar o componente Shortcut Icon

  1- Criar o link

  2- Criar o item do Shortcut Icon (Conteúdos Compartilhados Claro > Shortcut Icon > Item) e inserir o link criado anteriormente no item. 

  3- Criar a lista e inserir os itens criados anteriormente (Conteúdos Compartilhados Claro > Shortcut Icon > Listas) na lista.

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

  5- Na aba "Em Geral", clicar em "+Adicionar bloco";
  

  6- Selecionar na lista dos componentes, o item "Shortcut Icon";

  7- Isso irá criar um bloco com o nome "Shortcut Icon". Clicar nele;

  8- Inserir a lista criada anteriormente e clicar em Opções para selecionar o layout desejado:

  Backgroud do Bloco: Default, Inverse e Secondary

  Layout: Primeiro ícone: Colorir apenas o primeiro ícone, Todos os Ícones: Colorir todos os ícones ou Default: ícone sem cor de fundo, circulo do ícone "vazado".

  Background do Ícone: Background Amarelo, Background Preto e Background Vermelho

  9- 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.
  10- Existe a possibilidade de cadastrar o Período de Vigência e Segmentação também se preferir.

  11- Clicar em "Salvar" e "Publicar".

*Para visualizar o componente precisa colocar a página no modo de visualização mobile (Botão direito na página > Clicar em Inspecionar > E selecionar o modo responsivo ou escolher algum dispositivo mobile na lista de Dimensões.