Divi Plugin Highlight - Divi Timeline Module

Uma das maneiras mais interessantes de mostrar informações cronológicas é com uma linha do tempo. Quer sejam instruções passo a passo, uma lista de experiências para um currículo, uma lista de projetos para um portfólio ou até mesmo postagens em blogs, os cronogramas podem tornar as informações visualmente atraentes. Você pode criar suas próprias linhas do tempo no Divi Builder usando um plugin chamado Divi Timeline Module.

Divi Timeline Module, que é um plugin de terceiros da Tortoise IT via Elegant Marketplace, adiciona vários novos módulos (o módulo principal e três módulos complementares) ao Divi Builder para criar dois tipos diferentes de cronogramas responsivos:

1. Aquele em que você cria conteúdo para cada ponto na linha do tempo. Cada item na linha do tempo pode ter seu próprio conteúdo, links, cores, fontes, ícone, etc.
2. Aquele que usa o conteúdo existente de páginas, postagens, mídia ou projetos.

Nesta visão geral, vou fazer os dois tipos de cronogramas e, a seguir, mostrar um exemplo de construção de uma página de blog. Para esta visão geral, estou usando imagens gratuitas do Unsplash.com. Vamos começar.

Instalando o Divi Timeline Module Plugin

A instalação é simples. Basta fazer o upload do plug-in e ativá-lo como faria com qualquer plug-in. Não há outra configuração necessária.

Criação de uma linha do tempo

Existem quatro módulos: (Post) - Vertical , Conteúdo , Imagem em destaque e Vertical . Embora funcione com layouts de várias colunas, os layouts de coluna única funcionam melhor. Linha do tempo - vertical ou linha do tempo (postagens) - vertical será usada nas páginas. O resto será usado para criar um layout.

Linha do tempo vertical

Adicione o módulo Timeline - Vertical a uma linha de coluna única.

Nas Configurações Gerais, podemos adicionar um novo item de cronograma, fornecer um título para o cronograma e escolher a cor do cronograma. Clique em Adicionar Novo Item da Linha do Tempo para criar cada um dos elementos da linha do tempo.

Clicar em Adicionar Novo Item de Linha de Tempo abre um editor de conteúdo completo com texto, mídia, rótulo, mostrar mais botão, ícone, cor de ícone, cor de fundo e imagem / animação de ícone. Também inclui todas as configurações de design avançado padrão, bem como CSS personalizado .

Adicione quantos elementos da linha do tempo desejar. Você pode ver aqui que adicionei cinco elementos e alterei a cor da linha central para verde. Dentro dos elementos da linha do tempo, selecionei ícones e cores para cada elemento.

Resultado vertical da linha do tempo

Aqui está o cronograma rápido que fiz. Possui cinco itens - cada um com seu próprio conteúdo e ícones. A cor que escolhi para a linha também foi adicionada à parte inferior das janelas de conteúdo. Eu adicionei uma imagem de plano de fundo à seção que contém o módulo.

Claro, usando as Configurações de design avançadas, o módulo pode ser estilizado para combinar com a página, então você não precisa ter um fundo branco ou essas fontes.

Esta é uma ótima opção para etapas numeradas de instruções, currículo, lista de produtos, portfólio, etc.

Linha do tempo da postagem

Você também pode criar uma linha do tempo a partir do seu conteúdo. Isso inclui postagens, páginas, mídia ou projetos. Como funciona pode ser um pouco complicado, mas é fácil de criar.

Você precisará fazer duas coisas:

1. Crie um layout
2. Crie a página e escolha esse layout

Todos os módulos necessários para criar o layout e a página estão incluídos. Vamos criar um exemplo usando amostras de postagens de blog.

Crie um Layout

Primeiro, crie um layout. No painel, vá para Divi , Divi Library e selecione Adicionar novo . Dê ao layout um nome que faça sentido para você (eu escolhi Post Timeline Layout). Selecione Layout como o tipo de modelo . Deixe Global desmarcado . Clique em Enviar .

O layout que você criar exibirá as postagens (ou o tipo de postagem que você escolher). Pense nisso como criar seu próprio módulo de blog, só você pode projetar o layout das postagens. Não é isso, mas aquele exemplo me ajudou a entender isso facilmente. Bem, meio que é isso, mas não realmente. Se movendo.

Este layout é construído usando os módulos de Conteúdo da Linha do Tempo , Imagem Apresentada e Título do Post que estão incluídos no plug-in.

Para criar o layout, escolha um layout de duas colunas e coloque o módulo Linha do tempo - Imagem em destaque à direita e os módulos Linha do tempo - Título da postagem e Linha do tempo - Conteúdo à esquerda. Claro que você pode querer brincar um pouco com layouts, como usar apenas a imagem ou título, ou colocá-los em configurações diferentes, mas vamos construir o layout regular primeiro.

