Ir para o conteúdo principal

Como usar a caixa de ferramentas Toolbox do tema WordPress Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Divi Toolbox é um plugin o que adiciona ao Divi muitos novos efeitos que normalmente requerem CSS, JavaScript, PHP ou muitos plugins individuais. Os efeitos são fáceis de usar, personalizar e dar 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, mapas de partículas, rodapés, widgets, estilos, animações, cabeçalhos, navegação, novas apresentações de blog, Divi apresentações em novos locais, personalização da tela de login, popups, etc. Muitos recursos podem ser personalizados com novas adições ao personalizador de temas. O Divi Toolbox não funciona com o Extra ou com o plugin do Divi Builder.

Configurações gerais da Divi Toolbox

divi toolbox settings.png

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

Os parâmetros geral incluir estilo de cabeçalho global, página de login personalizada, ocultação de projeto, permissão de tipo de arquivo SVG, barra de rolagem do navegador personalizada, configurações da página 404 (escolha layout e ocultar cabeçalho e rodapé) e ícones sociais (habilitar estilo, abrir arquivo). uma nova aba e adicionar mais ícones).

divi toolbox general parameters.png

Adicionar ícones sociais abre um campo no qual você pode inserir o URL 9 para redes sociais adicionais.

adicione a rede social divi.png

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

Configurações de personalização de caixa de ferramentas divi

Para a tela de login, você precisará fazer suas alterações e sair ou visualizar a tela em outro navegador.

tela de login personalizada divi.png

Aqui está minha tela de login depois de adicionar uma imagem de fundo, um logotipo e alterar o tamanho e a cor dos campos e do texto. Demora um pouco de ajustes porque você não pode ver a tela enquanto faz suas alterações.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Configurações do cabeçalho da Divi Toolbox

configurações de cabeçalho divi.png

Os parâmetros cabeçalho adicione um estilo de menu, ative um menu suspenso personalizado, adicione um botão de menu de CTA, altere o logotipo no menu fixo, ative o logotipo de sobreposição e adicione um layout de Divi antes de navegar para a página inicial, bem como uma modelagem antes e depois. navegação em outras páginas.

configuração da barra de ferramentas divi.png

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

customizador de cabeçalho divi.png

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. Alterei o tamanho do logotipo 200 para 140 e movi os ícones sociais para o menu principal. Passei o mouse sobre o item de menu Serviços para ver o efeito CSS.

Configurações de rodapé na caixa de ferramentas Divi

configurações de rodapé divi.png

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

personalize o rodapé divi.png

Neste exemplo, mudei as fontes maiúsculas e de cabeçalho e aumentei o espaçamento. Eu também ajustei as cores do viaduto e adicionei um ícone ao lado do texto do viaduto. Eu adicionei um layout após o layout. Este usa um rodapé revelado (é por isso que o texto está por trás do módulo de texto acima).

Eu estilizei o topo do botão da página para exibir o texto. Tem um efeito de sombra e ajustei sua localização. Eu deixei as cores por padrão. Centralizei o texto inferior e os ícones sociais. Para o efeito de foco, eu escolhi Grow (ele também inclui encolher, mover para cima, baixo, oscilação, batimento cardíaco, gelatina e pulso).

Configurações para o Divi Toolbox Mobile

configurações da caixa de ferramentas para mobile.png

Os parâmetros móvel inclua um campo para inserir o ponto de interrupção do menu móvel (a largura exata da tela quando o menu muda de desktop para móvel), estilos personalizados, altere o logotipo, escolha o efeito de clique do ícone do hambúrguer , reduza o submenu aninhado e ative. várias classes CSS. As classes CSS permitem que você inverta colunas e centralize textos, módulos e botões.

Divi-Toolbox-Mobile-Settings-for mobile.png

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Aqui está uma visão geral da página no Google Chrome com o Responsive selecionado. Assim que eu tomei o tamanho da tela menor que 980 pixels, ele foi substituído pelo ícone móvel que eu selecionei e adicionei o menu hambúrguer com uma animação que eu escolhi.

menu móvel animation.png

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

Configurações do Blog Divi Toolbox

configurações do blog divi toolbox.png

Os parâmetros de blog permite que você personalize barra lateral e widgets, publique páginas meta, de arquivo e de categoria, escolha um layout (entre as opções 6), oculte a barra lateral de arquivos e personalize o texto do botão Leia mais.

Para postagens únicas, você pode escolher o layout da barra lateral, ocultar o título da publicação, adicionar uma área de criação, adicionar links anteriores e próximos, adicionar postagens relacionadas e personalizar o formulário de comentários. Você também pode adicionar layouts personalizados de navegação de postagem a postagens, arquivos, categorias, páginas de autor e páginas de resultados de pesquisa exclusivas.

personalizar a aparência do blog divi.png

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

interface de personalização de resultados blog divi.png

Este exemplo é o layout 6. Eu novamente personalizei as cores da fonte da seção meta e adicionei uma cor flyover. Eu também personalizei o plano de fundo do botão para saber mais.

mudar a fonte do conteúdo do blog divi.png

Postagens individuais no blog permitem que você personalize cada um dos itens adicionados nas configurações do blog. Nesta tela, personalizo os artigos associados, os links a seguir e os anteriores, bem como a área de criação. Você controla todo o texto, cores, sombras, etc.

seção de personalização comentário divi.png

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Neste exemplo, personalizo o formulário de comentários. Você controla as cores do campo (foco e não foco), a borda, o texto, as cores, o botão e assim por diante. Alterei a cor de fundo do botão, a cor de foco do campo, adicionei uma borda ao campo e alterei o raio.

Licença Divi Toolbox

Você tem a escolha entre dois licenças :

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

O que lembrar

Estou impressionado com a quantidade de recursos e configurações deste plugin. Eu particularmente gosto do fato de que ele pode adicionar artigos semelhantes, links anteriores e próximos e uma zona de autor para postagens de blog que não são criadas com o construtor Divi. A barra de rolagem também é um toque agradável.

Você pode acessar alguns parâmetros nos módulos Divi, como o texto do cabeçalho, mas isso fornece mais detalhes para esses parâmetros. Gostaria de ver alguns ajustes adicionais adicionados (por exemplo, efeitos de sombra para a área de comentários, mais opções de logotipo, canais de ícone de mídia social, etc.).

Se você quiser adicionar uma tonelada de novos efeitos ao Divi da forma mais simples possível, o Divi Toolbox vale o desvio.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
4 ações
ação4
chilrear
Enregistrer
Whatsapp