Banner Fullscreen com Texto
Nova utilização do banner de tamanho FULL, permitindo mais customizações.
A utilização de um banner que ocupe a tela inteira do usuário permite maior versatilidade e autonomia para criação de campanhas utilizando as novas funcionalidades de adição e customização de textos exibidos junto ao banner, enquanto mantemos a opção padrão de exibir apenas a imagem.
Recomendamos que essa funcionalidade seja utilizada junto a nova AppBar com Botões de Ação Flutuantes, disponível via solicitação para nosso suporte. Consulte a documentação anexada.
Disponível a partir da versão 13.200.1 de todos os aplicativos.
Caso o seu esteja em uma versão inferior, solicite atualização ao nosso time de suporte a partir do nosso portal.
Como Configurar
Acesse o painel administrativo da VTEX e entre no espaço do aplicativo.
Na aba "Headless CMS", pesquise pelo seu componente de "Home" já publicado.
Abra o componente e adicione um novo Carrosselde Banners".
Preencha os campos conforme as instruções abaixo:
Campo
|
Descrição
|
Detalhes
|
Título
|
Texto principal exibido na primeira linha do texto.
|
Limite: 1 linha.
|
Subtítulo
|
Texto auxiliar exibido a partir da segunda linha do texto.
|
Limite: 3 linhas (por cima da imagem) ou 2 linhas (abaixo da imagem).
|
Ativo
|
Determina se o componente será exibido no aplicativo.
|
|
Tamanho
|
Escolher o valor FULL.
|
|
Texto de Ação
|
Texto para o CTA ao clicar no banner.
|
Limite: 1 linha.
|
Posição do Bloco de Texto
|
Determina se o texto será exibido por cima da imagem (OVER_IMAGE)ou abaixo da imagem (BELOW_IMAGE).
|
|
Exibir margem
|
Checkbox desmarcado.
|
|
Preview dos banners (horizontalmente)
|
Checkbox desmarcado.
|
|
Demais campos
|
Podem ser preenchidos conforme costume.
|
Qualquer dúvida, siga a documentação sem alterar os campos já preenchidos.
|
Exemplo de configuração:
Lembre-se de salvar e publicar todas as alterações feitas no CMS.
Caso o campo Posição do Bloco de Texto não seja preenchido, o banner seguirá o comportamento padrão de não exibir textos.
Exemplo Visual
Utilizando AppBar padrão:
Comportamento Padrão
|
Texto "OVER_IMAGE"
|
Texto "BELOW_IMAGE"
|
Utilizando AppBar sugerida (com botões de ação flutuantes):
Comportamento Padrão
|
Texto "OVER_IMAGE”
|
Texto "BELOW_IMAGE"
|
Precisa de Ajuda?
Se o seu CMS não possuir o campo "Posição do Bloco de Texto" dentro do Banner, solicite ao nosso time essa atualização.