Observação - esses módulos não são usados ​​em uma página como a maioria dos módulos Divi Builder. Eles devem ser usados ​​dentro de um layout que será chamado pelo módulo Linha do Tempo (Postagens) - Vertical .

Este é o layout que aparece no Divi Builder. Conforme esperado, cada um desses módulos tem suas próprias opções, incluindo Configurações gerais , Configurações avançadas de design e CSS personalizado .

Estou usando um layout 1/3, 2/3, mas 1/2, 1/2 também funciona. Dependerá parcialmente do tamanho da imagem em destaque que você deseja usar e da quantidade de conteúdo que deseja exibir, bem como de outras configurações, como tamanhos de fonte.

Depois de colocar seus módulos e escolher todas as suas configurações, selecione Atualizar à direita em Publicar .

Vamos examinar mais de perto cada módulo.

Módulo de imagem em destaque

O Módulo de imagens em destaque faz exatamente o que você espera - exibe a imagem em destaque de uma postagem. Inclui uma caixa suspensa onde você pode escolher o tamanho da imagem. Também inclui texto alternativo, título, abrir na caixa de luz, URL do link, abrir na mesma janela ou nova guia, animação, remover o espaço abaixo da imagem, alinhamento, desabilitar para dispositivos e rótulo de administrador.

Estou escolhendo um tamanho médio de imagem e desligando a animação.

Módulo de Título de Postagem

O Módulo de Título de Postagem permite que você crie um link para o conteúdo, altere o rótulo de administrador e defina as configurações CSS. Eu recomendo deixar a configuração Link to Content definida como Yes . Deixei o resto definido com seus padrões.

Módulo de Conteúdo

O Módulo de conteúdo permite que você opte por mostrar especialistas ou conteúdo e exibir um botão Ler mais . Eu o configurei para mostrar um trecho e o botão ler mais.

Crie a página

Crie uma nova página usando o Divi Builder e coloque o módulo Timeline (Posts) - Vertical em um layout de coluna única.

Configurações do módulo vertical da linha do tempo (postagens)

Este módulo irá chamar o layout que você criou. Aqui você tem muitas opções, incluindo título, layout, cor da linha central, ícone para os itens na linha do tempo, mostrar números ou ícones, ícone / cor de número e cor de fundo, animação, paginação, tipo de postagem, número de postagens a serem exibidas, pós-compensação (com qual postagem começar), taxonomia e rótulo de administrador.

Para chamar o layout que você criou, selecione-o na lista suspensa chamada Layout de Loop . Role para baixo e escolha Postagens como o tipo de postagem para exibir as postagens do blog.

Depois de fazer todas as suas escolhas, publique a página.

Resultado da linha do tempo da postagem

O resultado é uma página de blog com minhas últimas postagens em uma linha do tempo. Coloquei a linha do tempo sobre uma imagem de fundo (a imagem é adicionada à seção). Com este módulo, os ícones são globais. Eu defini a linha do tempo para azul com um fundo de ícone bege e ícones azuis. O módulo de postagem pode ser ainda mais estilizado para combinar com a página usando as Configurações de design avançadas .

Um exemplo de blog

A linha do tempo pode ser usada em outros layouts. Eu queria criar um layout de blog que exibisse algumas postagens na parte superior e o restante em uma linha do tempo.

Criei um layout em uma única coluna com a imagem na parte superior, o conteúdo no meio e o título na parte inferior.

Em seguida, criei uma página com um módulo Blog e o módulo Timeline (Posts) - Vertical . Eu defino o módulo Blog para exibir três postagens em uma grade. Eu defini o módulo Timeline para ter um deslocamento de 3 para ignorar as postagens que o módulo Blog exibirá e começar na postagem número 4. Coloquei um módulo de texto entre eles com uma mensagem que alerta o visitante de que o conteúdo abaixo do blog as postagens ainda fazem parte do blog.

Resultado da página do blog

Aqui está a página do blog. O resultado é um layout limpo que orienta o leitor pelo conteúdo. É claro que isso não precisa ser apenas uma página de blog. Isso também pode ser usado para mostrar projetos para uma página de portfólio, arte, serviços, etc.

Pensamentos finais

As linhas do tempo são ótimos elementos de design para exibir dados cronológicos ou numéricos. O Divi Timeline Module adiciona essa funcionalidade ao Divi Builder, fornecendo uma maneira fácil de criar cronogramas personalizados ou usar seu conteúdo como páginas, postagens, mídia ou projetos para criar cronogramas para exibir em seus layouts.

O plugin é fácil de usar e todas as configurações de design que você esperaria de qualquer Módulo Divi estão aqui. Não demora muito para aprender e criar os layouts e páginas é tão rápido e simples quanto usar o Divi Builder. Se você deseja adicionar uma linha do tempo ao seu site, o Divi Timeline Module é uma ótima escolha.

Gostaríamos de ouvir de você. Você usou o Divi Timeline Module? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via Ollie The Designer / shutterstock.com