Este famoso modelo WordPress funciona através de seções ou módulos, incluindo é capaz de dividir o conteúdo da página e adicionar um design a cada.
Usando esta habilidade, você será capaz de descobrir como evitar a monotonia dos fundos das páginas da web de cor única ou com as imagens baixadas da web.
Embora o Divi ofereça a opção de criar sua própria página, você pode baixar os designs pré-fabricados, se desejar.
Portanto, explicamos como criar esse design específico em seu template 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 " invólucro ".
Entre as configurações que contêm esses blocos, você pode adicionar manualmente um plano de fundo com um gradiente animado dentro do " Opções de design ".
Etapas para criar um bloco de seção e acessar suas configurações
Depois de certificar-se de ter ativado o construtor visual Divi, você precisa clicar no botão colorido " + ”Para adicionar a seção. Em seguida, ele mostrará uma janela que permitirá adicionar três tipos de opções: " Padrão “,” Largura completa " é " Speciale ".
Depois de selecionar um deles, você terá a possibilidade de escolher a estrutura das colunas para as linhas que a seção conterá.
Por fim, você poderá inserir módulos e a opção " Configurações de seção ", Onde você verá a lista de alterações para" Conteúdo “,” Projeto " é " Avançado ".
Como adicionar um fundo gradiente animado com o Divi? Passo a passo
O método que usaremos é criar o fundo gradiente desejado ajustando o fundo que contém o construtor Divi junto com os trechos CSS. Então, comece criando uma nova página na plataforma WordPress e use o construtor Divi para escolher a opção " Construir do zero ".
Diante de você terá uma tela em branco. Aqui você adicionará uma única linha de coluna, conforme explicado acima.
Dentro da seção de configuração é necessário configurar o conteúdo de " Acolchoamento "Up topo 12vw e adicione " Altura: 40vw "Na caixa cinza que aparece abaixo" Elementos CSS principais ".
A partir deste ponto, você começará a configurar o plano de fundo gradiente, onde acessará a opção de " Plano de fundo ou pano de fundo "Para apertar o botão" Sombra ".
Abaixo disso, você pode escolher as cores dos gradientes, o tipo de gradiente que deseja e a direção que deve tomar.
Dessa forma, redimensione seu bloco para 100% de largura e altura para começar a criar a animação desejada.
Isso será feito por meio de uma modificação CSS personalizada, portanto, você precisa adicionar uma classe específica para a seção que está editando; então, você tem que entrar no formulário " Avançado "E coloque o nome da animação em" Classe CSS ".
Código para adicionar um papel de parede animado no Divi
Uma vez que esta classe é adicionada, você pode adicionar o módulo de código e inserir o seguinte na caixa " Código "Dentro das etiquetas .
. animar o gradiente {
Tamanho do fundo: 400% 400%;
Animação: facilidade infinita do gradiente 5s;
}
gradiente @keyframe {
0% {
Posição de fundo: 0% 50%;
}
cinquenta% {
Posição de fundo: 100% 50%;
}
100% {
Posição de fundo: 0% 50%;
}
}
Dessa forma, você conseguiu definir seu plano de fundo gradiente com uma largura de 400% do tamanho original e sua animação é um movimento dos dois lados.
Além das vantagens de design que o Divi oferece, também possui muitas ferramentas para tornar sua página a favorita entre os internautas, como usar BreadCrumbs para melhorar o SEO da página ou inserir um menu suspenso para seu uso e manipulação é mais fácil.
