Como criar uma linha do tempo no WordPress com elemento

Os cronogramas fornecem uma maneira visual de exibir eventos, marcos ou etapas em uma ordem cronológica. Eles ajudam a apresentar informações em um fluxo linear que facilita para os visitantes e usuários entenderem a sequência de eventos ou processos. Usando -os, você pode mostrar a jornada da sua empresa, um roteiro do projeto ou uma história pessoal com clareza.

Adicionar uma linha do tempo ao WordPress pode melhorar a experiência do usuário, tornando o conteúdo mais envolvente e mais fácil de seguir. É por isso que o uso de cronogramas tornou -se uma tendência em muitos sites. O Elementor é um plug-in tão fácil de usar que você pode usar para criar e adicionar cronogramas às suas postagens e páginas do WordPress com um nível extremo de personalização.

Neste artigo, mostraremos um guia passo a passo sobre como criar uma linha do tempo no WordPress com Elementor. Antes disso, abordaremos algumas partes teóricas sobre o tópico de hoje.

Tipos de linhas do tempo e seus casos de uso

Existem dois tipos de cronogramas - horizontal e vertical. Cada um possui casos de uso específicos que agregam valor a um site de maneira diferente. Vamos explorá -los e seus casos de uso na discussão abaixo.

1. Linha do tempo vertical

Uma linha do tempo vertical exibe eventos e informações de cima para baixo, geralmente ao longo da esquerda ou centro da página. É um formato amigável para rolagem que funciona perfeitamente nos dispositivos de mesa e móveis. À medida que os usuários rolam a página, eles seguem a ordem cronológica em um layout limpo e legível.

Use casos para cronogramas verticais:

• História da empresa ou jornada de crescimento
• Retomar ou destaques de carreira
• Postagem de blog Série ou progressão do artigo
• Explicações passo a passo do processo
• Marcos ao desenvolvimento de produtos

2. Linha do tempo horizontal

Uma linha do tempo horizontal exibe eventos da esquerda para a direita, seguindo um formato de rolagem lateral ou deslizamento. É normalmente usado onde o espaço é mais largo do que alto. Esse formato é melhor para prazos mais curtos ou quando você deseja mostrar apenas alguns eventos importantes em um layout amplo e fácil de ver.

Casos de uso para cronogramas horizontais:

• Roteiros de projeto ou etapas de planejamento
• Cronogramas de eventos
• Campanhas de marketing ou lançamentos de produtos
• Apresentações de portfólio
• Linhas de tempo educacionais ou visões históricas

Como criar uma linha do tempo no WordPress com elemento

Como já foi dito, o Elementor é um plug-in Draw-and-Drop Page Builder. Mas a triste notícia é que não inclui nenhum widget para criar cronogramas. No entanto, o plug -in possui muitos complementos pelos quais você pode expandir as funcionalidades do plug -in Core Elementor.

Happyaddons é um deles. Ele vem com mais de 130 widgets e 22 recursos que podem superar muitas deficiências do Elementor. Portanto, ao instalar o plug -in do HappyAddons, você pode permitir mais recursos de design em seu site. Em muitos casos, você nem precisará de Elementor Pro se tiver HappyAddons.

Agora vamos explorar como criar cronogramas no WordPress com elementar e happyaddons.

Como criar uma linha do tempo horizontal no WordPress

Espero que você já saiba qual é a linha do tempo horizontal. Happyaddons tem um widget da linha do tempo horizontal , que é totalmente gratuito para usar. Portanto, você precisa que os seguintes plugins sejam instalados e ativados primeiro em seu site.

• Elementor
• Happyaddons

Depois de instalar os plug -ins e ativado em seu site, comece a seguir as etapas explicadas no tutorial abaixo.

Etapa 01: Crie uma seção sobre a tela elementar

Abra uma postagem ou página com Elementor. Crie uma seção com a estrutura de coluna Flexbox desejada para criar uma linha do tempo.

Etapa 02: Adicione o widget da linha do tempo horizontal à tela

Encontre o widget da linha do tempo horizontal no painel Elementor. Depois de encontrar, arraste e solte o widget para a tela.

Você verá que o widget da linha do tempo horizontal foi adicionado à tela com um layout padrão.

Etapa 03: selecione uma predefinição para o widget

Uma predefinição é um estilo de design ou layout predefinido que você pode aplicar instantaneamente a um widget para obter uma personalização rápida. Se você não deseja projetar o widget do zero, pode selecionar uma predefinição. O widget da linha do tempo horizontal vem com seis predefinições.

