Destaque do plugin Divi: Next Image Effect Pro

Next Image Effect Pro é um plugin de terceiros para Divi que adiciona muitos efeitos de foco de imagem que ajudam a chamar a atenção para suas imagens e links. O plugin adiciona 7 módulos ao Divi Builder, cada um com seu próprio conjunto de designs e efeitos. Neste artigo, vamos dar uma olhada no Next Image Effect Pro e ver o que ele pode fazer.

Instalação do Next Image Effect Pro

Compre e baixe o plugin no Divi Marketplace. Siga estas etapas para instalá-lo:

1. No painel do WordPress, vá para Plug - ins > Adicionar novo
2. Faça upload do plugin do seu computador
3. Clique em Instalar agora
4. Assim que o plug-in estiver instalado, clique em Ativar

Em seguida, você precisará ativar a licença. Vá para Plugins > Licença do Image Effect Pro . Insira sua chave de licença e salve as alterações.

Módulos do Next Image Effect Pro

Image Effect Pro adiciona um conjunto de módulos ao Divi Builder que incluem combinações estilizadas de imagens e texto. Eles adicionam centenas de efeitos de pairar e combinações de direção. As opções de estilo de texto incluem controles independentes para títulos, texto em foco, conteúdo e seus planos de fundo.

Os módulos incluem:

• Circular Image Hover
• Image Hover Box
• Efeito de ícone de imagem
• Efeito de Mega Imagem
• Passe o mouse sobre a imagem mínima
• Próxima Imagem Scroll
• Ultimate Image Hover

Circular Image Hover

Circular Image Hover tem duas seções principais: a imagem e o texto (conteúdo hover). Eu adicionei uma imagem retangular. Ele exibe a imagem em sua forma original, mas depois a torna circular. Se a imagem fosse quadrada, seria um círculo perfeito.

As configurações de design da imagem incluem a posição, a força e a cor da sombra da caixa.

O texto inclui uma seção para adicionar o título e o conteúdo. Você pode estilizá-los nas configurações de design. Aumentei os tamanhos neste exemplo.

O fundo da legenda pode ser uma cor sólida ou um gradiente. Este usa o gradiente padrão.

Possui 19 efeitos de pairar com 4 opções de direção para cada efeito. Este é o efeito 1. Os efeitos têm várias maneiras de fazer a transição da imagem para fora e fazer a transição do conteúdo. Eles incluem zooms, viradas, slides e muito mais.

Image Hover Box

A caixa de foco de imagem também inclui a imagem com conteúdo de foco. Não muda a forma da imagem.

Também inclui a sobreposição (ou plano de fundo que aparece e se parece com uma sobreposição) e adiciona um plano de fundo de título. Ambos os fundos podem incluir cores sólidas e gradientes. Este exemplo usa o fundo de sobreposição padrão. Mudei a cor do fundo do título e aumentei o tamanho do texto.

Possui 13 efeitos de flutuação diferentes, incluindo flips, slides, fades, zooms, etc. Vários dos efeitos adicionam opções de direção. Este é o efeito 1.

Efeito de ícone de imagem

Efeito de ícone de imagem adiciona um elemento de foco que exibe um título e um texto de foco sobre a imagem. Como os outros, você pode alterar a cor do plano de fundo com uma cor sólida ou um gradiente, e inclui vários efeitos de foco. Os efeitos de flutuação neste trazem bordas e parecem especialmente elegantes. Este é o efeito de foco de Zoe.

O que o diferencia são os ícones. Você pode adicionar 4 ícones diferentes e abri-los na mesma janela ou em uma nova janela.

As configurações do ícone incluem cor, tamanho, espaçamento, altura da linha, cor de fundo, sombra, borda, etc. Neste exemplo, adicionei uma cor de fundo e reduzi a altura da linha para criar uma linha. Eu também adicionei uma sombra. Este é o efeito hover Hera.

Este é o efeito de pairar, Terry. Eu mudei as cores do título e do texto em foco e usei as configurações para os tamanhos de fonte e ícones do exemplo anterior.

Efeito de Mega Imagem

Mega Image Effect é outro cartão de 2 faces com uma imagem de um lado e conteúdo do outro. A parte frontal exibe uma imagem normalmente.

O verso do cartão exibe o conteúdo normalmente e inclui ajustes de fonte e plano de fundo. O que o diferencia é a capacidade de adicionar um botão.

Você tem controle total sobre o design do botão, incluindo a mesma cor sólida e opções de gradiente do plano de fundo padrão. Este exemplo mostra um gradiente para o plano de fundo do botão.

