Uma cor de fundo plana faz o seu trabalho e desaparece Um gradiente que lentamente deriva entre as cores faz com que a mesma seção pareça viva sem adicionar uma única imagem O Gradiente Animado BG extensão em Complementos Mestres para Elementor adiciona esse efeito a qualquer seção ou contêiner: escolha suas cores, defina o ângulo e a velocidade e o fundo passe por elas por conta própria.
Aqui está o efeito em execução em uma página ao vivo A seção muda através de seu conjunto de cores enquanto o conteúdo permanece colocado:
O que a extensão Animated Gradient BG faz #
Uma vez habilitados, os contêineres e seções recebem um Fundo de gradiente animado painel em seus Estilo tab, logo abaixo da seção normal Fundo Você carrega com duas ou mais cores, e a extensão renderiza um gradiente que anima entre eles em um loop O ângulo, o tempo total do ciclo e a suavidade de cada transição são todos seus para definir.
Tudo é executado em CSS no próprio elemento, portanto não há vídeo para hospedar ou imagem para compactar, e o texto na parte superior permanece selecionável e legível.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Animated Gradient BG é uma extensão gratuita, portanto nenhuma licença Pro é necessária.
Como ativar a extensão Animated Gradient BG #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. O gradiente animado BG fica no Widgets Animação grupo, ao lado de Partículas e Slider de Fundo Clique em seu alternar para que ele fique roxo, em seguida, bater Salvar alterações e aguarde o verde “Configurações salvas com sucesso no aviso de”.
Configure o gradiente em uma seção #
Selecione o contêiner ou seção no editor Elementor e abra o Estilo guia. O Fundo de gradiente animado seção com o emblema MA roxo fica logo abaixo do Fundo. Virar Habilitar Gradiente Animado para Sim, e os controles aparecem enquanto a tela visualiza o efeito ao vivo.
- Efeito Animação: a flexibilização do movimento de cores, Ease In na demonstração.
- Ângulo: a direção do gradiente, -45 na demonstração para uma varredura diagonal.
- Duração Total da Animação (Segundos): uma viagem completa através de todas as suas cores A demonstração usa 6 segundos.
- Suavidade de Transição (Segundos): quão suavemente uma cor passa para a próxima, 3 segundos na demonstração A dica do painel diz isso diretamente: valores mais altos criam transições mais suaves entre as cores.
- Cor: um repetidor segurando o gradiente para. Clique Adicionar Item para outra cor, ou o X para soltar uma.
Escolha as cores #
Cada linha da lista de Cores abre um selecionador padrão A demonstração começa com um conjunto ciano, roxo e laranja, depois troca paradas para dentro e para fora: remova uma e o loop aperta, adicione um azul profundo (#3D6CD6) e o ciclo pega imediatamente A visualização ao vivo torna esta a parte divertida; você observa o clima da seção mudar a cada parada que você toca.
Duas ou três cores na mesma faixa de temperatura são lidas como elegantes Cinco cores em toda a roda são lidas como um protetor de tela Comece pequeno.
O resultado na página #
Publique e observe a seção respirar através de suas cores, como no GIF no topo desta página O ciclo completo leva tudo o que você definir como a duração, em seguida, loops Botões, títulos e imagens ficam no topo sem serem afetados.
Uma nota prática: o texto escuro permanece legível em paradas de gradiente de luz, mas pode desaparecer em paradas saturadas Verifique sua manchete em relação a todas as cores do conjunto, não apenas no primeiro quadro.
Onde gradientes animados funcionam bem #
- Secções herói. Movimento acima da dobra sem um vídeo de fundo pesado.
- Bandas de call-to-action. Um cenário mutável chama a atenção para o botão que está montado nele.
- Em breve e páginas de destino. Um gradiente de tela cheia carrega uma página esparsa por conta própria.
- Sites de portfólio e agência. Cores da marca percorrendo o cabeçalho, sem pagar por um vídeo de estoque.
- Seções preços. Um gradiente sutil por trás do plano destacado o separa do resto.
Vídeo Tutorial #
Observe o gradiente construído do zero, desde a habilitação da extensão até o fundo móvel finalizado.
Perguntas frequentes #
Como adiciono um fundo gradiente animado no Elementor?
Habilite a extensão Animated Gradient BG na guia Master Addons Extensions, selecione uma seção ou contêiner e abra a guia Estilo. Ative a ativação do gradiente animado no painel Fundo do gradiente animado, adicione duas ou mais cores e o plano de fundo começará a circular imediatamente.
Quantas cores o gradiente pode usar?
Tantos quantos você adicionar ao repetidor de Cores Cada clique em Adicionar Item cria outra parada gradiente, e a animação percorre todos eles dentro da duração total que você definiu Duas a quatro cores cobre a maioria dos designs.
Posso controlar a velocidade da animação gradiente?
Sim, com duas configurações A duração total da animação define quantos segundos leva um ciclo completo de cores, e a suavidade da transição controla a forma como gradualmente cada cor se mistura com a próxima Valores de suavidade mais altos geram mais quadros-chave para uma transferência mais suave.
O gradiente animado desacelera minha página?
O efeito é gerado com animação CSS no elemento em vez de um arquivo de vídeo ou imagem, então não há nada extra para baixar É uma das maneiras mais leves de colocar movimento em uma seção de herói.
A extensão Animated Gradient BG é gratuita?
Sim. Animated Gradient BG vem com a versão gratuita de Master Addons for Elementor, no grupo Animation Widgets da guia Extensões A página de preços cobre o que os planos Pro adicionam.
Embrulhando #
A extensão Animated Gradient BG transforma um fundo de seção em cores lentas: uma lista de cores, um ângulo e dois controles deslizantes de temporização Mantenha a paleta apertada, verifique o contraste do texto em cada parada e a seção carrega movimento com peso de ativo zero. Ele combina bem com o Extensão Animação Entrada para conteúdo que chega ao cenário em movimento e o conjunto completo de Widgets e extensões Master Addons está a uma página de distância.
