Como adicionar um fundo gradiente animado a uma seção no Divi

Como adicionar um fundo gradiente animado a uma seção no Divi

novembro 17, 2022 0 Por Como Posso?
Divi icon white color

Através desta habilidade, você poderá descobrir a maneira de evitar a monotonia dos fundos de páginas da web unicolor ou com imagens baixadas da web.

Embora Divi lhe dê a possibilidade de criar sua própria página, se desejar, você pode baixar os designs pré-estabelecidos.

Portanto, explicamos como criar esse design peculiar em seu modelo WordPress para melhorar a exibição de sua página.

O que são seções no Divi e como você pode inseri-las em sua página?

Estes nada mais são do que blocos horizontais, considerados as maiores seções dentro do construtor Divi.

Eles têm a característica de serem empilhados para classificar o conteúdo que será inserido no design do site, podendo ser considerado como o ” wrapper “.

Dentre as configurações que esses blocos contêm, está disponível adicionar um fundo com gradiente animado manualmente dentro das ” Opções de desenho “.

Etapas para criar um bloco de seção e acessar suas configurações

Depois de se certificar de que ativou o Divi visual builder, você deve clicar no botão colorido “ + ” para adicionar a seção. Em seguida, irá mostrar uma janela que permite adicionar três tipos de opções: ” Padrão “, ” Largura total ” e ” Especial “.

interface divi original

Depois de selecionar qualquer um deles, você terá a possibilidade de escolher a estrutura das colunas para as linhas que a seção conterá.

Por fim, poderá inserir módulos e aparecerá a opção ” Configurações da Seção “, onde verá a lista de modificações para ” Conteúdo “, ” Design ” e ” Avançado “.

Como adicionar um fundo gradiente animado com Divi? Passo a passo

O método que será usado é criar o fundo gradiente que você deseja ajustando o fundo que contém o construtor Divi junto com os fragmentos CSS. Portanto, comece criando uma nova página na plataforma WordPress e use o Divi builder para escolher a opção ” Build from scratch “.

Antes você terá uma tela em branco. Aqui, você adicionará uma única linha de coluna conforme explicado acima.

Dentro da configuração da seção você deve configurar o conteúdo de ” Preenchimento ” para 12vw superior e adicionar ” Altura: 40vw ” na caixa cinza que aparece em ” Elementos CSS principais “.

Saiba +  Como pesquisar pessoas na Reniec por nomes ou sobrenomes DNI?

A partir deste ponto você começará a configurar o fundo gradiente, onde acessará a opção ” Fundo ” para pressionar o botão ” Gradiente “.

Abaixo disso, você pode escolher as cores dos gradientes, o tipo de gradiente que deseja e a direção que deve tomar.

Fazendo isso, redimensione seu bloco para 100% da largura e altura para começar a criar a animação desejada.

ícone divi com ondas

Isso será feito por meio de uma edição CSS personalizada, portanto, você deve adicionar uma classe que seja específica à seção que está editando; portanto, você deve entrar na guia ” Avançado ” e colocar o nome da animação em ” Classe CSS “.

Código para adicionar fundo animado no Divi

Depois que essa classe for adicionada, você pode adicionar o módulo de código e colocar o seguinte dentro da caixa ” Código ” dentro das tags <style> </style>.

. animar gradiente {

Tamanho do fundo: 400% 400%;

Animação: gradiente 5s facilidade infinita;

}

@keyframes gradiente {

0% {

Posição de fundo: 0% 50%;

}

cinquenta% {

Posição de fundo: 100% 50%;

}

100% {

Posição de fundo: 0% 50%;

}

}

Conseguiu assim definir o seu fundo gradiente com uma amplitude de 400% em relação ao tamanho original, e a sua animação é um movimento para os dois lados.

Além das vantagens de design que o Divi oferece, também possui diversas ferramentas para tornar sua página a favorita dos internautas, como poder usar o BreadCrumbs para melhorar o SEO da página ou inserir um menu suspenso para sua utilização e o manuseio é mais fácil.