Você tem controle total sobre o estilo do botão para as fontes e o plano de fundo. Ajustei a fonte e a borda neste exemplo. Cada elemento do módulo também possui ajustes de espaçamento. Adicionei 20 pixels à parte inferior do botão. Cada um dos módulos tem esses ajustes de espaçamento.

Este módulo tem muitos efeitos de flutuação para contar. Apenas os efeitos de imagem por si só são impressionantes, mas também tem muitos efeitos de texto. Você pode ajustar o foco da imagem e o foco do texto separadamente e definir o tempo para o efeito de texto.

Este exemplo mostra a imagem paralela à esquerda, o efeito de texto Mais zoom e um pequeno atraso de texto.

Passe o mouse sobre a imagem mínima

Efeito de imagem mínimo é o módulo mais simples do conjunto. Ele exibe uma imagem com efeitos de foco.

A única configuração personalizada são os efeitos de foco. Inclui 10 efeitos para escolher. Veremos alguns.

Este exemplo é Scale Out Rotate. A imagem é reduzida e girada um pouco em seu estado normal. Ao passar o mouse, a imagem amplia e gira para seu estado normal.

Este é o Blur. A imagem fica embaçada até você pairar, então lentamente desfoca até ficar nítida.

Isso está piscando. Uma explosão de flashes brancos sobre a imagem e depois desaparece conforme você passa o mouse.

Próxima Imagem Scroll

Next Image Scroll coloca uma sobreposição sobre a imagem e adiciona um botão no canto superior direito. Você pode ajustar a cor do botão para cores sólidas e gradientes. Este exemplo mostra as configurações padrão.

Você também pode ajustar a sobreposição. Defina uma cor sólida ou gradiente. Também inclui tipos de gradiente e controles padrão.

A posição do plano de fundo permite exibir a parte superior ou inferior da imagem.

A imagem se move para cima ou para baixo ao passar o mouse. Neste exemplo, o módulo mostra a parte inferior da imagem e rola para o topo da imagem ao passar o mouse.

Ultimate Image Hover

Ultimate Image Hover exibe o tamanho e a forma com base no efeito que você escolher. Este é o efeito 1. Ele mostra uma parte da foto em uma imagem retangular alta. Inclui o título e o texto em foco, o conteúdo e uma sobreposição. A sobreposição inclui ajustes para a cor como um sólido ou gradiente.

Ao passar o mouse, a sobreposição fica mais clara e o texto é revelado.

A opacidade da imagem permite ajustar a quantidade de fundo que pode ser vista. Neste exemplo, reduzi a opacidade, alterei o tamanho do título e do texto em foco, a cor do texto do título, o negrito do texto em foco, deixei o texto em foco todo em maiúsculas e adicionei uma sombra de texto ao texto em foco.

Este módulo tem 24 efeitos de foco. Eles exibem a imagem em diferentes tamanhos, níveis de opacidade, posicionamento do texto e adicionam bordas.

Este é o efeito 4. Ele exibe a imagem em um quadrado e adiciona uma borda ao redor do interior que se sobrepõe nas extremidades.

Este é o efeito 5. Ele escurece a sobreposição e adiciona uma borda ao redor da imagem e exibe a imagem em um quadrado.

O efeito 6 coloca o título e o texto em foco no topo com uma linha abaixo deles, e o conteúdo na parte inferior.

O efeito 8 mantém o tamanho retangular grande e adiciona uma borda fina.

Este é o efeito 10. Ao passar o mouse, a imagem é ampliada, a linha se torna um x e o gradiente aparece.

Exemplo do Next Image Effect Pro

Para um exemplo simples, aqui está uma olhada no layout de renovação da casa Divi com o módulo Ultimate Image Hover adicionado para criar um CTA. Eu o adicionei à esquerda da imagem e usei as cores do layout.

Ao passar o mouse, a imagem desliza para a direita, o CTA é revelado, a imagem se torna menos opaca (o que deixa passar mais da cor de fundo) e uma borda é adicionada. Este exemplo usa o efeito de foco 8.

Compre o Next Image Effect Pro

O Next Image Effect Pro está disponível no Divi Marketplace por US $ 49. Inclui uso ilimitado do site, garantia de reembolso de 30 dias e 1 ano de suporte e atualizações.

Reflexões finais

Essa é a nossa visão do Next Image Effect Pro for Divi. Os 7 módulos adicionam muitos recursos de imagem que fazem seu site se destacar. Usá-los é intuitivo. O número de efeitos e combinações entre todos os módulos é impressionante. Cada módulo é único, mas a maioria adiciona imagens, títulos e conteúdo para fornecer muitas possibilidades de design para CTAs, membros da equipe, depoimentos, informações gerais, informações de contato e muito mais.

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

Imagem em destaque via elenabsl / shutterstock.com