O Carrossel de Banners com Texto e CTA é uma evolução do banner tradicional da Home e das Landing Pages do aplicativo. Com ele, você pode combinar imagem, título, subtítulo e botão de ação para criar campanhas mais claras, atrativas e orientadas à conversão, com gestão diretamente pelo seu CMS.
Este artigo consolida em um único lugar a visão geral da funcionalidade, os pré-requisitos de ativação, a configuração no CMS e as dúvidas mais comuns. Assim, a Central de Ajuda e ferramentas de busca como o Rovo passam a ter uma referência única e mais confiável sobre o tema.
O que esta funcionalidade permite
Ao ativar esse modelo de carrossel, o banner deixa de depender apenas da arte visual para comunicar a campanha. O aplicativo pode exibir camadas de conteúdo textual diretamente associadas ao banner, tornando a oferta mais compreensível e facilitando o clique do cliente no destino desejado.
Imagem principal para destacar a campanha
Título e subtítulo para reforçar a mensagem
Botão de ação (CTA) com texto configurável
Destino clicável para produto, coleção, categoria, página ou URL
Gestão via CMS, sem necessidade de alterar o app a cada campanha
Quando vale a pena usar
Esse formato é especialmente útil para campanhas sazonais, lançamentos, vitrines promocionais e comunicações que precisam de contexto adicional além da imagem. Ele também ajuda quando a oferta precisa de um botão com chamada explícita, como Comprar agora, Ver ofertas ou Conhecer coleção.
Pré-requisitos e ativação
A funcionalidade depende de dois fatores: disponibilidade técnica no aplicativo e capacidade do seu CMS ou Cloud Commerce de fornecer os campos adicionais usados pelo banner com texto.
Verifique se o seu sistema administrativo consegue gerenciar os campos de imagem, título, subtítulo, texto do botão e destino.
Confirme com a equipe responsável pelo conteúdo quais banners passarão a usar esse formato.
Abra um chamado com o suporte da Kobe Apps solicitando a habilitação do carrossel com texto e CTA, caso ele ainda não esteja ativo no seu projeto.
Depois que a funcionalidade estiver habilitada, as campanhas passam a ser gerenciadas diretamente no CMS. Em cenários já compatíveis, não é necessário abrir um novo release para cada alteração de conteúdo.
Como o aplicativo decide o layout do banner
O layout exibido no app é definido automaticamente a partir dos campos preenchidos no CMS. Na prática, o mesmo componente pode se comportar como banner simples, banner com texto sobre a imagem ou banner com texto abaixo da imagem.
Modo de exibição
|
Quando acontece
|
Comportamento no app
|
Blog Hero sobre a imagem
|
Quando o banner está com
|
O texto e o botão aparecem sobre a imagem, alinhados na parte inferior, com tratamento visual automático para legibilidade.
|
Blog Hero abaixo da imagem
|
Quando o banner está com
|
A imagem aparece na parte superior e o bloco textual fica em uma faixa fixa abaixo dela, mantendo a altura total do carrossel estável.
|
Apenas imagem
|
Quando os campos de texto não são preenchidos ou
|
O componente funciona como um banner tradicional, exibindo apenas a imagem clicável.
|
Como configurar no CMS
Para montar um banner com texto e CTA, configure o componente de banner disponível no seu CMS. O nome do componente pode variar conforme a plataforma, mas os campos funcionais seguem a mesma lógica.
Campos principais
Campo
|
Função
|
Como preencher
|
Observação prática
|
|
Define a proporção do banner
|
Use
|
É o formato esperado para os layouts com texto integrado
|
|
Imagem principal da campanha
|
Informe a URL da imagem
|
É um campo essencial para qualquer variação do banner
|
|
Define a posição do bloco textual
|
Use
|
Se ficar vazio, o banner tende a funcionar como imagem simples
|
|
Título principal
|
Use uma chamada curta e direta
|
Recomenda-se manter em até 1 linha, sempre que possível
|
|
Texto complementar
|
Descreva a oferta ou benefício
|
Prefira textos curtos para preservar legibilidade
|
|
Texto do botão
|
Exemplos:
|
Textos objetivos performam melhor visualmente
|
|
Destino do clique
|
Configure a URL, página, produto ou referência equivalente
|
Revise sempre se o link abre corretamente no app
|
Recomendações de preenchimento
Título: prefira frases curtas, com leitura imediata
Subtítulo: complemente a oferta sem repetir o título
CTA: use verbos de ação claros
Imagem: escolha artes compatíveis com a proporção recomendada para o projeto
Se você quiser manter o comportamento de banner tradicional em algum item do carrossel, basta cadastrar somente a imagem e o destino, sem preencher os campos textuais.
Comportamento visual e consistência no app
O design dos textos e do botão segue a identidade visual e o Design System do aplicativo. Isso significa que fonte, cor, espaçamentos e estilo do CTA não são normalmente personalizados banner a banner. Essa padronização evita inconsistências na navegação e preserva a experiência do usuário.
No modo com texto sobre a imagem, o app aplica recursos visuais automáticos para melhorar a leitura, como gradiente escuro sob o texto e contraste adequado. Já no modo com texto abaixo da imagem, o componente preserva a altura total do banner para evitar quebras na composição da Home.
Configurações visuais controladas pela Kobe Apps
Somente alguns comportamentos do carrossel são definidos tecnicamente durante a implantação ou por configuração remota. Os demais são totalmente configuráveis no seu CMS por você. Caso precise alterar qualquer item da lista abaixo, solicite apoio ao suporte.
Configuração
|
O que controla
|
Exemplo
|
Estilo dos indicadores
|
Formato dos marcadores de navegação do carrossel
|
Círculo, retângulo ou traço
|
Indicadores com borda
|
Exibição com contorno em vez de preenchimento sólido
|
Variação visual do paginador
|
Tempo de autoplay
|
Intervalo de avanço automático entre banners
|
4 segundos por banner
|
Perguntas frequentes
Qual a diferença entre este modelo e o banner simples?
O banner simples exibe apenas uma imagem clicável. O modelo com CTA permite adicionar título, subtítulo e botão de ação, tornando a comunicação da oferta mais direta dentro do app.
O que acontece se eu não preencher os campos de texto?
O componente continua funcionando. Nesse caso, ele pode se comportar como um banner simples, exibindo somente a imagem com clique no destino configurado.
Preciso de um novo release do app para publicar campanhas com texto e CTA?
Em projetos já compatíveis com essa funcionalidade, não. Depois da habilitação técnica, o conteúdo passa a ser gerenciado pelo CMS. O app já está preparado para renderizar esse formato a partir da versão v13.200.1.
Posso personalizar a fonte e as cores de cada banner individualmente?
Não em um fluxo padrão. O componente segue o Design System do aplicativo para manter consistência visual entre campanhas e telas.
Qual tamanho de imagem devo usar?
Use sempre a proporção recomendada para o seu projeto. Imagens fora do padrão podem sofrer corte, distorção ou perda de qualidade em determinados dispositivos.
O texto pode quebrar o layout da Home?
Não. O componente foi pensado para preservar a estabilidade visual do carrossel. No modo BELOW_IMAGE, a composição ajusta a área da imagem para manter a altura total esperada.
O que acontece se a imagem não carregar?
O aplicativo possui mecanismos de proteção para esse cenário. Enquanto o arquivo carrega, pode ser exibido um efeito visual de carregamento. Em caso de erro, o componente utiliza um fallback visual para evitar áreas vazias e preservar o funcionamento do carrossel.
É possível usar vídeo no lugar da imagem?
Sim. O carrossel suporta vídeos em formato MP4, desde que o projeto esteja preparado para esse uso.
Boas práticas
Use uma mensagem principal por banner
Mantenha o CTA curto e objetivo
Evite excesso de texto na arte quando já houver título e subtítulo no componente
Revise o destino configurado antes de publicar
Prefira imagens com boa leitura em telas menores
Próximo passo recomendado
Se você quer começar a usar esse formato no seu app, valide primeiro se o seu CMS já suporta os campos necessários. Em seguida, solicite ao suporte da Kobe Apps a habilitação da funcionalidade, caso ela ainda não esteja ativa no projeto.