Destaque do plug-in Divi: Divi Widget Builder

Publicados: 2017-12-04

Você já quis colocar módulos Divi e layouts nas áreas de widgets? Apenas o pensamento de layouts Divi em barras laterais e rodapés me dá ideias para possibilidades de design além do meu próprio nível de habilidade. O que é interessante é que é fácil de fazer, não importa o seu nível de habilidade. Como? Com um plugin de terceiros chamado Divi Widget Builder.

Divi Widget Builder permite exibir qualquer layout Divi em sua Biblioteca Divi dentro de um widget. Isso inclui módulos únicos e páginas completas, incluindo todos os seus recursos e ajustes. Funciona com Divi e Extra. Neste artigo, vamos dar uma olhada no Divi Widget Builder e ver como é fácil adicionar layouts Divi às suas áreas de widget.

Você pode comprar o Divi Widget Builder no site da editora.

Instalação e ativação do Divi Widget Builder

Faça upload e ative o plugin normalmente.

Depois de ativar o plug-in, você precisará inserir sua chave de licença. Navegue até Divi , Divi Widget Builder no menu do painel e insira sua chave de licença. Não há outra configuração necessária para usar o plug-in, mas você precisará de layouts Divi para usar nos widgets.

Biblioteca Divi

Você pode usar qualquer layout Divi no Divi Widget Builder. Eu não recomendo construir layouts como você faria com uma página ou postagem. Por exemplo, uma grade de 3 ou 4 colunas (para blogs, projetos, sinopses, etc.) ficaria estranha na barra lateral. No entanto, isso é fácil de corrigir criando layouts em colunas únicas. Em outras palavras, crie layouts especificamente para a barra lateral ou rodapé.

Módulos individuais funcionam bem na barra lateral. Exemplos incluem:

  • Mapas
  • Formulários de contato
  • Contadores regressivos
  • Balcões de bar
  • Botão
  • Blog
  • Conecte-se
  • Contador de números
  • Pessoa
  • Testemunho

Crie um layout e use esses módulos com sobreposições de fundo, combine-os, ext., Para criar alguns widgets realmente interessantes. O céu é o limite.

Criando um Layout

Crie seu layout acessando Divi , Divi Library no menu do painel. Selecione Adicionar novo no canto superior esquerdo.

Dê um nome ao layout e selecione o tipo de modelo no menu suspenso. Role para baixo e você pode selecionar uma categoria para o seu modelo, se desejar. Você terá outra chance de selecionar a categoria ou até mesmo adicionar novas categorias na próxima tela. Clique em Enviar quando terminar.

Agora, basta construir seu layout normalmente.

O widget Divi Widget Builder

Um novo widget é adicionado aos seus widgets, chamado Divi PB Widget. Para vê-lo, vá para Aparência , Widgets no painel. Solte este widget em qualquer área de widget (incluindo barras laterais, rodapés ou qualquer um que você tenha criado). Ele fornece uma caixa suspensa onde você pode escolher qualquer item da Biblioteca Divi para exibir no widget.

Existem duas outras seleções:

Exibir título do item da biblioteca - exibe o nome do layout na barra lateral do seu site. Funciona como um título para o widget. Desmarque para ocultar o nome.

Adicionar itens da biblioteca para serem usados ​​como widgets aqui - clicar na palavra 'aqui' nessa frase (bem, não a minha frase) leva você para a Biblioteca Divi onde você pode criar seus layouts. Gosto que este link seja incluído, pois ajuda a evitar confusão sobre onde criar os layouts e fornece acesso rápido à biblioteca.

Depois de fazer suas seleções, clique em Salvar e o novo layout será aplicado ao local do widget em que você colocou o Divi PB Widget. O widget funciona até mesmo com suas próprias áreas de widget personalizadas.

Exemplos do Divi Widget Builder

Aqui está alguns exemplos bastante que eu criei. Eles são simples, mas, com sorte, darão uma ideia de como funcionam.

Mapa

Este exemplo exibe um feed de blog com uma barra lateral. A barra lateral é adicionada em um layout 2/3 Divi com um módulo de blog à esquerda.

Este exemplo usa um único módulo de mapa. Incluí o nome do layout. Eu não estilizei o módulo de mapa, então ele tem uma caixa branca ao redor. Isso é facilmente ajustado. Se eu fizer alterações no módulo, essas alterações serão refletidas no widget quando eu atualizar a página.

Eu poderia simplesmente colocar o mapa dentro do layout Divi, mas colocá-lo na barra lateral exibe o mapa, independentemente da postagem do blog que alguém está lendo. Esta é a postagem padrão do blog sem usar um layout Divi. Usando um layout, eu poderia criar um novo mapa para cada postagem, criar uma nova área de widget e escolher qual mapa exibir em cada postagem individualmente.

