Divi Plugin Highlight: Divi Sensei Before After Slider

Os controles deslizantes Antes e Depois são uma ótima maneira de permitir que os visitantes comparem duas imagens. Como o nome sugere, eles podem ser imagens antes e depois de algo ser alterado, como perda de peso, uma imagem retocada, um quarto decorado, um carro pintado etc. Claro, eles são úteis para muito mais do que antes e depois das fotos. Eles podem ser usados ​​para comparar gráficos, produtos, destinos de férias e muito mais.

Neste artigo, vamos dar uma olhada no Divi Sensei Before and After Slider, um módulo antes e depois do controle deslizante para o Divi Builder, ver o que ele pode fazer e ajudá-lo a decidir se você precisa deste plugin de terceiros em seu Divi Caixa de ferramentas.

Divi Sensei Módulo Slider Antes e Depois

Carregue e instale o plugin Divi Sensei Antes e Depois normalmente. Três não são configurações para passar. Depois de fazer o upload e ativar o plugin, você verá um novo módulo adicionado ao Divi Builder chamado Sensei Before and After Slider.

O módulo exibe uma imagem anterior no lado esquerdo e uma imagem posterior à direita. Ele exibe uma barra deslizante no centro que os usuários podem agarrar e deslizar de um lado para o outro. Passar o mouse sobre as imagens revela antes e depois dos rótulos e adiciona uma sobreposição. Você tem controle de design sobre cada um desses elementos.

Vamos dar uma olhada nos recursos e opções do controle deslizante. Para esses exemplos, estou usando imagens de Unsplash.com.

Guia de Conteúdo

A guia Conteúdo permite adicionar uma imagem anterior, posterior e rótulos. Neste exemplo, adicionei duas versões diferentes da mesma imagem para criar a imagem anterior e posterior. Isso é útil para mostrar os resultados de uma foto que foi retocada. As opções também incluem o link padrão, plano de fundo e configurações de rótulo de administrador.

Ele também fornece campos onde você pode alterar o texto dos rótulos antes e depois. Estou pairando sobre as imagens para revelar os rótulos. Eles só são exibidos ao passar o mouse por padrão, mas você pode alterar isso.

Guia Design

A guia Design inclui configurações para o controle deslizante, rótulos e sobreposição. Também inclui as configurações padrão para dimensionamento, espaçamento, borda, sombra da caixa, filtros, transformação e animação.

Slider

As configurações do controle deslizante permitem escolher a direção do controle deslizante entre horizontal e vertical, definir o deslocamento inicial para determinar onde o controle deslizante começa nas imagens e alterar as cores do controle deslizante, alça, fundo da alça e ícone da alça. Ajustei cada uma dessas configurações no exemplo acima.

Etiquetas

Para os rótulos, você pode fazer com que eles sejam sempre exibidos ou exibidos apenas ao passar o mouse, e ajuste os planos de fundo e as fontes. As cores de fundo incluem cores sólidas e ajustes de opacidade. Você pode ajustar os fundos individualmente, mas não permite ajustar as cores do texto individualmente. Você também pode escolher as fontes, alterar seus tamanhos, estilo, alinhamento, altura da linha, adicionar uma sombra, etc. A altura da linha define o tamanho do fundo.

No exemplo acima, especifiquei as cores do plano de fundo e da fonte, alterei o tamanho das fontes e o tamanho da altura da linha. Também os configurei para serem exibidos sempre para que fiquem visíveis sem que o usuário tenha que passar o mouse sobre as imagens para vê-las.

Sobreposição

A sobreposição é habilitada por padrão. Você pode desativá-lo, ajustar a cor e ajustar a opacidade. A cor padrão é preto com 50% de opacidade.

Selecionei azul neste exemplo e deixei a opacidade em 50%. Permitir que a imagem apareça enquanto você está pairando parece funcionar melhor. Se você usa uma cor clara ou escura, a quantidade de opacidade definida será determinada pelas cores na imagem e como você deseja usar a sobreposição.

Para este exemplo, usei um esquema de cores preto e branco. A sobreposição e o texto do rótulo são brancos e os elementos do controle deslizante são pretos. Eu diminuí a opacidade dos fundos do rótulo para escurecê-los. Eu os deixei em seus tamanhos padrão.

Exemplos de controle deslizante Divi Sensei antes e depois

