Cliente
Ana Martins
"A equipa percebeu rapidamente o nosso contexto e transformou o projeto numa solução muito mais clara para o utilizador final."
Studio Help · Blocos
Componente Testemunhos
O bloco Testemunhos foi pensado para apresentar citações, autores e retratos dentro de uma estrutura repetida com forte leitura de prova social. Permite controlar colunas por dispositivo, cores por item, recorte da imagem, comportamento de carousel e ritmo visual da secção sem perder credibilidade nem consistência editorial.
Informações gerais
O bloco Testemunhos é uma solução modular para apresentar várias vozes dentro da mesma linguagem visual: imagem, citação, identificação do autor e tratamento cromático ajustado ao contexto da página. Funciona bem para prova social, recomendações de clientes, feedback institucional, validação de produto, experiências de utilizador ou qualquer secção em que a confiança precise de ser construída através de depoimentos repetidos.
Este bloco pode incluir:
- campos de Imagem com ALT e TÍTULO em cada testemunho
- uma Citação principal e um campo de Autor para identificar a origem do depoimento
- controlo de Text color, Background color e Quote color em cada item
- a opção Remove round image para retirar o recorte circular e trabalhar um retrato mais livre
- definição do número de colunas em Tablet, Laptop e Desktop
- regras independentes de carousel para Desktop, Laptop, Tablet e Mobile, além de Skin, Offset, Full Width e animação
Utiliza este componente quando precisas de reforçar credibilidade com vários testemunhos dentro da mesma secção. O seu valor está na repetição consistente, na leitura rápida das citações e na possibilidade de adaptar densidade e navegação a cada dispositivo.
Exemplos visuais do bloco
3 leituras recorrentes da estrutura
O bloco Testemunhos pode funcionar como grelha estática de prova social, como carousel com um depoimento em maior foco ou como conjunto de citações com tratamento cromático mais editorial. Os três exemplos abaixo mostram formas recorrentes de aplicar a mesma base do componente.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para apresentar recomendações, feedback de clientes, prova social ou validação institucional dentro de uma estrutura repetida
- Quando faz sentido combinar Imagem, Citação e Autor em vários testemunhos com a mesma linguagem visual
- Para secções que precisam de mudar o número de colunas por dispositivo e, em alguns breakpoints, passar para carousel
- Quando a confiança depende da leitura conjunta de várias vozes e não apenas de um único destaque isolado
Quando evitar
- Quando tens apenas um depoimento e ele funcionaria melhor como destaque integrado noutro bloco mais narrativo
- Quando as citações são demasiado longas ou inconsistentes e a coleção perde ritmo de leitura
- Quando o conteúdo depende mais de storytelling visual complexo do que de uma sequência clara de testemunhos
Nesse caso: se precisares de trabalhar um único caso com mais contexto, um bloco Vídeo + Texto ou Imagem pode ser mais direto. O bloco Testemunhos ganha força quando existe repetição real entre várias citações e autores.
Como configurar na prática
Sequência de trabalho recomendada
Recolher os testemunhos
- Começa por escolher citações curtas, específicas e credíveis, que mostrem valor real e não apenas elogio genérico
- Se o conjunto tiver vozes muito diferentes, vale a pena organizar os depoimentos por contexto antes de construir a secção
Preparar imagem e autor
- Organiza Imagem, ALT, TÍTULO e Autor de forma consistente entre os vários testemunhos
- Confirma se a fotografia deve aparecer com recorte circular ou se a opção Remove round image faz mais sentido para o enquadramento usado
Definir a apresentação
- Ajusta o número de colunas por dispositivo e decide onde a grelha deve permanecer estática ou passar para carousel
- Afina Text color, Background color e Quote color para garantir contraste, foco e coerência com a página
Validar em contexto
- Testa a secção em Desktop, Laptop, Tablet e Mobile para perceber se a densidade continua confortável e legível
- Se houver carousel ativo, confirma se a navegação e o ritmo de scroll ajudam realmente a leitura das citações
Boas práticas de conteúdo
Credibilidade, clareza e legibilidade
Citação e autor
- A Citação deve ser clara, concreta e fácil de ler em poucos segundos; o bloco não beneficia de depoimentos demasiado longos
- O campo Autor deve identificar a origem do testemunho de forma suficiente para transmitir confiança e contexto
- Se precisares de acrescentar cargo, marca ou relação com o projeto, garante que essa informação não compete com a citação principal
Imagem, cor e coerência
- A imagem deve reforçar a autenticidade do depoimento e manter qualidade semelhante entre os vários testemunhos
- As cores de fundo, texto e citação devem preservar contraste suficiente para que a leitura continue confortável em qualquer breakpoint
- Se a secção reunir vozes muito diferentes, a coerência visual deve ser garantida pela estrutura e não por excesso de personalização em cada item
Boa prática: um testemunho curto, específico e claramente atribuído costuma ter mais força do que uma citação longa e genérica. Se a leitura for rápida e credível, o bloco está a cumprir bem o seu papel.
Configurações avançadas do componente Testemunhos
Estrutura global, colunas, estilos e navegação
Este ecrã concentra a estrutura base do bloco, o número de colunas por dispositivo e a lógica de carousel em cada breakpoint para controlar densidade, ritmo e leitura dos testemunhos.
Estrutura do bloco
- Skin, Disabled block, Offset, Full Width, Block ID e Extra Class definem o enquadramento estrutural da secção
- Estas opções ajudam a encaixar o componente na página e a coordená-lo com âncoras, estilos ou ajustes específicos
Colunas por dispositivo
- Nº of Columns, Nº of Columns Tablet, Nº of Columns Laptop e Nº of Columns Desktop definem a densidade da grelha em cada camada
- Quanto maior o número de colunas, maior a necessidade de citações curtas, autores claros e imagens consistentes
Espaçamentos gerais
- Margin e Padding controlam o respiro exterior e interior da secção
- São campos importantes para evitar que a área de testemunhos fique demasiado comprimida ou desligada do resto da página
Carousel por breakpoint
- Desktop, Laptop, Tablet e Mobile podem ter carousel ativo ou desligado de forma independente
- Dots, Arrows, Center Mode, Adaptive Height, Slides To Show, Slides To Scroll, Rows e Slides Per Row controlam navegação, altura e densidade
Configuração do conteúdo principal
Imagem, citação, autor e identidade visual
Na configuração principal de cada item organizas o retrato, a citação, o autor e o tratamento cromático do testemunho, além da opção de remover o recorte circular da imagem.
Imagem do testemunho
- Cada item pode receber Imagem com ALT e TÍTULO para reforçar autenticidade e contexto
- Convém manter uma lógica visual consistente entre retratos para que a secção pareça coesa
Citação
- O campo Citação contém a mensagem principal do testemunho e deve privilegiar clareza, especificidade e leitura rápida
- Uma boa citação deve comunicar valor real, e não apenas elogio genérico sem contexto
Autor
- O campo Autor identifica quem está a falar e ajuda a sustentar a credibilidade do depoimento
- Podes usar este campo para nome próprio ou para uma identificação mais descritiva, desde que a leitura continue limpa
Cores e recorte
- Text color, Background color e Quote color permitem ajustar a identidade visual de cada testemunho
- Remove round image retira o recorte circular e deixa a imagem com um tratamento mais livre ou editorial
Colunas e carousel por dispositivo
Desktop, Laptop, Tablet e Mobile
A mesma coleção pode comportar-se como grelha estática ou como carousel, dependendo do dispositivo. Este controlo fino é importante para preservar equilíbrio, legibilidade e ritmo de navegação em cada breakpoint.
Desktop
- É normalmente o breakpoint com maior capacidade para mostrar mais testemunhos em simultâneo sem comprometer demasiado a leitura
- Também é onde Rows e Slides Per Row podem criar composições mais densas quando a citação é curta
Laptop
- Funciona como camada intermédia, útil para reduzir ligeiramente a densidade face ao desktop
- Muitas vezes compensa rever Slides To Show e Slides To Scroll para evitar que a leitura fique comprimida
Tablet
- No tablet costuma ser mais importante proteger a legibilidade da citação e a área tocável da navegação
- Adaptive Height pode ajudar quando os vários testemunhos não têm o mesmo volume de texto
Mobile
- Em mobile tende a fazer sentido reduzir a densidade e simplificar a experiência para uma leitura mais linear e confortável
- Se houver carousel ativo, convém confirmar se Dots e Arrows continuam a ser úteis e não apenas decorativos
Boa prática: trata as configurações por dispositivo como decisões editoriais, e não apenas técnicas. O que funciona com quatro testemunhos em desktop pode não funcionar de todo em mobile, mesmo com o mesmo conteúdo.
Guias relacionados
Contexto complementar para este bloco