Temporizador de contagem regressiva

Este layout usa vários módulos de cronômetro de contagem regressiva para criar um único widget. Eu estilizei cada um separadamente.

Os módulos mostram uma contagem regressiva para o próximo jogo - uma para cada uma das ligas que o blog cobre. Cada um dos cronômetros de contagem regressiva usa cores específicas para os logotipos da liga e incluem gradientes. Eu sei - deixei de fora a NHL e vários outros. Desculpe por isso.

Post Slider

Este adiciona um controle deslizante de postagem à barra lateral. Incluí o botão ler mais do controle deslizante de postagem, a navegação por pontos e as setas. Também adicionei mais widgets regulares para ver como eles se encaixam.

Sobre mim

Este usa um layout de página em vez de apenas um módulo. Eu criei um layout a partir de uma postagem (em vez de criá-lo na Biblioteca Divi) usando o layout Sobre mim que vem com o Divi. Modifiquei o layout para que tudo ficasse em uma única coluna e reduzi o tamanho da fonte do título do cabeçalho. Em seguida, salvei o layout na biblioteca para que ficasse disponível para o Divi Widget Builder.

A página em si é um layout do Divi Builder chamado Creative Agency. Dei a ele uma barra lateral esquerda e escolhi o layout Sobre mim para o widget.

Este é o mesmo layout, mas em vez de exibir a barra lateral padrão do WordPress, recriei o layout usando uma Seção especializada. Isso resulta em um design muito mais agradável do que a barra lateral padrão do WordPress, pois dá mais largura à página e o widget pode ser colocado sob o módulo de cabeçalho Divi de largura total.

A seção de especialidades permite 3 colunas em uma linha, então reduzi para 3 sinopses em vez de 4 e coloquei a barra lateral na coluna da esquerda. Eu tornei a seção de especialidade de largura total e alterei o layout da página em Divi Post Settings no canto superior direito da barra lateral esquerda para Fullwidth .

Formulário de Contato

Este usa o layout Nossa equipe que vem com o Divi Builder. Estou usando a barra lateral direita. Coloquei um widget Monarch na barra lateral junto com o Divi Widget Builder, que exibe um formulário de contato.

Área do widget de rodapé

Este possui 3 widgets Divi Widget Builder na área de rodapé. Escolhi um layout de rodapé de 3 colunas e coloquei um módulo de formulário de contato, um módulo de pessoa e um módulo deslizante de blog nas 3 áreas. Este é o incrível pacote de layout Code School de Jason Champagne. A imagem para a postagem do blog também é deste layout. Você pode baixar o layout do blog do ET aqui: Baixe um pacote de layout de gerenciamento de aprendizagem de tirar o fôlego (LMS) grátis para Divi.

Este rodapé usa dois layouts diferentes que criei como postagens. Ambos têm imagens de fundo. O widget à esquerda usa vários módulos de texto, um módulo de acompanhamento social e um módulo divisor. O item de menu abaixo dos botões sociais são links clicáveis. Ele também usa uma sobreposição para escurecer a imagem de fundo. O widget à direita é um módulo de formulário de contato.

Usando Divi Widget Builder com Extra

Este é o mesmo layout de Nossa Equipe com Extra. Eu tinha feito originalmente o formulário de contato usando as configurações padrão do módulo. Eu queria mesclar o plano de fundo, então tornei o plano de fundo transparente. Também alterei a cor do texto do botão para torná-lo visível contra o fundo escuro.

Licença e Documentação

Existem quatro licenças disponíveis:

  • Único local $ 7,00
  • 3 sites $ 19,00
  • Sites ilimitados $ 39,00
  • Vitalício $ 89,00

Inclui um ano de suporte e atualizações automáticas. A documentação é fornecida no site do editor.

Pensamentos finais

Divi Widget Builder é simples e fácil de usar. O trabalho vem da construção de layouts Divi em vez de usar o construtor de widget. Escolher um layout dentro do construtor de widget não poderia ser mais fácil e a capacidade de colocar tantos widgets do Construtor de Widget em qualquer área de widget que você deseja abre muitas possibilidades de design Divi e Extra.

Gostaria de ver alguns exemplos no site do desenvolvedor do plugin em ação. Ver alguns casos de uso criativos daria ao comprador ideias sobre como usá-lo e obter o máximo dele. Se você estiver interessado em colocar layouts e módulos Divi dentro de suas áreas de widget, o Divi Widget Builder pode ser o plug-in que você está procurando.

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

Imagem em destaque via robuart / shutterstock.com