Divi Plugin Highlight - Divi Switch

Divi Switch é um plugin de terceiros para Divi que adiciona muitos recursos novos ao Divi que você pode ativar ou desativar com o toque de um botão. Muitos na comunidade Divi conhecem o Divi Switch, pois ele já existe há vários anos, mas sua atualização 3.0 trouxe muitos novos recursos e melhorias que valem a pena olhar. Alguns desses novos recursos incluem: um novo painel, um mini-plug-in para importação e exportação, pré-carregadores, novas configurações do personalizador de tema, personalizações de logotipo, páginas 404 personalizadas e de manutenção com layouts integrados, suporte para imagens SVG e muito mais.

Neste artigo, vamos dar uma olhada no novo Divi Switch e prestar atenção em seu conjunto de recursos atualizado.

Instalando Divi Switch

Carregue e ative o Divi Switch como qualquer plugin. Uma nova guia é então adicionada ao menu Opções do tema Divi no painel, chamada Divi Switch. Insira sua chave de licença e ative o plugin. A guia irá revelar um novo painel intuitivo.

Divi Switch Dashboard

O Divi Switch foi redesenhado e todas as configurações foram movidas de seu local separado no menu de administração para a página de opções do tema Divi. As próprias opções são distribuídas nas subguias sob a nova guia “Divi Switch” nas opções do Divi Theme.

Cada alternância tem um título, uma breve descrição e um botão sombreado definido por padrão como “Desativado”. Se você quiser ativar o efeito, basta clicar no botão e ele alternará para “ativado”. Ele ficará azul para indicar que está ativado.

Para ver a descrição dos recursos, selecione o ponto de interrogação que aparece à direita quando você passa o mouse sobre o efeito.

Vamos examinar várias guias e ver o que ele pode fazer.

Cabeçalho

A guia Cabeçalho adiciona 8 opções e personalizações. Você pode remover o sublinhado do cabeçalho, tornar o número de telefone clicável, abrir links sociais em uma nova guia, centralizar os itens do cabeçalho superior, usar um logotipo diferente na rolagem, alterar o texto do menu de hambúrguer, usar um logotipo específico da página e substituir o menu de tela inteira com layout Divi.

Personalizações de logotipo

O Divi Theme tem a capacidade de definir um logotipo personalizado que pode ser exibido em todas as páginas ou postagens. Mas e se você precisar usar logotipos diferentes em seu site? Divi Switch adiciona várias opções de logotipo para que você tenha mais logotipos para exibir e dá a você controle sobre como e onde eles são exibidos. As configurações permitem que você escolha um logotipo diferente na rolagem e você pode definir um logotipo diferente para páginas específicas.

Logotipo diferente na rolagem

Para exibir um novo logotipo na rolagem, basta carregá-lo na tela de configurações. O logotipo alternativo agora será exibido quando o visitante rolar.

Logotipo específico da página

Com o logotipo específico da página, você não está limitado a apenas um logotipo em seu site. Você pode ter quantos logotipos desejar e isso lhe dá controle total sobre qual logotipo é exibido em qual página.

Se você habilitou o Logotipo específico da página nas configurações, um novo recurso é adicionado ao final da área de conteúdo das páginas e postagens. Agora você pode definir um logotipo diferente para a página inicial e outro para as outras páginas e postagens. Aqui, você simplesmente carrega o logotipo que deseja que a página ou postagem exiba.

Este exemplo mostra páginas diferentes com cada página mostrando uma variação do logotipo do site.

Menu em tela cheia

O cabeçalho também possui várias personalizações de menu. Para este exemplo, alterei o texto do menu de hambúrguer e selecionei um layout para o menu de tela inteira.

Aqui está o menu de hambúrguer com seu novo texto.

Clicar no menu de hambúrguer abre o menu de tela inteira e mostra o layout Divi que selecionei. É translúcido para que você possa ver o site em segundo plano. Também inclui um botão Fechar.

Rodapé

A guia Rodapé permite remover os marcadores, ocultar o rodapé inferior, impedir que o rodapé flutue e substituir o rodapé por um layout Divi.

Este layout foi adicionado ao rodapé de cada página apenas selecionando-o na guia Rodapé.

Conteúdo principal

A guia Conteúdo principal adiciona 11 opções e personalizações. Você pode remover a linha divisória da barra lateral, adicionar um pré-carregador de página inicial e definir o tipo e as cores, alterar a proporção da imagem do portfólio, impedir que as imagens abram em uma caixa de luz, ajustar as animações do controle deslizante, remover o tipo de postagem de Projetos, adicionar uma página de manutenção personalizada e adicione uma página 404 personalizada.

Preloader

Ativar o pré-carregador exibirá um ícone animado enquanto a página inicial está carregando. Isso é ótimo para indicar ao visitante que algo está acontecendo enquanto o conteúdo real da página ainda está sendo carregado em segundo plano. Possui 15 tipos de transição e duas opções de cores.

Aqui está um exemplo de como o pré-carregador aparece no site enquanto a página está carregando.

Custom 404 e páginas de manutenção com layouts

Esses recursos permitem que você escolha qualquer página de manutenção e uma página 404 de sua lista de páginas. Isso significa que você pode criar as páginas usando layouts que você criou ou importou para a biblioteca Divi.

