A criação de vitrines foi criada para oferecer aos nossos clientes a criação dinâmica e intuitiva de páginas com estilo personalizável.
As vitrines podem ser usadas para disponibilizar o conteúdo de um infoproduto, criar uma página com ofertas de uma loja, anunciar eventos e muito mais.
O conceito da funcionalidade é muito amplo e foi projetado assim de propósito para dar asas a sua imaginação. Neste artigo vamos mostrar tudo que você precisa saber para criar e editar vitrines dentro da sua comunidade Cativa.
Finalizada as configurações básicas, iniciamos a personalização da nossa comunidade, dentro do painel administrativo, iremos acessar, a opção: Personalizar.
Gerenciando e Criando Novas Vitrines
Lista de Vitrines:
Nesta seção, você pode visualizar todas as vitrines já criadas. Cada linha exibe informações importantes como nome, versão e data de criação.Nova Vitrine:
Para adicionar uma nova vitrine, clique no botão “+ Nova vitrine” localizado no canto superior direito da tela.Editar ou Excluir:
Use o ícone de lápis para editar as informações de uma vitrine existente (como nome ou estilo), ou o ícone vermelho de exclusão para removê-la da lista.
Configurando a Vitrine
Nome: Dê um nome à sua vitrine para identificá-la facilmente. Por exemplo, “Curso - teste”.
Opções de Exibição:
Ative ou desative as opções conforme desejar:Público: Torne sua vitrine visível para todos os usuários.
Modo escuro: Altere o tema para o modo escuro, se preferir.
Visualizar prévia: Veja como sua vitrine ficará antes de salvar as alterações.
Habilitar busca: Adicione uma barra de pesquisa para facilitar a navegação dentro da vitrine.
Adicionar Seção:
Clique em “Adicionar seção” para incluir novos blocos de conteúdo em sua vitrine.Salvar:
Após definir todas as configurações, clique em “Salvar” para registrar as alterações.
Adicionando Seções
Criar Seção:
Adicione uma nova seção clicando no botão “Adicionar seção”.Configurações da Seção:
No painel lateral, insira o nome da seção (Exemplo, “Cursos e Treinamentos”) e selecione o tipo de card que será exibido (Exemplo: “Apenas imagem”).
Configurando o Tipo de Card
Selecionar Tipo de Card:
Escolha o formato do card que será exibido na seção. Existem diversas opções, como Banner, Informativo, Descritivo com chamada para ação, Apenas imagem, entre outros.Aplicação por Dispositivo:
As opções Desktop e Mobile/APP permitem definir em quais dispositivos o card será exibido. Podendo escolher manter o card disponível em ambos ou exibir apenas em um dispositivo específico, conforme a necessidade.💡 Dica:
No caso dos banners, é importante atentar-se ao formato de cada dispositivo. Para garantir uma boa visualização, recomenda-se criar duas seções separadas, uma configurada apenas para Desktop e outra apenas para Mobile/APP ajustando o banner conforme o tamanho ideal de cada versão.Salvar Alterações:
Após escolher o tipo de card desejado e ajustar as configurações, clique em Selecionar para aplicar as alterações à seção. Ao final, clique em Salvar.
Visualizando e Ajustando a Vitrine
Pré-visualização:
Utilize a opção “Visualizar prévia” para ver como a vitrine está ficando antes de ser publicada. Assim, é possível identificar ajustes de layout, cores ou disposição dos cards.Revisão dos Cards:
Analise se os cards e seções estão posicionados corretamente e se as informações exibidas correspondem ao objetivo da vitrine.Salvar Alterações:
Após revisar e ajustar todos os detalhes, clique em “Salvar” para registrar as atualizações realizadas.
Adicionando a Vitrine ao Menu Lateral
Acesso ao Menu:
No painel administrativo, acesse a aba Personalizar e selecione a opção Menu lateral.Criar Novo Menu:
Clique em “+ Novo menu” e adicione um novo item.
Configurando o Novo Menu
Criar Novo Menu:
Dê um nome que identifique claramente a vitrine criada.Exemplo: “Cursos”, “Tutoriais” ou “Conteúdos Exclusivos”.
Ícone:
Clique sobre o ícone para alterar a imagem.
O tamanho sugerido é de 175x175 pixels, garantindo boa visualização e alinhamento com os demais itens do menu.
|OBS: Ao criar ícones para o menu lateral, utilize uma área total de 175 × 175 px e mantenha as seguintes proporções:
Margem de segurança: aproximadamente 13 px em todos os lados.
Elemento interno (símbolo): entre 115 × 115 px e 120 × 120 px, garantindo espaçamento visual adequado.
Essas medidas asseguram que o ícone fique equilibrado, sem encostar nas bordas, e mantenha uma boa legibilidade quando reduzido ou exibido em diferentes dispositivos.
💡 Dica:
Prefira exportar os ícones em .PNG com fundo transparente e alinhar todos os elementos ao centro do artboard de 175×175 px.
Isso mantém consistência entre os ícones e evita desalinhamentos quando aplicados no painel administrativo.📸 (Imagem de exemplo logo abaixo das instruções)
Tipo de URL:
Selecione a opção “Vitrine” para vincular o menu a uma vitrine criada previamente.Vitrine:
Escolha, na lista, qual vitrine será exibida ao acessar esse item do menu.Exemplo: “Cursos – teste”.
Permissionamento:
Defina quem poderá visualizar o menu:Todos os usuários;
Apenas administradores;
Usuários com privilégios específicos.
Selos Permitidos:
Caso utilize selos de permissão, selecione-os para determinar quais grupos de usuários terão acesso à vitrine.Salvar:
Após concluir o preenchimento das informações, clique em “Criar” para adicionar o menu lateral.
💡 Dica:
Use nomes curtos e ícones simples para facilitar a identificação no menu lateral. Isso melhora a experiência de navegação e mantém a interface organizada.
📸 Imagem de exemplo da margem de segurança.
Visualizando a Vitrine no Menu
Acesso ao Menu:
Após criar e vincular a vitrine ao menu lateral, ela ficará visível no painel principal, junto aos demais itens do menu.Identificação da Vitrine:
O nome e o ícone configurados serão exibidos na barra lateral esquerda, facilitando o acesso rápido à funcionalidade.Exemplo: “Vitrine – teste” como mostrado na imagem abaixo.
Navegação:
Ao clicar sobre a vitrine adicionada, o usuário será direcionado à página correspondente, onde poderá visualizar o conteúdo publicado e interagir com as seções configuradas.
💡 Dicas Adicionais
Multiplicidade:
Você pode criar diversas vitrines com finalidades diferentes — por exemplo, para destacar produtos, divulgar cursos, anunciar eventos ou organizar conteúdos temáticos dentro da sua comunidade digital.Personalização:
Explore as opções de layout, cores, ícones e seções para adaptar cada vitrine ao propósito desejado.
As vitrines são altamente flexíveis, permitindo criar experiências únicas para os usuários.
Com este tutorial, você agora possui todas as instruções para criar vitrines atraentes e funcionais no estilo Netflix dentro da plataforma Cativa.
Aproveite para testar diferentes estilos, tipos de cards e configurações, encontrando o formato que melhor se adapta às suas necessidades e à identidade visual da sua comunidade.