Selecione uma predefinição que você gosta para o widget.

Etapa 04: Adicione conteúdo ao widget da linha do tempo horizontal

Expanda a seção da linha do tempo . Aqui, você terá opções para adicionar conteúdo ao widget. Por padrão, você receberá quatro guias. Clique em qualquer guia para expandi -la. Isso abrirá muitos campos onde você pode colocar e adicionar as informações desejadas.

Depois que uma guia é expandida, você pode adicionar data do evento, ícone, imagem, resolução de imagem, título e descrição à guia respectiva.

Você pode ver que adicionamos conteúdo à respectiva seção do widget horizontal.

Da mesma forma, adicione conteúdo a todas as guias da linha do tempo. Você pode ver que fizemos isso na imagem anexada abaixo.

Para adicionar mais guias ao widget, clique no botão + Adicionar item na guia Linha do tempo.

Etapa 05: Configurar configurações para o widget da linha do tempo horizontal

Depois que a parte do conteúdo for concluída, expanda a seção de configurações na guia Conteúdo. Você pode configurar a guia HTML do título, alinhamento de conteúdo, ocultar seta de conteúdo, ativar a caixa de luz, velocidade de animação, número de slides para mostrar, ícone e muito mais.

Estes são tão fáceis de configurar. Esperamos que você possa fazê -los sozinho.

Etapa 06: estilizar o widget da linha do tempo horizontal

Para estilizar o widget, vá para a guia Estilo no painel Elementor.

Primeiro, expanda a seção da linha do tempo .

Você receberá opções para personalizar a espessura da linha, a cor da linha, o espaçamento de data, a tipografia de data, a cor, o ícone, o raio de borda, o tipo de borda, a largura da borda, a cor de fundo, etc.

Explore -os e faça as personalizações necessárias necessárias.

Você pode ver que fizemos algumas alterações na linha do tempo horizontal.

Em seguida, expanda a seção de setas . A partir daqui, você pode personalizar os ícones de seta, suas posições, tamanhos, largura da borda, raio e muito mais .

Da mesma forma, expanda a seção de conteúdo da guia Style. Você pode personalizar o raio da borda, preenchimento, espaço entre conteúdo, tipo de borda, largura da borda, cor, sombra, tipografia e mais do widget.

Faça as mudanças necessárias.

Etapa 07: Visualize o widget da linha do tempo horizontal

Vá para a página de visualização e verifique se tudo funciona bem ou não. Você pode ver que nossa linha do tempo horizontal da demonstração está funcionando bem sem falhas.

Como criar uma linha do tempo vertical no WordPress

Embora o HappyAddons permita criar uma linha do tempo horizontal gratuitamente, você deve atualizar para a versão premium do plug -in para criar uma linha do tempo vertical. Portanto, verifique se os seguintes plugins estão disponíveis no seu site.

• Elementor
• Happyaddons
• Happyaddons pro

Depois de disponíveis no seu site, comece a seguir o tutorial explicado abaixo.

Etapa 01: arraste e solte o widget da linha do tempo para a tela Elementor

Digite a linha do tempo na caixa de pesquisa. Selecione o widget da linha do tempo diferente da linha do tempo horizontal. Arraste e solte- o na tela elementar.

Uma linha do tempo vertical será criada na tela com um layout padrão.

Etapa 02: Selecione uma predefinição para o widget da linha do tempo vertical

Espero que você já saiba o que é uma predefinição, como já discutimos acima. Selecione uma predefinição se não quiser projetar a linha do tempo vertical do zero.

Etapa 03: Adicione conteúdo à linha do tempo vertical

Expanda a seção da linha do tempo . Por padrão, você verá duas guias. Expanda qualquer guia clicando nela como mostramos acima.

Espero que você não precise falar muito aqui. Porque você pode adicionar quase o mesmo tipo de conteúdo à linha do tempo da vertical que você pode fazer no caso da linha do tempo horizontal.

Você pode adicionar um ícone, alterar o tipo de ícone, definir o tempo, definir um título, adicionar uma imagem etc., para cada seção da linha do tempo. Faça as coisas neeful.

Complete a adição de conteúdo à linha do tempo. Você pode até adicionar mais itens à linha do tempo clicando no item + Adicionar, como mostrado acima.

Etapa 04: Definir configurações para o widget da linha do tempo vertical

