Como adicionar belas linhas do tempo de eventos no WordPress

As linhas do tempo de eventos são fantásticas para representar visualmente seus eventos, tornando-os mais envolventes e mais fáceis de serem acompanhados pelo público.

Além dos eventos, as linhas do tempo também podem ser usadas em sua página “Sobre” para destacar o histórico e os marcos da empresa.

No entanto, sem as ferramentas certas, planejar e exibir cronogramas de eventos no seu site WordPress pode ser um desafio.

Neste artigo, mostraremos como adicionar belas linhas do tempo de eventos ao seu site WordPress.

Por que adicionar uma bela linha do tempo de eventos no WordPress

As linhas do tempo de eventos destacam marcos significativos com uma estrutura cronológica clara. O uso de uma linha do tempo pode ajudar a aprimorar o aspecto narrativo do seu conteúdo.

Além dos marcos, as linhas do tempo permitem que você represente visualmente o progresso, as fases e a interconexão dos eventos. Isso pode tornar seu conteúdo mais envolvente.

Quando se trata de casos de uso, muitos proprietários de sites WordPress usam linhas do tempo para exibir eventos relacionados de forma organizada e visualmente atraente. As empresas e organizações também costumam usar linhas do tempo para mostrar seu histórico.

Se você tiver um site de portfólio, como um portfólio de fotografia on-line, poderá mostrar suas fotografias em uma bela linha do tempo vertical que mostre sua jornada pelo mundo.

Isso pode ser mais envolvente do que escrever seu histórico e adicioná-lo ao seu site como uma página de texto simples.

Como adicionar uma linha do tempo de eventos no WordPress

A maneira mais fácil de adicionar uma linha do tempo de eventos no WordPress é usar o plug-in Cool Timeline. Esse plug-in gratuito e fácil de usar permite que você crie linhas do tempo incríveis de forma rápida e fácil.

Após a ativação, você verá uma nova área Timeline Addons no painel do WordPress.

Com esse plug-in, você pode criar linhas do tempo de eventos de duas maneiras.

A primeira é clicando no botão “Add New Story” (Adicionar nova história) no painel Timeline Addons.

Isso abrirá o editor, onde você poderá digitar um título e uma descrição, definir uma imagem em destaque e adicionar outras informações importantes.

Quando você terminar de adicionar eventos, o Cool Timeline mostrará todas essas histórias de eventos na mesma linha do tempo. Você pode então adicionar a linha do tempo a qualquer página ou post.

Esse método é perfeito para mostrar a mesma linha do tempo várias vezes em seu site. No entanto, ele só permite que você crie uma única linha do tempo.

A outra opção é usar o Cool Timeline Block para criar uma linha do tempo visual dentro do editor de blocos do WordPress.

Adicionar vários Cool Timeline Blocks ao seu site permite que você mostre diferentes linhas do tempo em diferentes partes do site.

No entanto, esse método não permite que você reutilize a mesma linha do tempo em seu site, a menos que você mesmo a salve como um padrão de bloco.

Neste guia, abordaremos os dois métodos. Independentemente da forma como você criar sua linha do tempo, será necessário instalar e ativar o plug-in Cool Timeline. Se precisar de mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.

Depois disso, você estará pronto para criar sua linha do tempo usando o menu Timeline Addons ou o editor de blocos. Se preferir ir direto para um método específico, você pode usar os links abaixo:

Pronto? Vamos começar.

Método 1. Como criar uma linha do tempo de eventos reutilizável usando o menu de complementos de linha do tempo

Para criar seu primeiro evento, você pode acessar Timeline Addons ” Add New Story no painel do WordPress.

Em seguida, você pode dar um título ao evento digitando-o no campo “Add Title” (Adicionar título).

No editor principal, você pode ir em frente e digitar todo o texto que deseja exibir na linha do tempo. Normalmente, isso será uma descrição do evento.

Depois de fazer isso, é hora de clicar no link “Set featured image” (Definir imagem em destaque).

Agora você pode escolher a imagem que representará o evento em sua linha do tempo. Você pode clicar para escolher uma imagem da biblioteca de mídia do WordPress ou carregar um novo arquivo de imagem do seu computador.

Em seguida, role a tela para baixo até a seção “Timeline Story Settings” (Configurações da história da linha do tempo). Aqui, você pode clicar no campo “Story Date / Year” e usar o pop-up do calendário para selecionar a hora e a data em que o evento ocorreu.

