A animação de fundo gradiente pode ser uma ótima técnica de design para dar vida às cores de fundo em seu site da Web. É uma solução perfeita para quem deseja algo mais realista do que uma cor de fundo estática sem ter que recorrer a um fundo de vídeo de carregamento lento. A ideia básica por trás da animação de fundo gradiente é usar CSS para criar ampliar e animar um fundo gradiente para criar transições de cores em movimento suaves.
Neste tutorial, mostraremos como criar animações de fundo gradiente no Divi. Este método combina um snippet CSS personalizado que anima as cores gradientes escolhidas nas configurações Divi integradas. A configuração é bastante simples para um resultado tão bonito.
Vamos começar!
Resultado possível
Aqui está uma visão geral das duas maneiras pelas quais podemos criar uma animação de fundo gradiente no Divi.
Claro, o pré-requisito para este tutorial é que você tenha um Tema Divi instalado e atualizado.
Criação de uma animação de fundo gradiente com o extrato CSS e a opção de fundo do Divi
Para começar, adicione uma linha de uma coluna à seção padrão do Divi Builder.
Configurações de seção
Em seguida, atualize as configurações da seção com uma imagem de fundo. Nosso fundo gradiente será adicionado à nossa linha de modo que se sobreponha a esta imagem.
Atualize o preenchimento da seguinte maneira:
- Preenchimento: 0px alto, 0px baixo
Configurações de linha e coluna
Parâmetros da coluna
Abra as configurações da linha e atualize o preenchimento da coluna da seguinte maneira:
- Estofamento: acima de 12vw
Em seguida, adicione o seguinte CSS personalizado ao elemento da coluna principal:
height: 40vw;
Configurações de linha
Fundo gradiente
Agora podemos adicionar o fundo gradiente à linha. Certifique-se de deixar as cores do gradiente semitransparentes se quiser ver a imagem de fundo da seção.
Atualize os parâmetros de linha da seguinte maneira:
- Cor de fundo gradiente esquerda: rgba (12,113,195,0.8)
- Cor de fundo gradiente à direita: rgba (131,0,233,0.8)
- Tipo de gradiente: linear
- Direção do gradiente: 45 graus
Tamanho
Atualize o tamanho da linha da seguinte maneira:
- Largura: 100%
- Largura máxima: 100%
Classe CSS personalizada
Agora que nosso fundo gradiente está no lugar, precisamos adicionar a animação via CSS customizado. Antes de adicionar o código CSS, precisamos adicionar uma classe CSS personalizada para direcionar essa linha específica.
Vá para a guia avançada e adicione a seguinte classe CSS:
- Classe CSS: gradiente animado
Adicionar um módulo de código
Depois que a classe CSS for adicionada à linha, adicione um módulo de código à linha.
Cole CSS no módulo de código
Em seguida, cole o seguinte código CSS na área Módulo de configurações de código de código:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
Certifique-se de envolver o código no <style></style>tags porque o adicionamos ao código HTML da página.
Resultado
Aqui está o resultado até agora. O fundo gradiente foi ampliado para 400% do tamanho original e é animado movendo-se para a esquerda e para a direita.
Adicione um apelo à ação
Para finalizar o design, vamos adicionar um módulo de apelo à ação para fazer parte do conteúdo.
Configurações de call-to-action
Conteúdo
Atualize o conteúdo como se segue:
- Adicione um título
- Adicionar texto do botão
- Adicionar texto do corpo
- URL do link do botão: #
- Use a cor de fundo: NÃO
Projeto
Vá para a guia Design e atualize o seguinte:
- Fonte do título: Kaushan Script
- Tamanho do texto do título: 4vw (desktop), 30px (telefone)
- Altura da linha de título: 1,4 em
- Polícia do corpo: Roboto
- Tamanho do texto do botão: 16px
- Cor do texto do botão: # 555555
- Plano de fundo do botão: #ffffff
- Largura da borda do botão: 0 px
- Raio da borda do botão: 30 pixels
- Espaçamento entre letras dos botões: 3 px
- Fonte do botão: Roboto condensado
- Peso da fonte do botão: negrito
Resultado
Agora verifique o resultado na página ao vivo com o conteúdo do apelo à ação em vigor. Este seria um ótimo cabeçalho para o seu site da Web !
Lembre-se de que você pode alterar facilmente as cores de fundo de sua linha para o que quiser. O código continuará a ser executado em segundo plano para animar o segundo plano para você.
Se você conhece um pouco de CSS, pode ajustar a velocidade e a direção da animação alterando os valores das propriedades da animação.
Espero que você tenha achado este tutorial útil. Não hesite em compartilhar suas opiniões sobre isso.
