Componente Cronologia
O bloco Cronologia foi pensado para apresentar eventos em sequência temporal, permitindo contar histórias, mostrar marcos de evolução ou organizar etapas de um percurso editorial de forma clara, progressiva e visualmente orientada por datas.
Informações gerais
O bloco Cronologia é uma solução direta para estruturar conteúdos por ordem temporal. Cada item funciona como um marco dentro da sequência, combinando data, título, texto e imagem, para que o utilizador consiga seguir uma narrativa, uma evolução histórica ou um conjunto de fases com contexto visual e textual.
Cada bloco pode incluir:
- controlo global através de Skin, Disabled block, Full Width e Offset
- campos estruturais como Block ID, Extra Class e Nº of Items
- itens com Item Date, Título do item e Texto do item
- imagem principal por item com campos ALT e TÍTULO
- imagem mobile alternativa por item para adaptar enquadramento e leitura em ecrãs pequenos
- controlo de espaçamentos e animação para integrar a cronologia na composição da página
Utiliza este componente quando a ordem dos acontecimentos faz parte da mensagem e quando a progressão temporal ajuda o utilizador a compreender melhor o conteúdo apresentado.
Exemplos visuais do bloco
Três leituras possíveis da cronologia
O bloco Cronologia pode assumir leituras editoriais, institucionais ou processuais, consoante a forma como a sequência temporal é apresentada. Os três exemplos abaixo mostram variações recorrentes de ritmo visual, densidade de conteúdo e uso de marcos cronológicos.
Quando usar / Quando evitar
Aplicação correta do componente
Quando usar
- Para apresentar acontecimentos, fases ou marcos cuja ordem temporal faz parte da mensagem
- Quando a narrativa beneficia de progressão cronológica com data, contexto e imagem
- Para histórias de marca, linhas do tempo institucionais, roadmaps ou percursos de projeto
- Quando existe valor em distribuir a informação em vários momentos em vez de a condensar num único bloco
Quando evitar
- Quando os itens não têm relação temporal clara entre si
- Quando o conteúdo deve ser comparado lado a lado e não percorrido em sequência
- Quando há poucos pontos e a ordem cronológica não acrescenta leitura nem contexto
Como configurar na prática
Estrutura de trabalho recomendada
Definir a sequência
- Escolher os momentos que realmente merecem entrar na cronologia
- Ordenar os acontecimentos com lógica temporal consistente
- Decidir quantos itens são necessários para contar a história sem excesso
Preparar o conteúdo
- Preencher Item Date, Título do item e Texto do item com papéis claramente distintos
- Usar datas legíveis e consistentes entre todos os momentos
- Escrever títulos objetivos e textos com contexto suficiente, sem se tornarem excessivos
Trabalhar as imagens
- Carregar a imagem principal de cada item com ALT e TÍTULO adequados
- Adicionar Item Image Mobile quando o enquadramento precisa de ser adaptado
- Garantir coerência visual entre os vários marcos da cronologia
Validar a leitura
- Confirmar que a progressão é fácil de seguir e que as datas funcionam como âncoras visuais
- Testar o ritmo do bloco em desktop e mobile
- Ajustar espaçamentos e largura para evitar uma cronologia demasiado densa ou demasiado dispersa
Boas práticas de conteúdo
Clareza temporal, síntese e consistência
Datas e títulos
- A data deve ser clara, consistente e suficientemente visível para orientar a leitura
- O título do item deve resumir o marco temporal com precisão
- Quando as datas mudam de formato ao longo da cronologia, a perceção de rigor tende a cair
- Se os títulos forem vagos, a cronologia perde capacidade narrativa
Texto e imagem
- O texto do item deve explicar por que motivo aquele momento é relevante
- Uma boa imagem acrescenta contexto, emoção ou prova visual ao acontecimento
- Evita textos demasiado longos por item, sobretudo quando existem vários marcos
- Se a imagem mobile muda muito, adapta também ALT e TÍTULO a essa realidade
Configurações avançadas do componente Cronologia
Estrutura geral do bloco
Este ecrã reúne os controlos globais da cronologia: estrutura base do bloco, identificação técnica, número de itens, espaçamentos e animação de entrada.
Estrutura base
- Skin escolhe a variante visual do bloco
- Disabled block desativa a cronologia sem a apagar
- Full Width permite ocupar toda a largura disponível
- Offset ajuda a ajustar o posicionamento dentro da composição
Organização do bloco
- Block ID define uma âncora única ou ponto de navegação interna
- Extra Class permite ajustes adicionais via CSS
- Nº of Items controla quantos marcos compõem a cronologia
Espaçamento e animação
- Margin regula o espaço exterior do bloco
- Padding regula o espaço interior do bloco
- Animation on/off e Scroll animation type controlam a entrada visual da cronologia
Configuração do conteúdo principal
Data, texto e imagens por item
Dentro de cada item defines a data, o título, o texto e as imagens associadas àquele marco temporal, incluindo a versão específica para mobile quando necessário.
Estrutura textual do item
- Item Date identifica o momento temporal do marco
- Título do item apresenta a ideia principal de forma sintética
- Texto do item aprofunda o contexto através de editor rico
Imagem e imagem mobile
- Imagem do item recebe o visual principal do acontecimento
- Item Image Mobile permite adaptar o enquadramento para ecrãs pequenos
- Ambas as versões incluem campos ALT e TÍTULO para contexto e acessibilidade
Como a cronologia ganha clareza
Decisões que melhoram o ritmo da leitura
Quantidade de itens
- Um número equilibrado de marcos ajuda a contar a história sem cansar
- Demasiados itens diluem a importância de cada momento
Relação entre data e conteúdo
- Quanto mais forte for a ligação entre data, título e texto, mais natural será a progressão
- Evita datas decorativas sem peso real na leitura do conteúdo
Adaptação mobile
- Imagens alternativas e textos mais claros ajudam a preservar ritmo em ecrãs pequenos
- Em mobile, a cronologia deve manter hierarquia sem se tornar visualmente pesada
Guias relacionados
Blocos com ligação a narrativas, etapas e coleções visuais