Baixe GRATUITAMENTE a seção colorida do herói da animação Spatter para Divi

A maneira como você projeta a seção principal de sua página define as expectativas para o restante de sua página. Se você está criando uma página de destino que celebra algo, seja um aniversário ou uma liquidação, isso pode definitivamente ajudar a trazer um clima festivo para seu design. Uma maneira de abordar isso é adicionando uma animação de respingos coloridos ao plano de fundo da seção do herói. O foco ainda permanecerá na cópia escrita e no CTA que você fornecer. Neste tutorial, mostraremos como criar uma bela seção de animação com respingos coloridos com as configurações integradas do Divi. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout da seção do herói Spatter Animation GRATUITAMENTE

Para colocar as mãos no layout da seção do herói de animação de respingos grátis, primeiro você precisa baixá-lo 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!

Vamos começar a recriar!

Adicionar nova seção

Fundo Gradiente

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e aplique um fundo gradiente de sua escolha.

• Cor 1: # 070a49
• Cor 2: # 6f00f7
• Tipo de gradiente: Linear
• Direção do gradiente: 148 graus

Dimensionamento

Vá para a guia de design da seção e adicione uma altura mínima às configurações de dimensionamento. Isso tornará nossa seção em tela cheia.

• Altura mínima: 100vh

Espaçamento

Estamos removendo todo o preenchimento padrão superior e inferior a seguir.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Visibilidade

E para garantir que nenhuma barra de rolagem horizontal apareça em nosso design, ocultaremos os estouros da seção.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar linha # 1

Estrutura da Coluna

Depois que as configurações da seção estiverem definidas, adicione uma primeira linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha toque os lados esquerdo e direito do contêiner de seção, modificando as configurações de dimensionamento da seguinte forma:

• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

CSS do elemento principal

E para garantir que os módulos apareçam lado a lado em tamanhos de tela menores, adicionaremos uma linha de código CSS ao elemento principal da linha.

display: flex;

Animação da coluna 1

Depois que as configurações gerais de linha estiverem definidas, abra as configurações da coluna 1 e adicione animação.

• Estilo de Animação: Zoom
• Direção da Animação: Centro
• Intensidade de animação: 100%

Animação da coluna 2

Adicione animação à segunda coluna a seguir.

• Estilo de Animação: Zoom
• Direção da Animação: Centro
• Atraso de animação: 250ms
• Intensidade de animação: 100%

Animação da coluna 3

E estamos usando animação para a terceira coluna também.

• Estilo de Animação: Zoom
• Direção da Animação: Centro
• Atraso de animação: 500ms
• Intensidade de animação: 100%

Adicionar Módulo de Imagem à Coluna 1

Carregar imagem Spatter

É hora de adicionar módulos, começando com um Módulo de imagem na coluna 1. Carregue a imagem de respingo que você pode encontrar na pasta de download que você baixou no início deste tutorial.

Dimensionamento

Vá para a guia de design do módulo e force a largura total nas configurações de dimensionamento.

• Forçar largura total: Sim

Filtros

Em seguida, altere as cores do módulo usando as configurações de filtros.

• Matiz: 303deg
• Saturação: 200%

Escala de transformação

Também estamos dimensionando a imagem nas configurações de transformação.

• Inferior: 150%
• Certo: 150%

Efeito de rolagem de movimento vertical

Em seguida, vá para a guia avançada e habilite algum movimento vertical.

• Habilitar movimento vertical: Sim
• Compensação inicial: 0
• Offset médio:
  • Desktop: 0 (em 50%)
  • Tablet: 0 (em 70%)
  • Telefone: 0 (a 85%)
• Compensação final: 2
• Gatilho de efeito de movimento: parte inferior do elemento

Efeito de rolagem de movimento horizontal

Estamos usando algum movimento horizontal também.

• Habilitar Movimento Horizontal: Sim
• Compensação inicial:
  • Desktop: -10
  • Tablet e telefone: 0
• Deslocamento médio: 0
• Compensação final: 4
• Gatilho de efeito de movimento: parte inferior do elemento

Dimensionamento do efeito de rolagem para cima e para baixo

Junto com um efeito de aumento e redução.

• Habilitar aumento e redução de escala: Sim
• Escala inicial: 100%
• Escala média: 150%
• Escala Final: 200%
• Gatilho de efeito de movimento: parte inferior do elemento

Clone o módulo de imagem duas vezes e coloque duplicatas nas colunas restantes da linha

Assim que o primeiro Módulo de imagem for concluído, você pode clonar o módulo inteiro duas vezes e colocar as duplicatas nas colunas restantes da linha.

Alterar Módulo de Imagem na Coluna 2

Espaçamento

Abra o Módulo de imagem na coluna 2 e adicione alguma margem superior no tablet e telefone.

• Margem superior: 50% (apenas tablet e telefone)

Filtros

Altere o matiz nas configurações de filtros também.

• Matiz: 55deg

Alterar Módulo de Imagem na Coluna 3

Filtros

Em seguida, abra o Módulo de Imagem na terceira coluna e altere as configurações de filtros de acordo:

• Matiz: 309deg
• Brilho: 0%

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha. Use a seguinte estrutura de coluna:

Posição

Abra as configurações de linha e altere as configurações de posição da linha na guia avançada.

• Posição: Absoluta
• Localização: Centro

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo H1

É hora de adicionar módulos, começando com um Módulo de Texto contendo algum conteúdo H1 de sua escolha.

Configurações de texto H1

Altere as configurações de texto H1 do módulo da seguinte forma:

• Fonte do título: Rubik
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 80 px (desktop), 50 px (tablet), 35 px (telefone)

• Comprimento vertical da sombra do texto do cabeçalho: 0,08em
• Força do borrão da sombra do texto do cabeçalho: 0em
• Cor da sombra do texto do cabeçalho: # 1a005b

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo

Em seguida, adicione outro Módulo de Texto com algum conteúdo de descrição.

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do Texto: Muli
• Cor do texto: #dddddd
• Tamanho do texto: 15 px (desktop), 14 px (tablet e telefone)
• Altura da linha de texto: 2.1em

• Cor da sombra do texto: # 1a005b

Dimensionamento

Modifique a largura do módulo a seguir.

• Largura: 60% (desktop), 100% (tablet e telefone)

Espaçamento

E complete as configurações do módulo adicionando alguma margem superior e inferior em diferentes tamanhos de tela.

• Margem superior: 6% (desktop), 10% (tablet), 14% (telefone)
• Margem inferior: 6% (desktop), 10% (tablet), 14% (telefone)

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O último módulo de que precisamos em nossa coluna é um Módulo de botão. Adicione alguma cópia de sua escolha.

Configurações de botão

Em seguida, vá para a guia de design e estilize o botão da seguinte maneira:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 17 px
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ea01a6
• Largura da borda do botão: 0 px
• Raio da borda do botão: 100 px

• Fonte do botão: Rubik
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

Adicione alguns valores de preenchimento personalizados nas configurações de espaçamento também.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 60px
• Preenchimento direito: 60px

Sombra da caixa

E complete as configurações do módulo adicionando uma sombra de caixa.

• Posição horizontal da sombra da caixa: 5 px
• Posição vertical da sombra da caixa: 5 px
• Cor da sombra: # 30005b

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como ser criativo com a animação integrada e os efeitos de rolagem do Divi. Mais especificamente, mostramos como criar uma seção de herói de animação com respingos coloridos para uma página de destino que você está configurando para uma ocasião especial. Essa ocasião pode ser, mas não se limita ao aniversário da sua empresa ou a uma venda especial. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.