Maneiras criativas de combinar efeitos de rolagem de rotação com elementos circulares em Divi

Estamos sempre procurando maneiras novas e criativas de apresentar itens em destaque (como produtos e serviços) ao projetar um novo site. E, com os efeitos de rolagem do Divi, novas portas foram abertas para levar seus layouts de sinopse a um nível totalmente novo. Neste tutorial, vamos mostrar como criar um layout de módulo blurb com elementos circulares giratórios na rolagem. Este layout exclusivo apresenta um uso inteligente de combinações de cores com vários elementos circulares que giram atrás de sinopses quando o usuário rola a página para baixo. Sem dúvida, esse design teria muitos aplicativos para praticamente qualquer conteúdo.

Aproveitar!

Espiada

Aqui está uma rápida olhada no layout do blurb com elementos circulares giratórios que estamos construindo neste tutorial.

Baixe o Layout Blurb Rotating Circular Elements GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo JSON para o Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Criando o layout do Blurb com elementos circulares giratórios em Scroll in Divi

Adicionando a linha

Primeiro, adicione três linhas de coluna à seção.

Margem de seção temporária

Em seguida, adicione algumas margens superior e inferior à seção para criar algum espaço para rolar.

Criação de elemento circular rotativo Blurb Design # 1

Para nosso primeiro projeto, vamos criar um módulo de sinopse com três módulos divisores coloridos que ficarão atrás da sinopse e girarão conforme o usuário rolar. Este primeiro desenho servirá como um bom modelo para os próximos dois desenhos que iremos adicionar às outras colunas.

Veja como construí-lo.

Adicionar módulo do Blurb

Na coluna 1, adicione um módulo de sinopse.

Conteúdo do Blurb 1

Abra as configurações do módulo blurb e atualize o conteúdo do corpo com o seguinte:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Em seguida, adicione um ícone de sua escolha para substituir a imagem padrão.

Configurações de design do Blurb 1

Na guia de design, atualize o seguinte:

• Cor de fundo: # 121212
• Cor do ícone: # 41828d
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 75 px
• Alinhamento de texto: centro
• Fonte do título: Oswald
• Estilo da fonte do título: TT
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 22px
• Cor do corpo do texto: #ffffff

Para tornar a sinopse circular, atualize o tamanho e os cantos arredondados da seguinte forma:

• Largura: 300px
• Largura máxima: 300px
• Preenchimento: 25px superior, 25px inferior, 25px à esquerda, 25px à direita
• Cantos arredondados: 50%

A combinação de largura e altura iguais combinadas com os cantos arredondados é o que torna a sinopse circular.

Em seguida, atualize a posição com um deslocamento.

• Cargo: Relativo
• Deslocamento vertical: 25px
• Deslocamento horizontal: 25px
• Índice Z: 1

Isso centralizará a sinopse dentro das divisórias que adicionaremos mais tarde. O índice Z garantirá que a sinopse fique acima dos outros divisores também.

Em seguida, adicione um efeito de rolagem giratória à sinopse.

Na guia Efeitos de rotação…

• Habilitar rotação: SIM
• Rotação inicial: 45deg (na janela de visualização de 0%)
• Rotação média: 0deg (na janela de visualização 40% -60%)
• Rotação final: -45deg (na janela de visualização 100%)

Isso girará a sinopse ligeiramente para uma posição vertical em direção ao meio da página e, em seguida, girará outros 45 graus conforme sai do topo da página.

Adicionar divisor circular nº 1

Agora vamos adicionar nosso primeiro dos três módulos divisores que formarão nosso design de elemento circular giratório.

Adicione um módulo divisor no módulo blurb.

Configurações da divisória 1

Abra as configurações do divisor e atualize o seguinte:

• Mostrar divisor: NÃO
• Cor do gradiente de fundo à esquerda: # 311847
• Cor certa do gradiente de fundo: # ec4067
• Posição inicial: 50%
• Posição final: 50%

E agora o tornamos circular da seguinte maneira:

• Largura: 350px
• Largura máxima: 350 px
• Altura: 350px
• Cantos arredondados: 50%

Observe que o divisor é ligeiramente maior do que o módulo de sinopse, de modo que poderemos ver a borda externa do divisor, uma vez posicionado atrás da sinopse.
Agora, simplesmente atualizamos a posição do divisor para absoluto e ele ficará perfeitamente atrás da sinopse.

• Posição: Absoluta

Se seu divisor estiver no topo da sinopse, certifique-se de ter atualizado o índice z da sinopse para 1.

Em seguida, adicione os seguintes efeitos de rolagem ao divisor:

Na guia Efeito de rotação ...

• Habilitar rotação: SIM
• Rotação inicial: 0deg (na janela de visualização de 0%)
• Rotação média: 45 graus (na janela de visualização de 50%)
• Rotação final: -180deg (na janela de visualização 100%)

Adicionar divisor circular 2

Para criar o segundo divisor circular, abra a caixa de camadas clicando no ícone de camadas no menu de configurações. Em seguida, duplique o módulo divisor para criar um novo.

Atualizar as configurações de design do divisor 2

Para este divisor, vamos dar a ele uma cor de fundo gradiente diferente da seguinte maneira:

