10 maneiras divertidas de usar o módulo divisor com as novas opções de Divi

Publicados: 2017-09-26

No tutorial do Divi de hoje, vamos compartilhar com vocês um vislumbre do que você pode fazer com as novas opções que foram adicionadas ao Divi nas atualizações anteriores. Mais precisamente; vamos compartilhar 10 maneiras interessantes de estilizar o Módulo Divisor com essas novas mudanças. As possibilidades são infinitas, mas este post pode ajudá-lo a encontrar a inspiração de que você precisa para seu próximo projeto.

Espiada

Uma das melhores coisas sobre este tutorial é o fato de que não usaremos nenhum CSS adicional (ou código de qualquer tipo). Todos os exemplos que criaremos usarão apenas as opções incluídas no Módulo Divisor. Vamos dar uma olhada rápida nos divisores que construiremos antes de mostrar como criar cada um passo a passo:

módulo divisor

10 maneiras divertidas de usar o módulo divisor com as novas opções de Divi

Inscreva-se no nosso canal no Youtube

Criar Seção Reutilizável

A primeira coisa que você precisa fazer é criar a seção que usaremos em todos os 10 exemplos. Claro, você também pode usar os divisores em outros contextos, mas ao fazer esta seção primeiro, você terá a oportunidade de brincar com seu próprio Divi Builder e ver qual deles prefere.

Criar nova página

Comece criando uma nova página em seu painel do WordPress, habilitando o Divi Builder e abrindo o Visual Builder.

Criar seção com linha de três colunas

Quando estiver em sua nova página, crie uma seção padrão e use uma linha de três colunas dentro dessa seção padrão. Usamos '# f4f4f4' como a cor de fundo da seção.

módulo divisor

Adicionar primeiro módulo de texto

Em seguida, adicione o primeiro Módulo de Texto à primeira coluna da linha. Abra as configurações, digite o texto que deseja que apareça e vá para a guia Design. Na guia Design, faça as seguintes alterações na subcategoria Texto:

  • Fonte do Texto: Lagosta
  • Tamanho da fonte do texto: 35
  • Cor do texto: # 000000
  • Altura da linha de texto: 1,7em
  • Orientação do Texto: Centro

módulo divisor

Adicionar segundo módulo de texto

Depois de adicionar o primeiro Módulo de texto, você pode adicionar outro logo abaixo dele. Adicione o texto que deseja que apareça e vá para a guia Design. Na guia Design, certifique-se de que as seguintes modificações se apliquem:

  • Fonte do texto: Roboto
  • Tamanho da fonte do texto: 14
  • Altura da linha de texto: 1,7em
  • Orientação do Texto: Centro

módulo divisor

Clonar Módulos de Texto e Colocar em Outras Duas Colunas

Depois de criar esses dois módulos de texto, você também pode colocá-los nas outras duas colunas da linha.

módulo divisor

Antes de começar

Vamos compartilhar 10 maneiras divertidas de estilizar o módulo divisor do Divi. Cada um dos exemplos terá três divisórias que estão em harmonia entre si. A maioria das configurações é igual para os três módulos. Começaremos mostrando as configurações que contam para cada um deles e continuaremos mostrando as alterações que você precisa fazer nos outros dois divisores. Então, toda vez que você terminar o primeiro divisor, clone-o e coloque-o nas outras duas colunas. Depois de fazer isso, você pode fazer as modificações nos outros dois divisores.

Observação: para cada uma das divisórias, você precisará habilitar a opção 'Mostrar divisória' na guia Conteúdo.

módulo divisor

1. O Triângulo Desfocado

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Na guia de conteúdo, usaremos as seguintes configurações de plano de fundo:

  • Primeira cor: # e09900
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: Linear
  • Direção do gradiente: 176deg
  • Posição inicial: 13%
  • Posição final: 31%

módulo divisor

Guia Design

Vá para a guia Design e certifique-se de que as seguintes configurações se apliquem à subcategoria Dimensionamento:

  • Peso do divisor: 0
  • Altura: 25px
  • Largura: 35%
  • Alinhamento do Módulo: Centro

módulo divisor

Role para baixo na mesma guia e use as seguintes configurações de animação na subcategoria Animação:

  • Estilo de animação: slide
  • Repetição de animação: uma vez
  • Direção da Animação: Centro
  • Duração da animação: 1200 ms
  • Intensidade de animação: 80%

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Na guia de conteúdo, a única coisa que você precisa fazer é mudar a primeira cor gradiente para '# 0c71c3'.

Guia Design

Em seguida, você precisará adicionar algum atraso de animação de '250ms' à subcategoria Animação.

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

