Principais conclusões
- Elementor e Elementor Pro não têm widget de linha do tempo, portanto, uma linha do tempo horizontal Elementor precisa de um widget de complemento ou uma linha de contêineres construída à mão com CSS personalizado.
- O widget Linha do tempo dos complementos mestres muda de vertical para horizontal com um controle, Estilo da linha do tempo, encontrado na guia Conteúdo na seção Linha do tempo.
- Uma linha do tempo horizontal no widget Master Addons é um carrossel, e seu controle de Navegação oferece seis opções: Setas e Pontos, Setas e Fração, Setas, Pontos, Progresso e Nenhum.
- As configurações do carrossel no widget Linha do tempo incluem um layout Carrossel ou Coverflow, reprodução automática com velocidade padrão de 5.000 ms, pausa no Hover, slides para rolar, slide central e loop.
- O layout horizontal funciona apenas com itens de linha do tempo personalizada, porque uma linha do tempo de postagem construída a partir de postagens de blog permanece vertical.
Uma linha do tempo horizontal do Elementor estabelece suas datas da esquerda para a direita, com um ponto na linha acima de cada carta e setas para se mover ao longo dela. elementar não possui widget de linha do tempo próprio, portanto este guia usa o Widget de linha do tempo em complementos mestres, onde o layout horizontal é um único dropdown.
As seis etapas abaixo começam a partir de uma linha do tempo vertical comum e terminam com um carrossel funcional Cada captura de tela vem do Elementor 4.3 com o widget em uma página de teste Se você ainda não colocou uma linha do tempo, o tutorial completo da linha do tempo cobre o básico primeiro.
Índice
Quando uma linha do tempo horizontal é a melhor escolha
Use uma linha do tempo horizontal quando você tiver uma curta série de passos e espaço vertical limitado Uma linha do tempo vertical com três cartões pode levar mais do que uma tela cheia de rolagem As mesmas três cartas lado a lado se encaixam em uma linha, e é por isso que os layouts horizontais aparecem nas páginas iniciais e nas páginas de destino, enquanto os verticais se adequam a páginas Sobre longas.
| Fator | Linha do tempo horizontal | Linha do tempo vertical |
|---|---|---|
| Melhor comprimento | 3 a 8 itens | Qualquer comprimento |
| Espaço que precisa | Uma fileira | Cresce com cada item |
| Como os visitantes se movem | Setas, pontos ou deslize | A rolar a página |
| Uso típico | Etapas do processo, roteiro do produto, destaques anuais | História da empresa, changelog, longa história |
| Fonte em Master Addons | Itens personalizados da Linha do tempo | Itens personalizados ou postagens de blog |
Uma linha do tempo horizontal é uma espécie de carrossel Se você não tem certeza de qual dos dois termos se encaixa no seu design, carrossel vs controle deslizante em Elementor explica a diferença.
Como criar uma linha do tempo horizontal no Elementor
Você precisa de Complementos Elementor e Master instalados, depois seis etapas no editor Nada abaixo precisa de CSS personalizado.
Passo 1: Adicionar o widget Linha do tempo
Abra sua página com Elementor, procure no painel de widgets Linha do tempo e arraste-o para a página Ele chega como uma linha do tempo vertical com três itens de amostra Sair Tipo de linha do tempo em Linha do tempo personalizada, porque o layout horizontal é oferecido apenas para itens personalizados.
Passo 2: Mude o estilo da linha do tempo para horizontal
Na guia Conteúdo, abra o Linha do tempo seção e alteração Estilo de linha do tempo da Linha do Tempo Vertical para Linha do tempo horizontal. As cartas se movem em uma linha, a linha corre pela parte superior e cada ponto fica acima de sua carta com a data acima dela Duas novas seções aparecem no painel: Configurações de navegação e carrossel.
Passo 3: Edite os itens
Clique em uma linha abaixo Itens para abri-lo Cada item tem três pequenas abas: Conteúdo, Mídia e Estilo.
- Mostrar decide o que está acima do ponto: uma data ou um rótulo personalizado, como “Phase 1”.
- Data e Formato Data defina a data e como ela é escrita.
- link faz o cartão inteiro clicável.
- O editor de conteúdo contém o título e a descrição. Não existe um campo de título separado, portanto a primeira linha é o título.
- O Mídia tab adiciona uma imagem ao cartão.
Imagens amplas funcionam melhor do que as altas aqui Três fotos altas empurram o texto para longe na tela.
Passo 4: Escolha a navegação
Abrir o Navegação seção e escolha como os visitantes se movem na linha do tempo O menu suspenso Navegação tem seis opções.
| Opção navegação | O que os visitantes veem | Bom para |
|---|---|---|
| Setas e Pontos | Setas anteriores e seguintes mais um ponto por slide | Maior número de cronogramas |
| Flechas e Fração | Setas mais um contador como 2 /6 | Longas linhas de tempo onde os pontos ficam lotados |
| Setas | Somente setas | Layouts limpos |
| Pontos | Apenas pontos | Projetos touch-first |
| Progresso | Uma barra que enche à medida que o carrossel avança | Etapas de processo |
| Nenhum | Deslize ou reproduza automaticamente apenas | Tiras decorativas |
Abaixo do dropdown você pode ligar Balas Dinâmicas?, adicione uma barra de rolagem com Mostrar barra de rolagem?, defina a posição e troque os ícones Próximo e Anterior. Esconder a Seta no Mobile? está ligado por padrão, o que deixa os visitantes do telefone com deslizamentos e pontos.
Etapa 5: Defina o comportamento do carrossel
Aberto Configurações Carrossel para controlar como a linha do tempo se move.
- traçado: Carrossel para uma linha plana, ou Coverflow para um efeito 3 D com controles Rotate, Stretch e Depth.
- Reprodução automática e Velocidade de reprodução automática: a velocidade padrão é de 5000 ms, então um novo slide a cada cinco segundos.
- Pausa no Hover: interrompe a reprodução automática enquanto o ponteiro está sobre a linha do tempo.
- Slides para rolar: quantos cartões se movem por clique, definido por dispositivo.
- Slide Central, Agarrar Cursor e Modo Arraste Livre pela sensação do arrasto.
- dar laçadas: retorna ao primeiro item após o último.
- Velocidade de Animação (ms): quanto tempo leva cada transição de slide, 500 por padrão.
Para uma linha do tempo real, pense duas vezes sobre reprodução automática As datas têm uma ordem, e um cartão que desliza para longe enquanto alguém está lendo é irritante A reprodução automática com pausa no Hover é um meio termo justo.
Passo 6: Estilo as setas, pontos e cartas
Mude para a guia Estilo Tem dez seções: Itens Carrossel, Layout, Imagens, Postagens, Cartões, Seta, Datas, Linha, Pontos e Navegação.
- Cartões: preenchimento, raio da borda, cores do título e do conteúdo, além de uma aparência separada para o cartão focado.
- Datas: tipografia e cor da data ou rótulo acima de cada ponto.
- Linha: a cor e a espessura da trilha.
- Pontos: um ponto simples, um ícone ou uma imagem, com tamanho e cores.
- Navegação: cores e tamanhos para setas, pontos e a barra de rolagem.
Publique a página e teste-a em um telefone Os cartões por linha caem em telas menores, então verifique se o texto ainda se encaixa.
Quer o layout vertical também? O Widget Linha do tempo do elementador a página lista todas as opções de layout, alinhamento e estilo em um só lugar.
Tutorial vídeo
Este vídeo constrói uma linha do tempo a partir de uma página vazia e a muda para o carrossel horizontal às 3h44.
Quatro coisas que dão errado
A maioria dos problemas com uma linha do tempo horizontal vem de tratá-la como uma vertical.
- Muitos itens. Passado oito ou mais, os visitantes param de clicar Usar uma linha do tempo vertical ou dividir a história por ano.
- Alturas desiguais do cartão. Uma descrição longa estende a linha Aparar o texto ou ativar a Altura Automática nas Configurações do Carrossel.
- Setas sobre a primeira carta. Se as setas ficarem em cima do conteúdo, altere a posição na seção Navegação.
- Postagens de blog esperadas. O tipo Post Timeline é vertical Para posts em linha, use o Widget blog em modo carrossel.
Leia também: 20 modelos de controle deslizante Elementor, que incluem um design de controle deslizante de linha do tempo.
Perguntas frequentes
Posso fazer uma linha do tempo horizontal no Elementor sem o Elementor Pro?
Sim. Elementor Pro também não inclui um widget de linha do tempo, então Pro não faz diferença aqui Adicione um widget de linha do tempo de um addon como Master Addons, defina Timeline Style para Horizontal Timeline, e os itens se tornam um carrossel.
Como adiciono setas a uma linha do tempo horizontal no Elementor?
Abra a seção Navegação na guia Conteúdo e escolha Setas e pontos, Setas e Fração ou Setas. Você pode então definir a posição da seta e substituir os ícones Próximo e Anterior da mesma seção.
Uma linha do tempo horizontal pode ser reproduzida automaticamente?
Sim. Ligue a Reprodução Automática em Configurações do Carrossel e defina a Velocidade de Reprodução Automática em milissegundos O padrão é 5000, que é de cinco segundos por slide A pausa no Hover o interrompe enquanto um visitante está lendo.
Uma linha do tempo horizontal responde?
Sim. é um carrossel, por isso mostra menos cartões em tablets e telefones e os visitantes deslizam para se mover Slides para Scroll tem valores separados por dispositivo.
Posso mostrar postagens de blog em uma linha do tempo horizontal?
Não com o tipo Post Timeline, que é apenas vertical Adicione os posts à mão como itens Custom Timeline, ou use um carrossel post.
Pensamentos finais
Uma linha do tempo horizontal do Elementor se resume a uma configuração e duas seções: Estilo de linha do tempo definido como Linha do tempo horizontal, depois Navegação com suas seis opções e Configurações de carrossel para reprodução automática, loop e velocidade Mantenha-o em três a oito cartões curtos e teste-o em um telefone.
O Página do widget da linha do tempo possui demos ao vivo de ambos os layouts, incluindo a demonstração do roteiro horizontal.
Leitura relacionada
2 respostas
O ponto que o layout horizontal só funciona com itens Custom Timeline, não a Post Timeline, é fácil de perder e quebraria uma compilação tardia Antes de mudar Timeline Style, confirmar cada item é um personalizado, uma vez que blog-post-driven timelines ficar vertical Um ajuste prático: definir Navegação para setas e pontos, em seguida, testar em uma largura de telefone estreita, porque as setas carrossel pode aglomerar os cartões e os pontos fazer deslizar mais claro para os leitores.
Obrigado por compartilhar essas dicas úteis! re Você está absolutamente certo que verificar o tipo de item de linha do tempo e testar o layout em telas menores pode ajudar a evitar problemas inesperados Agradecemos que você aponte isso e ajude outros usuários do Master Addons a construir linhas do tempo melhores e mais responsivas Obrigado por fazer parte de nossa comunidade!