Se você usar o tema Divi ou Divi Builder, você trabalhará regularmente com módulos Divi. Eles são os blocos de construção do tema que permitem adicionar elementos de página, estilizá-los, controlá-los e utilizá-los para criar belos sites.
O problema é que quando você está no meio de um projeto ou tentando navegar pelo seu caminho Divi Builder, é difícil ver exatamente o que está disponível.
Este guia completo para os módulos Divi descreverá os 46 módulos principais contidos no Divi. Ele também destacará alguns módulos gratuitos e premium de desenvolvedores terceiros.
Tudo para que você possa aproveitar ao máximo o Divi para o seu site ou o de seu cliente.
Este artigo é um de nossos muitos Críticas Divi que CollectiveRay fez para cobrir os vários aspectos do tema Divi e do construtor. Verifique também nossa lista de exemplos de uso do tema Divi para criar sites deslumbrantes.
Precisa obter Divi a preço de banana? Atualmente, temos um desconto exclusivo de Elegant Themes:
Obtenha Divi com 10% de desconto apenas em abril de 2024
Se você precisar de mais motivação para comprar Divi e experimentar os vários módulos Divi aqui, uma atualização de desempenho recente fará isso.
Divi revolucionou recentemente seu código para que ele seja mais rápido e leve do que nunca.
Como parte da melhoria, a Divi encolheu CSS em 94% e introduziu CSS dinâmico que carrega apenas o que é necessário, estilos inteligentes para reduzir duplicatas e tamanhos de arquivo, removeu CSS de bloqueio de renderização, otimizou JavaScript e adicionou uma estrutura de PHP dinâmica para aumentar a eficiência das funções.
Módulos Oficiais Divi
Existem 46 módulos Divi atualmente disponíveis.
1. Acordeão
O Acordeão adiciona um módulo deslizante acordeão a uma página. Sabe quando você vê uma caixa de conteúdo com um elemento selecionável e ela desliza para baixo para revelar mais conteúdo? Isso é um acordeão.
Para Divi, um módulo de acordeão é um elemento selecionável contendo conteúdo. Selecione a primeira linha e ela se expande para revelar uma breve explicação ou visão geral. Selecione a próxima linha e a primeira linha fecha e a segunda é aberta. É uma forma elegante de incluir muito conteúdo em um espaço pequeno.
2. auditivo
O módulo de áudio fornece um reprodutor de áudio que pode ser colocado em qualquer lugar da página. Você pode vincular o player a um arquivo de áudio hospedado localmente para que seja reproduzido sempre que um usuário o selecionar.
No Divi, o módulo de áudio é um reprodutor de áudio simples, mas se você souber um pouco de CSS, poderá estilizá-lo sozinho.
3. Contadores de barra
Os contadores de barras são as barras de progresso que você vê em sites de toda a Internet. Feito corretamente, eles são uma medida imediatamente compreensível de algo e podem funcionar muito bem na situação certa.
Os contadores de barra Divi podem ser coloridos, personalizados para atender a quase todos os fins, ser configurados manualmente para níveis específicos e ser usados de várias maneiras.
4. Blog
O módulo Divi Blog permite que você coloque postagens de blog em qualquer lugar da página. Você não só pode posicionar essas postagens em qualquer lugar, como também estilizá-las de acordo com o seu tema.
O módulo Divi Blog oferece total liberdade sobre onde e como você exibe suas postagens. Você não está mais preso a onde o WordPress ou o seu tema pensam que você deve tê-los com este módulo.
5. Destaque
O módulo Blurb é um elemento de conteúdo completo com ícones e animações opcionais. Eles são úteis para descrições de produtos ou serviços nas páginas, pois o aspecto de animação opcional pode adicionar um pouco de interesse a uma página.
O módulo Divi Blurb possui uma variedade de ícones, cores e opções de animação, dependendo de como você os usa. Alguns estão contidos como padrões no módulo, enquanto outros podem ser implementados com CSS.
6. Botão
O módulo Divi Button fornece os meios para adicionar botões em qualquer lugar do seu site, em qualquer cor e em uma ampla variedade de formas e tamanhos. O design pode ser controlado no personalizador de tema e links e efeitos configurados ao mesmo tempo.
Eles são uma extensão simples, mas eficaz das opções de botão existentes no Divi.
7. Apelo à ação
Os apelos à ação desempenham um papel vital na conversão. Quanto mais atraentes você puder torná-los, mais eficazes eles serão. É aí que entra este módulo.
O módulo Divi Call to Action oferece uma maneira fácil de criar suas próprias frases de chamariz usando uma mistura de caixa de CTA, título, conteúdo e botão para ajudar a aumentar as conversões em qualquer lugar do seu site.
8. Contador de círculo
O módulo Contador de círculos funciona de maneira semelhante aos contadores de barras, mas usa um gráfico de círculo completo. Em vez de uma barra simples, o módulo adiciona um círculo completo com áreas cobertas dependendo da porcentagem que você marcar como concluída.
O contador de círculos funciona com o personalizador de tema e pode ser totalmente personalizado para se adequar a qualquer tema.
9. código
O módulo Divi Code é um elemento de código personalizado que você pode adicionar a qualquer página. Ele aceita códigos de acesso, CSS e HTML e pode ajudá-lo a realizar uma infinidade de coisas em uma página.
Eles funcionam de forma semelhante aos elementos CSS personalizados dentro dos temas, mas você pode colocá-los em qualquer lugar e fazer com que façam quase tudo, já que não são limitados pelo tema.
10. Comentários
O módulo Divi Comments permite que você adicione um comentário de seu blog em qualquer lugar da página. Por exemplo, uma recomendação ou feedback de um comentário de blog pode ser apresentado em uma página de produto.
Em vez de usar uma imagem, você pode incluir a coisa real e, em seguida, vincular ao comentário principal, o que apenas aumenta a autenticidade.
11. Formulário de Contato
O módulo Formulário de contato é útil se você não quiser usar um plug-in de formulário de contato de terceiros. Você pode implementar um formulário em qualquer lugar da página e estilizá-lo usando o personalizador de tema.
Você pode criar vários formulários, usar a validação de campo e a lógica condicional para fazer qualquer formulário funcionar.
12. Temporizador
Os cronômetros de contagem regressiva são freqüentemente usados para lançamentos de produtos, contagens regressivas para ofertas ou vendas especiais ou para criar ansiedade nos leitores.
O módulo Contador regressivo ajuda com isso, permitindo que você estilize um cronômetro, adicione sua própria contagem regressiva e coloque-o em qualquer lugar da página.
13. Divisor
Divisores são maneiras pequenas, mas importantes de dividir páginas da web e dar ao público uma pausa antes da próxima seção. A maioria dos temas da web parece incluí-los em uma reflexão tardia, e é aí que entra o Divi.
O tema Divi tem divisores, mas o módulo Divider adiciona mais.
14. Aceitação de Email
Os formulários de opt-in por email são essenciais para criar listas de email e aumentar o engajamento. Email ainda é uma ferramenta de marketing incrivelmente poderosa e o módulo Email Opt-in visa ajudar com isso.
Você pode criar formulários, inscrições em boletins informativos e elementos de geração de leads usando este módulo e, em seguida, vinculá-los ao seu programa de e-mail para ajudar a gerenciá-los com eficiência.
15. Portfólio filtrável
O módulo de portfólio filtrável é ideal para incluir uma seção de portfólio atraente em uma página. Você pode estilizá-lo, configurar suas próprias categorias e filtros e criar um portfólio totalmente interativo.
Alguns temas Divi vêm com elementos de portfólio integrados e Divi Builder os tem também, mas este módulo adiciona ainda mais.
16. galeria
O módulo Divi Gallery faz quase o mesmo para galerias. Ele permite que você exiba imagens e vídeos em qualquer lugar de uma página.
A galeria pode ser totalmente personalizada e incluir qualquer imagem de sua preferência. Você pode definir o estilo como uma grade ou controle deslizante e controlar muitos aspectos de sua aparência a partir do personalizador.
17. Imagem
O módulo Divi Image adiciona uma gama de opções ao exibir imagens em uma página. Você pode adicionar efeitos de lightbox, implementar carregamento lento, adicionar animações e fazer suas imagens realmente se destacarem.
As imagens têm um efeito poderoso no envolvimento e no tempo na página, portanto, fazer justiça às suas imagens faz todo o sentido. Este módulo pode ajudar com isso.
18. Entrar
O módulo Divi Login adiciona um formulário de login característico às páginas usando o estilo familiar do seu tema. O módulo pode ser estilizado de acordo com a página para ficar no fundo ou se destacar e ser notado.
A página de login fará o login automático do usuário no site sem redirecionar para a página de login padrão do WordPress.
19. Mapa
O módulo Divi Map pega o elemento de mapa padrão e adiciona opções extras de personalização e costuraless integração em uma página. Como os mapas podem desempenhar um papel fundamental em alguns sites, este é um complemento muito útil de usar!
O mapa se integra ao Google Maps para destacar locais ou adicionar elementos interativos. Ele pode ser estilizado para combinar com sua página também.
20. Contador de números
O módulo Number Counter é outro dispositivo gráfico para se comunicar com seu público. Em vez de usar gráficos de barra ou círculo, este módulo usa números simples para se comunicar.
Funciona da mesma forma que os outros. Estilize-o no personalizador de tema e coloque-o em qualquer lugar da página.
21. Pessoa
O módulo Person adiciona personalidades ao seu site. Se você deseja apresentar autores, fornecer informações sobre sua equipe ou algo mais, o módulo Pessoa é como você faz isso.
Você pode adicionar uma imagem, uma cópia da biografia, links de mídia social e postá-los em qualquer lugar do seu site. Existem opções de personalização também, se você precisar delas para caber em um tema existente.
22. portfólio
O módulo Portfólio baseia-se nas opções fornecidas pela Galeria, permitindo que você exiba seu trabalho de várias maneiras. Se você é um freelancer ou uma pequena empresa e quer mostrar seu trabalho, é assim.
O módulo pode trabalhar com grades, layouts de largura total, oferecer filtros de categoria e paginação. Existem também algumas personalizações que você pode aplicar, caso seja necessário.
23. Pós-navegação
A pós-navegação usa as opções padrão de leitura seguinte ou anterior e as torna mais atraentes. Embora o WordPress e muitos temas tenham esses recursos, a opção Divi adiciona ainda mais utilidade.
O módulo permite que você inclua botões atraentes de anterior e próximo na parte inferior das postagens para permitir que os leitores trabalhem em seu blog.
24. Postar controle deslizante
O módulo Post Slider é uma ótima maneira de mostrar suas postagens de blog. Ele usa um controle deslizante para rolar por uma série definida de postagens de blog para mostrar seu trabalho e atrair cliques.
Embora muitos outros plug-ins ofereçam listar ou mostrar postagens de blog, um controle deslizante pode incluir uma imagem colorida e um trecho que certamente atrairá. Pequenas personalizações também são possíveis com este módulo.
25. Título da postagem
O módulo Post Title é uma adição pequena, mas útil, que usa o estilo Divi para os títulos das postagens. Ele exibe o título e também tem a opção de adicionar uma imagem em destaque e quaisquer metadados que você queira exibir.
O módulo tem algumas opções de personalização que você pode usar para se encaixar em um tema, mas os padrões funcionam bem o suficiente para a maioria dos usos.
26. Tabelas de preços
As tabelas de preços são um daqueles elementos que poucos temas do WordPress parecem acertar. Divi não é um deles. As tabelas de tema padrão funcionam bem o suficiente, mas você pode sobrecarregar isso com o módulo Tabelas de preços.
Este módulo adiciona uma tabela personalizável que pode ser ajustada em qualquer página. Você pode alterar cores, moedas, número de recursos e efeitos conforme necessário.
27. Pesquisa
A pesquisa é outro recurso que geralmente é less do que o ideal. A função de pesquisa padrão do WordPress pode ser lenta e perder o óbvio. Alguns temas incluem pesquisa, o que muitas vezes decepciona. O módulo Divi Search muda tudo isso.
Esta é uma caixa de pesquisa simples que você pode colocar em qualquer lugar e com estilo adequado ao seu tema. Simples, rápido e muito eficaz.
28. loja
O módulo Divi Shop é uma excelente extensão do WooCommerce. Se você já administra uma loja, este módulo permite apresentar produtos em um elemento autônomo em qualquer lugar do seu site. É uma excelente oportunidade para fazer vendas cruzadas ou upsell.
O módulo permite classificar produtos, definir o estilo do elemento e realizar algumas personalizações na tela.
29. Barra Lateral
O módulo da barra lateral é um dos mais úteis de qualquer módulo nesta lista. Ele pega uma barra lateral padrão e dá a você controle total sobre sua aparência, quais recursos e como funciona.
O módulo permite construir barras laterais personalizadas usando o personalizador de tema e colocá-las em todas as páginas, algumas páginas ou páginas especificadas.
30. Controle deslizante
Os controles deslizantes podem ser assuntos controversos, mas não há dúvida de que podem ser eficazes se tiverem o estilo correto. O módulo Divi Slider faz exatamente isso.
É um controle deslizante simples que você pode colocar em qualquer lugar da página e personalizar para se ajustar ao design. Você também pode usar vídeo, imagens, controlar o tipo de slide e muito mais.
31. Acompanhamento de mídia social
Os botões Seguir são outro recurso da página que poucos temas conseguem acertar. Eles são um recurso tão simples, mas muitas vezes podem parecer desajeitados, não funcionar corretamente ou parecer que foram adicionados com um plug-in.
O módulo Social Media Follow é diferente. Ele adiciona alguns ícones atraentes com links e permite personalizá-los para atender às suas necessidades.
32. tabs
Se o módulo Acordeão não for o que você está procurando, talvez o módulo Guias seja. Esta é outra forma de apresentar muito texto sem sobrecarregar a página.
Este addon permite que você crie um elemento de conteúdo com uma série de guias horizontais que podem apresentar cópia, imagens ou vídeo.
33. Testemunho
O módulo Testemunho adiciona prova social a uma página. Todos nós sabemos o quão importante é a prova social e este módulo permite que você a adicione em qualquer lugar.
Você tem várias opções de estilo para ajustar o módulo na página, você pode apresentar uma imagem, alguma cópia e links dependendo de suas necessidades.
34. Texto
O módulo Texto permite que você acesse o editor de texto do WordPress para adicionar texto personalizado em qualquer lugar que você quiser. É outro complemento menor, mas útil, que oferece muito mais liberdade em termos de colocação de texto em uma página.
35. Alternar
O módulo Divi Toggle funciona de maneira semelhante ao Accordion, pois alterna as caixas de conteúdo para abrir e fechar. Enquanto o Accordion usa uma única caixa com vários slides, o Toggle usa caixas individuais para cada slide individualmente.
É uma alternativa útil ao acordeão, onde você pode ter apenas alguns elementos que deseja usar ou deseja que todos os elementos sejam abertos de uma vez.
36. Vídeo
Você já pode incorporar vídeo no WordPress, mas precisa usar todo o URL do iFrame na visualização do código. O módulo Divi Video salva tudo isso.
O módulo permite que você incorpore um vídeo enviado ou vinculado a qualquer lugar de uma página. Você também pode definir uma imagem personalizada em vez do primeiro quadro e personalizar o botão de reprodução.
37. Controle deslizante de vídeo
O módulo Video Slider grava o vídeo e adiciona um controle deslizante. Você pode definir um vídeo principal e apresentar vários outros por baixo e deixar o controle deslizante alternar entre eles.
O módulo permite personalizar a primeira imagem e o botão de reprodução, usar vídeos enviados ou vinculados e colocá-los em qualquer lugar da página.
38. Código Fullwidth
O módulo Fullwidth Code funciona com temas Divi de largura total e permite incorporar código em uma página, mantendo a formatação. É um módulo simples, mas eficaz, que pode ser útil para sites de instruções, sites de desenvolvedores ou outros.
39. Cabeçalho de largura total
O módulo Fullwidth Header permite que você crie um cabeçalho usando a largura total da página. Simples, mas muito eficaz. Você pode apresentar um título, um subcabeçalho e uma cópia junto com até dois botões.
40. Imagem de largura total
Imagem de largura total é a versão de largura total da imagem, mas funciona em costuralesslmente em designs de largura total. Ele tem todas as mesmas opções de exibição e personalização.
41. Mapa de largura total
O módulo Fullwidth Map funciona exatamente como Maps, mas para páginas de largura total. Você também obtém a mesma compatibilidade do Google Maps, opções de personalização e facilidade de uso desse módulo.
42. Menu de largura total
Fullwidth Menu fornece um menu personalizado que se estende por uma página. Ele pega o menu padrão do WordPress e o apresenta em um elemento personalizado. Você pode então personalizar o menu da maneira usual.
43. Portfólio de largura total
Este módulo pega o módulo Portfólio padrão e o faz funcionar com páginas de largura total. Possui as mesmas personalizações e recursos, mas funciona com este layout.
44. Controle deslizante de postagem de largura total
O Fullwidth Post Slider pega o módulo Post Slider e o faz funcionar em toda a largura de uma página. Ele tem as mesmas opções de utilitário e personalização desse módulo, oferecendo controle total sobre sua aparência para o usuário.
45. Título da postagem de largura total
O título da postagem em largura total é igual ao título da postagem, mas funciona em largura total. É algo que imaginamos que você usaria com moderação em uma página, mas este módulo Divi garante que você possa apresentar títulos de largura total sem qualquer codificação.
46. Controle deslizante de largura total
O Fullwidth Slider pega o módulo Slider e faz o mesmo. Faz funcionar falhalessly com um design de largura total. Este é um módulo mais útil, com controle total sobre a aparência dos slides.
Módulos WooCommerce Divi
O WooCommerce é muito bem servido pela Divi. Alguns estendem os recursos existentes nas páginas do WooCommerce, enquanto outros permitem que você exiba alguns elementos da loja em páginas que não sejam da loja.
Vale a pena conferir cada um se você estiver procurando por mais flexibilidade no design de sua loja.
1. Módulo Woo Breadcrumb
Breadcrumbs são usados com freqüência em sites para ajudar na navegação. O módulo Woo Breadcrumb para Divi faz a mesma coisa para sua loja. As opções são simples e incluem uma página do curso, página atual e link opcional e separador.
É um módulo simples, mas eficaz, que permite colocar trilhas descritivas na parte superior da página para ajudar os usuários a navegar.
2. Módulo Woo Title
Este módulo permite que você tenha controle total sobre os títulos dos produtos. Você pode alterar o título, estilizá-lo e adicionar links, planos de fundo e configurar conforme necessário. Ele se baseia na opção de título padrão, adicionando mais ferramentas de design e alguns espaçamentos avançados.
Além do mais, ao atualizar um título com este módulo, você pode configurá-lo para atualizar automaticamente em qualquer lugar do seu site.
3. Módulo Woo Image
O Woo Image Module oferece controle total sobre as imagens do produto em sua loja. As opções padrão são boas, mas isso vai além. Você pode adicionar várias imagens, usar um controle deslizante de miniatura e adicionar emblemas ou camadas gráficas para ofertas ou outra coisa.
O módulo tem algumas opções de personalização que você pode usar para estilizar a imagem e, em seguida, permite colocá-la em qualquer lugar que desejar em qualquer página.
4. Módulo Woo Gallery
O Módulo Woo Gallery baseia-se no Módulo de Imagem, incorporando imagens em uma galeria de produtos. Ele oferece opções semelhantes ao módulo Divi Gallery que mencionamos anteriormente e oferece a oportunidade de estilizar a galeria e colocá-la em qualquer lugar, em qualquer página.
Imagens vendem produtos, então esta é uma excelente opção se a capacidade de imagem padrão do WooCommerce não estiver fornecendo o que você precisa.
5. Módulo Woo Price
O Woo Price Module estende os preços e permite que você exiba produtos e preços em qualquer página, não apenas nas páginas da loja. É um elemento personalizável que exibe o preço atual, o preço antigo, o preço de venda e projeta esses preços de acordo com o seu tema.
Embora o plug-in WooCommerce padrão tenha muitas opções de preço integradas, este módulo vai um passo além e inclui a capacidade de promover em páginas que não são do produto.
6. Módulo Woo Adicionar ao Carrinho
O módulo Woo Add to Cart oferece controle total sobre a compra real. Com ele, você pode estilizar o botão Comprar agora da maneira que desejar. Do que ele diz até sua aparência e separe o botão do layout padrão do WooCommerce.
Se, por algum motivo, o preço padrão e o layout dos botões não funcionam para o seu tema, este módulo ajuda com isso. Você pode colocá-lo em qualquer lugar, estilizá-lo, mostrar uma opção de quantidade e até mesmo uma exibição de estoque restante.
7. Módulo de Classificação Woo
As avaliações são tudo no varejo. Os produtos com classificação elevada vendem mais do que os produtos sem classificação por uma margem significativa. O aumento de avaliações e provas sociais pode ser seu comando com o Módulo de Classificação Woo.
Ele permite que você coloque uma classificação em uma página, exiba comentários, exiba o número e a classificação média desses comentários e links para eles. Cada loja deve usar classificações e é assim que se faz.
8. Módulo Woo Stock
O Módulo Woo Stock faz exatamente o que diz na lata. Ele permite que você mostre um número de estoque preciso no visor do produto. Isso pode ajudar a aumentar a urgência, o que, por sua vez, aumenta a conversão.
Você pode definir o estilo de cada exibição para ajudar com essa urgência, destacando pouco estoque em vermelho ou alto estoque em verde, adicionar o texto 'Esgotado' e colocá-lo em qualquer lugar da página.
9. Módulo Woo Meta
O Módulo Woo Meta cuida de pequenos detalhes, como exibição de SKU, tags, categorias e dados complementares em uma página. Se você deseja incluir o máximo de dados possível nas páginas, este módulo o ajudará.
Não é um módulo de forma livre, mas pode pegar meta interno e exibi-los para que todos possam ver. Você pode estilizar o design.
10. Módulo de descrição Woo
O Módulo de Descrição Woo permite exibir uma descrição do produto para um produto específico em qualquer lugar dentro de um tema Divi.
É um módulo básico, mas utilizável, que permite promover produtos em páginas de blog ou páginas de serviço e definir o estilo dessa descrição.
11. Módulo Woo Tabs
O módulo Woo Tabs funciona de maneira semelhante ao módulo Divi Tabs. Ele instala um elemento de conteúdo com guias em uma página que você pode preencher com qualquer conteúdo que desejar.
As guias podem ser úteis para combinar várias fontes de informação em uma única página. Por exemplo, detalhes do produto, especificações do produto, opções de entrega e avaliações em uma única caixa com uma guia para cada um.
12. Woo Módulo de Informações Adicionais
O Módulo de Informações Adicionais Woo é para aqueles que querem mais. Tem produtos com opções extras? Este é o módulo a ser usado. Por exemplo, tamanhos ou cores diferentes seriam apresentados aqui.
Você pode estilizá-lo como quiser e colocá-lo em uma página usando o personalizador padrão. Outra adição simples, mas valiosa.
13. Módulo de Produtos Relacionados Woo
O Módulo de Informações Adicionais Woo deve precisar de pouca introdução. Lojas thrive em cross-selling e upselling e este módulo é como você faz isso. Você pode adicionar um Produtos relacionados seção para uma página e adicione informações de suporte conforme desejado.
Cada loja deve usar venda cruzada e se as opções padrão do WooCommerce não forem suficientes, este módulo funciona perfeitamentelessmentir com Divi.
14. Módulo Woo Upsell
O Módulo Woo Upsell faz quase a mesma coisa. Você pode adicionar isso às páginas do produto ou a qualquer página do seu site para vender produtos.
Os produtos apresentados neste módulo serão aqueles que você definiu como opções de upsell no WooCommerce. Este módulo permite apenas colocá-los em qualquer lugar de uma página.
15. Módulo de Aviso de Carrinho Woo
O Woo Cart Notice Module é uma opção de valor agregado que adiciona um simples aviso a uma página de produto notificando o usuário de que adicionou um produto ao carrinho. É uma interação simples, mas útil, que pode diferenciar uma grande loja de apenas uma boa.
As notificações podem ser estilos e com cores e fontes. A configuração padrão usará a cor do tema, mas você pode substituí-la facilmente se preferir.
16. Módulo Woo Comentários
O módulo Woo Reviews permite que você coloque análises de produtos para seus itens em qualquer página de seu site. É útil para páginas de promoção ou postagens de blog adicionar essa prova social vital para ajudar a influenciar uma decisão de compra.
O módulo permite definir campos específicos, mostrar contagens de comentários e influenciar a cor e o estilo. É um módulo útil se você promover em lugares diferentes das páginas de seus produtos.
10 dos melhores módulos Divi gratuitos
Existe uma grande variedade de módulos Divi gratuitos por aí e nem todos eles são criados iguais. Achamos que vale a pena tentar esses 10 módulos Divi gratuitos.
1. Divi Ajustador
Divi Tweaker é um módulo muito inteligente que ajuda a acelerar o Divi Builder e WooCommerce, remove Query Strings que podem retardar o carregamento da página e podem substituir arquivos de tema locais por arquivos servidos por um CDN.
O módulo também adiciona alguns recursos de design extras para celular e desktop, algumas animações e efeitos, transições de página, opções de layout e muito mais.
2. Módulo de Texto Avançado Divi
Divi Advanced Text Module é um módulo pequeno, mas muito útil, que expande as opções de texto existentes e adiciona algumas ferramentas úteis. Se você trabalha muito com texto, como fazemos, a capacidade de alterar a largura e a altura do elemento de texto faz uma grande diferença quando você está tentando aperfeiçoar o layout de uma página. Este módulo faz isso.
Ele também adiciona uma ferramenta de upload de imagem que reduz os tempos de design de uma maneira pequena, mas importante.
3. Divi Slim Builder
O Divi Slimbuilder é ideal se você criar páginas de destino ou páginas de site mais longas com o Divi Builder. Ele muda o layout da janela principal para que os elementos da página sejam mais finos. Ele também muda a maneira como os títulos das seções são exibidos para tornar todo o processo de design muito mais suave.
É uma coisa pequena, mas significa que você pode ver muito mais do que está acontecendo com o back-end do design sem ter que ficar rolando para cima e para baixo.
4. Extensão de Cartões de Artigo
A extensão dos cartões de artigo era aparentemente Elegant Themes'primeiro módulo Divi. É tão útil que ainda existe e é popular hoje. É outro módulo modesto que adiciona mais opções de estilo ao módulo Divi Blog para alterar a forma como os cartões de blog são exibidos.
As alterações são modestas e incluem efeitos de sombra, cores de fundo, a capacidade de estilizar a grade do blog e alterar a posição do título e meta do blog.
5. Pacote de expansão do Divi Icon
O Divi Icon Expansion Pack faz exatamente o que diz que faz. Ele adiciona uma série de ícones desenhados à mão ao Divi Builder para você usar em seu design. Existem centenas para escolher e pode personalizá-los todos de acordo com o seu tema.
Existe uma versão gratuita e uma versão premium deste módulo. O premium adiciona mais ícones e opções de personalização.
6. Expandir divisão
Expand Divi é outro módulo Divi autoexplicativo. Ele adiciona uma gama de recursos ao Divi, incluindo Lightbox, uma nova seção de postagens relacionadas, novas caixas de autor, novo elemento de postagens recentes, animador para pré-carregamento de página, ferramentas Font Awesome e muito mais.
O módulo não foi atualizado por um tempo, mas nós o testamos na última versão do WordPress e Divi e funcionou bem.
7. Traje de batalha para Divi
Além de ter um nome muito legal, Battle Suit for Divi tem muito a oferecer. É um módulo de expansão que adiciona mais opções de postagem, rodapé, galeria e imagem, adiciona Lightbox para imagem e vídeo, adiciona efeitos de imagem, título da postagem e opções de meta e uma tonelada de outras ferramentas.
Considerando que este é um módulo gratuito, há muita coisa acontecendo aqui e o módulo torna tudo acessível e muito fácil de usar.
8. Código Divi Simples
Simple Divi Shortcode pega uma ferramenta muito poderosa no WordPress, shortcodes, e permite que você os coloque em qualquer lugar dentro de outros módulos. É outra ferramenta muito simples que pode fazer uma grande diferença se você usar muito códigos de acesso em suas páginas.
Existe uma versão gratuita e uma versão premium deste plug-in, mas a opção gratuita faz tudo o que você provavelmente precisará fazer.
9. Extras Surbma Divi
Surbma Divi Extras adiciona mais alguns recursos ao Divi que alguns de vocês podem achar úteis. Uma coisa que o destaca é a opção de logotipo de texto. Você pode não precisar usá-lo com frequência, mas quando o faz, esta ferramenta por si só já faz valer a pena usar este módulo.
O módulo também adiciona opções de estilo, layout, menu e rodapé e tem uma opção de centro vertical muito organizada para cópia dentro de um módulo. Esta é outra daquelas ferramentas que podem ser um verdadeiro salva-vidas!
10. Popups para Divi
Popups for Divi é muito útil se você deseja criar um único popup, mas não deseja usar um plugin de popup dedicado para WordPress. Ele adiciona um recurso onde você pode criar um elemento dentro do construtor e usá-lo como um pop-up para marketing.
É uma solução simples para um problema sério e ideal para criar pop-ups básicos em uma página sem ter que usar ou pagar por um plugin de pop-up.
10 Módulos Premium Divi
Existem centenas de módulos Divi premium por aí. Alguns valem o investimento e outros nem tanto. Esses 10 definitivamente valem seu dinheiro!
1. Módulo Carrossel Divi 2.0
O Divi Carousel Module 2.0 ajuda a construir carrosséis para quase tudo dentro do Divi. Eles podem ser úteis para produtos, serviços, depoimentos e todos os tipos de recursos promocionais. Este plugin faz com que eles aconteçam.
Ele permite que você crie quantos carrosséis quiser e os salve como modelos para usar em qualquer lugar. Você tem controle total sobre a aparência e o comportamento deles e todo o projeto é feito dentro do construtor. Uma excelente opção para monitores.
2. Comércio eletrônico Divi
Divi Ecommerce trabalha com Divi e WooCommerce para criar um atalho para uma loja online. Tem alguns designs para usar como modelos, alguns elementos de página personalizados, conteúdo de demonstração para colocá-lo em funcionamento rapidamente e tudo o que você precisa para construir uma loja básica.
O módulo ainda vem com barras laterais, compartilhamento social, opções de layout de produto, relógios de contagem regressiva, módulos de produto de tendência e muito mais opções. Se você não gosta de nenhum dos demos Divi, este pode ser o módulo para você.
3. Divi Headers Pack
A Divi Headers Pack é enorme. Ele adiciona mais de 750 novos cabeçalhos, alguns funcionais, alguns novos designs. Adicionacanvas opções de menu, cabeçalhos responsivos, efeitos de menu, animações de menu e uma tonelada de ferramentas para estilizar cabeçalhos.
Este módulo tem um foco muito restrito, mas vale a pena o investimento se você estiver tendo problemas para encontrar o cabeçalho perfeito. Se não o encontrar aqui, não o encontrará em lado nenhum!
4. Divi Supremo Pro
Divi Supreme Pro inclui uma variedade de módulos para aprimorar sua criatividade ao usar Divi. Os módulos incluem Texto Gradiente, Flipbox, Divisor de Texto, Digitação Divi, Botão Supremo, Feed do Facebook e vários outros.
Há muito contido neste módulo, mais de 40 módulos diferentes e 7 extensões premium. Considerando o preço, Divi Supreme Pro é uma pechincha!
5. Calendário de Eventos Divi
O Calendário de Eventos Divi pode ser usado para construir um site completo de gerenciamento de eventos ou para adicionar eventos a um site padrão. Usa o padrão Divi Builder para ajudar a criar eventos e tem tudo que você precisa para estilizá-los e exibi-los.
Este módulo inclui um calendário, carrossel, feed de eventos e módulo de página para ajudá-lo a criar um site de eventos totalmente funcional ou seção de eventos e vale a pena conferir.
6. Table Maker
Algumas pessoas acham as mesas fáceis, enquanto outras as consideram uma bagunça frustrante. Se você está no último campo, o Table Maker módulo é para você. Ele permite que você incorpore rapidamente uma tabela em uma página e estilize tudo sobre ela.
Você pode adicionar imagens, ícones, textos, botões e até mesmo recolher linhas para celular. É um plugin muito poderoso que simplifica o trabalho de adicionar e estilizar tabelas a qualquer página e, por isso, vale a pena comprar.
7. Pop-up Modal Divi
Se você quiser utilizar pop-ups e pop-ups para Divi não é suficiente, Divi Modal Popup será. É um módulo rico em recursos que facilita o trabalho de criação de pop-ups a partir do carregamento da página, atraso de tempo e uma série de outros gatilhos.
Mais importante ainda, você pode incluir toda a gama de elementos da página, colocar seu pop-up em qualquer lugar, fazer com que seja acionado por qualquer coisa na página e adicionar animações ao próprio pop-up. Se você quiser aumentar o engajamento com pop-ups, é isso que você usa.
8. Ajudante responsivo Divi
O Divi Responsive Helper é uma ferramenta para ajudá-lo a ver exatamente como sua página será carregada no celular a partir do Builder. Você também pode alterar a aparência e o carregamento, alterar a ordem dos elementos e controlar totalmente a aparência do seu site em dispositivos móveis.
O módulo também inclui uma ferramenta de correção automática muito inteligente que pode reequilibrar frases ou parágrafos para que tenham uma aparência melhor. Só isso já faz a compra valer a pena!
9. Galeria de Maçonaria Divi
A Divi Masonry Gallery é ideal se você quiser mais de um portfólio ou página de blog. Ele pega o layout de alvenaria padrão e adiciona a capacidade de criar diferentes formas, alterar colunas, adicionar ou remover espaço, adicionar pop-ups modais e configurar uma galeria específica para celular.
Se você estiver projetando um site rico em imagens e quiser fazer mais com alvenaria, este módulo permite que você faça tudo a partir da interface familiar do Builder.
10. Divi Mad Menu
Divi MadMenu adiciona mais opções à seção do menu do Divi Builder. Se as configurações padrão não forem suficientes, este módulo adiciona mais. Ele também divide um cabeçalho em seções separadas para fácil personalização.
O módulo permite controlar como o menu funciona em diferentes tamanhos de tela, definir diferentes layouts para diferentes dispositivos, adicionar elementos Ajax para produtos, adicionar chamadas para ações e outros elementos também. É uma maneira poderosa de dominar cabeçalhos.
Se você estiver procurando por funcionalidades adicionais, confira nosso artigo sobre Plugins Divi ou check-out nossa análise do DiviFlash.
Como desenvolver seu próprio módulo Divi personalizado
Quer desenvolver seu próprio módulo Divi? Tem um problema que não é coberto por um módulo existente?
Esta parte do artigo está aqui para ajudar.
Vamos delinear os fundamentos do desenvolvimento de seu próprio módulo Divi personalizado. Você precisará de habilidades básicas de PHP para concluir esta seção como Divi Builder define módulos como classes PHP.
Primeiro você precisa criar uma extensão Divi. Você precisa fazer isso primeiro porque seu módulo Divi personalizado é implementado em uma extensão, tema ou tema filho e a extensão é a mais fácil de criar.
Leia este guia para criar sua extensão. Quando terminar, volte aqui para criar seu módulo.
Abra sua extensão e localize inclui / módulos
Crie um diretório chamado SimpleHeader
Crie um arquivo em SimpleHeader e chame-o de SimpleHeader.php
Cole o seguinte no arquivo e salve
class SIMP_SimpleHeader estende ET_Builder_Module {
public $ slug = 'simp_simple_header';
public $ vb_support = 'on';
public function init () {
$ this-> name = esc_html __ ('Cabeçalho simples', 'extensão simples simp');
}
public function get_fields () {
array return (
'cabeçalho' => array (
'rótulo' => esc_html __ ('Título', 'extensão simp-simples'),
'tipo' => 'texto',
'option_category' => 'basic_option',
'descrição' => esc_html __ ('Insira o título desejado aqui.', 'extensão simp-simples'),
'toggle_slug' => 'main_content',
),
'content' => array (
'rótulo' => esc_html __ ('Conteúdo', 'extensão simp-simples'),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'descrição' => esc_html __ ('O conteúdo inserido aqui aparecerá abaixo do texto do título.', 'simp-simples-extensão'),
'toggle_slug' => 'main_content',
),
);
}
renderização de função pública ($ unocessed_props, $ content = null, $ render_slug) {
}
}
novo SIMP_SimpleHeader;
Se você conhece o seu PHP, verá um cabeçalho básico que pode ser usado por Divi Builder. Você verá um cabeçalho, algum conteúdo e plano de fundo.
Agora adicione um pouco de HTML ao arquivo para que ele possa ser renderizado.
Adicione o seguinte depois de 'public function render ($ unocessed_props, $ content = null, $ render_slug) {'
return sprintf (
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> props ['cabeçalho']),
$ this-> props ['conteúdo']
);
}
}
novo SIMP_SimpleHeader;
Seu arquivo completo deve ter a seguinte aparência:
class SIMP_SimpleHeader estende ET_Builder_Module {
public $ slug = 'simp_simple_header';
public $ vb_support = 'on';
public function init () {
$ this-> name = esc_html __ ('Cabeçalho simples', 'extensão simples simp');
}
public function get_fields () {
array return (
'cabeçalho' => array (
'rótulo' => esc_html __ ('Título', 'extensão simp-simples'),
'tipo' => 'texto',
'option_category' => 'basic_option',
'descrição' => esc_html __ ('Insira o título desejado aqui.', 'extensão simp-simples'),
'toggle_slug' => 'main_content',
),
'content' => array (
'rótulo' => esc_html __ ('Conteúdo', 'extensão simp-simples'),
'type' => 'tiny_mce',
'option_category' => 'basic_option',
'descrição' => esc_html __ ('O conteúdo inserido aqui aparecerá abaixo do texto do título.', 'simp-simples-extensão'),
'toggle_slug' => 'main_content',
),
);
}
renderização de função pública ($ unocessed_props, $ content = null, $ render_slug) {
return sprintf (
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> props ['cabeçalho']),
$ this-> props ['conteúdo']
);
}
}
novo SIMP_SimpleHeader;
Em caso afirmativo, agora é hora de criar o React Classe de componente que permite Divi Builder renderizar o módulo.
Crie um arquivo e chame-o de SimpleHeader.jsx
Cole o seguinte e salve-o
// Dependências Externas
importar React, {Component, Fragment} de 'react';
// Dependências internas
import './style.css';
class SimpleHeader estende Component {
slug estático = 'simp_simple_header';
render () {
Retorna (
{this.props.content ()}
</div>
);
}
}
exportar SimpleHeader padrão;
Navegue até includes / modules / index.js no seu arquivo de extensão
Adicione e salve o seguinte
// Dependências internas
importar SimpleHeader de './SimpleHeader/SimpleHeader';
exportação padrão [
Cabeçalho simples,
];
Adicione o seguinte a SimpleHeader.jsx após
render () {
Retorna (
e salvá-lo.
{this.props.heading}
O arquivo completo deve ter a seguinte aparência:
// Dependências Externas
importar React, {Component, Fragment} de 'react';
// Dependências internas
import './style.css';
class SimpleHeader estende Component {
slug estático = 'simp_simple_header';
render () {
Retorna (
{this.props.heading}
{this.props.content ()}
);
}
}
exportar SimpleHeader padrão;
Abra o style.css do seu módulo e adicione
.simp-simple-header-header {
margem inferior: 20px;
}
É isso para desenvolver seu módulo Divi. Tudo que você precisa fazer agora é testá-lo!
Abra o Divi Builder, localize seu módulo Cabeçalho Simples e tente usá-lo em uma página. Se você acertou o código, verá uma opção de cabeçalho simples.
Resumo de Módulos Divi
Incluímos mais de 70 módulos divi gratuitos e premium cobrindo tudo, desde a criação de pop-ups até a adição de recursos de design extras para Divi Builder. Alguns são módulos de nicho que você não usará com frequência, mas alguns são essenciais para o uso eficiente e tranquilo de Divi Builder.
Achamos que eles representam um corte transversal do que está disponível, o que funciona e o que tem um preço razoável. O que você acha?
Você usa algum desses módulos Divi? Tem algum módulo a sugerir?
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!
Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.
e muitos mais ...