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 Extensão BG de gradiente animado em Master Addons Pro adiciona esse efeito a qualquer contêiner, seção ou coluna: 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, contêineres, seções e colunas 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 flexibilização são seus para definir.
Um pequeno script adiciona uma camada gradiente atrás do conteúdo e o anima com CSS, portanto não há vídeo para hospedar ou imagem para compactar, e o texto na parte superior permanece selecioná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.
- A Master Addons Pro licença, porque Animated Gradient BG é uma extensão Pro.
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): o tempo que o gradiente leva para percorrer e voltar A demonstração usa 6 segundos.
- Suavidade de Transição (Segundos): mostrado no painel com um padrão de 3, mas na versão atual não altera a animação Use a duração e o Efeito de Animação para ajustar a sensação em vez disso.
- 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 um contêiner, seção ou coluna 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. A Duração Total da Animação define quantos segundos um ciclo completo leva, de 1 a 20, e o Efeito de Animação define a flexibilização O controle deslizante de Suavidade de Transição não afeta a animação na versão atual.
O gradiente animado desacelera minha página?
O efeito é uma animação CSS configurada por um pequeno script em vez de um arquivo de vídeo ou imagem, então há muito pouco 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?
No. Animated Gradient BG é uma extensão Pro em Master Addons Elementor tem um tipo de fundo Gradient livre, mas esse gradiente não se move.
Embrulhando #
O Extensão BG de gradiente animado transforma um fundo de seção em uma cor lenta: uma lista de cores, um ângulo, uma duração e uma flexibilização Mantenha a paleta apertada, verifique o contraste do texto em relação a cada parada e a seção carrega movimento com peso zero do ativo. Ele combina bem com o Extensão Animação Entrada para conteúdo que chega sobre o cenário em movimento, o gratuito Título do gradiente o widget cobre texto gradiente e o conjunto completo de Widgets e extensões Master Addons está a uma página de distância.