Você também pode escolher entre uma imagem “completa” ou “pequena” para o evento.

Na imagem a seguir, você pode ver um exemplo de uma imagem “completa”.

Imagens maiores chamarão a atenção do visitante para os eventos mais importantes na linha do tempo. Entretanto, as imagens “completas” ocupam mais espaço.

A imagem a seguir mostra o mesmo evento, mas, desta vez, com uma imagem “pequena”.

Se quiser adicionar muitos eventos diferentes à sua linha do tempo, talvez seja melhor usar a configuração “Small” (Pequeno).

Isso pode ajudar a evitar que sua linha do tempo pareça desordenada.

Depois de fazer essas alterações, role até a parte superior da página e clique no botão “Publicar”.

E é isso! Agora você pode repetir essas etapas para criar mais eventos.

Deseja ver todos os eventos que você criou até o momento? Então, basta acessar Timeline Addons ” Cool Timeline Stories.

Depois de criar todos os seus eventos, a próxima etapa é personalizar a aparência da linha do tempo em seu site.

Para fazer isso, você pode ir para Timeline Addons ” Timeline Settings ” General Settings.

Na seção “Timeline Title” (Título da linha do tempo), você pode digitar o título que aparecerá acima da linha do tempo.

O Cool Timeline também pode exibir uma imagem acima da linha do tempo, como o logotipo da empresa. Isso pode ajudar a reforçar a sua marca e permitir que os visitantes saibam o que a linha do tempo está mostrando.

Para adicionar essa imagem opcional, você deve clicar no botão “Upload”.

Agora você pode escolher uma imagem da biblioteca de mídia do WordPress ou carregar um novo arquivo do seu computador.

Se você adicionar muito texto a uma linha do tempo, ela poderá parecer desordenada e desagradável.

Com isso em mente, talvez você queira definir um número máximo de palavras que serão exibidas na linha do tempo. Para definir um limite máximo de palavras, basta digitar um número no campo “Content Length” (Comprimento do conteúdo).

Se você definir um limite, é uma boa ideia adicionar links “Leia mais” à sua linha do tempo. A Cool Timeline adicionará esse link a todas as descrições maiores que seu limite de palavras.

Para adicionar esse link, localize a seção “Exibir mais informações?” e clique no botão “Sim”.

Agora você pode decidir se, ao clicar no link “Read More”, o restante do texto será exibido na mesma guia ou em uma nova guia do navegador. Para fazer essa escolha, basta clicar no botão de opção “Mesma guia” ou “Nova guia”.

Por padrão, a linha do tempo mostra o ano em que cada evento ocorreu. No entanto, talvez você nem sempre precise mostrar essas informações. Por exemplo, se todos os eventos tiverem ocorrido no mesmo ano.

Para ocultar o rótulo do ano, basta clicar no controle deslizante “Year Label” (Rótulo do ano) para mudá-lo de “Show” (Mostrar) para “Hide” (Ocultar).

Por padrão, o primeiro evento em sua linha do tempo aparecerá no lado direito da linha vertical da linha do tempo.

Deseja mostrar esse evento no lado esquerdo da linha do tempo? Então, basta clicar no botão “Left” (Esquerda) ao lado de “Vertical Timeline Stories Starts From” (Histórias da linha do tempo vertical começam em).

Quando estiver satisfeito com suas alterações, clique no botão “Save” para salvá-las.

Agora, você pode passar para a guia “Style Settings” (Configurações de estilo).

Por padrão, a linha do tempo não tem um plano de fundo.

Se desejar, você pode adicionar um plano de fundo colorido à sua linha do tempo clicando no controle deslizante “Timeline Background” (Plano de fundo da linha do tempo) para mudá-lo de “No” (Não) para “Yes” (Sim).

Em seguida, clique no botão ao lado de “Cor de fundo da história”.

Agora você deve poder escolher uma cor de fundo usando as configurações do seletor de cores.

Essa tela também tem configurações de cores semelhantes para todas as diferentes partes da linha do tempo, incluindo a linha vertical e os títulos dos eventos. Para alterar qualquer uma dessas cores padrão, basta clicar no botão da seção e usar o seletor de cores que aparece.

Quando estiver satisfeito com as alterações feitas, não se esqueça de clicar no botão “Save” (Salvar).

