Destaque do plug-in Divi: Divi Supreme

Divi Supreme é um plugin de terceiros para Divi que adiciona muitas configurações para adicionar novos recursos ao Divi Builder, bem como muitos novos módulos. Neste artigo, veremos o Divi Supreme para ver o que ele pode fazer e ajudá-lo a decidir se é o plug-in de que você precisa em sua caixa de ferramentas Divi.

Instalação

A instalação é simples e direta.

1. Compre e baixe o plugin do Divi Marketplace
2. Navegue até Plugins > Adicionar Novo > Carregar Plugin
3. Clique em Escolher Arquivo
4. Localize o arquivo zip do plugin no seu computador e selecione-o
5. Clique em Instalar agora
6. Clique em Ativar
7. Vá para Divi Supreme Pro > Licença no painel do WordPress e insira sua chave de licença

Configurações Gerais

Divi Supreme adiciona uma tela de menu com várias guias para personalizar as configurações da maneira que você quiser. A guia Configurações gerais inclui alternadores para ativar os elementos programados, um pop-up, um widget de biblioteca, um link para ler mais conteúdo, códigos de acesso da biblioteca e um visualizador responsivo. Vejamos alguns deles.

Elemento Programado

Os Elementos Agendados fornecem um calendário com a hora exata para que você possa agendar para mostrá-la ou ocultá-la nesses horários. Você também pode escolher a qual usuário se aplica. Isso é adicionado a todas as seções, linhas, colunas e módulos.

Aparecer

O recurso pop-up é adicionado aos módulos. Você pode escolher o tipo de pop-up, escolher um layout da biblioteca, selecionar os gatilhos de abertura e fechamento, fechamento automático, animações de entrada e saída, posições, larguras, sobreposições, botões de fechar, ícones, cores, etc.

consulte Mais informação

Leia mais adiciona um link para certos módulos para revelar seu conteúdo no clique. Escolha mostrar o link no celular, a altura recolhida, o texto, fonte, cores, sombra, CSS personalizado e muito mais.

Widget de biblioteca

O Widget da Biblioteca permite que você coloque qualquer layout da Biblioteca Divi em suas barras laterais, rodapé ou em qualquer outro lugar em que você use widgets.

Este exemplo mostra o layout de demonstração na barra lateral. O layout que estou usando não foi projetado para este espaço, mas é interessante que ele possa usar layouts Divi para construir barras laterais.

Visualizador responsivo

O Responsive Viewer adiciona novas ferramentas à barra de ferramentas do Builder que oferece mais opções de visualização. Quando você seleciona para ver os modos de tablet ou telefone, novos tamanhos de tela são adicionados à barra de ferramentas. Ele também adiciona um campo onde você pode inserir um tamanho personalizado.

Easy Theme Builder

O Easy Theme Builder permite que você configure seu cabeçalho, altere as cores dos elementos do cabeçalho na rolagem e personalize os elementos de encolhimento.

Cabeçalho Fixo

Por padrão, um cabeçalho criado com o Theme Builder rola com o site. No exemplo acima, rolei a página para baixo e o cabeçalho rolou para longe.

O cabeçalho agora está fixo, então quando eu rolar o cabeçalho permanece no lugar.

Rolando

Para rolagem, alterei as cores do plano de fundo em ambas as seções. Também adicionei a sombra da caixa para aparecer na rolagem.

Aqui está meu cabeçalho Theme Builder antes de rolar. Eu o configurei como Fixo e para empurrar o conteúdo para baixo. Este cabeçalho possui duas seções.

Aqui está o cabeçalho após a rolagem. As duas seções mudaram suas cores de fundo de acordo com minhas configurações.

Encolher

Reduzir permite especificar o tamanho do menu ao rolar e alterar o logotipo para uma nova imagem. Adicione preenchimento à seção, linhas, módulo e especifique uma porcentagem para a imagem encolher.

Este é o meu cabeçalho Theme Builder com suas configurações padrão e um novo logotipo.

Eu configurei o tamanho para aumentar, então é fácil ver a diferença. Adicionei 8px de preenchimento e defini a imagem para 80%. Agora mudou o logotipo para a minha nova imagem.

Configurações de mídia social

As configurações de mídia social permitem que você insira seu ID do aplicativo do Facebook e altere o idioma para que seus módulos usem o mesmo idioma do seu site.

Diversos

As configurações diversas permitem remover os dados do plug-in na desinstalação, permitir uploads de arquivos JSON, uploads SVG e alterar o nome e o ícone do menu Divi Supreme.

Módulos Divi

Divi Supreme adiciona 42 novos módulos ao Divi Builder. Eles adicionam muitos recursos novos para imagens, texto, botões, formulários de contato, redes de mídia social, etc. Vejamos alguns deles.

Horário comercial supremo

Supreme Business Hours inclui submódulos para cada dia da semana, permitindo que você os nomeie individualmente, mostre diferentes horários e os estilize. Você também pode estilizá-los juntos, como fiz aqui. Dá a você controle independente sobre as fontes de dia e hora. Você também pode inserir qualquer texto que desejar nos campos.

Botão Supremo

