Fundo de gradiente animado do elementor (Pro): seções de gradiente móveis
Animated Gradient BG é uma extensão Master Addons Pro que coloca um gradiente linear em movimento lento atrás de um contêiner, seção ou coluna Você escolhe duas ou mais cores, o ângulo, a duração e a flexibilização, e o gradiente deriva para frente e para trás em um loop sem qualquer imagem ou arquivo de vídeo É frequentemente usado para seções de heróis, bandas de call-to-action e páginas em breve Para texto de cor gradiente em vez de um fundo, experimente o livre Título do gradiente widget.
Duas ou mais cores, um gradiente móvel
Adicione cores no Cor lista, uma linha por cor A extensão precisa de pelo menos dois Ele os espaça uniformemente através de um gradiente linear e repete a primeira cor no final, de modo que o loop não tem borda dura Não há configurações para posições de parada de cor ou um gradiente radial O editor de visualização atualiza à medida que você escolhe cores.
- Lista de cores: adicionar, duplicar ou excluir linhas Duas a quatro cores geralmente são as melhores.
- Cores transparentes: o gradiente fica em sua própria camada acima do fundo normal da seção, de modo que as cores com transparência permitem que uma imagem de fundo apareça.
- Onde funciona: contêineres, seções e colunas, na guia Estilo Os widgets não recebem o painel.
Ângulo, Duração e Facilitação
Ângulo define a direção do gradiente de -45 a 180 graus, com -45 como padrão. Duração Total da Animação (Segundos) corre de 1 a 20 e padrão para 6 É o tempo que o gradiente leva para derivar através e para trás. Efeito Animação define a flexibilização: Linear, Facilidade, Facilidade de Entrar, Facilidade de Sair, Facilidade de Entrar ou uma das três curvas suaves, com Design de Material (Suave) como padrão.
- Lento e sutil: 12 a 20 segundos funciona bem atrás do texto do herói.
- Sempre ligado: o loop começa quando a página é carregada e não possui gatilho de hover ou rolagem.
- Suavidade de transição: este controle deslizante é exibido no painel, mas não altera a animação na versão atual.
Fundo do gradiente do elementor vs gradiente animado BG
A configuração de Fundo livre do Elementor tem um tipo de Gradiente (marcado no Elementor 4.2.4), mas o gradiente não se move Você pode animá-lo escrevendo quadros-chave CSS sozinho, ou usar a extensão.
| Característica | Gradiente Elementor | CSS à mão | Gradiente Animado BG |
|---|---|---|---|
| Preço | Grátis | Grátis | Master Addons Pro |
| Movimento | Estático | Sim, você escreve os quadros-chave | Sim, construído em |
| Cores | 2, com locais de parada | Qualquer | 2 ou mais, espaçados uniformemente |
| Tipo gradiente | Linear ou radial | Qualquer | Somente linear |
| Ângulo | 0 a 360, por dispositivo | Qualquer | -45 a 180 |
| Velocidade e flexibilização | Não | Sim | Duração 1 a 20 s, 8 opções de flexibilização |
| Configurar-se em | Painel estilo | Css personalizado | Painel estilo |
Para um gradiente de estática, a configuração do próprio Elementor é suficiente e dá mais controle sobre paradas e tipo de gradiente A extensão salva você escrevendo quadros-chave quando você deseja que o gradiente se mova.
Relacionado: Título do gradiente (gratuito) para texto gradiente, mais Partículas (gratuito) e Deslizador Fundo (gratuito) para outros fundos móveis.
Como adicionar um fundo de gradiente animado no elementor
Uma vez que a extensão está ligada, o painel aparece na guia Estilo de cada contêiner, seção e coluna Aqui está um detalhe documentação sobre fundo de gradiente animado.
- Com Master Addons Pro ativo, acesse Complementos Mestres > Extensões e liga Gradiente Animado BG.
- Edite sua página com o Elementor e selecione um contêiner, seção ou coluna.
- Abrir o Estilo aba e expandir Fundo de gradiente animado.
- Definir Habilitar Gradiente Animado para Sim. três cores de amostra aparecem.
- Altere as cores no Cor lista, depois defina Ângulo, Duração Total da Animação (Segundos) e Efeito Animação.
- Atualize a página e verifique se seu texto permanece legível em todas as cores.
Perguntas frequentes sobre gradiente animado BG
O Gradiente Animado é BG gratuito?
Não. Faz parte do Master Addons Pro. O fundo Gradiente livre do Elementor é estático, portanto, um gradiente móvel precisa dessa extensão ou de seu próprio CSS.
Posso usá-lo sobre uma imagem de fundo?
Sim. o gradiente é desenhado em sua própria camada acima do fundo normal da seção Escolha cores com alguma transparência no seletor de cores e a imagem de fundo mostra através.
Quantas cores posso usar em uma animação?
Pelo menos dois, e tantos quantos você adicionar depois disso As cores são espaçadas uniformemente, então dois a quatro geralmente dão o resultado mais limpo.
A animação é reproduzida o tempo todo ou posso fazê-la funcionar no hover?
Ele é reproduzido o tempo todo O loop começa quando a página carrega e não tem hover ou scroll trigger Para um efeito hover-only você precisaria de seu próprio CSS, por exemplo, com o Css personalizado extensão.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
