Calendário de eventos é o calendário de eventos padrão para WordPress. Funciona bem com Divi, mas para adicioná-lo aos seus layouts Divi, você deve usar um shortcode. O estilo é feito na guia de configurações no painel do WordPress. Isso dificulta a integração do estilo ao seu layout Divi. Um plugin de terceiros chamado Módulo Calendário de Eventos Divi resolve esse problema exibindo o Calendário de eventos como um módulo Divi. Neste artigo, veremos o módulo Calendário de eventos Divi e o que ele pode fazer.

Instalação do módulo de calendário de eventos Divi

Primeiro, instale o plug-in de calendário de eventos . Se este plugin não estiver instalado, você receberá uma mensagem de erro informando que ele precisa ser instalado e fornecendo um link para a página do WordPress para o plugin. 

Baixe e ative o plug-in Divi Events Calendar Module e ative-o.

Para meus exemplos, criei um conjunto de eventos para Divi e WordPress com diferentes categorias, organizadores, locais e datas.

Módulo Calendário de Eventos Divi

Dois novos módulos foram adicionados ao Divi Builder. O primeiro, denominado Divi Events Calendar, exibe os eventos como cartões em uma lista, semelhante a postagens de blog. O segundo, chamado Divi Event Calendar View, exibe os eventos em um calendário. O módulo Calendar View ainda está em beta. Atualmente, tem funcionalidade limitada. Veremos os dois módulos.

Para o primeiro, estou usando o pacote de layout de página do Meetup Schedule. Substituí os eventos desta página pelo módulo Calendário de Eventos Divi.

Guia Conteúdo

O módulo exibe eventos automaticamente. Inclui as guias Divi padrão. A guia Conteúdo adiciona conteúdo e elementos. Adiciona um fundo azul por padrão.

Conteúdo

seção Conteúdo permite inserir o número de eventos a serem exibidos, categorias a serem incluídas, formato de data, comprimento do snippet e número de deslocamento. Neste exemplo, limitei os eventos a 2 na categoria Divi Events. Eu configurei o deslocamento para 1.

Elementos

Elementos permite que você escolha quais elementos exibir. Isso inclui a imagem em destaque, o organizador do show, o URL do site da Web, data, hora, local, local, trecho, categoria, botão mais informações e eventos passados ​​(o que limita o módulo a exibir apenas eventos passados). Configurei para ocultar a imagem em destaque e o organizador do show.

Guia Design

A guia Design adiciona opções de layout, miniatura, texto do título, texto de detalhes, texto extraído e o botão Mostrar mais. O texto funciona da mesma forma que o módulo de texto normal. Analisaremos mais detalhadamente o layout, a miniatura e o botão Mostrar mais. O sombreamento de bordas e caixas funciona para cartões individuais. Isso é algo que eu queria ver em muitos módulos Divi.

Provisão

O layout permite escolher o número de colunas (1-4), alinhamento da imagem (esquerda ou superior), cor de fundo, margem e preenchimento. Coloquei a imagem no topo e mudei o fundo para branco. Azul sempre aparece entre as cartas de evento.

Para este exemplo, defini as colunas como 2 e adicionei uma margem e preenchimento para fazer os cartões se ajustarem ao fundo azul, criando uma borda.

Aqui está o exemplo com 3 colunas. Posso ajustar o texto do url para caber. Em 3 colunas, o posicionamento da imagem não é uma opção.

Este tem 2 colunas com as imagens à esquerda.

O adesivo

As configurações de miniatura incluem margem, preenchimento, largura, cantos, estilos de borda, largura da borda, cor da borda e estilo da borda. Neste exemplo, defino o preenchimento como 75 para trazer a imagem para o centro do mapa e a largura como 100.

Para este exemplo, eu defini os cantos para 36 pixels e dei a ele uma largura de borda de 9 pixels. Eu estilizei as cores das bordas e dei um estilo de inserção.

texto

Ajustei o texto do título para combinar com o layout, com peso leve Roboto e em maiúsculas. Deixei o extrato e o texto detalhado por padrão.

Botão Mostrar mais