Expanda a seção Configurações . Você pode configurar se deve mostrar a data, hora, seta de conteúdo e árvore de rolagem . Você também pode alterar a etiqueta do título, o alinhamento da caixa de ícone, o alinhamento de árvores e a cor do fundo .

Faça as configurações neeful. Mas para nós, o alinhamento padrão parece bom. Então, vamos cumprir o tutorial.

Etapa 05: estilizar o widget da linha do tempo vertical

Venha para a guia Style no painel Elementor. Você pode personalizar todos os tipos de conteúdo e elementos visuais no widget desta guia.

Primeiro, expanda a caixa de conteúdo . Você pode personalizar a tipografia, cor, cor da seta, tipo de fundo, tipo de borda e largura da borda daqui. Faça isso.

Da mesma forma, expanda a seção da caixa de ícones . Você pode alterar a largura, a altura, o espaço da caixa e outras opções relacionadas aos ícones no widget daqui. Se você estiver satisfeito com a estilização padrão, não toque em nada.

Estilizar o título do widget se parecer necessário. Você pode ver que mudamos nossa tipografia.

Da mesma forma, personalize a aparência da hora e data . Mudamos sua cor, peso e tipografia.

Finalmente, expanda a seção de botões . Você pode estilizar sua cor de fundo, copiar tipografia e outros .

Etapa 06: Visualizar o widget da linha do tempo vertical

Venha para a página de visualização e verifique se a linha do tempo da vertical funciona bem ou não. Faça isso rolando o widget. Esperamos que funcione bem do seu lado como o nosso.

Assim, você pode criar diferentes tipos de seções da linha do tempo em seu site para apresentar maravilhosamente vários conteúdos.

Coisas que você pode fazer mais com happyaddons

Happyaddons é honestamente um plug -in abrangente. Você certamente se apaixonará por este plugin logo após usá -lo pela primeira vez. Dê uma olhada nas seguintes coisas que você pode fazer com o plug -in.

um. Use um construtor de temas grátis

Elementor também tem um construtor de temas. Mas é reservado apenas para os usuários premium. Mas, no caso de HappyAddons, é totalmente gratuito para usar. Usando o construtor de temas do HappyAddons, você pode criar cabeçalhos, rodapés, modelos de postagem no blog e páginas de arquivo. Verifique como criar um modelo de postagem no blog com HappyAddons gratuitamente.

b. WooCommerce amigável

O HappyAddons vem com nove poderosos widgets que amigam o WooCommerce para aprimorar seu site de comércio eletrônico. Esses widgets são grade de produto, carrossel de produtos, grade de categoria de produto, carrossel de categoria de produto, produto único, mini carrinho, carrinho, checkout e barra de remessa.

c. Casta de cópia entre domínios

Com esse recurso, você pode copiar diretamente os mesmos widgets, seções e páginas de um site para outro. Isso pode economizar um tempo valioso, pois você nem sempre precisa começar do zero. O vídeo a seguir explica o recurso de cópia de cópia cruzado do plug-in.

d. Projetar conteúdo criativo

Com seus widgets como o Image Hover, Animated Link, Fun Factor, Image Stack Group, pilha de fotos, botão criativo, rolagem de texto e Ícone do Senhor, você pode criar conteúdo criativo envolvente para conectar os usuários.

e. Mostre informações estatísticas

Ao contrário de muitos outros complementos do Elementor, este plug-in oferece vários widgets de gráfico pelos quais você pode mostrar informações estatísticas e criar postagens e páginas infográficas. Aprenda a criar uma página infográfica com Elementor.

Além de tudo isso, há muito mais coisas que você pode fazer com o plug -in do Happyaddons.

Pensamentos finais!

Criar cronogramas não é uma coisa obrigatória para todos os sites. Mas eles podem se tornar necessários, pois podem ser uma opção ideal para mostrar certas informações e conteúdo. Portanto, sempre que você sentir a necessidade de criar uma linha do tempo, esperamos que este post tutorial chegue ao seu uso.

Se você adorou este post, solicitamos que você nos informe através da caixa de comentários abaixo. Além disso, se você tiver alguma dúvida sobre o plug -in do Happyaddons, poderá deixar uma mensagem na caixa de bate -papo. Nosso agente de suporte ao vivo virá a você responder o mais rápido possível.

Obrigado por estar conosco até o fim. Desejamos a você um feliz dia pela frente.