Divi , o popular tema WordPress, é conhecido por seus módulos versáteis que capacitam designers e desenvolvedores de sites a criar layouts impressionantes sem esforço. Entre seu impressionante arsenal de módulos, o Divi Divider Module se destaca como uma ferramenta única que permite aos usuários criar divisórias cativantes. Nesta postagem do blog, mergulharemos no mundo cativante dos divisores gradientes e exploraremos como você pode aproveitar o Módulo Divi Divider para aprimorar seus designs. Veremos mais de perto como funcionam os divisores de gradiente e forneceremos exemplos inspiradores para despertar sua criatividade.
Visualização
Aqui está uma prévia de como nosso design gradiente ficará no final.
Como criar divisores de gradiente com o módulo divisor do Divi
Existem vários métodos para construir um divisor usando o Módulo Divisor do Divi. Por padrão, o módulo exibe uma linha como divisor. Porém, é possível desativar esta linha e utilizar as configurações de Fundo do módulo para gerar um divisor que pode ser customizado utilizando diversas opções de Fundo como cores, gradientes, imagens e muito mais. Em vez de exibir a divisória real, nos concentraremos em estilizar o contêiner da divisória para produzir uma divisória com estilo exclusivo.
Ocultar divisor
O procedimento é fácil. Adicione um Módulo Divisor ao seu layout primeiro e, em seguida, na guia de conteúdo, oculte o divisor.
Create Amazing Websites
Com o melhor criador de páginas gratuito Elementor
Comece agora
Fundo do divisor
Em seguida, escolha o tipo de plano de fundo que deseja usar no menu Configurações de plano de fundo na guia Conteúdo. Vamos nos concentrar nas opções de gradiente de fundo nesta postagem.
Adicionar dimensionamento e espaçamento
Para construir uma divisória elegante em praticamente qualquer tamanho ou formato, use as opções Dimensionamento e Espaçamento na guia Design para ajustar a altura e a largura do contêiner da divisória. Para gerar o tamanho desejado, use largura e altura, largura máxima e altura máxima, alinhamento do módulo e preenchimento superior e inferior.
Adicionar raio de borda
Para estilizar ainda mais a forma, adicione opções de borda como Border Radius. Os cantos podem ser ajustados em conjunto ou separadamente para produzir formas fascinantes. Para um design especial, você também pode adicionar largura de borda, estilos, etc.
Divisor de gradiente
Utilizaremos a página de destino do Home Baker Layout Pack gratuito incluído no Divi para nosso primeiro divisor gradiente. A arte deste pacote de layout apresenta gradientes de cor marrom e contornos escuros poderosos. Replicaremos isso com nosso gradiente usando a paleta de cores do pacote de layout. Usaremos o Módulo Divisor que já está presente na seção herói para nossa primeira ilustração. Este é simples, mas causa um grande impacto visual. Aqui está o layout antes de adicionarmos o Módulo Divisor para referência.
Visibilidade
Escolha Não para Mostrar Divisor em Opções de visibilidade para o Módulo Divisor.
- Mostrar divisor: Não
Gradiente
Selecione a guia Background Gradient rolando para baixo até Background. Adicionaremos cinco Gradient Stops para este. Os valores padrão para os outros parâmetros de gradiente serão usados. Os parâmetros para cada Gradient Stop estão listados abaixo.
- Primeira parada do gradiente: 0px, #dcc087
- Segunda parada de gradiente: 16px, #e6b060
- Terceira parada de gradiente: 22px, #f19d33
- Quarta parada de gradiente: 31px, #f49826
- Quinta parada de gradiente: 48px, #3b261e
Pixels devem ser usados como unidade de gradiente. Os tons que procurávamos já estão disponíveis. Tudo o que resta fazer é otimizar o tamanho.
- Unidade de gradiente: Pixels
Dimensionamento
Depois escolha a aba Design. Coloque 100% para Largura em Dimensionamento. Todos os três tamanhos de dispositivos devem ter a Altura definida como 40px. O fechamento modular salvará suas configurações.
- Largura: 100%
- Altura: 40px
Antevisão Final
Agora temos aqui uma prévia final do nosso design gradiente em ação.
Terminando os pensamentos
Isso encerra nossa discussão sobre o uso do Divisor Module do Divi para fazer divisores de gradiente. Para fazer divisores de gradiente personalizados, use a opção de gradiente no Módulo Divisor. Podemos fazer divisórias gradientes em vários tamanhos e formas, utilizando o canto da borda, o espaçamento e as opções de tamanho. Podemos projetar divisórias gradientes distintas que se destacarão da multidão com apenas algumas escolhas básicas.
