Destaque do plug-in Divi: caixa de ferramentas Divi

Divi Toolbox é um plug-in de terceiros que adiciona muitos efeitos novos ao Divi que normalmente requerem CSS, JavaScript, PHP ou muitos plug-ins individuais. Os efeitos são fáceis de usar e personalizar e dão ao seu site Divi um brilho extra para se destacar da multidão.

Os efeitos incluem mudanças em todo o site, novos menus móveis, fundos de partículas, rodapés, widgets, estilo, animações, cabeçalhos, navegação, novos layouts de blog, layouts Divi em novos locais, personalização de tela de login, pop-ups e muito mais. Muitos dos recursos podem ser estilizados com novas adições ao personalizador de tema. O Divi Toolbox não funciona com o Extra ou o plug-in Divi Builder.

Configurações gerais do Divi Toolbox

A tela de opções Divi Toolbox é adicionada ao menu do painel Divi. As configurações são habilitadas aqui, mas os ajustes são feitos no personalizador.

As configurações gerais incluem estilo de cabeçalhos globais, personalizar página de login, ocultar projetos, permitir uploads de tipo de arquivo SVG, barra de rolagem do navegador personalizado, configurações de página 404 (escolher um layout e ocultar o cabeçalho e rodapé) e configurações de ícones sociais (habilitar estilo, abrir em uma nova guia e adicionar mais ícones).

Adicionar mais ícones sociais abre um campo onde você pode inserir o URL para mais 9 redes sociais.

Aqui está a guia Geral no personalizador, onde posso ajustar as configurações que habilitei. As configurações incluem títulos e fontes, a barra de rolagem do navegador e a tela de login. Neste exemplo, fiz alguns ajustes no h1 e no texto do corpo e adicionei um estilo à barra de rolagem. Também adicionei mais ícones sociais.

Para a tela de login, você terá que fazer suas alterações e, em seguida, efetuar logout ou visualizar a tela em outro navegador.

Esta é minha tela de login após adicionar uma imagem de fundo, logotipo e alterar o tamanho e as cores dos campos e do texto. É necessário um pequeno ajuste, pois você não consegue ver a tela enquanto faz as alterações.

Configurações do cabeçalho do Divi Toolbox

As configurações do cabeçalho adicionam estilo ao menu, permitem um menu suspenso personalizado, adicionam um botão de menu CTA, alteram o logotipo no menu fixo, permitem a sobreposição do logotipo e adicionam um layout Divi antes da navegação na página inicial e um layout antes e depois navegação em outras páginas.

O botão de menu CTA permite que você aplique o CTA ao primeiro ou último item do menu, ou aplique uma classe personalizada. Ele fornece o CSS e instruções sobre onde adicioná-lo.

Aqui está o personalizador para o cabeçalho. Eu adicionei um layout acima do menu (neste exemplo, é apenas um módulo de texto, mas você pode adicionar um layout completo se quiser). O logotipo sobreposto tem uma caixa quadrada com efeitos de sombra. Mudei o tamanho do logotipo de 200 para 140 e movi os ícones sociais para o menu principal. Estou passando o mouse sobre o item de menu Serviços para que você possa ver o efeito CSS.

Configurações de rodapé do Divi Toolbox

As configurações de rodapé incluem um rodapé fixo, revelar rodapé, personalizar menus e widgets, personalizar o botão voltar ao topo (que adiciona uma opção de link de botão personalizado) e adicionar layouts de rodapé antes e depois.

Neste exemplo, alterei as fontes do cabeçalho e do menu para todas em maiúsculas e aumentei o espaçamento. Também ajustei as cores do foco e adicionei um ícone ao lado do texto ao pairar. Eu adicionei um layout após o layout do rodapé. Este usa um rodapé revelado (razão pela qual o texto está atrás do módulo de texto acima dele).

Eu estilizei o botão voltar ao topo para que ele exiba texto. Tem um efeito de sombra e ajustei sua localização. Eu deixei as cores no padrão. Centralizei o texto inferior e os ícones sociais. Para o efeito de foco, escolhi Crescer (também inclui encolher, mover para cima, mover para baixo, oscilação, batimento cardíaco, gelatina e pulso). Estou passando o mouse sobre o ícone do Facebook para que você possa ver o efeito.

Configurações do Divi Toolbox Mobile

As configurações do celular incluem um campo para inserir o ponto de interrupção do menu do celular (a largura exata da tela quando o menu muda do desktop para o celular), estilos personalizados, alterar o logotipo, escolher o efeito de clique do ícone de hambúrguer, recolher o submenu aninhado e ativar várias classes CSS. As classes CSS permitem que você inverta as colunas e centralize o texto, os módulos e os botões.

Aqui está uma olhada na página do Google Chrome com Responsive selecionado. Assim que tirei o tamanho da tela para menos de 980 pixels, ele mudou para o ícone do celular que selecionei e adicionei o menu de hambúrguer com a animação que escolhi.

