Construa seus próprios módulos com grupos de módulos Divi 5

Deseja criar módulos divi personalizados sem tocar em uma linha de código? Com os novos grupos de módulos do Divi 5, agora você pode combinar vários elementos em um único layout reutilizável - tudo de dentro do Visual Builder. Sem JavaScript. Sem php. Basta arrastar, soltar e projetar.

Neste guia rápido, mostraremos como criar seus próprios módulos usando os novos grupos da Divi. Você verá especificamente como construir a partir do zero uma sinopse, mesa de preços, depoimento ou qualquer outro tipo de módulo que você possa imaginar.

NOTA: O Divi 5 está pronto para ser usado em novos sites, mas não recomendamos a conversão de sites existentes para o Divi 5 ainda. Você verá algo de nós quando estivermos confiantes no processo de atualização.

Quais são os novos grupos de módulos da Divi?

Grupos, ou grupos de módulos, são um novo elemento de contêiner que combina vários módulos e/ou linhas em uma única unidade dentro de uma coluna. Isso tem a vantagem de agrupar vários elementos menores e permitir que você mova todo o grupo para onde precisar na página.

Os grupos de módulos podem ser movidos por toda a sua página sem problemas e se tornarão particularmente úteis quando o Flexbox e o recurso do construtor de loop forem lançados. Depois que o Loop Builder for lançado, você poderá usar grupos para criar layouts de blog personalizados, menus de rodapé, galerias de imagens e muito mais. Então, é útil agora, mas em alguns meses, será ainda mais impressionante de usar.

As linhas aninhadas eram outro recurso divi altamente solicitado que adicionamos ao Divi 5. Eles permitem que você coloque linhas dentro das linhas no conteúdo do seu coração. Embora o nome "grupos de módulos" possa fazer parecer que você só pode agrupar módulos, o oposto é verdadeiro. De fato, você pode usar linhas aninhadas dentro de grupos, o que abre a oportunidade de construir estruturas de layout infinitamente aninhadas e fazê -las fazer parte de um grupo reutilizável.

Como criar seus próprios módulos divi

Os grupos de módulos permitem criar seus próprios módulos dentro do editor. Você pode agrupar módulos e linhas aninhadas para criar arranjos complexos que se assemelham a alguns de nossos módulos maiores.

1. Crie seu próprio módulo Blurb

Nosso módulo Blurb embutido

O módulo Blurb é um item básico em muitos designs do Divi. É um módulo preferido, mas quando você o quebra, ele tem apenas algumas coisas que o fazem clicar. Esses são:

Um conteúdo de imagem/ícone, título/cabeçalho e corpo. Podemos criar um grupo de módulos e colocar esses módulos dentro dele: uma imagem ou ícone, um título e um módulo de texto. Juntos, esses três módulos podem reproduzir o mesmo conteúdo utilizável no módulo Blurb.

Anatomia de um módulo Blurb

Criando seu próprio grupo de módulos Blurb

Aqui está um exemplo de um módulo Blurb com um ícone no lado esquerdo e uma replicação visualmente idêntica do módulo Blurb usando a:

Grupo, linha interna, coluna (1) com um módulo de ícone e coluna (2) com um módulo de título e texto.

O raio-X é ativado para ver o esqueleto de cada um para ver suas semelhanças, mesmo que sejam construídas de maneira diferente.

A única coisa especial com esse arranjo é que a primeira coluna é definida como uma largura de 18% e a segunda ocupa uma largura de 82% (as opções de dimensionamento de colunas são novas com a atualização do recurso de linhas aninhadas).

Construir seus módulos como esse tem o benefício adicional de oferecer mais opções de estilo de design para cada elemento individual. O módulo Blurb facilita o posicionamento da imagem/ícone, mas tem suas compensações. Use a abordagem que o aproxima do design desejado.

2. Crie seu próprio módulo de tabelas de preços

Nosso módulo de tabela de preços embutidos

Alguns módulos Divi têm muito mais acontecendo. Esse é o caso do módulo da tabela de preços. Existem vários campos por tabela de preços, como você pode ver abaixo.

Anatomia de um módulo de tabela de preços

Criando seu próprio grupo de módulos de tabela de preços

Se recriarmos o módulo da tabela de preços usando grupos de módulos e módulos individuais, obteremos esse resultado.

