Divi Plugin Highlight - Módulo Tilt Blurb Divi

Os Blurbs são populares nos layouts Divi. Eles exibem texto, imagens, ícones e muito mais, o que é ótimo para mostrar produtos e serviços. E se você quisesse que eles se destacassem mais e fornecessem animações interessantes em foco? Animações comuns podem ser feitas por meio de CSS, mas e se você quisesse algo diferente? Um plugin chamado Tilt Blurb Divi Module pode ser o que você está procurando.

O que é o módulo Tilt Blurb?

Tilt Blurb Module é um plugin de terceiros da Hadworm que adiciona um novo módulo de blurb ao Divi Builder (para Divi e Extra) que adiciona efeitos de inclinação interessantes, criando uma aparência 3D. Neste destaque do plugin, daremos uma olhada no módulo e ver o que ele pode fazer. Mostrei alguns gifs, mas a maioria serão imagens devido ao tamanho dos arquivos do gif. As imagens dos exemplos foram tiradas de Unsplash.com e de WordPress.org.

Instalando o Módulo Tilt Blurb Divi

Faça upload e ative o plugin normalmente. No link Plugin no menu do painel, você encontrará um novo item chamado Tile Blurb License. Clique aqui, insira sua chave de licença e salve as alterações. Isso irá garantir que você obtenha atualizações.

Um novo módulo é adicionado ao Divi Builder chamado Tilt Blurb. É de cor roxa dentro do Divi Builder, por isso é difícil de perder. Gosto quando os desenvolvedores usam cores diferentes para seus módulos, para que se destaquem dos módulos padrão (pelo que vale a pena).

O módulo inclui as guias padrão mais uma nova:

• Conteúdo - texto, link, imagem e ícone, plano de fundo, rótulo de administrador
• Configurações de inclinação - configurações de inclinação, fundo de inclinação, camadas de inclinação
• Design - imagem e ícone, texto, texto do cabeçalho, corpo do texto, borda, dimensionamento, espaçamento
• Avançado - CSS ID e classes, CSS personalizado, animação, visibilidade

Configurações de inclinação

Para esses exemplos, adicionei um plano de fundo e coloquei uma imagem menor como primeiro plano sobre ele para criar os efeitos 3D. E então fiz café. Muito café.

Exemplo com configurações padrão

Aqui está um exemplo de como a inclinação 3D fica antes de ajustar. Eu adicionei um título, texto, plano de fundo e ícone. A inclinação segue meu mouse e diferencia o texto e o ícone da imagem, dando-lhe uma aparência 3D. Para mim, o efeito de paralaxe eliminou o fundo, então não o usei.

Tamanho com imagem

Isso dimensiona a sinopse usando uma imagem oculta e centraliza o conteúdo.

Incline o tamanho do Blurb com 2 imagens com conteúdo flutuante

Este inclui duas imagens - uma para o primeiro plano e outra para o fundo. A imagem e o texto do primeiro plano estão em 3D usando o recurso de conteúdo flutuante.

Você pode ajustar a quantidade de flutuação que funciona como um zoom, trazendo o conteúdo do primeiro plano para mais perto do leitor. Esta imagem usa 200 para o valor flutuante, que está no máximo.

Quantidade de inclinação

O controle deslizante de quantidade de inclinação permite controlar o quanto a imagem será inclinada. A configuração padrão é 20. Este usa 100.

Perspectiva de inclinação

A perspectiva de inclinação aprofunda a perspectiva. Quanto menor o número, mais profunda é a perspectiva. O padrão é 1000. Este exemplo é 200.

Escala de inclinação

A escala de inclinação é um nível de zoom. O padrão é 1,1, o que significa que, ao passar o mouse, a imagem é multiplicada por 1,1. Este exemplo é 2. Vai para 0, mas o nível 0 criou um zoom contínuo para frente e para trás que não funcionou para esta imagem. Pode levar alguns experimentos para fazer o que você deseja.