• Cor do gradiente de fundo à esquerda: rgba (160,26,125,0,5)
• Cor do gradiente de fundo à direita: rgba (255,255,255,0)

NOTA: É importante usar cores semitransparentes aqui para expor o fundo por trás delas. Isso cria uma bela combinação de cores.

Em seguida, atualize os efeitos de rolagem da seguinte forma:

Na guia Efeitos de rotação ...

• Rotação média: 90 graus (na janela de visualização de 50%)
• Rotação finalg: 180deg (na janela de visualização 100%)

Adicionar Divisor Circular 3

Continue o mesmo processo para criar o terceiro e último divisor, duplicando o divisor 2.

Atualizar as configurações de design do divisor 3

Para este divisor, vamos também dar a ele uma cor de fundo gradiente diferente da seguinte maneira:

• Cor do gradiente de fundo à esquerda: rgba (255,255,255,0)
• Cor direita do gradiente de fundo: rgba (41,196,169,0,5)

Em seguida, atualize os efeitos de rolagem da seguinte forma:

Na guia Efeitos de rotação ...

• Rotação média: 180 graus (na janela de visualização de 50%)
• Rotação finalg: 360deg (na janela de visualização 100%)

Na guia Escala para cima e para baixo ...

• Habilitar aumento e redução de escala: SIM
• Escala inicial: 110% (na janela de visualização de 0%)
• Escala média: 110% (na janela de visualização de 50%)
• Escala final: 100% (na janela de visualização de 100%)

Criação de elemento circular rotativo Blurb Design # 2

Como já temos um projeto concluído na coluna 1, vamos iniciar o segundo projeto duplicando toda a primeira coluna. Isso irá transportar os quatro módulos também. Você precisará excluir uma das colunas vazias para manter o layout de três colunas.

Atualizar o design do módulo do Blurb

Para este projeto, vamos usar um fundo branco da sinopse para que possamos usar o efeito de filtro de tela para mostrar as cores em movimento por trás do texto da sinopse. Também vamos adicionar um efeito de rolagem de escala para aumentar o divisor posterior.

Veja como fazer.

Abra as configurações do módulo blurb na coluna 2 e atualize o seguinte:

• Plano de fundo: #ffffff

Em seguida, altere o Título e a Cor do Texto do Corpo para preto.

• Cor do texto do título: # 000000
• Cor do corpo do texto: # 000000

Em seguida, adicione o seguinte modo de mistura:

• Modo de mistura: tela

Atualizar efeitos de rolagem do Divider 1

Abra as configurações do módulo divisor diretamente sob o módulo blurb na coluna 2 e atualize os seguintes efeitos de rolagem:
Na guia de efeitos Escala para cima e para baixo ...

• Habilitar aumento e redução de escala: SIM
• Escala inicial: 100% (na janela de visualização de 0%)
• Escala média: 120% (na janela de visualização 40% -60%)
• Escala final: 100% (na janela de visualização de 100%)

Isso fará com que o divisor aumente em 20% seu tamanho original no meio do caminho conforme o usuário rola a página para baixo.

Criação de elemento circular rotativo Blurb Design # 3

Para este último design, vamos criar uma sinopse circular giratória semelhante à da coluna 1. No entanto, iremos adicionar um modo de mesclagem diferente para mostrar as cores através do texto branco em um fundo escuro.

Veja como fazer.

Coluna Duplicada 1

Como já temos um projeto concluído na coluna 1, vamos iniciar o terceiro projeto duplicando toda a primeira coluna e movê-la para a colocação da terceira coluna usando a caixa de camadas. Em seguida, exclua a coluna vazia extra.

Atualizar as configurações do módulo Blurb

Primeiro, vamos adicionar o modo de mistura de multiplicação para mostrar as cores divisórias através do texto branco da seguinte forma:

• Modo de mistura: múltiplo

Em seguida, atualize a cor do ícone para branco também.

• Cor do ícone: #ffffff

Atualizar as configurações do Divider 3

Agora vamos tirar o efeito de rolagem de escala no último (terceiro) divisor na coluna 3.
Abra as configurações do terceiro divisor e atualize o seguinte:

Na guia Aumentar e diminuir os efeitos ...

• Habilitar aumento e redução de escala: NÃO

Ajuste a posição da coluna 2 no celular

No momento, os três designs de blurb serão alinhados à esquerda da tela em telas de tablets e telefones. Para equilibrar o design, podemos mover a coluna do meio para a direita facilmente usando a escala de transformação.

Abra as configurações da coluna 2 e atualize o seguinte:

Transformar escala X eixo: 40% (no tablet), 15% (no telefone)

Resultado final

É isso! Vamos conferir o resultado final em uma página ao vivo.

Aqui está o design na área de trabalho à medida que o usuário rola pelo layout.

Aqui está o design do tablet.

E aqui está no telefone.

Pensamentos finais

Um dos melhores recursos desse layout é o quão criativo você pode ser com os efeitos de rolagem e as combinações de cores, cada uma delas facilmente ajustada usando as opções integradas do Divi. E quando você entende melhor como incorporar efeitos de filtro, as coisas realmente começam a estourar. Esperamos que isso lhe dê alguma inspiração para o próximo layout de blurb que você criar.

Estou ansioso para ouvir de você nos comentários.

Saúde!