Observe os sete campos de texto/opção separados por tabela. Visualmente, cada tabela possui três partes principais (título, preço e detalhes). Existem algumas maneiras de fazer isso dentro de um grupo, mas abaixo, usamos três linhas aninhadas para cada uma. A partir daí, usamos módulos de título e texto dentro de cada seção para recriar a tabela de preços.

O bom de usar o módulo da tabela de preços é que ele lida com a maior parte do layout e você recebe uma vantagem. Mas às vezes isso significa que é mais difícil trabalhar quando você deseja coisas específicas feitas com ele. Fazer trabalho extra para criar esse layout da tabela de preços com módulos mais simples nos dá mais controle e liberdade de design.

3. Crie seu próprio módulo de depoimento

Nosso módulo de depoimento embutido

Os módulos de depoimento da Divi são outro que tem muita coisa acontecendo. Inclui até quatro elementos de texto diferentes e um par de opções de imagem/ícone.

Criando seu próprio grupo de módulos de depoimento

O aspecto mais demorado de recriar o módulo de depoimento é acertar o espaçamento (especialmente em vários pontos de interrupção). Mas uma vez que você entende, as coisas são bastante diretas. Ao longo do layout do grupo, usamos algumas linhas e os módulos de ícone, imagem, cabeçalho e texto.

O bom de recriar alguns desses módulos é que você se abre para mais possibilidades. Alguns módulos mais complicados têm um layout opinativo que apenas CSS extensa pode manipular. Mas quando você o constrói, você tem mais liberdade para se movimentar em muitos desses subelementos.

Ao projetar assim, mais possibilidades de layout se abrem. Por exemplo, você pode fazer o que não é possível (pelo menos o que não é fácil) com o módulo de depoimento movendo elementos para posições completamente diferentes dentro do layout do grupo maior. Se o seu design exigir alguma flexibilidade, a criação de alguns desses fragmentados pode ajudá -lo a alcançar a precisão que você procura.

Também adoro a idéia de você ser capaz de criar um módulo de depoimento personalizado, como o acima, e usar o próximo construtor de loop para puxar depoimentos de um CPT. Isso lhe dará liberdade de design + a capacidade de construir mais rápido com dados e conteúdo estruturados.

Salve seu módulo personalizado como um elemento global

Quando seu novo módulo parecer certo, salve -o como um elemento global para uso em outras partes do seu site. Abra o menu Configurações do grupo. Clique na opção " Salvar para biblioteca ".

Um modal aparecerá onde você pode nomear seu módulo para facilitar o uso mais tarde. Alterne “ Salvar como global ” para armazená -lo na Biblioteca Divi. Qualquer alteração que você faça atualiza posteriormente todas as cópias em seu site.

Seu elemento global agora terá uma cor verde distinta para ajudá -lo a perceber que é global.

Você pode acessar todos os seus elementos globais salvos e outros itens da biblioteca no painel> Divi> Divi Library . Editar um elemento global aqui o atualizará em todo o site. Você também pode editar elementos globais diretamente nas páginas em que são usados ​​(e ele atualizará em todo o site).

Precisa do módulo em todos os sites que você constrói? Alterne “ Salvar para o Divi Cloud ”. O módulo está agora na sua biblioteca em nuvem, pronta para qualquer projeto em qualquer lugar. Os itens da biblioteca mantêm as coisas em um site, enquanto a Divi Cloud viaja com você de site para site. Use tanto para acelerar as compilações e inaugurar maior consistência.

Obtenha o Divi Cloud

Construa algo novo hoje

Grupos de módulos colocam um novo poder em suas mãos. Você pode moldar os layouts originais e exatamente o que você precisa. Comece recriando um módulo Blurb e veja como o processo se encaixa. Ao se acostumar a usar o Divi dessa maneira, você se notará criando designs ainda mais complexos, porque pode usar os módulos padrão ou criar o seu.

Muito do que foi coberto acima foi possível com o Divi antes que os grupos caíssem, mas eles facilitam as coisas. Especialmente quando lançamos o Flex e o Loop Builder, os grupos se tornarão um item básico do seu design com o Divi.

Pronto para subir de nível? Pegue um novo site e teste seu primeiro módulo personalizado hoje.