Índice
Elementor não possui widget de linha do tempo próprio, na versão gratuita ou no Pro. Para colocar uma linha do tempo em uma página do Elementor você adiciona uma de um addon Este guia usa o widget Linha do tempo no gratuito Adições Mestres plugin, que cobre layouts verticais, carrosséis horizontais e linhas de tempo que se constroem a partir de postagens do seu blog.
Cada captura de tela abaixo vem do Elementor 4.2.4 com Master Addons 3.2. Linhas de tempo personalizadas, ambos os layouts e toda a guia Estilo são gratuitos. A linha do tempo pós precisa do Pro e está rotulada onde aparece.
Você pode fazer uma linha do tempo no Elementor sem um plugin?
Tecnicamente sim, e é mais trabalho do que parece Você empilharia contêineres, daria a um uma borda esquerda para falsificar a linha central, posicionaria absolutamente um ponto em cada linha e alternaria o alinhamento esquerdo e direito com CSS personalizado Então você escreveria as regras responsivas sozinho, porque esse layout alternado tem que entrar em colapso para uma única coluna nos telefones.
Ele cai sobre a manutenção Adicionar um marco no meio significa re-alternando cada linha abaixo dele à mão Um widget mantém a linha, os marcadores, a alternância e os pontos de interrupção como configurações, então adicionar uma entrada é um clique.
Pesquise no painel de widgets por “timeline” em uma instalação padrão do Elementor e exatamente um resultado retornará, o widget Master Addons.
Instale o plugin
Do painel do WordPress vá para Plugins → Adicionar plug-in, procure por Complementos Mestres para Elementor, então instale e ative Abra qualquer página com o Elementor e procure no painel de widgets linha do tempo.
Se nada aparecer depois de ativar, verifique Master Addons → Biblioteca de Widgets e certifique-se de que o Timeline esteja ligado Os widgets podem ser desativados individualmente para manter o código não utilizado fora do front-end, o que vale a pena fazer de qualquer maneira se você se importar Velocidade da página do elementador.
Como adicionar uma linha do tempo no Elementor, passo a passo
Passo 1: Arraste o widget para a página
Edite uma página com Elementor, procure por Linha do tempo, e arraste-o para um recipiente Ele chega com três entradas de amostra já preenchidas, para que você possa ver o que cada campo faz antes de alterar qualquer coisa.
Passo 2: Escolha o tipo de linha do tempo
Na guia Conteúdo, abra o Linha do tempo seção. A primeira queda é Tipo de linha do tempo.
Linha do tempo personalizada é o gratuito Você digita cada entrada sozinho, que é o que você quer para um histórico da empresa, um roteiro de produto ou uma programação de eventos, onde o conteúdo é fixo e editorial.
Postar linha do tempo é um recurso Master Addons Pro. Ele lê suas postagens no WordPress e constrói a linha do tempo a partir delas, então publicar uma postagem adiciona uma entrada por conta própria Há uma seção sobre ele mais abaixo.
Passo 3: Escolha vertical ou horizontal
A segunda queda é Estilo de linha do tempo.
Vertical corre para baixo da página com cartões alternando esquerda e direita de uma linha central Horizontal coloca as entradas para fora lado a lado como um carrossel com setas Ambos são livres, e você pode alternar entre eles em qualquer ponto sem perder suas entradas.
Um limite que vale a pena conhecer agora: O estilo de linha do tempo aparece apenas para linhas do tempo personalizadas. As linhas do tempo da postagem são apenas verticais e o dropdown desaparece quando você muda o tipo.
Passo 4: Edite suas entradas
Sob Itens, cada entrada é uma linha repetidora Clique em uma para abri-la.
Cada linha possui uma guia Conteúdo e uma guia Mídia. Os campos que importam:
- Mostrar: Data ou Etiqueta Personalizada. Data dá-lhe um selecionador de data; Etiqueta Personalizada permite escrever qualquer coisa, que é como você obtém “Q3 2026” ou “Founded” na linha em vez de uma data de calendário.
- Formato Data: predefinições mais Personalizado. Personalizado leva uma sequência de data PHP, então
F Yimprime “Junho de 2019” e evita que um cronograma marcante pareça um changelog. - Link: torna todo o cartão clicável Deixe desligado se o texto do cartão já contiver um link, porque um link dentro de um link é HTML inválido e os navegadores soltarão um deles.
- A caixa de conteúdo é um editor completo. Não existe um campo de título separado, então o título da entrada entra aqui como um Título 3.
- A guia Mídia adiciona uma imagem ao cartão e define sua resolução.
Adicionar Item cria uma nova linha, o ícone de cópia duplica uma e as linhas são arrastadas para reordenar.
Passo 5: Publique e olhe para ele
Quatro entradas, datas formatadas como mês e ano, ícones de sinalização nos marcadores, tudo isso no plugin gratuito.
As cartas alternam os lados e as datas ficam opostas a cada uma sem que você posicione nada.
Por que as cartas parecem em branco até você rolar
As cartas de linha do tempo começam ocultas e animam quando rolam para a visualização, e o ponto mais próximo da posição de rolagem assume um estado focado, que você estiliza separadamente na seção Pontos.
Assim, uma linha do tempo colocada abaixo da dobra parece vazia em uma ferramenta de captura de tela, em uma exportação de PDF ou em uma auditoria de velocidade de página que nunca rola Role a página e as entradas aparecem.
Fazendo uma linha do tempo horizontal no Elementor
Definir Estilo de linha do tempo para Horizontal Timeline e o layout gira: as entradas ficam lado a lado, os pontos ficam acima das cartas em uma linha horizontal e as setas rolam através delas.
As setas são configuradas na guia Estilo em Navegação. Dois controles, fáceis de misturar:
- Colocação está dentro ou fora do carrossel.
- Posição é onde eles se sentam, do canto superior esquerdo ao canto inferior direito.
Definir posição para um valor que pertence a Colocação deixa cair as setas no canto superior esquerdo, em cima de sua primeira entrada Centro-inferior com colocação externa é o emparelhamento seguro, e é o que a captura de tela usa.
Horizontal se adequa a quatro a seis marcos fortes acima da dobra, como uma sequência de lançamento de produto em uma página de destino Passado seis entradas o leitor está clicando em uma seta repetidamente para ver o conteúdo que eles não podem digitalizar, e vertical ganha Vertical também é a aposta mais segura em telefones, onde a leitura de cima para baixo é o que as pessoas esperam O que quer que você escolher, verifique-o contra o seu breakpoints responsivos antes de enviar, porque os dois layouts entram em colapso de forma diferente.
Estilizando a linha, os pontos e as cartas
A guia Estilo tem onze seções: Itens Carrossel, Layout, Imagens, Postagens, Cartões, Seta, Datas, Linha, Pontos, Navegação e Padrões.
Linha define a cor e espessura da linha central. Cartões lida com fundo, borda, sombra e preenchimento. Datas e os controles de tipografia correspondem ao texto de entrada do seu sistema de fontes.
Pontos vale a pena passar um tempo na seção. É Tipo o controle escolhe o que está em cada marcador e possui três guias de estado: Padrão, Pairar e Focada. Focused aplica-se à entrada mais próxima da posição de rolagem do leitor, então deixá-la sem estilo é o que faz uma linha do tempo ser lida como uma lista plana enquanto o leitor passa por ela Estilo todos os três.
Definir Tipo para ícones e o marcador pega um ícone, que é o que as capturas de tela aqui usam. Verifique-o imediatamente na extremidade frontal: se o marcador for renderizado como um círculo vazio, o ícone não será carregado e mudar o tipo de volta para padrão fornecerá um ponto de cor simples que sempre funciona.
Construindo uma linha do tempo a partir de suas postagens no blog
Alternar tipo de linha do tempo para Postar linha do tempo e o painel muda completamente Em vez de digitar entradas você descreve quais postagens puxar, e o widget constrói a linha do tempo a partir delas.
Os controles que valem a pena definir:
- Mostrar Título, Título Link e Etiqueta de título. Defina a tag de cabeçalho para H2 ou H3 para que os títulos de postagem fiquem sob o H1 da página na ordem de cabeçalho Esta é a mesma regra de ordem de cabeçalho que importa quando você crie uma página de blog no Elementor.
- Mostrar imagem e Resolução de imagem coloque a imagem em destaque no cartão.
- Formato Data e Formato Tempo. O padrão imprime a hora ao lado da data, que lê estranhamente em uma linha do tempo de marco Definir formato de tempo para nenhum, ou usar um formato de data personalizado.
- Postagens por página, Contagem de postagem offset, Pedido Postal e Ordem Por.
- Categoria, Filtrar por tag, Autor e Postagens a serem excluídas restrinja a consulta, para que uma linha do tempo possa ser “tudo em News” e outra um conjunto escolhido a dedo.
- Habilitar links torna todo o cartão clicável Mesmo aviso que a versão personalizada: desligue-o se o conteúdo do cartão tiver seus próprios links.
Como lê postagens diretamente, esta versão cai perfeitamente em a Construtor Tema arquivo ou modelo único, e ele se atualiza quando você publica Post Timeline faz parte de Master Addons Pro.
Cronograma personalizado ou pós: qual
| Linha do tempo personalizada | Postar linha do tempo | |
|---|---|---|
| Plano | Grátis | Master Addons Pro |
| De onde vem o conteúdo | Digitado no widget | Suas postagens no WordPress |
| Disposição vertical | Sim | Sim |
| Disposição horizontal | Sim | Não, apenas vertical |
| Atualizações por conta própria | Não | Sim, em publicar |
| Filtros consulta | n/a | Categoria, tag, autor, excluir, deslocar |
| Melhor para | História da empresa, roteiros, horários de eventos, biografias | Arquivos de notícias, notas de lançamento, estudos de caso, changelogs |
Se a publicação de um post deve adicionar uma entrada, use Post Timeline Se as entradas são uma história que você escreveu uma vez, use Custom.
Onde vale a pena usar uma linha do tempo
- Sobre páginas. Uma história vertical da empresa, com a Contrapor reme acima dele para os números das manchetes.
- Produto páginas. Um roteiro horizontal de recursos enviados e o que vem a seguir Quatro a seis entradas, não mais.
- Notas de lançamento. Uma linha do tempo de postagem filtrada para uma categoria, ao lado de a Changelog widget.
- Portfólios e estudos de caso. Entradas datadas com imagens em destaque, que é onde a guia Mídia compensa.
- Horários de eventos e cursos. Etiquetas personalizadas em vez de datas, então a linha diz “Dia 1, Dia 2, Dia 3”.
Sete coisas que fazem uma linha do tempo ler melhor
- Segure cada cartão em duas ou três frases Uma linha do tempo é um formato de digitalização e parágrafos completos derrotá-lo.
- Use rótulos personalizados para marcos. “2019” bate “Jun 17, 19” quando o dia exato não importa.
- Mantenha um nível de cabeçalho dentro dos cartões A caixa de conteúdo não tem campo de título, então defina o título de cada entrada para a mesma tag em vez de misturar H2 e H4.
- Mude para a vertical após seis entradas, porque a rolagem horizontal fica tediosa rapidamente.
- Estilize o estado Focado É aquele que diz ao leitor onde eles estão.
- Verifique seus marcadores no front-end depois de escolher um ícone Um círculo vazio significa que o ícone não carregou, e os pontos padrão são o fallback seguro.
- Verifique-o em um telefone O layout alternado entra em colapso para uma coluna, e etiquetas personalizadas longas são a primeira coisa a embrulhar mal.
Perguntas frequentes
Elementor tem um widget de linha do tempo?
Não. Nem o Elementor nem o Elementor Pro gratuitos incluem um elemento de linha do tempo Você adiciona um com um addon O widget Linha do tempo Master Addons é gratuito e cobre layouts verticais e horizontais.
O widget de linha do tempo Elementor é gratuito?
Sim. linhas de tempo personalizadas, estilos verticais e horizontais, e toda a guia Estilo estão no plugin gratuito Master Addons. Somente Post Timeline, que constrói a linha de tempo a partir de suas postagens no WordPress, precisa do Master Addons Pro.
Como faço para criar uma linha do tempo no Elementor sem um plugin?
Você iria construí-lo à mão: contêineres empilhados, uma borda esquerda para imitar a linha central, pontos absolutamente posicionados, alinhamento alternado e seu próprio CSS responsivo Funciona, mas cada nova entrada significa re-alternando as linhas abaixo dele, então um widget é mais rápido de construir e muito mais rápido de manter.
Posso fazer uma linha do tempo horizontal no Elementor?
Sim. Defina o estilo da linha do tempo para a linha do tempo horizontal na guia Conteúdo do widget As entradas ficam lado a lado com pontos acima das cartas e setas para rolar É gratuito e se aplica apenas a linhas do tempo personalizadas.
Qual é a diferença entre uma linha do tempo personalizada e uma linha do tempo pós?
Uma linha do tempo personalizada contém entradas que você digita, o que se adapta ao conteúdo fixo, como um histórico da empresa. Uma linha do tempo de postagem lê suas postagens no WordPress, portanto, publicar uma postagem adiciona uma entrada automaticamente. Personalizado é gratuito; postar linhas do tempo são um recurso Pro.
Por que minha linha do tempo do Elementor está mostrando cartas vazias?
As entradas animam quando rolam para a visualização, portanto, uma linha do tempo abaixo da dobra parece em branco até que você role para ela Verifique na extremidade frontal rolando em vez de julgar por uma ferramenta de captura de tela ou uma visualização que nunca rola.
Posso usar ícones em vez de pontos nos pontos da linha do tempo?
Sim. A seção Pontos tem um controle Tipo oferecendo pontos, ícones, imagens, números e letras Escolha Ícones, escolha seu ícone e, em seguida, defina sua cor e fundo sob a guia Estado padrão Sempre verifique o resultado na extremidade frontal e volte para Pontos padrão se um marcador ficar vazio.
A linha do tempo funcionará no celular?
Sim, e os dois layouts se comportam de maneira diferente Vertical colapsa para uma única coluna e lê naturalmente Horizontal permanece um carrossel, então visualize-o no seu ponto de interrupção móvel e verifique se etiquetas longas não estão sendo embrulhadas.
Uma linha do tempo pode extrair postagens de apenas uma categoria?
Sim, com Post Timeline Defina o controle Categoria na guia Conteúdo, e adicione Filtrar por tag, autor ou postagens para excluir para restringi-lo ainda mais.
Leitura relacionada
