Divi Plugin Highlight: Easy Slide-Ins

Easy Slide-Ins é um plugin de terceiros para Divi e Extra que permite criar slides (e pop-ups) usando o Divi builder. Os slides podem exibir qualquer coisa que possa ser construída com o Divi Builder. Acione os slides com uma porcentagem de rolagem, intenção de saída, um botão com vários locais e com uma classe CSS. Inclui atualizações e demonstrações vitalícias.

Neste artigo, vamos dar uma olhada no Easy Slide-Ins e ver o que ele pode fazer e o que é fácil de usar. Também daremos uma olhada em algumas das demos incluídas com o plug-in. O plugin está disponível no site do desenvolvedor.

Instalando Easy Slide-Ins

Primeiro, descompacte o arquivo. Dentro da pasta, você encontrará demos, um arquivo com um link para a documentação e o plugin Easy Slide-Ins.

Faça upload e ative o plugin normalmente.

Um novo menu é adicionado ao painel denominado Easy Slide-Ins. Clique neste menu e insira sua chave de licença.

Ativar a licença adiciona dois itens de menu (Todos os itens e Adicionar novo) onde você pode ver seus slides e criar novos slides.

Criação de um novo slide-in

Clicar para adicionar um novo slide abre um editor onde você pode usar o Divi Builder para criar o slide.

Também inclui várias configurações. Eles são colocados sob o Divi Builder. Escolha a posição da esquerda, direita, superior esquerdo, superior direito, inferior esquerdo, inferior direito, barra superior, barra inferior, barra lateral esquerda ou barra lateral direita. Configure-o para disparar automaticamente na rolagem e escolha a quantidade de rolagem. Você também pode configurá-lo para abrir na intenção de saída. Defina a cor de fundo, a sombra da caixa e a largura do slide-in.

Mostre o título e digite o texto para que ele apareça. Escolha o fundo do título e as cores do texto, e a família, tamanho e peso da fonte. Defina o arredondamento do canto, a altura do rótulo e a largura do rótulo. Mostre o ícone de fechamento e escolha o plano de fundo e as cores do ícone e o tamanho do ícone.

Os controles são intuitivos de usar e entender. Existem ajustes suficientes para definir o estilo do rótulo de acordo com o seu site e controlar como os slides funcionam.

Outros recursos são adicionados ou removidos dependendo das opções que você escolher. Selecionei Box Shadow e agora oferece opções para a posição horizontal e vertical, força de desfoque e propagação e cor.

A guia Avançado permite escolher as páginas em que o slide pode ser exibido. Você pode selecionar todas as páginas, páginas individuais e todas as postagens. Você pode ocultar o slide-in em certos dispositivos.

A guia Campos personalizados permite adicionar campos personalizados como qualquer página ou postagem.

Exemplos de slides fáceis

Esta é a página de contato do layout Gerenciamento de riscos. Estou usando isso para construir o slide-in para que o design se encaixe no layout. Eu configurei para não mostrar a barra lateral ou a navegação por pontos. Você pode visualizar como uma página padrão. Depois de criar o slide, publique normalmente.

Habilitei o rótulo nas configurações e defini o fundo como preto e o texto como branco. Eu mantive o texto padrão (Fale Conosco). Eu o configurei para ser exibido no canto superior direito. Está usando a altura padrão, mas pode ser alterada facilmente.

Clicar no rótulo abre o slide, que é exibido na tela mostrando o formulário de contato do pacote de layout de Gerenciamento de risco. Clicar no botão Fale conosco novamente fecha o slide-in. Eu tenho a largura do slide-in definida em 500 pixels, a altura da etiqueta em 150 e a largura da etiqueta em 60.

O exemplo mostra a sombra da caixa. Mudei o local para a barra lateral direita, que exibe o botão Fechar. Mudei as cores do rótulo e do botão Fechar e deixei os cantos do rótulo mais arredondados. Também defini a largura dos slides em 600 pixels.

Para este, movi o rótulo para a posição da barra superior. Usei as cores do layout e alterei a largura para 122 pixels e a altura para 40 pixels. Como você pode ver nesta imagem, o rótulo permanece no lugar no scroll.

Ele abre em tela inteira e inclui o botão Fechar.

Para este, adicionei um novo slide-in à barra lateral esquerda. Eu criei um estilo para combinar com o site e deixei os cantos do rótulo quadrados. Estou usando a margem superior do rótulo de 50%, o que posiciona a parte superior do rótulo no centro da altura da tela.