Mude a primeira cor gradiente em '# 8300e9' para o último divisor.

módulo divisor

Guia Design

O atraso da animação que você precisa adicionar à subcategoria Animação do último divisor é '500ms'.

módulo divisor

2. A sombra colorida

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Use as seguintes configurações de fundo gradiente na guia Conteúdo:

  • Primeira cor: # e09900
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: Linear
  • Direção do gradiente: 180 graus
  • Posição inicial: 0%
  • Posição final: 72%

módulo divisor

Guia Design

A primeira coisa que você precisa fazer na guia Design é alterar a cor do divisor para '# 000000'.

módulo divisor

Na subcategoria Estilos dessa mesma guia, use 'Sólido' como Estilo do divisor e 'Superior' como Posição do divisor.

módulo divisor

Continue rolando para baixo e faça as seguintes alterações aplicadas à subcategoria de dimensionamento:

  • Peso do divisor: 2
  • Altura: 20px
  • Largura: 70%
  • Alinhamento do Módulo: Centro

módulo divisor

E, por último, use as seguintes configurações de opção para a subcategoria Animação:

  • Estilo de Animação: Bounce
  • Repetição de animação: uma vez
  • Direção da Animação: Centro
  • Duração da animação: 2.000 ms

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Mude a primeira cor gradiente do fundo gradiente para '# 0c71c3'.

módulo divisor

Guia Design

Na subcategoria Animation, adicione '350ms' à opção Animation Delay.

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

Faça a mesma alteração no terceiro divisor, mas use a cor '# 8300e9'.

módulo divisor

Guia Design

E, por último, adicione um atraso de animação de '700 ms'.

módulo divisor

3. The Gradient Series

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Para o primeiro divisor, use as seguintes configurações de fundo gradiente:

  • Primeira cor: # 0970a0
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: Linear
  • Direção do gradiente: 119 graus
  • Posição inicial: 0%
  • Posição final: 86%

módulo divisor

Guia Design

Na guia Design, escolha '#FFFFFF' como a cor do seu divisor.

módulo divisor

Em seguida, faça as seguintes alterações na subcategoria Estilos:

  • Estilo divisor: Sólido
  • Posição do divisor: centrado verticalmente

módulo divisor

Ainda na mesma guia, certifique-se de que as configurações a seguir se apliquem à subcategoria Dimensionamento:

  • Peso do divisor: 3
  • Altura: 10px
  • Largura: 25%
  • Alinhamento do Módulo: Esquerda

módulo divisor

Adicione '15px' ao preenchimento inferior dentro da subcategoria Espaçamento.

módulo divisor

E, por último, use as seguintes configurações para a subcategoria Animação:

  • Estilo de animação: slide
  • Repetição de animação: uma vez
  • Direção da animação: esquerda
  • Duração da animação: 2.000 ms
  • Intensidade de animação: 100%

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

As configurações de fundo gradiente para o segundo divisor são ligeiramente diferentes:

  • Primeira cor: # 0970a0
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: radial
  • Direção Radial: Centro
  • Posição inicial: 0%
  • Posição final: 100%

módulo divisor

Guia Design

Dentro da subcategoria Sizing, altere o Alinhamento do Módulo para o centro.

módulo divisor

Por último, centralize a Direção da Animação também.

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

O terceiro divisor também contém outro fundo gradiente:

  • Primeira cor: rgba (255,255,255,0)
  • Segunda cor: # 0970a0
  • Tipo de gradiente: Linear
  • Direção do gradiente: 119 graus
  • Posição inicial: 14%
  • Posição final: 100%

módulo divisor

Guia Design

Faremos as mesmas alterações que fizemos no segundo divisor, mas usaremos à direita em vez de no centro.

módulo divisor

módulo divisor

4. The Rolling Circle

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Comece aplicando as seguintes configurações de fundo gradiente:

  • Primeira cor: # e09900
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: radial
  • Direção Radial: Centro
  • Posição inicial: 20%
  • Posição final: 21%

módulo divisor

Guia Design

A primeira coisa que você precisa fazer na guia Design é usar a cor '# 000000' para o divisor.

módulo divisor

Em seguida, selecione 'Sólido' como seu estilo de divisor e 'Centralizado verticalmente' como sua posição de divisor.

módulo divisor

Continuando, faça as seguintes alterações na subcategoria de dimensionamento:

  • Peso do divisor: 2
  • Altura: 50px
  • Largura: 40%
  • Alinhamento do Módulo: Centro

módulo divisor

Por último, a subcategoria Animação precisará das seguintes configurações:

  • Estilo de animação: Roll
  • Repetição de animação: uma vez
  • Direção da Animação: Centro
  • Duração da animação: 1500ms
  • Atraso de animação: 850 ms
  • Intensidade de animação: 60%

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Mude a primeira cor gradiente para '# 0c71c3'.

