Teste Automatizado Topico Vertical
Como criar o Componente Topic Vertical
Tutorial
- Componente Topic Vertical aceita os itens abaixo:- Título- Ícone- Texto- Link ArrowRegras de Negócio:Se não inserir ícones, ele irá renderizar uma sequência numérica automaticamente.Layout - padrão ou inverso (esta opção fica no menu "Opções" na página onde o seu Topic Vertical será inserido)- No Desktop o componente é exibido um ao lado do outro- No Mobile o componente é exibido um abaixo do outro
- Navegar em: Conteúdo>Conteúdos Compartilhados>Topic vertical>Itens>Clicar em +Itens e inserir o nome do arquivo,O nome do arquivo deve seguir a semântica:1 - Nome do componente3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se PF ou PJ:Ex: item-topic-vertical-home-internet-pf >Preencher campos obrigatórios>Salvar
4 - Será exibida a tela com os campos "Ícone", "Título", "Texto" e "Link"
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, 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-topic-vertical-home-internet-pf >Preencher campos obrigatórios
4 - O sistema exibe a tela para preenchimento dos campos para o Link5 - Preencher campos obrigatórios6 - Para o campo "URL" escolha onde o seu link para o card 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>Topic Vertical>Listas>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: lista-topic-vertical-home-produtos-fone-fixo-pj >Salvar3 - Inserir do lado direito da tela no campo "Topic Vertical Itens", os itens criados que farão parte do seu Topic Vertical>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 "Topic Vertical" criado anteriormente;4- Isso irá criar um bloco com o nome "Topic Vertical vazio". Clicar nele;5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Topic Vertical";6- Isso ira exibir uma lista com os itens de Topic Vertical. Clique no Topic Vertical 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 1 - Topic Vertical Layout Default
Subtítulo 1 - COM ícone cadastrado
Rodapé 1 - ID Link âncora: TOPICO-VERTICAL-ANCORA-01 link
Título 2 - Topic Vertical Layout Inverso
Subtítulo 2 - SEM ícone cadastrado
Topico 04
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. In elementis mé pra quem é amistosis quis leo. Quem manda na minha terra sou euzis! Delegadis gente finis, bibendum egestas augue arcu ut est.
Topico 05
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. In elementis mé pra quem é amistosis quis leo. Quem manda na minha terra sou euzis! Delegadis gente finis, bibendum egestas augue arcu ut est.
Topico 06
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. In elementis mé pra quem é amistosis quis leo. Quem manda na minha terra sou euzis! Delegadis gente finis, bibendum egestas augue arcu ut est.
Rodapé 2 - ID Link âncora: TOPICO-VERTICAL-ANCORA-02 link =>
Título 3 - Topic Vertical Layout Default
Subtítulo 3 - COM ícone cadastrado
Título 4 - Topic Vertical Layout Inverso
Subtítulo 4 - Apenas Brands
Topico 13
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 14
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 15
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Rodapé Topic Vertical
Título 5 - Topic Vertical Layout Default
Subtítulo 5 - Apenas Brands
Topico 13
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 14
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 15
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Rodapé Topic Vertical
Título 6 - Topic Vertical Layout Default
Subtítulo 6 - Com numero, icone, brand e somente título
Topico 16
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 18
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Tópico Somente Texto 19
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Rodapé Topic Vertical
Título 7 - Topic Vertical Layout Default
Subtítulo 7 - Com numero e brand
Topico 20
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 21
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 22
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Topico 23
Mussum Ipsum, cacilds vidis litro abertis. Interessantiss quisso pudia ce receita de bolis.
Rodapé Topic Vertical