Velocidade de inclinação

A velocidade de inclinação controla a velocidade com que a imagem se move enquanto você passa o mouse. Quanto menor o número, mais rápido ele se move. O padrão é 100. Este é 5000. Eu gosto do efeito lento.

Inclinar para trás

Inclinação reversa altera a direção da inclinação. Normalmente, a inclinação se afasta do mouse. Inverter inclina a imagem em direção ao mouse.

Tilt Glare

Tilt Glare adiciona um efeito de reflexo que segue o mouse. A quantidade de brilho é ajustável. A imagem acima usa 0,8, que é a configuração padrão. Isso é ótimo para criar efeitos de iluminação.

Raio da fronteira

O raio da borda altera a forma da borda. O padrão é 40. Isso é definido como 100, o valor máximo.

Fundo de inclinação

Inclinar fundo permite definir uma cor de fundo e efeitos de borda.

Fundo de inclinação

Um efeito colateral da Tilt Background Color é que ela cria um belo brilho ao redor da imagem.

Ajuste a cor do fundo de inclinação, largura da borda, estilo da borda do fundo, largura da borda e cor da borda e sombra da caixa.

Distância de inclinação do fundo

A distância do plano de fundo da inclinação ajusta a distância da sombra. É definido como -50 por padrão. Este exemplo usa -25.

Este exemplo usa uma distância de inclinação do fundo de 0 e uma opacidade de 0,3, o que cria uma sobreposição sobre o fundo.

Inclinar o tamanho / escala do fundo

O tamanho / escala do fundo de inclinação altera a distância do fundo de inclinação. O padrão é 1.04. Este é 1,2.

Camadas de inclinação

Tilt Layers aplica a mesma imagem repetidamente como camadas múltiplas, criando um efeito 3D sólido. Ele pode usar uma imagem ou uma cor de fundo e você pode ajustar a profundidade da camada. Apliquei a imagem acima com uma profundidade de camada de 50.

A imagem que apliquei é vista aqui como a borda. Ajustei o valor da inclinação para facilitar a visualização.

Como esperado, a parte inferior da imagem parece diferente. Esta é uma ótima maneira de adicionar alguma textura à borda. Uma profundidade de camada menor tornará a borda mais fina.

Este usa uma profundidade de camada de 10.

Este exemplo usa tanto o plano de fundo quanto as camadas de inclinação.

Aqui está um logotipo WordPress 3D que parece estar envolto em cristal. Eu carreguei o logotipo na área de imagem e ícone, configurei a quantidade de inclinação para 100, usei o brilho de inclinação padrão, adicionei o logotipo à imagem da camada em Camadas de inclinação, defina uma profundidade de camada de 50 e defina a cor da camada para branco e quase totalmente transparente.

Aqui está o logotipo sem nenhuma cor de camada. Os lados são mais difíceis de ver.

Licença, suporte e documentação

O plugin pode ser usado em sites ilimitados para você e seus clientes. Inclui 6 meses de suporte. A documentação é fornecida no site do desenvolvedor. Inclui instruções sobre como criar alguns dos exemplos apresentados no site. Eu gostaria de ver ainda mais exemplos de como os logotipos foram feitos.

Pensamentos finais

O Módulo Tilt Blurb oferece muitos efeitos interessantes de inclinação, o que cria uma boa aparência 3D para as imagens, ícones e texto. É uma ótima maneira de criar CTAs, capas de livros em 3D e imagens de produtos. O módulo Tilt Blurb é inovador e intuitivo. Se você quiser adicionar alguns efeitos agradáveis ​​de inclinação às suas sinopses, vale a pena dar uma olhada no módulo Tilt Blurb.

Nós queremos ouvir de você. Você já experimentou o módulo Tilt Blurb Divi? Deixe-nos saber o que você pensa sobre isso nos comentários abaixo.

Imagem em destaque via hobbit / shutterstock.com