módulo divisor

Guia Design

E mude o Atraso da Animação para '0ms'.

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

Para o último divisor, você só precisará alterar a cor de fundo do primeiro gradiente para '# 8300e9'.

módulo divisor

5. O Suporte

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Use as seguintes configurações de fundo gradiente:

  • Primeira cor: # e0d1b1
  • Segunda cor: # e09900
  • Tipo de gradiente: radial
  • Direção Radial: Centro
  • Posição inicial: 36%
  • Posição final: 100%

módulo divisor

Guia Design

Certifique-se de que a cor do divisor seja igual à cor de fundo da seção. Neste caso, é '# f4f4f4'.

módulo divisor

Role a guia de design e use 'Tracejado' como o estilo do divisor e 'Superior' como a posição do divisor.

módulo divisor

Faça com que as seguintes configurações se apliquem à subcategoria de dimensionamento:

  • Peso do divisor: 100
  • Altura: 18 px
  • Largura: 60%
  • Alinhamento do Módulo: Centro

módulo divisor

Você também precisará adicionar '15px' ao preenchimento superior, direito e esquerdo.

módulo divisor

Por último, use as seguintes configurações de animação:

  • Estilo de Animação: Zoom
  • Repetição de animação: uma vez
  • Direção da Animação: Centro
  • Duração da animação: 1000ms
  • Intensidade de animação: 80%

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Mude as cores do fundo gradiente para '# 87acc1' e '# 0c71c3'.

módulo divisor

Guia Design

Em seguida, altere a Duração da animação para '1300ms' e o Atraso da animação para '250ms'.

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

As cores gradientes usadas no terceiro divisor são '# c9a4e8' e '# 8300e9'.

módulo divisor

Guia Design

Altere a Duração da animação para '1300ms' e o Atraso da animação para '500ms'.

módulo divisor

6. As linhas duplas

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Aplique as seguintes configurações de fundo gradiente:

  • Primeira cor: # e09900
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: Linear
  • Direção do gradiente: 179 graus
  • Posição inicial: 0%
  • Posição final: 45%

módulo divisor

Guia Design

Escolha '# 000000' como sua cor divisória.

módulo divisor

Dentro da subcategoria Estilos, use 'Duplo' como o estilo do divisor e 'Centrado verticalmente' como a posição do divisor.

módulo divisor

Continuando, use as seguintes configurações para a subcategoria Dimensionamento:

  • Peso do divisor: 5
  • Altura: 25px
  • Largura: 35%
  • Alinhamento do Módulo: Esquerda

módulo divisor

Por último, use as seguintes configurações de animação:

  • Estilo de animação: Roll
  • Repetição de animação: uma vez
  • Direção da animação: esquerda
  • Duração da animação: 1000ms
  • Intensidade de animação: 50%

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Mude a primeira cor gradiente para '# 0c71c3'.

módulo divisor

Guia Design

A seguir, use uma animação diferente para o segundo divisor:

  • Estilo de animação: Fade
  • Repetição de animação: uma vez
  • Duração da animação: 1400ms

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

Para o terceiro divisor, use '# 8300e9' como a primeira cor de fundo gradiente.

módulo divisor

Guia Design

A única coisa que você precisa mudar na guia Design é a Direção da Animação, que neste caso está 'Certa'.

módulo divisor

7. A Ponte

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Comece atribuindo '# 8300e9' ao plano de fundo.

módulo divisor

Guia Design

Continue usando a cor de fundo da seção como sua cor divisória, que neste caso é '# f4f4f4'.

módulo divisor

Em seguida, use 'Pontilhado' como o estilo do divisor e 'Superior' como a posição do divisor.

módulo divisor

Na subcategoria Dimensionamento, use as seguintes configurações:

  • Peso do divisor: 15
  • Altura: 7px
  • Largura: 70%
  • Alinhamento do Módulo: Esquerda

módulo divisor

Precisamos de alguns preenchimentos personalizados também:

  • Enchimento superior: 7 px
  • Preenchimento direito: -7px
  • Preenchimento esquerdo: -7px

módulo divisor

A animação que usaremos tem as seguintes configurações:

  • Estilo de animação: slide
  • Repetição de animação: uma vez
  • Direção da animação: esquerda
  • Duração da animação: 800ms
  • Atraso de animação: 400 ms
  • Intensidade de animação: 30%

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Para o segundo divisor, altere o fundo para '# 0c71c3'.

módulo divisor

Guia Design

