Destaque do plug-in Divi: Complementos do Ultimate Divi Builder

Publicados: 2019-04-13

Divi Builder Addons é um plugin de terceiros que adiciona ao Divi Builder muitos scripts jQuery usados ​​por sites de alta tecnologia. Basta alternar os scripts desejados e adicionar as classes CSS aos módulos Divi Builder. É fácil de usar e inclui muitos recursos e animações.

Menu de complementos do Ultimate Divi Builder

Faça upload e ative o plugin normalmente. Um novo item de menu é adicionado ao menu do painel denominado Complementos do Ultimate Divi Builder. Clicar aqui abre uma tela com vários recursos na janela à esquerda. Clicar em qualquer um deles exibe uma alternância e informações na janela à direita. A janela certa também inclui classes CSS para alguns dos efeitos e mostra como usá-los. Outros incluem vários alternadores para mais recursos e opções, como cores, tamanhos de imagem, durações, etc. Eles estão todos desativados por padrão.

Os recursos exibidos em roxo estão habilitados, enquanto aqueles em cinza estão desabilitados. No exemplo acima, o recurso inclui outras opções, bem como uma classe CSS. Todas as informações de que você precisa sobre como usar um determinado recurso são mostradas na janela à direita quando você clica nele.

Características incluem:

  • Barra de rolagem personalizada
  • DoSlide Horizontal
  • Fade em vista
  • Invertendo o texto
  • Ocultar o cabeçalho do tema Divi ao rolar para baixo
  • jQuery Pageflipping Vertical Scroll
  • jQuery Pageflipping Horizontal Scroll
  • jQuery Scrollflow
  • jQuery ScrollFX
  • jQuery ScrollTrigger
  • jQuery End Page Box
  • Carregando Cabeçalho Enquanto Rolagem Efeito 1
  • Carregando Cabeçalho Enquanto Rolagem Efeito 2
  • Carregando Cabeçalho Enquanto Rolagem Efeito 3
  • Carregando Cabeçalho durante o Efeito de Rolagem 4
  • Revealator Animation
  • Duração da resposta ScrollMagic
  • ScrollReveal
  • StickyStack: efeito de empilhamento jQuery
  • Janelas de rolagem
  • Super Simple Text Rotator / Ticker
  • Uau, animação

Exemplos de complementos do Ultimate Divi Builder

Aqui estão alguns exemplos dos recursos usados ​​com layouts Divi.

Barra de rolagem personalizada

A barra de rolagem personalizada permite que você coloque barras de rolagem em seu conteúdo. Possui 8 efeitos diferentes. Cole a classe CSS no campo Classe CSS da seção, linha ou módulo onde deseja usar o efeito. Neste, adicionei um efeito de barra de rolagem personalizado ao conteúdo do módulo de texto no layout Esports.

Uma barra de rolagem agora aparece em foco para que eu possa rolar para ver mais conteúdo no mesmo espaço. Este é o efeito 1. Ele tem um design diferente no site ao vivo. Iluminei o fundo para que se destaque.

Este é o efeito 3. Ele adiciona setas nas partes superior e inferior do slide.

O efeito 5 muda a alça de uma linha para um ponto e muda o estilo das setas.

Invertendo o texto

Flipping Text é um efeito de digitação de texto que cria uma animação de introdução de tique-taque. Possui 5 efeitos. Para este exemplo, adicionei Flipping Text ao layout Paralegal. Este é o primeiro efeito de digitação de texto invertido. Ele digita uma letra por vez. Existem várias classes diferentes que você pode usar. Cada um digita em uma velocidade diferente.

jQuery ScrollFlow

O jQuery Scroll Flow adiciona animações de rolagem a linhas ou módulos. Possui 5 animações. Eu adicionei este a uma linha no layout Paralegal para que afete todos os módulos juntos. Você também pode adicioná-lo a apenas um dos módulos na linha para que ele deslize no lugar e se encaixe com o resto do conteúdo que já está lá.

Conforme vou até a linha, o conteúdo começa a ser exibido. É menor do que o normal e tem a opacidade definida como baixa o suficiente para permitir que o plano de fundo apareça.

Rolar um pouco mais aumenta o tamanho do conteúdo e a opacidade até que seja revelado em sua largura total e opacidade. Ele diminui novamente conforme eu volto a rolar para cima. Este permanece nos mesmos locais, mas tem várias outras classes para que você possa fazê-lo deslizar da direita, esquerda ou para cima ou para baixo enquanto ajusta seu tamanho e opacidade.

jQuery ScrollFX

jQuery ScrollFX dimensiona o texto e altera a opacidade do fundo. A classe scrollfx é adicionada à seção. Os módulos nesta seção são exibidos normalmente quando você os rola e enquanto eles estão na tela.

Conforme você rola por eles, o conteúdo da seção diminui em tamanho e eles reduzem em opacidade.

jQuery Scroll Trigger

O gatilho de rolagem jQuery desliza um módulo na rolagem de página. Adicione a classe de gatilho de rolagem à seção. Este é o layout do Resort. A imagem de fundo é automaticamente movida para o lado quando a classe é adicionada.