Vejamos alguns exemplos de como o controle deslizante pode ser usado e sua aparência nos layouts Divi. Estou usando imagens do Unsplash e aquelas que estão disponíveis nos layouts Divi gratuitos integrados ao Divi. Identificarei os layouts Divi que estou usando à medida que avançar.

Comparação de Gráficos

Para este, usei elementos de design do pacote de layout do Divi Video Game. Desativei a sobreposição, alterei os elementos do controle deslizante para verde e fiz os rótulos sempre exibidos. O fundo dos rótulos é azul sólido. Aumentei o tamanho da fonte, mudei a cor, usei a família de fontes Rubik, tornei a espessura da fonte média e todas em maiúsculas. Parabéns se você já possuiu ou jogou esses sistemas de jogo e sabe por que essa comparação de gráficos inventados não pode existir.

É assim que fica dentro do layout. É excelente para fazer comparações como esta maquete de gráficos de duas máquinas de jogos diferentes.

Portfólio de serviços antes e depois

Este exemplo imita a ideia de uma sala antes e depois da renovação. Quando as duas imagens têm tamanhos diferentes, ele usará o tamanho para a imagem maior e a imagem menor mostrará uma lacuna. Ele posicionará suas alturas ou larguras igualmente e preencherá o resto como espaço vazio. Neste exemplo, a imagem à direita é mais curta do que a imagem à esquerda. Embora ter imagens do mesmo tamanho funcione melhor, ainda funciona bem com imagens próximas do mesmo tamanho.

Adicionei cores e fontes do pacote de layout Home Improvement. É assim que fica dentro de uma parte do layout.

Veja como fica com a sobreposição. Mudei o controle deslizante para um lado para mostrar mais da imagem anterior.

Para referência, aqui está a imagem com a alça movida para mostrar mais da imagem posterior.

Comparação de Produto

Para este exemplo, estou substituindo as três imagens de chá no layout Tea Shop por 3 controles deslizantes DS P&A. Estou usando cores do layout para os botões e controles deslizantes. O controle deslizante do meio é definido como vertical apenas para ser diferente. A sobreposição usa uma cor do layout com opacidade reduzida.

Veja como eles aparecem no layout. Isso é excelente para comparar os detalhes visuais de vários produtos, vários locais, várias cores, para produtos que têm várias opções para mostrar com e sem as opções, etc.

Comparando locais

Neste exemplo, estou usando o controle deslizante para comparar dois locais. Eles não precisam ser semelhantes, apenas algo para comparar por um motivo ou outro. Adicionei cores do layout para o controle deslizante e rótulos, bem como as fontes para os rótulos. Também adicionei uma sombra de caixa para ajudá-la a se destacar do resto das imagens.

Veja como fica dentro do pacote de layout do Siteseeing usando as cores do layout. Este é um bom exemplo de como as duas imagens não precisam ser um antes e um depois da mesma coisa ou mesmo de coisas semelhantes. Esta é uma boa maneira de mostrar locais de casamento, locais de férias, etc., para ajudar os compradores a escolher entre eles (ou tornar a seleção mais difícil, mas não recomendo isso como objetivo).

Compra

Você pode comprar o Divi Sensei Before and After Slider no Divi Marketplace. O custo é de US $ 5 para uso ilimitado do site e 1 ano de suporte e atualizações. Este preço inclui uma garantia de devolução do dinheiro de 30 dias.

Reflexões finais

O Slider Divi Sensei Antes e Depois é um módulo simples. Por exemplo, o controle deslizante não tem controles de largura e os rótulos não incluem bordas, sombras de caixa, gradientes, etc., mas as configurações que ele fez tornaram mais fácil ajustar o estilo de cada layout ao qual o adicionei. Pelo preço e pelo que ela pode fazer, o nível de configurações faz sentido e eu consegui os designs que queria com facilidade.

Todos os controles eram intuitivos e nunca pensei em precisar de instruções. Você pode até usar tags alt diferentes para as imagens para ajudar a melhorar o SEO. Se você estiver interessado em um controle deslizante antes e depois para usar com seus sites Divi, vale a pena considerar o Divi Sensei Antes e Depois do controle deslizante.

Nós queremos ouvir de você. Você já experimentou o Divi Sensei Before and After Slider? Deixe-nos saber o que você pensa sobre isso nos comentários abaixo.

Imagem em destaque via Elvetica / shutterstock.com