Ele abre da esquerda. Eu dei a ele uma largura de pixel de 1000, então ele cobre grande parte da minha tela. O slide-in do contato ainda é exibido na parte superior, embora o menu seja coberto pelo slide-in do boletim informativo.

Os slides fornecem uma classe de gatilho de botão. Você pode usar isso com botões para abrir o slide-in.

Copie a classe e cole-a no campo Classe CSS do botão.

Agora, clicar no botão abre o slide-in. Não precisa haver rótulos em nenhum lugar, mas ele deslizará na direção de onde você colocou o slide. Este foi colocado à esquerda, portanto, vem da esquerda. Eu defini a largura em 1000 pixels.

Demonstrações fáceis de slides

O arquivo de download inclui 12 demos. Esses são layouts predefinidos (arquivos JSON) que você pode carregar na Biblioteca Divi. Importe-os para a biblioteca Divi como layouts regulares. Eles incluem módulos estilizados, mas você terá que definir as configurações de design. Aqui está uma olhada em alguns deles.

Este é o e-mail de coleção com intenção de saída. Inclui vários módulos de texto, um formulário de contato e um módulo de imagem.

Veja como fica na tela. Deixei tudo como padrão aqui, então o botão ainda mostra o texto original, localização e estilo.

Este é e-mail de coleção com intenção de rolagem. Inclui uma imagem de fundo, dois módulos de texto e um módulo de e-mail.

Veja como fica na página usando as configurações predefinidas. Isso mostra o quão responsivo é o slide-in (que é exatamente o que esperávamos, já que está mostrando um layout Divi). Se você quiser mostrar mais da imagem, apenas aumente o slide-in.

Este é Guie seus visitantes. Inclui um módulo de código (para o Google Maps), várias sinopses, texto e um formulário de contato.

Esta é a aparência da página usando as configurações padrão.

Este é a promoção com um rótulo. Inclui um módulo de texto, várias tabelas de preços e um botão.

Veja como fica na tela. Eu o configurei para 800 pixels para mostrar a largura total se o slide entrasse. Eu removi o rótulo e o configurei para ser exibido quando a rolagem da página atingir 60%.

Aqui está o mesmo layout quando visto com Extra. Fico feliz em ver que funciona muito bem com Divi e Extra.

Preço e documentação do Easy Slide-Ins

O Easy Slide-Ins está disponível no site do desenvolvedor. Possui duas opções de compra:

• Único site - $ 27
• Sites ilimitados - $ 97

Ambas as licenças incluem demonstrações e atualizações vitalícias.

A documentação é fornecida na página de documentação e suporte do desenvolvedor. A página inclui um passo a passo de cada um dos pontos com imagens para demonstrá-los. A página também inclui um link para o suporte por e-mail.

Reflexões finais

O Easy Slide-Ins facilita a criação de slides e pop-ups para Divi e Extra. Achei fácil de usar. Nunca precisei da documentação, mas está lá se necessário. É uma maneira interessante de incluir elementos de página ocultos. Uma vez que qualquer coisa pode ser usada no slide-in, você pode mostrar formulários de contato, assinaturas de boletins informativos, frases de chamariz, vídeos, módulos de loja, etc. Pode ser um módulo único ou um layout de página inteira.

Eu gosto que ele tem várias opções de gatilho. A intenção de saída e o acionamento automático tornam-no uma boa escolha para criar pop-ups de e-mail e CTA. Abrir clicando no rótulo é uma boa maneira de adicioná-los a vários locais em suas páginas. Eu gosto que você pode adicionar vários slides em uma única página e pode determinar em quais páginas eles serão exibidos. Adicionar a classe CSS aos botões é uma ótima maneira de revelar informações quando o visitante decide vê-las.

Você pode construir o slide-in do front-end, mas não vi como acessar as configurações. Sem as configurações, eu não conseguia mover os rótulos e ver sua localização em tempo real. Tive que carregar uma página para vê-los. Ainda não era difícil de usar, mas havia um pouco de suposição envolvida. Isso é tão pequeno que eu não me impediria de usá-lo ou recomendá-lo.

Se você está procurando uma maneira simples e intuitiva de criar slides usando o Divi Builder, vale a pena dar uma olhada no Easy Slide-Ins.

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

Imagem em destaque via ByEmo / shutterstock.com