Biblioteca de widgets

Linha do Tempo

Sequência no tempo ou em etapas — história da empresa, roadmap, programação de evento, ou um "como funciona" longo com detalhes por etapa.

Intermediário5 min de leitura

Nesta página

Visão geral
Quando usar
Como adicionar
Opções da aba Conteúdo
Conteúdo
Opções da aba Estilo
Comportamento responsivo
Campos no Converto Construtor (Markdown)
Exemplo
Recursos comuns a todos os widgets

Visão geral

Linha do tempo com marcos (data ou rótulo, título, descrição, imagem e ícone opcionais). Duas disposições: alternada (linha no centro, conteúdo alternando de lado) ou lateral (coluna de datas e cartões à direita). Responsiva: em telas pequenas vira uma coluna.

Propriedade	Valor
Nome no editor	Linha do Tempo
Onde encontrar	Painel de widgets do Elementor, categoria Converto
Identificador no Elementor	`lgr-timeline`
Identificador no Markdown	`timeline`
Papel na página	Interesse e prova de processo
Campos de conteúdo	3
Opções de estilo	44 (25 responsivas)

Quando usar

Situações em que este widget é indicado:

A página precisa contar uma sequência no tempo: história da empresa, trajetória, roadmap, cronograma de evento ou programa.
A página precisa explicar um processo em etapas ("como funciona", passo a passo): use item_date como "Passo 1", "01", "Etapa 1".

Como adicionar

Abra a página no editor do Elementor.
No painel de widgets, abra a categoria Converto e arraste Linha do Tempo para a página (ou clique em + em uma área vazia).
Preencha a aba Conteúdo e ajuste a aba Estilo.

O widget também pode vir pronto em um modelo de página ou ser inserido pelo Converto Construtor.

Opções da aba Conteúdo

Conteúdo

Opção	Tipo	Detalhes
Título	Texto	Padrão: Nossa trajetória
Descrição	Área de texto	Padrão: Os marcos que construíram a nossa história até aqui.
Marcos	Lista
↳ Data ou Rótulo	Texto	Padrão: 12 Set 2019
↳ Título do Marco	Texto	Padrão: Início da jornada
↳ Descrição	Área de texto	Padrão: Conte o que aconteceu neste marco, de forma curta…
↳ Imagem do Marco (opcional)	Imagem ou arquivo
↳ Ícone no Marcador (opcional)	Ícone
↳ Cor do Marcador	Cor	Padrão: #3b82f6

Opções da aba Estilo

A aba Estilo reúne 44 opções em 10 seções (a última é Animações, comum a todos os widgets Converto).

Seção	O que ajusta
Textos	Título da seção, Título da seção / Altura da Linha, Descrição da seção, Descrição da seção / Altura da Linha, Título do marco, Título do marco / Altura da Linha, Título do marco / Peso, Descrição do marco, Descrição do marco / Altura da Linha, Data ou rótulo, Data ou rótulo / Peso
Cores	Título da Seção, Descrição da Seção, Título do Marco, Descrição do Marco, Data ou Rótulo, Linha, Marcador (cor padrão), Fundo do Marcador, Fundo do Cartão
Disposição	Disposição, Cartão no conteúdo, Largura da coluna de datas, Espaço entre marcos, Espaço entre linha e conteúdo
Linha e Marcador	Espessura da linha, Tamanho do marcador, Borda do marcador, Tamanho do marcador com ícone, Posição vertical do marcador
Cartão	Espaço interno vertical, Espaço interno horizontal, Raio da borda, Sombra do cartão
Imagens	Largura, Raio da borda, Espaço abaixo da imagem
Plano de Fundo	Plano de Fundo
Sobreposição de Fundo	Sobreposição de Fundo, Opacidade
Espaçamentos	Espaço superior, Espaço inferior, Anular espaço de cima, Anular espaço de baixo
Animações	Entrada de textos e de imagens e ícones: tipo, velocidade, atraso e intervalo (veja Animações de entrada)

Comportamento responsivo

25 opções deste widget são responsivas: o Elementor permite definir valores diferentes para desktop, tablet e celular (ícones de dispositivo ao lado do campo). Para ajustes finos por largura de tela, use a sintaxe curta de media queries no campo CSS da aba Avançado.

Campos no Converto Construtor (Markdown)

Use o identificador timeline na linha . Campos de conteúdo (bloco :::content):

Campo	Tipo	Obrigatório	Detalhes
`title`	Texto	Não	Título da seção, acima da linha do tempo.
`description`	Texto	Não
`timeline_items`	Lista	Sim	Marcos na ordem em que aparecem (de cima para baixo). De 3 a 8 marcos funciona melhor.
↳ `item_date`	Texto	Não	Data, ano ou rótulo curto ("2019", "12 Set 2019", "Passo 1").
↳ `item_title`	Texto	Sim
↳ `item_description`	Texto	Não	Texto curto do marco (1 a 3 frases).
↳ `item_image`	Imagem ou arquivo	Não	Imagem do marco, opcional. Sem imagem padrão: só use quando ela ajudar a contar o marco. Nunca é cortada: a altura segue a proporção original da imagem (qualquer proporção serve; recomendado cerca de 800 px de largura). A largura exibida é controlada por image_width (px ou %). Envie com upload_media.
↳ `item_icon`	Ícone	Não	Ícone dentro do marcador (Font Awesome), opcional. Sem ícone, o marcador é um círculo simples.
↳ `item_color`	Cor	Não	Cor do marcador deste marco. Use as cores da marca (alternar 2 ou 3 cores dá ritmo).

Os controles da aba Estilo também podem ser usados no bloco :::style, pelos identificadores do próprio widget (campo omitido mantém o padrão). Veja a linguagem Markdown Converto.

Exemplo

markdown

<!-- converto:timeline -->

:::content
title: Nossa trajetória
description: Os marcos que construíram a nossa história até aqui.
timeline_items:
  - item_date: 12 Set 2019
    item_title: Início da jornada
    item_description: Conte o que aconteceu neste marco, de forma curta e direta.
    item_image: https://exemplo.com/imagem.jpg
    item_icon: fa-regular fa-circle-check
    item_color: "#111111"
  - item_date: 12 Set 2019
    item_title: Início da jornada
    item_description: Conte o que aconteceu neste marco, de forma curta e direta.
    item_image: https://exemplo.com/imagem.jpg
    item_icon: fa-regular fa-circle-check
    item_color: "#111111"
:::

Recursos comuns a todos os widgets

Textos aceitam variáveis de página ({{rotulo}}) e marcação de texto.
Aba Avançado: campos CSS e JS por elemento (CSS e JS personalizado).
Seção Animações na aba Estilo (Animações de entrada).