Divi Plugin Highlight - Imagem intensa

Image Intense é um plugin premium de terceiros criado pelo pessoal do Superfly que adiciona um novo módulo ao Divi Builder para Divi e Extra. O novo módulo combina recursos de três módulos Divi (módulos de imagem, texto e botão) e, em seguida, adiciona novos recursos para adicionar efeitos de sobreposição e foco às imagens. Os recursos incluem 22 transições de imagem, botões, configurações de opacidade, modos de mistura, links de texto e muito mais.

Image Intense é uma ótima maneira de adicionar microinterações que fornecem feedback aos seus leitores e chamam a atenção para sua frase de chamariz (CTA). As animações incluem aumentar ou diminuir o zoom da imagem, esticá-la, comprimi-la, adicionar uma sobreposição, deslizar, revelar texto etc.

Neste destaque do plugin, daremos uma olhada no que o plugin pode fazer. As imagens foram tiradas de Unsplash.com.

Instalação e configurações

O plugin adiciona um módulo ao Divi Builder. Para instalar o módulo, basta fazer o upload e ativar o plugin. Use o Divi Builder normalmente e coloque o módulo Image Intense em seu layout. Ele pode ser usado no lugar de um módulo de imagem.

As Configurações Gerais incluem URL da imagem, tamanho da mídia, estilo de foco, títulos, legenda, orientação da legenda, botão, direção da animação, etc. Estas são configurações familiares e incluem uma breve descrição. As novas configurações incluem links para documentação para obter mais informações.

Os títulos de sobreposição podem usar marcação. Aqui você pode adicionar links, negrito no texto, etc.

As configurações avançadas de design incluem largura da imagem, modo de mistura de mistura, opacidade, opacidade ao pairar, gradiente de sobreposição personalizado, etc. Inclui a fonte esperada, plano de fundo, borda, cor e opções de preenchimento, bem como CSS personalizado .

Exemplos - Colocando a imagem intensa para trabalhar

Para ver o que ele pode fazer, criei vários layouts e adicionei vários módulos Image Intense. Aqui está uma olhada em algumas das animações e recursos.

Animações e tamanhos de imagens

Neste exemplo, você pode ver o tamanho recortado das imagens com dois títulos de sobreposição. A imagem à esquerda usa a configuração de corte 400 x 516 para o tamanho da mídia e Auckland para a animação.

A imagem diminui um pouco o zoom e mostra uma sobreposição com uma mensagem. A cor e o tamanho da fonte podem ser ajustados, se necessário.

A imagem à direita é ampliada e inclui a mensagem em uma sobreposição. Este é mais óbvio da diferença. Ele usa o estilo de pairar sobre Jerusalém .

A imagem no centro usa o estilo de foco Douala .

Você pode ver nesta imagem o quadro movido para a parte inferior da imagem e agora exibe a mensagem.

A imagem no centro usa o estilo de sobreposição Madison .

Você pode ver aqui como ele coloca uma sobreposição sobre a imagem que reduz a opacidade, mantendo o foco na área circulada que inclui a mensagem.

Modo de mistura de mistura

Mix Blend Mode é uma maneira fácil de aplicar atributos CSS à imagem. Ele combina a cor do módulo com seu plano de fundo. Ele pode criar alguns efeitos selvagens e algumas configurações funcionam melhor com certas cores, então isso exigirá alguns experimentos. Alguns dos recursos podem não funcionar com todos os navegadores, portanto, você deve usar esse recurso com cuidado.

A imagem no centro está usando o modo de mesclagem misto chamado Hard Light .

Este usa Luminosidade . Também adicionei um botão na parte inferior central e configurei um estilo personalizado.

Opacidade

Opacidade é a transparência de uma imagem. Quanto mais opaca uma imagem é, menos transparência ela tem. A opacidade também é afetada pelo estilo de animação e o modo de mistura de mistura que você escolher. Você pode usá-los em várias combinações para ver quais tipos de efeitos podem ser criados. Você pode aplicar diferentes níveis de opacidade à imagem normal e à imagem flutuante.

Esta é a imagem normal sem opacidade. Estou usando o tamanho original completo para a configuração do tamanho da mídia.

Aqui a imagem pairando. Eu defini a classificação de opacidade para 0,6. Este usa o estilo de foco Cali .

Este usa uma imagem grande de 1024 × 1024 sem cortes e uma opacidade de imagem de 0,4. Ambos os títulos de sobreposição usam tags HTML. Estou usando tags para forte, ênfase e quebra. Ele está usando o estilo de pairar de Portland .

