Divi Plugin Highlight: Simple Overlay Solution

Simple Overlay Solution é um plugin de terceiros para Divi que facilita a criação de sobreposições de tela inteira, pop-ups e mega menus com o Divi Builder. Adicione várias sobreposições a qualquer página. Escolha entre um clique ou um gatilho de atraso cronometrado automático, um carregador claro ou escuro e um fundo claro ou escuro. Defina o estilo do botão Fechar ou crie seu próprio plano de fundo e botões com o Divi Builder. Cada sobreposição possui um cookie de 30 dias.

Solução de sobreposição simples

Faça upload e ative o plugin normalmente. Em seguida, você precisará ativar a licença. No menu do painel, vá para Configurações > Ativação Divi SOS e insira sua chave API e e-mail.

Importar Amostras SOS

O plug-in SOS vem com um conjunto de demos como um arquivo JSON que você pode importar para a biblioteca SOS. Primeiro, descompacte o arquivo de download para acessar o arquivo JSON. Eles são ótimos para você começar.

No menu do painel, vá para Divi > SOS . Selecione Importar e exportar.

Importe o arquivo JSON como qualquer layout.

Agora você tem 5 demos na biblioteca SOS. Você pode ver as demonstrações no site do desenvolvedor.

Criação de layouts SOS

Layouts SOS também são criados na biblioteca SOS. Vá para a biblioteca e clique em Adicionar novo .

Dê ao layout um nome que faça sentido para você. Escolha Layout para o tipo de layout.

Selecione SOS Layouts para a categoria.

Escolhi um layout predefinido e, em seguida, selecionei a página de contato do pacote de layout do Resort. À direita (ou na parte inferior se você estiver visualizando no modo visual) estão as configurações de layout. Isso fornece o código HREF para o layout para que você possa acioná-lo em qualquer página (em qualquer lugar que permita um URL). Este é o link que você usará para botões, texto, etc., para acionar a sobreposição.

Você também pode fazer com que ele seja exibido automaticamente (isso abre uma configuração de hora e habilita um cookie para que saiba que o visitante viu a sobreposição ou pop-up). Defina a transição para fade, slide ou none. Escolha um plano de fundo claro, escuro ou sem fundo. Selecione uma cor de carregador clara ou escura. Selecione se deseja ou não mostrar o botão Fechar. Você pode definir o estilo do botão e de seu plano de fundo.

O carregador pode ser claro ou escuro. Aqui está o carregador escuro sobre um fundo claro.

Exemplo de sobreposições de SOS

Estou criando uma sobreposição que mostrará informações de reserva quando o visitante clicar no botão Reserve sua viagem . Adicione o link ao URL do botão para acionar a sobreposição.

Eu defini o fundo da seção como transparente, escolhi um fundo claro nas configurações do SOS e personalize o layout para usar apenas uma das seções. Clicar no botão Reserve sua estadia abre a seção para reservar a estadia. O fundo inclui a sobreposição branca. Também adicionei o botão Fechar e o estilizei para combinar com o layout. O layout é colocado na parte superior da tela e ocupa toda a largura. Isso pode ser personalizado com preenchimento.

Eu adicionei um pouco de preenchimento no topo da seção. Também desativei o plano de fundo para poder controlá-lo com o Divi Builder.

Para este, estou utilizando o formulário de contato do mesmo layout. Desta vez, adicionei uma sombra de caixa à linha inferior para que se destaque do fundo da sobreposição.

Eu adicionei o link para um botão na mesma página da primeira sobreposição (você pode adicionar quantos quiser). Este abre um formulário de contato ao clicar no botão Envie-nos uma mensagem .

O resultado parece interessante. Eu não adicionei um botão Fechar a este. O visitante pode clicar em qualquer lugar fora do formulário para fechar a sobreposição. Eu adicionei um plano de fundo à linha e configurei a opacidade para que apenas um pouco do plano de fundo apareça.

Este usa uma seção do layout Empresa de investimento. Quero criar um pop-up com uma frase de chamariz. Eu o configurei para mostrar automaticamente com um atraso de 1000 milissegundos. Ao mostrar automaticamente, você não precisa adicionar o link em qualquer lugar. Ele é mostrado automaticamente em todas as páginas. Também configurei o cookie para mostrar o pop-up apenas uma vez a cada 30 dias.

O pop-up mostra 1 segundo após o carregamento da página. Isso cria um CTA como um pop-up e ele será exibido apenas uma vez a cada 30 dias. Você não pode dizer nesta imagem, mas eu também dei um fundo de paralaxe, só porque. Isso permite que você seja tão criativo com pop-ups quanto com qualquer design de página.

Estou movendo a opção Fechar do botão no canto superior direito para um botão criado com o Divi Builder. Clonei o botão do layout, alterei o texto e adicionei o link de fechamento ao URL.

O resultado é um design limpo que funciona muito bem como um CTA.

Voltei ao design e adicionei um novo fundo e um botão que abre outra página.

Para este, criei um pop-up de boletim informativo com base no layout Esports. Eu configurei o pop-up para abrir automaticamente após 30 segundos. O fundo está definido como escuro e o carregador está definido como claro. Também incluirei um botão Fechar usando as cores do layout.

O pop-up de inscrição parece ótimo e se encaixa perfeitamente no design do site porque, na verdade, é do design do site. Eu gosto que ele pode usar layouts Divi regulares para criar os pop-ups.

Mega Menus

Você também pode criar mega menus com o SOS. Crie um link personalizado como um item de menu e, em seguida, adicione o link da sobreposição ao URL do item de menu.

Eu adicionei a sobreposição ao link Sobre no meu menu deslizante. Você pode ter uma sobreposição diferente para cada link no menu, se desejar, e eles podem ser qualquer coisa que você criar com Divi.

Preço de solução de sobreposição simples

Existem duas licenças para SOS. Ambos têm uma taxa única e incluem atualizações vitalícias.

• 1 site e 1 site de desenvolvimento - $ 25
• Sites ilimitados - $ 45

Você pode comprar o SOS no site do desenvolvedor.

Reflexões finais

A solução de sobreposição simples é fácil de usar. Os controles são simples e intuitivos. Construir as sobreposições é quase o mesmo que construir uma página com Divi. Se você pode usar o Divi Builder, você pode usar o SOS. As páginas Divi carregam rápido porque as sobreposições não são pré-carregadas. Sobreposições e pop-ups também carregam rápido.

Eu gosto que tenha um biscoito. Isso dá a você algum controle sobre seus pop-ups para que o mesmo visitante não precise ver a oferta toda vez que visitar o site. Tenho certeza de que não seria fácil de fazer, mas gostaria de ver algumas opções de cookies. Por exemplo, talvez configure-o para mostrar uma vez por semana, uma vez por dia, duas vezes por mês, etc. Algumas opções de carregador também seriam boas. Talvez diferentes escolhas e personalizações de cores. Também gostaria de poder excluir uma página da exibição de sobreposições automáticas.

Eu gosto que um botão Divi normal possa ser usado para o botão Fechar. Isso abre muitas possibilidades de design e você não está limitado a usar o botão embutido. Se você quiser usar o botão, ele tem várias opções de cores.

SOS é um plugin fácil de recomendar. Se você estiver interessado em uma maneira fácil de criar sobreposições, pop-ups e mega menus com o Divi Builder, a Simple Overlay Solution (SOS) pode ser o plug-in de que você precisa.

Nós queremos ouvir de você. Você já experimentou o plugin Simple Overlay Solution para criar sobreposições e pop-ups? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via Bakhtiar Zein / shutterstock.com