Neste exemplo, usei o estilo do layout do botão. Defini o tamanho para 14px, ajustei a cor de fundo, alterei a largura e o raio da borda e selecionei Roboto em negrito em maiúsculas. Deixei o efeito de foco padrão, que aumenta o tamanho do botão, como você pode ver no botão superior. Também deixei o texto padrão, que diz VIEW.

Para este exemplo, usei a maioria das configurações dos exemplos anteriores, mas com algumas modificações. Removi o fundo azul, alterei o raio da borda e removi a borda. Também limitei as categorias para mostrar apenas eventos Divi (uma das duas categorias de exemplos que criei). O limite é definido em 2 eventos.

Para este exemplo, configurei o layout para mostrar 3 colunas. Removi a borda do botão e centrei o alinhamento do botão. Também removi o URL, alterei a cor do texto de detalhe, alterei o texto do botão e dei aos cartões uma sombra para que se destacassem no fundo.

Módulo de Visualização do Calendário de Eventos Divi

Aqui está uma visão geral do segundo módulo. Ele fornece uma visão de calendário de seus eventos. O calendário inclui mês, ano, navegação e destaca a data de hoje. Esta é a página Eventos do Pacote de Layout da Galeria de Arte. Passar o mouse sobre um evento exibe uma janela pop-up contendo as informações. Esta é a visualização padrão.

A guia Design adiciona parâmetros para o texto do módulo. Incluirá opcionalmente configurações para título, mês, etc. Neste exemplo, ajustei o peso, a cor e o tamanho do texto. Isso ajusta as datas no calendário.

Para este exemplo, mudei a família da fonte para Roboto e ajustei a cor, tamanho, espaçamento entre letras e altura da linha. Também dei ao texto uma sombra para ajudá-lo a se destacar. Todo o texto, exceto o botão “Hoje”, é afetado pelo tamanho, espaçamento e altura.

Você também pode ajustar a borda, planos de fundo, sombras de caixa, etc. Neste exemplo, defini o texto do módulo em maiúsculas. Isso inclui o texto do mês e do dia. Eu também ajustei o fundo, dei ao módulo uma borda (usando o estilo de borda dupla) e dei a ele uma sombra de caixa. A borda é da mesma cor do texto.

Para este, incluí as configurações de cores e sombras para a caixa de layout. Gosto da maneira como funciona com o design do layout. Mesmo com seu número limitado de ajustes, vale a pena usar o módulo de exibição de calendário com seus layouts Divi.

Preços e documentação

Você pode obter o módulo Calendário de eventos no site do desenvolvedor por US$ 35. Inclui o uso ilimitado do site da Web, suporte vitalício e atualizações e uma garantia de reembolso de 30 dias.

A documentação é coberto com um vídeo e um pequeno artigo para guiá-lo durante a instalação e alguns artigos curtos para mostrar como usá-lo e como fazer atualizações. Tive a sorte de não precisar consultar a documentação (os módulos são muito intuitivos), mas fico feliz em ver que está disponível quando é necessário.

Outros recursos

• Como criar agendas com o Calendário de Eventos
• Como configurar o plug-in do WP Events Manager
• 10 plugins para integrar um calendário no WordPress
• 10 plugins para gerenciar eventos no WordPress

Pensamentos finais

Esta é a nossa opinião sobre o plugin do Módulo de calendário de eventos Divi para Divi. Os módulos funcionam como qualquer módulo Divi, então é fácil definir o estilo de seus eventos para trabalhar com seus layouts Divi. O módulo de calendário principal inclui ajustes de preenchimento, margem e borda para os elementos individuais do módulo. Isso dá a você o controle de estilizá-los como cartões individuais.

Ele permite que você insira as categorias a serem exibidas se desejar ter mais controle. Esta é a única coisa que funciona de forma diferente de outros módulos que permitem selecionar suas opções em uma lista suspensa. Eu prefiro a opção suspensa. Isso é algo que eu gostaria de ver mudado no futuro. Eu também gostaria de poder escolher eventos com base em locais, organizadores de eventos, etc.

O próprio calendário de eventos é uma ótima ferramenta para qualquer site da Web. É útil para sessões fotográficas, concertos, exposições de produtos, eventos comerciais, reuniões e muito mais. Se você quiser usar o plugin do Calendário de Eventos com o seu site Divi, vale a pena dar uma olhada no plugin do Calendário de Eventos Divi.