Em seguida, talvez você queira ir para a guia “Typography Settings” (Configurações de tipografia). Aqui, você pode alterar o tamanho e a fonte usados para os diferentes conteúdos da sua linha do tempo, como o título da linha do tempo e o título da história.

Se você alterar as configurações de tipografia padrão, não se esqueça de salvar as alterações clicando no botão “Salvar”.

Quando terminar de personalizar a linha do tempo, você estará pronto para adicioná-la ao seu site. Basta abrir a página ou o post em que você deseja exibi-la e clicar no botão “+”.

Agora, você deve digitar “Cool Timeline” na barra de pesquisa. Esse plug-in tem alguns blocos diferentes, portanto, certifique-se de clicar no bloco “Cool Timeline Shortcode Block”.

Agora você pode atualizar ou publicar sua página normalmente.

Agora, se você visitar seu site, verá a linha do tempo ao vivo.

Método 2. Como criar várias linhas do tempo de eventos no WordPress usando o bloco de linha do tempo

Você também pode criar uma bela linha do tempo de eventos no WordPress usando o editor de blocos e o ‘Cool Timeline Block’.

Esse bloco tem muito conteúdo de espaço reservado. Para criar sua linha do tempo, basta substituir cada placeholder por seu próprio texto e imagens. Isso permite que você crie sua linha do tempo de forma mais visual.

Para começar, basta abrir a página ou o post em que você deseja adicionar uma linha do tempo.

Em seguida, você pode clicar no ícone “+” e digitar “Cool Timeline Block”. Quando esse bloco for exibido, clique nele para adicioná-lo à página ou ao post.

O bloco Cool Timeline tem 4 eventos de espaço reservado. Você pode começar a editá-los um a um clicando no primeiro evento da linha do tempo.

No menu à direita, basta substituir o espaço reservado “Título da história” pelo título que você deseja usar para esse evento.

Em seguida, você pode adicionar uma descrição ao campo “Descrição da história”.

Depois disso, você deverá encontrar o campo “Primary Label (Date/Steps)”. Aqui, vá em frente e digite a data em que o evento ocorreu.

Por padrão, o bloco Cool Timeline mostra o primeiro evento no lado direito da linha do tempo.

Se preferir mostrar o evento no lado esquerdo da linha vertical, você pode clicar no botão de opção “Left” (Esquerda).

Agora, o bloco Cool Timeline tem uma imagem de espaço reservado para cada evento. Para substituir esse espaço reservado por sua própria imagem, basta clicar no botão “Remove” (Remover).

Depois de fazer isso, clique no botão “Upload/Choose Image” (Carregar/escolher imagem).

Em seguida, você pode escolher uma imagem da biblioteca de mídia do WordPress ou carregar um novo arquivo do seu computador.

O bloco Cool Timeline mostrará cada imagem em tamanho real. Para exibir uma imagem menor, abra o menu suspenso “Image Size” (Tamanho da imagem) e escolha “Medium” (Médio) ou “Thumbnail” (Miniatura).

Assim que você clicar em um dos diferentes tamanhos de imagem, o bloco será atualizado para mostrar a nova imagem. Isso permite que você experimente tamanhos diferentes para ver o que fica melhor em seu site.

Por padrão, a linha do tempo marca cada evento na linha vertical com um ponto. Talvez você queira substituir esse ponto simples por um ícone personalizado.

Por exemplo, você pode usar ícones diferentes para tipos diferentes de eventos. Em seguida, você pode explorar os diferentes ícones personalizados que pode usar em sua linha do tempo clicando no botão de opção “Custom (Font Awesome Icon)”.

Depois de fazer isso, será exibido um menu suspenso com um ícone de seta. Você deverá expandi-lo para percorrer todos os ícones diferentes.

Quando você encontrar o ícone perfeito para usar em seu evento, poderá clicar nele.

Agora você pode personalizar o restante dos eventos de espaço reservado seguindo o mesmo processo descrito acima.

Se você quiser adicionar mais eventos à linha do tempo, basta clicar no ícone “Add Story” (Adicionar história). Isso adicionará um novo evento de espaço reservado, pronto para ser personalizado.

Quando estiver satisfeito com a aparência da linha do tempo, você poderá atualizar ou publicar a página normalmente. Uma vez concluída, sua linha do tempo estará ativa em seu site do WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma bela linha do tempo de eventos ao seu site WordPress. Talvez você também queira dar uma olhada em nossos guias sobre como criar um calendário de eventos simples e como adicionar um widget de contagem regressiva no WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.