Componente Video Text
O bloco Video Text foi pensado para juntar video, titulo, texto e CTA no mesmo modulo, com controlo de layout e comportamento responsivo. Permite combinar rich text, cores, ficheiro de video ou IDs externos, cover, autoplay, posicao do video, ligacao do botao e regras de carousel por dispositivo dentro da mesma estrutura.
Informacoes gerais
O bloco Video Text e uma solucao de storytelling modular para paginas que precisam de video e copy a trabalhar em conjunto. Em vez de apresentar apenas um player, este componente organiza um argumento completo: titulo, texto de apoio, botao, destino e configuracao visual do video dentro do mesmo bloco.
Este bloco pode incluir:
- campos de Titulo e Texto com editor de conteudo
- Text color e Background color para ajustar a leitura do modulo
- upload de Video com ALT, TITULO e Video Width
- Youtube ID, Vimeo ID, Autoplay e Video Cover 1920x1080
- controlo de Video on the right, Label button, URL, Category / Page e Target
- Button Style e configuracoes de carousel independentes para Desktop, Laptop, Tablet e Mobile
Utiliza este componente quando o video nao deve aparecer sozinho e precisa de ser enquadrado por copy, argumento comercial ou contexto editorial. Faz mais sentido para campanhas, lancamentos, testemunhos, entrevistas com resumo, destaques de produto e modulos em carousel onde cada slide precisa de combinar media e mensagem.
Exemplos visuais do bloco
3 leituras visuais recorrentes
O bloco Video Text pode funcionar como modulo editorial, destaque invertido ou carousel de varios videos com mensagem associada. Os tres exemplos abaixo resumem formas recorrentes de articular video, copy e CTA sem sair da logica base do componente.
Quando usar / Quando evitar
Aplicacao correta do componente
Quando usar
- Para campanhas, lancamentos e modulos editoriais em que video e texto precisam de funcionar como uma unidade
- Quando o video precisa de um titulo, um resumo e um CTA para ganhar contexto e intencao
- Para seccoes de destaque em split layout ou carousels com varios videos e mensagens curtas
- Quando faz sentido controlar a orientacao do video, o estilo do botao e as regras de carousel por dispositivo
Quando evitar
- Quando precisas apenas de um video simples sem texto de apoio, CTA ou estrutura editorial adicional
- Quando o bloco vai ficar sobrecarregado com demasiado texto, demasiadas regras de carousel e pouca clareza visual
- Quando a mensagem principal depende mais de copy estatica do que de media em movimento
Como configurar na pratica
Sequencia de trabalho recomendada
Definir a narrativa
- Escrever primeiro o papel do bloco: o que o titulo promete, o que o texto explica e o que o botao deve provocar
- Se o video nao acrescentar nada a esta historia, vale a pena rever o tipo de bloco escolhido
Preparar media e copy
- Carregar o Video ou preencher Youtube ID / Vimeo ID e preparar o Video Cover 1920x1080
- Preencher Titulo, Texto e respetiva metadata de forma coerente com a promessa do modulo
Definir layout e CTA
- Escolher Text color, Background color, Video Width e se o video deve ficar em Video on the right
- Definir Label button, destino, Target e Button Style em funcao da acao esperada
Validar por dispositivo
- Testar a configuracao de carousel em Desktop, Laptop, Tablet e Mobile
- Confirmar equilibrio entre densidade de slides, legibilidade do texto e clareza do CTA em todos os breakpoints
Boas praticas de conteudo
Hierarquia de copy, CTA e equilibrio visual
Copy e hierarquia
- O Titulo deve dizer rapidamente porque o bloco importa; o Texto deve aprofundar sem repetir
- Se existe Label button, o texto do botao deve prometer uma acao concreta e coerente com o video
- Evita blocos em que o video, o texto e o CTA parecem competir entre si em vez de se reforcarem
Video, cover e leitura
- Usa Autoplay apenas quando o movimento ajuda a experiencia e nao torna a leitura mais agressiva
- O Video Cover 1920x1080 deve funcionar como primeira impressao valida, mesmo antes do play
- Se o video for colocado a direita, garante que a copy da esquerda continua suficientemente forte para segurar o modulo
Configuracoes avancadas do componente Video Text
Estrutura global, estilos e regras base do carousel
Este ecrã concentra a estrutura base do bloco, o estilo do botao, os espacamentos e as regras de carousel por breakpoint, permitindo afinar como o modulo se comporta em cada dispositivo.
Estrutura base
- Skin define a variante visual geral do modulo
- Disabled block permite desativar o bloco sem o apagar
- Full Width, Block ID e Extra Class ajudam no encaixe estrutural e tecnico
Estilos e espacamentos
- Margin e Padding controlam o respiro do bloco dentro da pagina
- Button Style afeta a leitura visual do CTA e deve acompanhar o tom da secao
- Estas definicoes ajudam a manter consistencia entre copy, media e acao
Ativacao do carousel
- Em cada bloco de breakpoint existe um toggle Ativo para ligar ou desligar a logica de carousel nesse dispositivo
- Dots, Arrows e Center Mode ajustam a navegacao e a leitura do conjunto
- Adaptive Height ajuda quando o tamanho de texto varia entre slides
Densidade por dispositivo
- Slides To Show e Slides To Scroll definem quantos cards aparecem e quantos avancam de cada vez
- Rows e Slides Per Row controlam a grelha interna do carousel
- Desktop, Laptop, Tablet e Mobile podem ter configuracoes totalmente diferentes
Configuracao do conteudo principal
Titulo, texto, cores, video e CTA
Na configuracao principal do bloco defines a camada de copy, as cores do modulo, a origem do video, a orientacao do layout e a acao esperada atraves do botao.
Titulo e Texto
- Os campos Titulo e Texto funcionam como a camada editorial principal do modulo
- Devem ser escritos para complementar o video, nao para repetir exatamente o que ele ja mostra
- Vale a pena tratar o primeiro paragrafo como resumo e o botao como fecho de intencao
Cores e leitura
- Text color e Background color ajudam a garantir contraste e atmosfera coerente
- Estas escolhas influenciam diretamente a legibilidade e a percecao do CTA
- Em modulos com cor forte, testa sempre se o video e a copy continuam a respirar bem juntos
Video e fontes
- O campo Video aceita um ficheiro com ALT e TITULO, enquanto Youtube ID e Vimeo ID servem para embeds externos
- Video Width controla o peso relativo da area de media dentro do modulo
- Autoplay e Video Cover 1920x1080 afinam a forma como o video entra na experiencia
CTA e destino
- Label button define o texto do CTA e deve ser claro sobre a proxima acao
- URL, Category / Page e Target controlam o destino do clique
- Button Style e Video on the right ajudam a fechar a leitura visual e o sentido do layout
Configuracoes de carousel por dispositivo
Desktop, Laptop, Tablet e Mobile
A mesma estrutura de conteudo pode comportar-se de forma diferente em cada breakpoint. Estas definicoes permitem decidir quantos modulos entram em simultaneo, como se navega entre eles e qual a densidade ideal para cada dispositivo.
Desktop
- Costuma ser o breakpoint com maior densidade visual e onde faz mais sentido mostrar varios slides em simultaneo
- Rows e Slides Per Row podem ajudar a montar uma grelha mais rica sem perder ordem
Laptop
- Serve como transicao entre o desktop mais denso e os formatos mais compactos
- Aqui e comum reduzir Slides To Show ou simplificar a navegacao para manter legibilidade
Tablet
- Convem proteger a leitura da copy e evitar excesso de cards por vista
- Adaptive Height pode ser especialmente util quando os textos dos slides nao têm todos a mesma dimensao
Mobile
- Em geral faz mais sentido reduzir a configuracao a uma leitura simples, com poucos elementos visiveis de cada vez
- Se Dots ou Arrows forem usados, devem manter a experiencia clara e nao apertada
Guias relacionados
Contexto complementar para este bloco