Principais conclusões
- Esses oito exemplos de linha do tempo do Elementor são todos construídos com um widget, o widget Linha do tempo Master Addons, e cada um tem uma página de demonstração ao vivo que você pode abrir.
- Seis dos oito projetos de linha do tempo são verticais e dois são carrosséis horizontais, o que corresponde à forma como os layouts são usados: vertical para longos andares e horizontal para sequências curtas.
- Os exemplos verticais usam três dos quatro alinhamentos do widget Timeline: Centro para cartões alternados, Esquerda para uma lista unilateral e Direita para uma lista unilateral espelhada.
- A maior parte da diferença visual entre os oito designs vem de quatro seções de estilo no widget Linha do tempo: Cartas, Datas, Linha e Pontos.
- Elementor e Elementor Pro não incluem um widget de linha do tempo, portanto, qualquer modelo de linha do tempo Elementor depende de um complemento que está sendo instalado.
Bons exemplos de linha do tempo Elementor são difíceis de encontrar, porque a maioria das demos são três cartões cinza com lorem ipsum Os oito projetos abaixo usam histórias reais: uma reconstrução de órgão, um vão de ponte, um ensaio clínico, o primeiro ano de uma padaria Todos eles são construídos com o Widget de linha do tempo de complementos mestres e cada um tem uma demonstração ao vivo.
Para cada exemplo você obtém para que é bom, o que faz o design funcionar e as configurações por trás dele, para que você possa usá-lo como um modelo para sua própria página Se você não construiu uma linha do tempo antes, comece com como criar uma linha do tempo no Elementor.
Índice
Os oito exemplos da linha do tempo em resumo
Escolha primeiro por layout e depois por humor. Esta tabela mostra qual design da linha do tempo do Elementor se encaixa em qual trabalho.
| # | destinar | traçado | Imagens | Bom para |
|---|---|---|---|---|
| 1 | Reconstrução Alternada | Vertical, centro | Não | Registros de projetos, restaurações |
| 2 | Campo de imagem em arco | Vertical, um lado | Sim, arqueado | Notas sazonais ou anuais |
| 3 | Investigação Alinhada Direita | Vertical, certo | Não | Cronologias, arquivos de casos |
| 4 | Fabricação Horizontal | Carrossel horizontal | Sim | Etapas de produção |
| 5 | Semana do cartão dividido | Vertical, coluna única | Não | Horários semana a semana |
| 6 | Mídia de arco alternada | Vertical, centro | Sim, arqueado | Histórias de marcas e fundadores |
| 7 | Teste de cartão leve | Vertical, um lado | Não | Marcos de pesquisa e processo |
| 8 | Ano Horizontal | Carrossel horizontal | Não | História por ano |
Linha do tempo de reconstrução alternada 1.
Esta é a linha do tempo vertical clássica do Elementor: as cartas alternam à esquerda e à direita de uma linha central, com um ponto numerado e uma data para cada etapa A demo conta a história de um órgão de tubos reconstruído ao longo de três anos.
Use-o para restaurações, diários de construção ou qualquer projeto com estágios claros Os números dão a ordem antes mesmo de ler uma data Para construí-lo, use o Alinhamento Horizontal definido como Centro, uma Linha fina, pequenos Pontos e um fundo de cartão apenas ligeiramente mais leve que a página.
Abra a demonstração do Alternating Rebuild
Linha do tempo do campo de imagem do arco 2
Uma linha do tempo unilateral em um fundo creme, onde cada entrada tem uma foto em forma de arco ao lado do texto A demonstração segue dez invernos de sebes colocadas em uma fazenda.
Use-o para notas de campo, trabalho sazonal, diários de viagem ou qualquer coisa com foto-led. A colheita em arco faz fotos comuns parecerem deliberadas Para construí-lo, use um alinhamento unilateral e um grande raio nos cantos superiores apenas em Estilo, Imagens, Raio de Fronteira.
Abra a demonstração do Arch Image Field
Linha do tempo de investigação alinhada à direita 3
Aqui a linha corre para baixo da borda direita e os cartões sentam-se à sua esquerda, com texto alinhado à direita É o espelho do layout usual A demonstração é a cronologia de um pedido de informação de dois anos.
Use-o para investigações, cronologias legais ou de conformidade, ou estudos de caso Um alinhamento incomum faz com que uma linha do tempo somente de texto pareça projetada Para construí-la, use o Alinhamento Horizontal definido como Direita, Pontos com uma borda e sem preenchimento.
Abra a demonstração da Investigação Alinhada à Direita
Linha do tempo de fabricação horizontal 4
O primeiro de dois exemplos horizontais Os rótulos de mês ficam acima dos pontos verdes limão, e os cartões de imagem deslizam abaixo deles com botões de seta redondos A demonstração cobre um vão de ponte fabricado em cinco estágios.
Use-o para estágios de fabricação ou produção, ou um processo de cinco etapas As fotos carregam cada estágio, e o texto permanece em três linhas Para construí-lo, use o Estilo de Linha do Tempo definido como Linha do Tempo Horizontal, Navegação definida como Setas e uma imagem na guia Mídia de cada item.
Abra a demonstração do Horizontal Fabrication. Os controles do carrossel são explicados em como criar uma linha do tempo horizontal no Elementor.
Linha do tempo da semana do cartão dividido 5
Uma única coluna centrada de cartões brancos Cada cartão é dividido em dois: uma faixa estreita com a semana à esquerda e o conteúdo à direita A demonstração é uma remodelação do museu planejada semana a semana.
Use-o para horários, planos de sprint ou esboços de cursos A coluna do rótulo alinha-se na página, para que você possa digitalizar as semanas sem ler os cartões Para construí-lo, use um Rótulo Personalizado em cada item (“Semana 1 · 6 Janeiro”) em vez de uma data, cartões leves com uma sombra suave.
Abra a demonstração da Semana do Cartão Dividido
Linha do tempo de mídia de arco alternada 6.
Alternando cartões novamente, desta vez com fotos em preto e branco cortadas em um arco em cima de cada cartão A demonstração é o primeiro ano de uma padaria, começando com um forno e um empréstimo bancário.
Use-o para Sobre páginas, histórias de fundadores ou uma linha do tempo do histórico do Elementor para uma pequena empresa Uma cor de destaque e fotos monocromáticas fazem com que imagens de qualidade mista pareçam um conjunto Para construí-lo, use o Alinhamento Horizontal definido como Centro, uma imagem por item, o mesmo acento em Datas e Pontos.
Abra a demonstração do Alternating Arch Media
Linha do tempo de teste do cartão leve 7
Cartões de luz em um fundo roxo profundo, todos de um lado da linha, com pontos âmbar A demo rastreia um ensaio clínico de financiamento para uma alteração de protocolo.
Use-o para marcos de pesquisa, rodadas de financiamento ou processos de aprovação O contraste entre o cartão e o fundo faz o trabalho, portanto, os cartões não precisam de borda ou sombra Para construí-lo, use o Alinhamento Horizontal definido como Esquerda, um fundo de Cartões leves, pequenos Pontos preenchidos.
Abra a demonstração do Light Card Trial
Cronograma do ano horizontal de 8
O segundo projeto horizontal coloca grandes anos acima da linha (1982, 1986, 1989) com um cartão curto sob cada. A demonstração é de dezesseis anos de automação de farol, e ele emparelha a linha do tempo com uma tabela antes e depois.
Use-o para o histórico da empresa por ano, gerações de produtos ou aniversários O ano é o maior texto na tela, que é o que as pessoas procuram em uma história Para construí-lo, use Horizontal Timeline, um Custom Label segurando apenas o ano, e grande tipografia Dates em uma cor de destaque.
Abra a demonstração do Ano Horizontal
Quer todos os dezesseis? O visualizador de demonstração no Widget Linha do tempo do elementador page contém mais oito, incluindo um changelog, um roteiro e uma agenda de eventos.
Como usá-los como modelos
Você pode reconstruir qualquer um desses elementar modelos de linha do tempo em poucos minutos, porque as diferenças estão todas nas configurações Para uma página inteira colocar um, veja o Modelos de páginas do elementor.
- Adicione o widget Linha do tempo e insira seus próprios itens: uma data ou rótulo, um título, uma breve descrição e uma imagem opcional.
- Escolha o layout O estilo da linha do tempo escolhe vertical ou horizontal e o estilo, layout, alinhamento horizontal escolhe esquerda, centro, sobreposição ou direita.
- Combine as cores Defina primeiro a página ou o fundo do contêiner, depois Cartões, Datas, Linha e Pontos.
- Verifique o estado Focado Cada exemplo dá à entrada em vista um cartão ou ponto ligeiramente diferente para que o leitor mantenha seu lugar.
- Olhe para ele em um telefone Linhas de tempo verticais mover para um lado em telas pequenas, e horizontais mostram menos cartões.
Mostrar postagens em uma linha do tempo tem seu próprio guia: como mostrar postagens de blog em uma linha do tempo no Elementor.
Leia também: 20 modelos de controle deslizante Elementor, que incluem um controle deslizante de linha do tempo com espaçamento real entre anos.
Perguntas frequentes
O Elementor vem com modelos de linha do tempo?
No. Elementor e Elementor Pro não têm widget de linha do tempo, então sua biblioteca de modelos também não tem linha do tempo verdadeira Os modelos de linha do tempo para Elementor sempre dependem de um widget de addon ou de CSS personalizado.
Qual layout de linha do tempo é melhor para o histórico de uma empresa?
Uma linha do tempo vertical alternada se adequa a uma longa história com fotos, como o exemplo 6. para uma história curta com cinco ou seis anos principais, uma linha do tempo horizontal do ano como o exemplo 8 ocupa menos espaço.
Posso usar esses designs de linha do tempo com algum tema?
Sim. os designs são feitos no editor Elementor com os próprios controles de estilo do widget Timeline, portanto, eles não dependem de um tema As fontes seguem a tipografia global do seu site, a menos que você as defina no widget.
Quantos itens uma linha do tempo deve ter?
Quatro a oito é um intervalo confortável Sob quatro, uma lista simples é mais clara Mais de dez, dividir a linha do tempo por ano ou década, ou encurtar cada cartão para um título e uma linha.
Pensamentos finais
Esses oito exemplos de linha do tempo do Elementor cobrem os layouts que a maioria dos sites precisa: dois designs alternados, três unilaterais, um cronograma de coluna única e dois carrosséis horizontais. Todos eles vêm de um widget, e as diferenças estão em quatro seções de estilo: Cartões, Datas, Linha e Pontos.
Abra as demonstrações, escolha a mais próxima e crie sua versão com o Widget de linha do tempo.
Leitura relacionada