Supreme Button oferece dois botões que você pode estilizar juntos ou independentemente. Ele também adiciona um texto separador, uma caixa de luz para cada botão e dicas de ferramentas. Cada um dos elementos tem suas próprias opções de estilo. Você pode usar os recursos exatos que deseja, para que não precise usar os dois botões, o texto separador, etc.

Cartão Supremo

Supreme Card cria cartões que parecem postagens de blog. Adicione uma imagem, título, descrição, botão e emblema. Cada um dos elementos pode ser estilizado de forma independente. Eu adicionei uma imagem, aumentei o peso da fonte para o título, alterei a cor do emblema e o tamanho da fonte, alterei a cor dos botões, tornei o botão redondo e adicionei uma sombra de caixa ao botão. Esta é a visualização empilhada.

Você também pode fazer inline e escolher a largura, o alinhamento da ordem e o alinhamento horizontal do conteúdo (que ajusta a posição vertical da imagem). Mostra a esquerda para o alinhamento da ordem e o centro para o alinhamento horizontal. A opção de alinhamento é excelente para criar CTAs em um layout alternado.

Este é o alinhamento correto. Também fiz alguns ajustes na imagem, como adicionar cantos arredondados, uma borda vermelha e uma sombra de caixa. Você também pode adicionar uma sobreposição à imagem.

Carrossel de cartas supremo

O Supreme Card Carousel oferece os mesmos recursos que o Supreme Card, mas adiciona várias cartas a um controle deslizante. Oferece opções de estilo para que você possa definir o estilo dos cartões de forma independente. Ele também adiciona opções de estilo para o carrossel, incluindo setas e navegação por pontos, e os recursos de controle deslizante padrão. Isso mostra as configurações padrão com as imagens que adicionei. Este é o alinhamento empilhado.

Este é o alinhamento embutido. Eu adicionei uma cor de fundo para cada um dos submódulos para que fiquem separados. Também mudei o tamanho e a cor das setas e as cores da navegação por pontos. Os ajustes de seta também fornecem controle sobre a posição, o ícone anterior e o ícone seguinte.

Supreme Dual Heading

Supreme Dual Heading Fornece três seções para texto: antes, meio e depois. O texto do meio tem uma cor diferente por padrão. Todos os três usam as mesmas configurações, mas você pode estilizá-los de forma independente. Você também pode mostrá-los como embutidos ou empilhados em qualquer combinação que desejar. Inline é a configuração padrão. Aumentei o tamanho da fonte do texto anterior e do meio, diminuí o texto posterior e tornei o texto do meio em negrito.

Supreme Embedded Google Map

O mapa do Google embutido permite adicionar o endereço que você deseja fixar e escolher o nível de zoom. Nenhuma outra configuração é necessária. Ele usa ctrl + para aumentar o zoom, então os usuários podem rolar além dele sem que a página pare para aumentar o zoom do mapa.

Ele não possui configurações personalizadas para nenhum dos elementos do mapa, mas possui todas as opções de design padrão. Eu adicionei uma sombra de caixa e ajustei os filtros neste exemplo.

Supreme Embedded Twitter Timeline

A linha do tempo incorporada do Twitter permite que você especifique um nome de usuário do Twitter para incorporar as postagens desse usuário no Twitter em seu layout. Limite o número de tweets, mostre o cabeçalho, rodapé, borda, barra de rolagem e remova a cor de fundo. Inclui configurações de design padrão. Também inclui um tema claro e escuro.

Comentários Supreme do Facebook

Os comentários do Facebook incorpora os comentários de uma página do Facebook e permite que os usuários façam comentários usando suas contas do Facebook. Selecione o número de comentários a serem exibidos, escolha um esquema claro ou escuro e selecione como os comentários são ordenados. Os usuários podem curtir, responder e seguir a pessoa no Facebook. Inclui configurações de design padrão.

Lista Suprema de Ícones

Supreme Icon List inclui submódulos onde você pode adicionar o conteúdo e selecionar um ícone para cada item. Você pode definir o estilo do texto e dos ícones de forma independente. Você também pode adicionar planos de fundo, incluindo cores, gradientes, imagens e vídeo, atrás de cada item.

Formas Supremas

Supreme Shapes permite que você escolha uma forma na lista suspensa e defina seu tamanho. Tem 17 formas diferentes para escolher.

As opções de design permitem alterar a cor, usar uma borda e adicionar uma sombra. Também inclui configurações de design padrão. Eu mudei a cor e adicionei uma sombra no exemplo acima.

Compra

Divi Supreme está disponível no Divi Marketplace por $ 79. O preço inclui o uso ilimitado do site e um ano de suporte e atualizações.

Reflexões finais

Divi Supreme Pro é um plugin interessante para Divi. Ele adiciona uma tonelada de novos recursos e módulos, mas permanece fácil de usar. Todos os recursos são úteis. Alguns adicionam efeitos, enquanto outros adicionam recursos que expandem muito o Divi. Se você deseja expandir seu site Divi ou caixa de ferramentas sem precisar de muitos plug-ins, vale a pena dar uma olhada no Divi Supreme Pro.

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

Imagem em destaque via VectorKnight / shutterstock.com