Divi Plugin Highlight: Divi Module Builder

O Divi Builder inclui muitos módulos para ajudá-lo a adicionar praticamente qualquer elemento de design aos seus layouts, mas e se você quisesse criar seus próprios módulos? Um plug-in de terceiros chamado Divi Module Builder oferece essa capacidade.

Neste artigo, vou dar uma olhada no plug-in e ver o que ele pode fazer e como é fácil de usar. Requer Divi 3.0.50 ou superior e funciona com Divi e Extra. Ele está disponível no site do desenvolvedor: DiviPlugins.com.

Instalando o Divi Module Builder

Depois de ativar o plug-in, clique em Página de ativação DMB . Como alternativa, você pode ver essa tela acessando Módulos personalizados no painel e clicando em Licença .

Insira sua chave de licença e clique em Ativar licença . Um novo menu é adicionado ao painel denominado Módulos personalizados . Neste menu, você encontrará tudo o que precisa para construir seus módulos.

Adicionar Módulo

Os módulos são criados no menu do painel em Módulos personalizados , Adicionar módulo . Existem duas áreas que você usará para criar o módulo. A área à esquerda é onde você criará os campos. A área à direita é onde você adicionará o código que os campos usarão. Você pode tornar o módulo padrão ou largura total. Você pode salvar o rascunho ou publicar quando estiver pronto. Assim que o módulo for publicado, ele aparecerá no Divi Builder.

Campos

Seu módulo pode ter quantos campos você desejar. Cada campo possui propriedades de campo dentro dele. Aqui está uma visão mais detalhada de cada uma das propriedades do campo:

Rótulo do campo - o rótulo que será exibido como o título do campo na guia de conteúdo do módulo.

Identificador de campo - um valor exclusivo que você usará para fazer referência ao campo em HTML. Use apenas letras minúsculas, números e sublinhados para identificadores de campo.

Descrição do campo - adicione sua própria descrição para explicar a finalidade do campo. Isso será exibido abaixo da entrada na guia de conteúdo do módulo. Este campo é opcional, mas recomendo adicionar informações ou exemplos para ajudar os usuários.

Tipo de campo - determina o tipo de entrada que o usuário vê. Escolha vários tipos de campo na caixa suspensa, incluindo texto, área de texto, cor, imagem, alternador Sim / Não e ícone.

Guia Design - adiciona controles de fonte para este campo dentro do Design do módulo. Você verá esta opção se selecionar texto ou área de texto. Você terá que identificar a qual elemento aplicar os controles de fonte, adicionando uma classe no HTML.

Ocultar campo - dá aos usuários controle sobre a fonte de um elemento na saída HTML sem permitir que eles controlem o conteúdo desse elemento. Esta opção só estará disponível se um tipo de campo de texto ou área de texto for selecionado.

Adicione seu rótulo de campo, identificador, descrição, escolha o tipo de campo, ative a guia de design ou selecione para ocultar o campo. Reorganize os campos clicando nas setas para cima / para baixo em cada campo. Cada seção e campo fornece uma descrição e exemplo.

Código

Adicione HTML, PHP, CSS e JavaScript personalizados para controlar a saída. Os campos HTML podem receber consultas personalizadas e PHP. Você precisará habilitar o PHP antes que ele reconheça o código. Caso contrário, ele imprimirá o código na tela. Tanto o HTML quanto o PHP usam identificadores de campo para referenciar os campos.

Os atalhos de código são fornecidos como botões nos campos de código. Isso inclui tags e identificadores de campo. Adicione seus identificadores de campo e ele estará disponível na parte inferior da área do código, onde você pode clicar para adicioná-los ao seu código. Os identificadores HTML são vistos como botões laranja e PHP é visto como verde. Você pode usar mais do que o que está disponível como atalhos, mas eles estão aqui para ajudar a acelerar o tempo de desenvolvimento.

Criando um Módulo

Aqui está um exemplo rápido de criação de um módulo. O título será o nome que aparece no módulo no Divi Builder. Eu adicionei o rótulo do campo, a descrição, escolhi Texto como o tipo de campo e criei um identificador de campo.

Salvei como rascunho para que o identificador apareça nos atalhos de HTML. Em seguida, selecionei a marca H1 nos atalhos, coloquei meu cursor entre as marcas e selecionei o rótulo nos atalhos HTML. Assim que terminei, cliquei em publicar. O resultado deve ser um módulo com um campo onde os usuários podem inserir texto. A saída exibirá o texto como um cabeçalho 1.

O módulo agora aparece no Divi Builder. Posso adicionar à página como qualquer módulo Divi.

A guia Conteúdo inclui os campos que adicionei com meus rótulos.

O módulo exibe o texto que eu inseri no campo. Como adicionei HTML para exibi-lo como H1, o texto tem automaticamente uma propriedade H1. Eu poderia adicionar a guia Design para incluir mais recursos de personalização. Isso exigirá algum código para direcionar o campo corretamente.