Para ajudá-lo com isso, Divi Switch inclui páginas premium 404 e pacotes de layout de página de manutenção com 10 layouts pré-concebidos que podem ser facilmente personalizados e configurados por padrão. Eles estão no formato JSON. A imagem acima é uma das 404 páginas.

Os layouts são projetados profissionalmente, para que sua página 404 e páginas de manutenção não sejam apenas informativas, mas também atraentes. Este exemplo é uma das páginas de manutenção. Inclui um cronômetro de contagem regressiva.

Móvel

A guia Mobile permite definir pontos de interrupção para cada tamanho de imagem. Insira um número do valor que você deseja que altere o ponto de interrupção. Você também pode recolher o menu no celular e mostrar um texto específico.

Postagens

Postagens tem um recurso de comentários legal. Isso move os comentários para uma alternância para que eles sejam ocultados por padrão.

Este é o botão fechado. É colocado na parte inferior da postagem, onde os comentários normalmente aparecem.

Clique para abrir e ver os comentários. Este é o formulário de comentário padrão do WordPress.

Se você adicionar o módulo de comentários Divi ao seu layout, poderá estilizá-lo com as configurações do módulo. Ele ainda está localizado na alternância e é fechado por padrão.

Arquivos

A guia Arquivos dá a você controle sobre as páginas do arquivo (páginas para tags, categorias, autor, pesquisa, etc.). Adicione o título da categoria, remova a barra lateral, adicione um link para ler mais e adicione uma linha separadora sob as postagens.

Aqui está um exemplo de página do Autor com todas as opções de arquivamento habilitadas.

Integração

A guia Integração permite inserir layouts Divi em locais específicos, incluindo antes do conteúdo principal, após o conteúdo principal e antes do conteúdo da postagem. Selecione o layout nas listas suspensas.

Fiz um banner de largura total usando apenas um módulo de texto e o inseri antes do conteúdo. Claro, você pode construir qualquer tipo de layout que desejar. Esta é uma ótima maneira de criar CTA's e menus especiais.

Avançado

A guia Avançado permite fazer upload de gráficos vetoriais escaláveis ​​(SVG) para logotipos, ícones e outras imagens mais nítidos. Como o WordPress bloqueia SVGs por padrão, esta é uma ótima maneira de usar este formato de imagem com Divi.

Importar / Exportar

A guia Importar / Exportar permite exportar o código gerado pelo Divi Switch para um plug-in leve e personalizado para instalar nos sites de seus clientes. Isso torna mais fácil usar seu código Divi Switch favorito sem a necessidade de instalar e configurar o próprio plug-in Divi Switch. Insira um nome para o plug-in, forneça uma descrição, adicione as informações do autor, forneça uma versão do plug-in e selecione Exportar plug-in.

Agora você pode fazer upload de seu plug-in de marca para os sites de seus clientes, como qualquer plug-in. Terá a sua marca.

Customizador de tema

Uma nova guia é adicionada ao personalizador de tema, chamada Configurações do Divi Space. Aqui, você encontrará outra guia chamada Divi Switch. O personalizador de tema inclui configurações adicionais para criar um ícone personalizado para o menu móvel, alterar a imagem de fundo do cabeçalho, personalizar o botão voltar ao topo e personalizar as páginas de arquivo - tudo com visualização ao vivo.

Neste exemplo, adicionei uma imagem de plano de fundo ao cabeçalho. Você pode configurá-lo para repetir, alterar a posição da imagem e alterar o tamanho da imagem. Acima dessa configuração, há uma área de seleção onde você pode escolher um ícone para o menu móvel.

Neste exemplo, estou ajustando o botão voltar ao topo para corresponder ao layout. Você pode ajustar o tamanho do ícone, raio, posição, cor de fundo, cor do ícone e cores de foco.

Neste exemplo, estou ajustando a cor, a altura e a largura do separador para as páginas do arquivo. Você também notará nesses exemplos que o logotipo mudou quando rolei para baixo. Ainda tenho a configuração de troca de logotipo ativada (bem, acho que está realmente 'trocada'.)

Licença

Divi Switch tem três licenças para escolher:

• Único site - $ 24
• 3 sites - $ 50
• Sites ilimitados - $ 96

Divi Switch também está disponível no plano Divi Space Memberships.

Reflexões finais

Estou impressionado com os novos recursos do Divi Switch. Não ter que colar classes CSS e o novo painel são recursos bem-vindos. As opções de logotipo, pré-carregador, mini plug-in e página 404 personalizada e página de manutenção adicionam muito ao Divi por si só. Gosto da capacidade de inserir layouts Divi e escolher um rodapé personalizado. Também gosto dos recursos de personalização do tema para adicionar uma imagem ao cabeçalho e personalizá-lo e alterar a cor, o formato e a posição do botão Voltar ao Topo.

Divi Switch adiciona muitos recursos ao Divi. Achei cada um deles fácil de usar. Se você está procurando por muitas personalizações que você pode adicionar da maneira mais fácil possível, Divi Switch pode ser o que você está procurando.

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

Imagem em destaque via Oleh Donets / shutterstock.com