Usaremos uma animação diferente também:

  • Estilo de Animação: Zoom
  • Repetição de animação: uma vez
  • Direção da Animação: Centro
  • Duração da animação: 800ms
  • Intensidade de animação: 30%

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

O terceiro divisor usará '# 8300e9' como cor de fundo.

módulo divisor

Guia Design

A animação do terceiro divisor também é um pouco diferente:

  • Estilo de Animação: Zoom
  • Repetição de animação: uma vez
  • Direção da animação: direita
  • Duração da animação: 800ms
  • Atraso de animação: 400 ms
  • Intensidade de animação: 30%

módulo divisor

8. A Elegância

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Comece adicionando o seguinte fundo gradiente ao primeiro Divisor:

  • Primeira cor: # 000000
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: radial
  • Direção Radial: Centro
  • Posição inicial: 20%
  • Posição final: 20%

módulo divisor

Guia Design

Use a cor '# 8300e9' para o seu divisor.

módulo divisor

Em seguida, use 'pontilhado' como seu estilo de divisor 'e' centralizado verticalmente 'como sua posição de divisor.

módulo divisor

Precisamos de um preenchimento superior de '40px' também.

módulo divisor

E uma animação com as seguintes configurações:

  • Estilo de Animação: Bounce
  • Repetição de animação: uma vez
  • Direção da animação: baixo
  • Duração da animação: 1000ms

módulo divisor

Configurações do segundo módulo divisor

Guia Design

Para o segundo divisor, mude a cor para '# 0c71c3'.

módulo divisor

A animação também precisará de algumas alterações:

  • Direção da Animação: Centro
  • Duração da animação 1500ms

Configurações do terceiro módulo divisor

Guia Design

O terceiro divisor usará '# 8300e9' como sua cor.

módulo divisor

E terá 'Up' como direção de animação.

módulo divisor

9. A Sutileza

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Escolha as seguintes configurações para o fundo gradiente:

  • Primeira cor: # 8300e9
  • Segunda cor: rgba (255,255,255,0)
  • Tipo de gradiente: radial
  • Direção Radial: Centro
  • Posição inicial: 0%
  • Posição final: 38%

módulo divisor

Guia Design

Na subcategoria Sizing, você precisará das seguintes configurações:

  • Peso do divisor: 0
  • Altura: 4px
  • Largura: 100%

módulo divisor

Por fim, a animação que usaremos tem as seguintes configurações:

  • Estilo de Animação: Bounce
  • Repetição de animação: uma vez
  • Direção da animação: para cima
  • Duração da animação 1800ms

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Para o segundo divisor, altere a cor de fundo do primeiro gradiente para '# 0c71c3'.

módulo divisor

Configurações do terceiro módulo divisor

Guia de Conteúdo

Faça a mesma alteração no terceiro divisor, mas use a cor roxa '# 8300e9'.

módulo divisor

10. The Glow

módulo divisor

Configurações do primeiro módulo divisor

Guia de Conteúdo

Use as seguintes configurações de fundo gradiente para a última série de divisórias:

  • Primeira cor:
  • Segunda cor:
  • Tipo de gradiente: radial
  • Direção Radial: Centro
  • Posição inicial: 0%
  • Posição final: 38%

módulo divisor

Guia Design

Escolha a cor de fundo da seção como sua cor divisória também, neste caso, é '# f4f4f4'.

módulo divisor

Em seguida, use 'Tracejado' como seu estilo de divisor e 'Centrado verticalmente' como sua posição de divisor.

módulo divisor

Na subcategoria Dimensionamento, use as seguintes configurações:

  • Peso do divisor: 70
  • Altura: 20px
  • Largura: 100%

módulo divisor

Por fim, usaremos uma animação com as seguintes opções:

  • Estilo de animação: Fade
  • Repetição de animação: uma vez
  • Duração da animação: 1800ms
  • Atraso de animação: 800ms

módulo divisor

Configurações do segundo módulo divisor

Guia de Conteúdo

Para o segundo divisor, altere a cor de fundo do segundo gradiente para '# 0c71c3'.

módulo divisor

Guia Design

E adicione um Atraso de Animação de '250ms'.

Configurações do terceiro módulo divisor

Guia de Conteúdo

Para o último divisor, altere a cor de fundo do segundo gradiente para '# 8300e9'.

módulo divisor

Guia Design

E termine colocando Animation Delay para '0ms'.

módulo divisor

Pensamentos finais

Com as novas opções do Divi, muitas coisas novas e criativas são possíveis com as configurações integradas de cada módulo. Nesta postagem, mostramos especificamente como essas opções podem ajudá-lo a aprimorar seu design por meio do Módulo divisor. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por VikiVector / shutterstock.com