Nesta tela, estou estilizando a cor de fundo do menu móvel, a cor de fundo instantâneo e o menu de hambúrguer. Mudei o texto dos itens do menu principal para maiúsculas e deixei o padrão de texto do CTA. Eu também mudei o plano de fundo para o item de menu do CTA. Você também pode ajustar o menu e o tamanho do ícone.

Configurações de blog do Divi Toolbox

As configurações do Blog permitem que você personalize a barra lateral e os widgets, a meta de postagem, o arquivo e as páginas de categoria, escolha um layout (entre 6 opções), oculte a barra lateral de arquivos e personalize o texto do botão ler mais.

Para postagens únicas, você pode escolher o layout da barra lateral, ocultar o título da postagem, adicionar uma caixa de autor, adicionar links anteriores e posteriores, adicionar postagens relacionadas e personalizar o formulário de comentários. Você também pode adicionar layouts personalizados após a navegação para postagens individuais, arquivos, categorias, páginas do autor e páginas de resultados de pesquisa.

Para a página do blog, adicionei um efeito de sombra à barra lateral, alterei as fontes e seu estilo, defini o estilo da caixa de pesquisa e aumentei o tamanho da borda. Ele usa um layout alternativo e eu personalize o texto do botão ler mais.

Este exemplo é o layout 6. Eu personalize as cores da meta fonte novamente e adicionei uma cor flutuante. Também personalizei o fundo do botão "Leia mais".

As postagens de blog individuais permitem que você personalize cada um dos elementos que você adicionou nas configurações do blog. Nesta tela, estou personalizando as postagens relacionadas, os links seguintes e anteriores, e a caixa do autor. Você tem controle sobre todo o texto, cores, sombras, etc.

Neste exemplo, estou personalizando o formulário de comentários. Você tem controle sobre as cores do campo (com e sem foco), borda, texto, cores, botão, etc. Eu mudei a cor de fundo do botão, a cor de foco do campo, adicionei uma borda ao campo e mudei o raio.

Configurações dos módulos do Divi Toolbox

A guia Módulos oferece configurações para adicionar um efeito de foco do mouse siga o mouse, adicione um opt-in de e-mail fino (fornece CSS para três opções diferentes), botões secundários (que adiciona uma nova camada de personalização) e muitos ajustes.

Os ajustes incluem um ícone de triângulo animado para módulos de acordeão e alternância, remoção da borda inferior horizontal e preenchimento para tabelas de preços, mover a imagem retrato abaixo do conteúdo em depoimentos, ocultar barras de rolagem horizontais e adicionar CSS para alinhar colunas verticalmente e para alterar a altura de qualquer elemento a 100% da altura da janela de visualização.

Aqui está uma olhada na opção de e-mail slim. Ele coloca todos os campos em uma única linha. Este exemplo também usa o botão secundário. Apenas os botões aos quais adicionei a classe CSS obterão essas alterações. Usar a classe CSS significa que agora tenho dois estilos de botão globais.

Configurações extras do Divi Toolbox

A guia Extras inclui pré-carregadores, pop-ups, partículas de fundo, efeito de inclinação 3D e rolagem paralaxe para módulos.

Existem 12 pré-carregadores para escolher. Você pode fazer com que apareçam apenas na página inicial se desejar e selecione o tipo e a velocidade de transição. A tela do seletor mostra as animações dos pré-carregadores. Você pode personalizá-los ainda mais no personalizador de tema.

Acione os pop-ups com qualquer link de um item de menu, botão, link em texto, etc. Crie quantos quiser. Escolha qualquer layout predefinido para o pop-up. Personalize o fundo e o botão Fechar no personalizador.

São partículas em movimento. Você tem controle total sobre a cor, forma, número de partículas, velocidade, tamanho, tamanho da linha, opacidade e interatividade. Existem dois CSS IDs para partículas, permitindo que você tenha dois designs diferentes.

Aqui está uma olhada no recurso de inclinação. Você pode ajustar a inclinação, perspectiva, escala, velocidade e brilho. Adicione-o a qualquer seção, linha ou módulo.

Licença Divi Toolbox

Existem duas licenças para escolher:

• Licença regular (para uso em um projeto) - € 49,00
• Licença Estendida (para uso em projetos ilimitados) - € 169,00

Reflexões finais

Estou impressionado com a quantidade de recursos e configurações que este plugin possui. Gosto especialmente do fato de ele adicionar postagens relacionadas, links anteriores e seguintes e uma caixa de autor para postagens de blog que não são criadas com o Divi builder. A barra de rolagem também é um toque legal.

Existem algumas configurações que você pode obter nos módulos Divi, como o texto do cabeçalho, mas isso fornece mais detalhes para essas configurações. Gostaria de ver mais alguns ajustes adicionados (por exemplo, efeitos de sombra para a caixa de comentários, mais opções de logotipo, posicionamentos de ícones de mídia social, etc.).

Se você estiver interessado em adicionar uma tonelada de novos efeitos ao Divi da maneira mais fácil possível, vale a pena dar uma olhada no Divi Toolbox.

Nós queremos ouvir de você. Você já experimentou o Divi Toolbox? Conte-nos sobre sua experiência nos comentários abaixo.

Imagem em destaque via vasabii / shutterstock.com