Uma parede de datas e parágrafos raramente se mantém Coloque esses mesmos eventos em uma linha do tempo embora, com uma linha central, marcadores datados e cartões arrumados, e a história começa a ler-se Marcos da empresa funcionam desta forma Assim faz um roteiro de produto, uma viagem pessoal, ou suas últimas postagens no blog em ordem de data A sequência faz o trabalho pesado.
E você não precisa de código personalizado ou um plugin diferente para cada estilo Os complementos mestres Widget de linha do tempo lida com tudo isso de um lugar Vamos construir uma linha do tempo vertical, virar para horizontal, puxar postes automaticamente, em seguida, estilo a coisa toda Uma vez que você sabe onde as configurações vivem, é alguns minutos de trabalho.
O que o widget de linha do tempo do elementor faz
Uma linha do tempo é uma lista cronológica transformada em um layout visual Cada entrada fica em uma linha central, marcada por um ponto (um ponto ou um ícone), com um cartão que contém a data, o título e seu conteúdo O widget Linha do tempo dos complementos mestres oferece duas maneiras de preencher essas entradas e duas maneiras de colocá-las.
Os dois tipos linha do tempo são Custom Timeline e Post Timeline Custom significa que você digita cada entrada à mão, o que se adapta ao conteúdo fixo, como um histórico da empresa ou um roteiro Post Timeline puxa suas postagens WordPress automaticamente, então uma nova postagem se torna uma nova entrada de linha do tempo sem trabalho manual.
Os dois estilos linha do tempo são Verticais e Horizontais As entradas das pilhas verticais abaixo da página em um padrão alternado esquerda/direita Horizontal as coloca lado a lado como um carrossel rolável com setas de navegação Você flip entre qualquer um deles a partir de um único dropdown, que é a razão pela qual este widget permanece no meu kit ao lado do outro mais de 80 widgets e extensões em Master Addons.
Antes de começar: instale complementos mestres
O widget Timeline é fornecido com os Master Addons gratuitos para Elementor Custom Timeline e ambos os estilos de layout são gratuitos Post Timeline, coberto mais abaixo, precisa de Master Addons Pro.
- No seu painel WordPress, vá para Plugins > Adicionar novo.
- Procure por complementos “Master para Elementor” e clique em Instale Agora, então Ativar. Você também pode baixar Master Addons diretamente do WordPress.org.
- Abra qualquer página com Elementor e procure no painel de widgets por “Timeline.”
Widget faltando após a ativação? verifique se está ligado em Complementos Mestres > Elementos. Cada widget pode ser alternado lá, e isso é parte de como o plugin permanece leve Carregar apenas os widgets que você realmente usa é uma das maneiras mais fáceis de fazer isso acelere seu site Elementor.
Como adicionar uma linha do tempo no elementor (passo a passo)
Começaremos com uma linha do tempo vertical personalizada É o mais rápido de envolver sua cabeça, e todo o resto se ramifica dela.
Passo 1: arraste o widget de linha do tempo para a página
Edite sua página com Elementor, procure por “Timeline” no painel de widgets e arraste-o para uma seção Ele cai com três entradas de amostra já preenchidas, para que você veja uma linha do tempo de trabalho imediatamente em vez de uma caixa em branco Pequena coisa, mas salva você de adivinhar o que cada campo faz.
Passo 2: Defina o tipo e o estilo da linha do tempo
No Conteúdo tab, abra a seção Linha do tempo Dois dropdowns fazem a maior parte do trabalho aqui: Tipo de linha do tempo (Personalizado ou Post) e Estilo de linha do tempo (Vertical ou Horizontal).Deixe Tipo em “Custom Timeline” e Estilo em “Vertical Timeline” por enquanto.
Passo 3: Edite seus itens de linha do tempo
Sob Itens, cada entrada aparece como uma linha repetidora (as amostras são datadas de 2 de fevereiro de 2014, 10 de maio de 2015 e 21 de junho de 2016).Clique em uma linha para expandi-la e editar a data (ou um rótulo personalizado), o conteúdo, a imagem e o link Não há campo de título separado, então adicione um cabeçalho na parte superior da caixa de conteúdo. Adicionar Item cria uma nova entrada, o ícone duplicado copia uma existente e você as reordena arrastando as linhas.
Essa é uma linha do tempo personalizada completa Alguns cliques de “Add Item,” uma data e uma frase em cada um, e você documentou um histórico da empresa ou um roteiro de projeto.
Linha do tempo personalizada versus linha do tempo pós
O menu suspenso Tipo de linha do tempo é onde esse widget ganha seu lugar. Mude de personalizado para Postar linha do tempo (um recurso Pro) e todo o painel muda: em vez de editar itens manualmente, você informa ao widget quais postagens mostrar e ele constrói a linha do tempo a partir do seu conteúdo.
Alcançar Linha do tempo personalizada quando o conteúdo é fixo e editorial:
- História da empresa e marcos fundadores
- Roteiros de produtos ou recursos
- Uma biografia ou jornada de carreira
- Cronogramas de eventos e agendas de programas
Alcançar Postar linha do tempo quando o conteúdo é o seu blog e deve manter-se atualizado:
- Um arquivo cronológico de artigos
- Um feed de notícias ou anúncios
- Estudos de caso ou entradas de portfólio publicadas como postagens
Construindo uma linha do tempo pós-a partir do seu blog
Defina o tipo de linha do tempo para Postar linha do tempo e o painel Conteúdo se enche de controles de postagem É a mesma abordagem dinâmica que você usaria crie uma página de blog no Elementor, só que sai como uma linha do tempo em vez de uma grade.
As configurações que vale a pena conhecer:
- Mostrar título/link de título: exiba o título da postagem e, opcionalmente, vincule-o à postagem.
- Tag de título: defina a tag HTML do título (H2, H3 e assim por diante) para que sua estrutura de cabeçalho permaneça limpa para SEO.
- Mostrar a Resolução da Imagem & da Imagem: puxe a imagem em destaque como uma miniatura no tamanho que escolher.
- Habilitar links: faça cartões inteiros clicáveis Se o conteúdo do seu post já tiver links, deixe isso desligado, porque links dentro de links não são permitidos.
- Formato de data e formato de hora: controle como a data de cada entrada aparece na linha.
- Postagens por página, deslocamento e pedido de postagem: decida quantos posts mostram, onde a lista começa e se o mais novo ou o mais antigo vem em primeiro lugar.
Você também pode filtrar posts por categoria, tag ou autor, e excluir posts específicos Uma linha do tempo pode mostrar “tudo em Notícias,” outro um conjunto escolhido a dedo Uma vez que lê diretamente de seus posts, ele fica bem dentro de um Construtor Tema arquivo ou modelo único, onde ele é atualizado sempre que você clica em publicar.
Mudando para uma linha do tempo horizontal
Mudar Estilo de linha do tempo para “Horizontal Timeline” e o layout gira Esta opção é para Custom Timelines, uma vez que Post Timelines permanecem verticais As entradas agora ficam lado a lado ao longo de uma linha central horizontal, cada uma com seu marcador de pontos acima do cartão, e as setas esquerda/direita permitem que os visitantes percorram através delas como um carrossel.
Horizontal ganha seu sustento quando você tem um punhado de marcos fortes e quer-los acima da dobra, digamos uma sequência de lançamento de produto em uma página de destino Vertical é a escolha mais segura para listas mais longas ou entradas com texto pesado, uma vez que ler de cima para baixo parece natural em um telefone Uma coisa que EU já encontrei: um carrossel horizontal e uma pilha vertical não se comportam da mesma forma em telas pequenas, então visualize ambos contra o seu breakpoints responsivos antes de você enviar.
Estilizando a Linha do Tempo
O Estilo tab tem uma seção para cada parte da linha do tempo: Layout, Cartões, Seta, Datas, Linha, Pontos, Navegação e Padrões É aqui que uma amostra genérica se transforma em algo que corresponde à sua marca.
Linha Central e Pontos
Sob Linha, definir a cor e espessura da linha central. Sob Pontos, decida se cada marcador é um ponto simples ou um Ícone, em seguida, escolha o ícone, seu tamanho, a cor de fundo e a cor do ponto O selecionador de ícones abre uma biblioteca completa, portanto, um calendário para eventos ou um sinalizador para marcos está a um clique de distância.
Estados padrão, pairar e focados
A seção Pontos carrega três guias de estado: Padrão, Pairar, e Focada. O padrão é o visual de descanso, Hover é o visual do mouse-over e Focused destaca o item ativo Esse último é mais importante em um carrossel horizontal, onde diz aos visitantes qual entrada está atualmente centrada Estilizar todos os três é o que faz a linha do tempo parecer interativa em vez de plana.
Cartões, datas e tipografia
O Cartões a seção controla o fundo, a borda, a sombra e o espaçamento de cada entrada. Datas além disso, as configurações de tipografia de título e conteúdo permitem que você corresponda às fontes do seu site. Mantenha o preenchimento do cartão consistente e seu contraste legível, porque uma linha do tempo vive ou morre se as pessoas podem digitalizá-lo.
Casos de Uso Prático
Algumas maneiras pelas quais coloquei o widget Timeline para trabalhar em projetos reais:
- Sobre páginas: uma linha do tempo personalizada vertical dos marcos da empresa, combinada com um Widget de compensação para estatísticas principais, como anos de negócios.
- Páginas do produto: um roteiro horizontal mostrando o que foi enviado e o que está por vir.
- Blog e notícias: uma linha do tempo pós como um arquivo cronológico, sentado ao lado de a Widget de changelog para notas de lançamento.
- Portfólios: estudos de caso como entradas datadas com imagens em destaque.
Dicas para uma melhor linha do tempo
- Mantenha o conteúdo da entrada curto. Duas ou três frases por cartão são muito melhores do que um parágrafo completo.
- Use ícones que signifiquem alguma coisa: um calendário para datas, uma bandeira para lançamentos, uma estrela para prêmios.
- Para longas histórias, vá vertical A rolagem horizontal desgasta cinco ou seis itens.
- Defina uma Tag de Cabeçalho sensata nas linhas do tempo das postagens para que os títulos não concorram com o H1 da sua página.
- Verifique o resultado no celular e em relação ao seu Configuração SEO, já que imagens em destaque e ordem de título, ambos alimentam a pesquisa.
Para cada controle e caso de borda ímpar, o Documentação do widget da linha do tempo vai mais fundo do que EU posso aqui E se você quiser layouts premium, marca branca, e o resto da biblioteca, Master Addons Pro desbloqueia-os.
Perguntas frequentes
O widget Elementor Timeline é gratuito?
Sim. o widget Linha do tempo dos complementos mestres é parte do plugin gratuito, incluindo Linhas do tempo personalizadas em estilos verticais e horizontais O tipo Linha do tempo do post, que puxa em seus posts do blog, precisa de Master Addons Pro.
Posso criar uma linha do tempo no Elementor sem nenhum plugin?
Não é fácil O núcleo do Elementor não tem nenhum elemento de linha do tempo, então você estaria construindo um à mão com colunas, divisores e CSS personalizado Um widget como Master Addons Timeline lida com a linha central, marcadores, cartões alternados e capacidade de resposta para você em poucos cliques.
Qual é a diferença entre uma linha do tempo personalizada e pós?
Uma linha do tempo personalizada usa entradas que você digita à mão, ideal para conteúdo fixo como o histórico da empresa Uma linha do tempo de postagem puxa suas postagens no WordPress automaticamente, para que novas postagens se tornem novas entradas Escolha personalizado para conteúdo editorial e poste para qualquer coisa que deva se atualizar.
Posso fazer uma linha do tempo horizontal no Elementor?
Sim. na guia Conteúdo do widget Linha do Tempo, defina o Estilo da Linha do Tempo para “Linha do Tempo Horizontal.” As entradas ficam lado a lado ao longo de uma linha horizontal com setas de navegação, funcionando como um carrossel Você pode voltar para a vertical a partir do mesmo dropdown a qualquer momento.
A linha do tempo ficará bem no celular?
O widget é responsivo, e você pode ajustar tamanhos por dispositivo As linhas de tempo verticais se adaptam mais naturalmente às telas pequenas Se você usar horizontal, visualize-o no celular e ajuste seus pontos de interrupção, já que as placas lado a lado se comportam de maneira diferente de uma pilha de cima para baixo.
Embrulhando
Então é assim que criar uma linha do tempo no Elementor de ponta a ponta: arraste o widget, escolha seu tipo e estilo, preencha ou filtre as entradas e, em seguida, estilize a linha, os pontos e as cartas para se adequar à sua marca As linhas do tempo personalizadas mantêm suas histórias fixas As linhas do tempo das postagens se mantêm atualizadas O interruptor vertical e horizontal cobre tanto longas histórias quanto roteiros apertados.
Instale complementos mestres, solte um widget de linha do tempo em sua próxima página Sobre ou produto e transforme uma lista de datas em algo que as pessoas realmente leem.
Leitura relacionada: Crie uma página de blog com o Elementor · Como acelerar os sites Elementor · Navegue por todos os widgets Master Addons