Todo o conteúdo, incluindo imagens, botões, texto, etc., desliza para o lugar conforme você acessa essa seção.

E então ele se acalma assim que tudo estiver no lugar.

jQuery End Page Box

jQuery End Page Box coloca uma caixa que fica na parte inferior da tela. É criado adicionando código a um módulo de texto no final de uma seção.

Isso adiciona uma caixa que aparece na parte inferior da tela e muda para mostrar o conteúdo diferente que você especifica para cada seção.

Aqui está a próxima seção. A caixa desliza para fora e para dentro de diferentes direções ou com diferentes animações para cada uma das seções.

Carregando cabeçalho durante a rolagem

Carregando o cabeçalho durante a rolagem adiciona uma barra ao menu que mostra o quanto você viu de uma página. Não requer uma classe CSS. Você pode personalizar a cor da barra de rolagem. Existem quatro estilos para escolher.

Este é o efeito 1. Ele adiciona uma linha de rolagem na parte superior da tela. Ele aumenta de tamanho conforme você rola, mostrando quanto da página o visitante viu.

Este é o efeito 2. Ele exibe uma barra muito mais ampla.

Este é o efeito 3. Ele cresce verticalmente conforme você rola, ocupando a altura do logotipo. Não fica muito grande, mas ainda mostra o efeito de rolagem.

O efeito 4 ocupa a largura do logotipo.

Revelador

O Revealator adiciona animações acionadas por rolagem a seções, linhas ou módulos. Possui cerca de 40 opções. Estou adicionando a uma sinopse no layout Padaria. A sinopse está faltando até que o contêiner esteja totalmente visível na tela.

Ele é animado na tela de acordo com a classe que você escolher. Este tem várias opções de animação, incluindo fade, girar para a esquerda, girar para a direita, deslizar para a esquerda, deslizar para a direita, deslizar para cima, deslizar para baixo, aumentar e diminuir o zoom.

Toalhetes de seção mágica de rolagem

O Scroll Magic Section Wipes cria uma animação que limpa o conteúdo da tela conforme você rola. Acho que este é o meu favorito de todos os efeitos. É adicionado à seção.

Uma vez que a seção esteja totalmente exibida na tela, ela congela no lugar e a próxima seção rola sobre ela. Você pode adicionar isso a quantas seções para criar um método de rolagem interessante para a página inteira. Se você deseja que todas as seções se sobreponham, você estará interessado no recurso StickyStack.

Rolo Revelar

Scroll Reveal revela módulos em scroll. Escolha entre 17 animações diferentes. Você pode adicioná-lo a seções, linhas ou módulos. A seção na parte inferior está ampliando em direção ao leitor na rolagem.

Este é o efeito 1f. A linha gira no lugar conforme você rola até ela.

StickyStack: efeito de empilhamento jQuery

StickyStack: o efeito de empilhamento jQuery empilha painéis conforme eles alcançam o topo de uma janela de exibição. Em outras palavras, cada seção congela na tela conforme você rola e a próxima seção rola para se sobrepor. O resultado parece incrível na rolagem. Este é o layout de gerenciamento de risco.

Aqui está outra seção da mesma página. As porções sobrepostas funcionam perfeitamente.

Super Simple Text Rotator / Ticker

Super Simple Text Rotator / Ticker permite adicionar marcação ao texto e girar várias palavras. Possui 5 estilos de animação. Este está girando entre as palavras Simples e Personalizável.

Aqui, ele é girado para exibir a segunda palavra. Ambas as palavras aparecem e desaparecem gradualmente.

Preço de addons do Ultimate Divi Builder

Os complementos do Ultimate Divi Builder custam US $ 59 para uso em sites ilimitados e incluem atualizações vitalícias. As atualizações costumam adicionar novos recursos. Você pode experimentar uma demonstração gratuitamente para ver se gosta.

  • Você pode comprar os complementos do Ultimate Divi Builder em DiviBuilderAddons.com.

Reflexões finais

Complementos do Ultimate Divi Builder tem muito a oferecer e podem economizar muito tempo no desenvolvimento de recursos e animações. Fiquei impressionado com o número de recursos incluídos e como são fáceis de usar.

Alguns são mais difíceis de mostrar sem preencher este artigo com GIFs grandes. Por exemplo, Wow Animation tem 75 animações para escolher, e você pode alterar o atraso, a duração, a distância e o número de vezes que ele se repete.

O plug-in exige que você se sinta confortável ao colar uma classe CSS em uma seção, linha ou módulo. Felizmente, isso é fácil de fazer e há muitas informações na documentação do Divi sobre como colar classes CSS.

Se você estiver interessado em uma maneira fácil de adicionar muitos recursos e animações ao Divi, vale a pena conferir os Complementos do Ultimate Divi Builder.

Nós queremos ouvir de você. Você já experimentou os complementos do Ultimate Divi Builder? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque via GoodStudio / shutterstock.com