Eu defini a opacidade ao passar o mouse para 1 para que a imagem seja totalmente revelada ao passar o mouse.

Adicionar um gradiente personalizado

Em Configurações avançadas de design, selecionei Usar gradiente de sobreposição personalizado . Isso abre um novo conjunto de opções onde posso selecionar a cor do gradiente inicial e final, a orientação do gradiente e a posição de parada inicial e final para a imagem regular e a imagem flutuante.

Aqui está uma olhada no gradiente usando o estilo de sobreposição Madison .

A imagem à esquerda exibe uma sobreposição antes de passar o mouse.

Ao passar o mouse, a sobreposição é removida para revelar a imagem. Este está usando o estilo hover de Hanói .

Troca de imagem

Neste exemplo, eu queria trocar uma imagem por outra. Isso é feito adicionando-se uma imagem como imagem de fundo do módulo nas Configurações avançadas de design .

Em seguida, defina o nível de opacidade para que uma imagem seja exibida sem passar o mouse e a outra imagem seja mostrada ao passar o mouse. Aquele que aparece ao passar o mouse também exibe uma mensagem.

Escolhi essa imagem como imagem de plano de fundo e defini a imagem do módulo para ter uma opacidade de 0.

Ao pairar, o beija-flor muda para uma águia e exibe uma mensagem. Este está usando o estilo pairar de Kiev .

Mesclando Imagens

Você também pode misturar as duas imagens ajustando a opacidade para que a imagem de fundo apareça através da imagem de primeiro plano. Isso pode criar alguns efeitos e mensagens interessantes.

Este usa o estilo de pairar de Londres . Organizei as mensagens para aproveitar sua colocação. Neste exemplo, o tamanho da fonte do título é definido como 24 e o tamanho da fonte da legenda é definido como 50.

Aqui está a imagem em foco. As opacidades também podem ser ajustadas para mostrar ambas, mas uma pode ser mais proeminente.

Adicionando Links ao Texto

Links podem ser adicionados ao texto da legenda. Isso é feito colocando um pseudo código curto com o texto seguido pelo URL. O shortcode é fornecido na descrição do campo para que você possa copiar e colar. Ele usará os atributos href, target e class.

Este adiciona uma legenda com um link que pode levar os leitores a uma página ou postagem para obter mais informações.

Isso é ótimo para criar CTAs, links para postagens ou páginas, etc., para levar os leitores ao seu conteúdo. As próprias imagens também podem ser clicadas. Isso pode levá-los a um portfólio ou a uma página sobre ou contato.

Botões

Você pode adicionar um botão à imagem para criar uma frase de chamariz.

A imagem à esquerda usa um gradiente radial com marcação para o texto. A imagem à direita exibe o botão com um efeito de foco. Ambas as imagens usam bordas pretas. Eu adicionei uma sobreposição para o plano de fundo do botão e defini o raio da borda como 15. Este exemplo usa o estilo de foco Rochester .

A imagem à esquerda usa um gradiente vertical entre dois tons de preto: o primeiro com 65% de opacidade e o segundo com 19% de opacidade (19%! Eu sei ... de nada!).

Sobreposições, botões e gradientes são ótimos para criar CTAs.

Preço, licença e documentação

Este é um plugin premium. Custa US $ 25 para um único site mais um site de desenvolvimento que permite que você o use em um site de desenvolvimento ao mesmo tempo em que o usa em seu site ativo. São US $ 45 para sites ilimitados .

A documentação é fornecida no site e inclui exemplos e uma área de demonstração onde você pode ver os efeitos ao vivo. O suporte é fornecido por um sistema de tíquetes de suporte.

Pensamentos finais

Image Intense é um excelente módulo para adicionar imagens com transições de foco. As sobreposições podem incluir gradientes, texto, links, vários níveis de opacidade e até mesmo trocar de uma imagem para outra. Texto, botões, links, etc., têm várias opções de posição e existem muitas opções de transição para escolher. Você pode fazer ainda mais adicionando seu próprio CSS.

Achei o módulo intuitivo de usar. Se você pode usar um módulo Divi, então você se sentirá em casa com este. Todos os recursos de estilo estão aqui. As transições de sobreposição de foco são uma ótima maneira de adicionar um pouco de entusiasmo ao seu site Divi. Se você estiver interessado em adicionar transições de foco às suas imagens, acho que vale a pena dar uma olhada no Image Intense.

Nós queremos ouvir de você! Você usou o Image Intense? Conte-nos sobre sua experiência nos comentários abaixo!

Imagem em destaque via wowomnom / shutterstock.com