Módulos

Você pode ver a lista de módulos no menu do painel. Vá para Módulos personalizados , Módulos . Aqui você pode editar ou excluir seus módulos. Mostra se o PHP está ativado ou desativado para cada módulo. Se você deseja clonar um módulo, você terá que visualizá-lo em Configurações .

Configurações de Módulo Personalizado

O menu Configurações fornece um local onde você pode gerenciar seus módulos. Você pode visualizar os módulos publicados e de rascunho.

Você pode cloná-los, o que lhe dá um bom lugar para começar em um módulo que precisa de muito código que você usou em outro módulo. Você também pode editar, desabilitar ou habilitar o PHP (o que é útil se você estiver bloqueado no editor por causa de um erro de código - eu fiz isso e usei esse recurso para editar o módulo) e importar e exportar seus módulos.

Adicionar Dependência

Aqui você pode adicionar dependências CSS e Javascript de terceiros. Adicione-os como URLs externos ou internos. Escolha CSS ou Javascript na caixa suspensa, adicione o nome e adicione o URL. Eles podem então ser usados ​​em qualquer página. Ele dá um exemplo de como usar o Font Awesome. Essa é uma maneira excelente de criar uma dependência em um local e usá-la em qualquer lugar.

Exemplo de criador de módulo Divi - grade de blog personalizada

Em vez de criar um módulo 'ok' como exemplo, estou mostrando o exemplo incrível que o desenvolvedor criou - Custom Blog Grid (disponível para download no site do desenvolvedor gratuitamente). Inclui 3 campos, HTML, PHP e CSS. Aqui está uma olhada em cada um.

Módulo de grade de blog personalizado

O campo 1 é rotulado como Categorias, usa categorias como identificador e o tipo de campo é definido como Texto.

O campo 2 é denominado Efeito de imagem em preto-e-branco. O identificador é filtro e o tipo de campo é Sim / Não Alternar. O filtro é criado em CSS.

O campo 3 é denominado Post Title e usa post_title como o identificador. O tipo de campo é definido como Texto e tem a guia Design ativada. Veremos personalizações para este campo no módulo. Este campo recebe uma classe H2 em HTML.

PHP é selecionado para que possa ser usado na caixa de código de saída HTML.

CSS personalizado é adicionado à caixa de saída de CSS.

Aqui está o Javascript. Você precisa ter um bom conhecimento de HTML, PHP, CSS e Javascript para obter o máximo deste plug-in. Em outras palavras, este é um plugin para desenvolvedores.

O módulo de grade de blog personalizado no Divi Builder

Assim que o módulo for publicado, você o encontrará no Divi Builder.

As configurações que aparecem no módulo e seus rótulos variam de acordo com as seleções feitas. Este módulo permite adicionar categorias, ativar o efeito preto e branco e adicionar um título de postagem na guia Conteúdo. Também inclui configurações de fundo (que é o padrão para módulos).

A guia Design está habilitada para este módulo. Inclui configurações de texto, texto do título da postagem, borda, espaçamento e animação.

Resultados da grade do blog personalizado

O resultado é uma grade de blog com animação flutuante. Habilitei o modo preto e branco para que as imagens sejam exibidas em preto e branco, a menos que eu esteja pairando sobre elas. Eu prefiro essa forma de pairar - para revelar a imagem ao pairar em vez de obscurecê-la.

Neste eu desativei o modo preto e branco, mudei a fonte do título e adicionei um gradiente de fundo. Mais ajustes podem ser adicionados no código para alterar o botão, adicionar sobreposições, etc. Se você pode codificá-lo, você pode fazer com que ele faça praticamente qualquer coisa que você possa imaginar.

Licença e Documentação

Existem três licenças para escolher: única, ilimitada e vitalícia. A licença ilimitada cobre sites ilimitados e inclui 1 ano de atualizações e suporte. A licença Lifetime Unlimited Sites inclui atualizações e suporte vitalícios.

A documentação é fornecida no site do desenvolvedor. O código de exemplo está incluído junto com as instruções passo a passo.

Pensamentos finais

Divi Module Builder é um plugin poderoso com muito potencial nas mãos certas. Uma vez que requer um bom conhecimento de código, não é para todos. Isso dá aos desenvolvedores uma excelente ferramenta para criar e compartilhar módulos. Gosto que você possa importar e exportar de um site para outro. Cada site que usa o módulo precisará do plugin instalado. Se você tem um bom conhecimento de código e está interessado em criar seus próprios módulos Divi, vale a pena dar uma olhada no Divi Module Builder.

Nós queremos ouvir de você. Você já experimentou o Divi Module Builder? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via aliaksei kruhlenia / shutterstock.com