Título da Página Teste Automatizado Banner Basic

Como criar o Componente Banner Basic

Tutorial

  • Componente Banner aceita os itens abaixo:
     - Link: Interno ou Externo, abertura na mesma aba ou nova aba;
     - Imagem em formato JPG: Padrão (1920x420px) Tablet (768x720px) Mobile (768x720px).
     - No menu "Opções" da página onde queira adicionar o Banner desejado, existe a possibilidade de habilitar a imagem pra ficar dentro do grid. Esta opção é válida apenas para o Banner Basic. Esta é nossa opção antiga do Imagem com Link.
  • Navegar em: Conteúdo>Conteúdos Compartilhados>Banner>Itens>Basic>clicar em +Item
    1 - Inserir o nome do arquivo, que deve seguir a semântica: 
    2 - Nome do componente
    3 - Caminho de onde se encontra o componente, Se PF ou PJ, tudo minúsculo e separados por hífen: 
    Ex: item-componente-Banner-home-pf>Clicar em>Salvar
    4 - Será exibida a tela com os Campos "Imagem" e "Link" para preenchimento, sendo o campo imagem como sendo obrigatório
    5 - Preencher os campos obrigatórios>Salvar>Publicar
  • 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-banner-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 banner 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-banner-banda-larga-pf". Salvar>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>Banner>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, tudo minúsculo e separados por hífen, se pf ou pj:
    Ex: "lista-img-banner-banda-larga-pf". Salvar>
    3 - Inserir do lado direito da tela no campo "Itens de Banner", os itens criados anteriormente que farão parte do Carrossel de Banners>Salvar>Publicar.
  • 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 "Banner" criado anteriormente;
    4- Isso irá criar um bloco com o nome "Banner. Clicar nele;
    5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Banner";
    6- Isso ira exibir uma lista com os itens de Banner. Clique no Banner 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"
  • A partir do Item de banner já criado na página desejada no menu "Opções" abaixo do período de vigência são exibidos os campos:

    1 - "Contador": com a opção de habilitar
    2 - "Título": esta informação será exibida acima do contador quando preenchida
    3 - "Período de Vigência": Para que o Contador funcione corretamente é necessário selecioner data ou perído no campo "Período de Vigência", programando a vigência do contador Inicio e fim (Campo obrigatório)
    3 - Assim que os itens 1 e 2 e 3 forem preenchidos já no preview conseguimos visualizar o contador automaticamente>Salvar>Publicar

    OBS: Quando o contador for maior ou igual a 24 horas, ele exibe o formato em dias: “1 Dia ou 2 Dias”

    Dica: Quando formos usar o botão no banner sempre usarmos o botão de vendas (amarelo), pois o branco ou vermelho fica um pouco estranho.