Ir para o conteúdo principal

Como exibir banners animados no Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Ter um título que se destaque é garantir que você tenha a chance de capturar a atenção de seus visitantes. Os títulos geralmente não passam despercebidos por causa de seu tamanho e posição central, mas se você quiser ir além e mostrar literalmente o título, está no lugar certo.

Neste tutorial, combinaremos as configurações de animação do Divi para criar um título que se destaque e chame a atenção de seus visitantes.

Resultado final

Parte Um: Design

Seção Configuração

Cor de fundo

Vamos começar a projetar! Crie uma nova página e adicione uma seção regular. Abra as configurações da seção e altere a cor do plano de fundo.

  • Cor de fundo: #EEE

espaçamento

Em seguida, vá para as configurações de espaçamento da seção e adicione margens de preenchimento personalizadas.

  • Estofamento inferior: 10vw

Adicionar linha 1

Estrutura da coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar mais módulos, abra as configurações da linha e altere a cor de fundo da linha.

  • Cor de fundo: #DDD

dimensionamento

Em seguida, vá para os parâmetros de dimensionamento e deixe a linha preencher toda a largura da tela.

  • Faça com que esta linha de largura total: Sim
  • Use uma largura de calha personalizada: Sim
  • Largura da calha: 1

espaçamento

Além disso, remova o preenchimento interno superior e inferior padrão da linha.

  • Preenchimento no topo: 0px
  • Parte inferior do estofado: 0px

Adicione um módulo de texto

É hora de começar a adicionar módulos! O primeiro módulo que precisamos é um módulo de texto. Digite a primeira parte do seu título na área de conteúdo usando o estilo de texto do parágrafo.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Cor de fundo

Em seguida, vá para as configurações de fundo do módulo e adicione uma cor de fundo.

  • Cor de fundo: #ccc

Configurações de texto

Altere também as configurações de texto na guia Design.

  • Texto da fonte: Didact Gothic
  • Peso da fonte do texto: negrito
  • Cor do texto: #000000
  • Tamanho do texto: 10vw
  • Altura da linha de texto: 0.9em
  • Orientação do Texto: Centro

espaçamento

Em seguida, crie a forma de sua escolha com preenchimento personalizado na parte superior e inferior.

  • Preenchimento no topo: 10vw
  • Estofamento inferior: 3vw

Animação

Por último, mas não menos importante, adicionaremos uma animação. É importante garantir que a duração da animação e a opacidade inicial sejam zero. Isso permitirá que o módulo de texto seja exibido com um efeito de flash.

  • Estilo de Animação: Fade
  • Repetir animação: uma vez
  • Duração da Animação: 0ms
  • Tempo de animação: 1000ms

Clone o módulo de texto x4

Depois de terminar de editar o primeiro módulo de texto, você pode continuar e cloná-lo quantas vezes quiser, dependendo da duração do seu título. Para cada parte do título que você deseja exibir com um efeito de flash, você precisará de um módulo de texto separado. Neste exemplo, precisaremos de módulos 4 adicionais.

Cor de fundo

Com a cor de fundo.

  • Copiar 1 = cor de fundo: #5900ff, cor do texto: #FFF
  • Copie 2 = deixe como tal, altere a duração da animação (Atraso da animação): 1500ms
  • Copie 3 = Cor do plano de fundo: #ffb200, cor do texto: #FFF, altere a duração da animação: 2000ms
  • Copie 4 = Cor do plano de fundo: #000, cor do texto #FFF, altere a duração da animação: 2500ms

Adicione uma margem negativa a cada módulo de texto, exceto o primeiro

Depois de concluir a personalização de todos os módulos de texto, você pode continuar e criar uma sobreposição. Para criar essa sobreposição, adicionaremos uma margem superior negativa a cada um dos módulos de texto duplicados. Em outras palavras, garantimos que todos os módulos que seguem o primeiro módulo apareçam acima desse primeiro módulo de texto.

  • Margem superior: -31.98vw

Linha de transformação

Transform Traduzir

Continue transformando a linha inteira, começando com os parâmetros de transformação.

  • Inferior: -35vw

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Transformar Rotação

Altere também os valores de rotação da transformação.

  • Esquerda: 320deg

Adicione a linha 2

Estrutura da coluna

Em segundo lugar! Agora que o efeito do título está em vigor, podemos começar a adicionar os módulos restantes. Adicione uma nova linha usando a seguinte estrutura de colunas:

dimensionamento

Sem adicionar mais módulos, abra os parâmetros da linha e deixe a linha preencher toda a largura da tela nos parâmetros de dimensionamento:

  • Faça com que esta linha de largura total: Sim
  • Use uma largura de calha personalizada: Sim
  • Largura da calha: 1

espaçamento

Remove o preenchimento superior padrão da próxima linha.

  • Preenchimento superior: 0px

Adicione um módulo de descrição de texto à coluna 2

Adicionar conteúdo H1

É hora de adicionar módulos. O primeiro módulo será um módulo de texto. Você pode adicionar o conteúdo desejado.

Configurações de texto H1

Em seguida, vá para a guia Design e altere as configurações do H1.

  • Fonte do título: Didact Gothic
  • Peso do título: Negrito
  • Tamanho da fonte: 1.8vw (computador), 3.8vw (tablet), 4vw (telefone)

espaçamento

Adicione margens personalizadas na seção de espaçamento.

  • Margem superior: -4vw
  • Margem inferior: 2vw
  • Margem esquerda: 30vw
  • Margem direita: 30vw (computador), 15vw (tablets e telefone)

Adicione um módulo separador à coluna 2

visibilidade

O próximo módulo é o módulo divisor. Verifique se a opção "Mostrar divisor" está ativada.

  • Mostrar Separador: Sim

Cor

Então vá para a aba "Design" e mude a cor do separador.

  • Cor: #000000

Dimentionnement

Mude as opções de espaçamento também.

  • Peso do espaçamento: 8px
  • Largura: 7%

espaçamento

Sempre com opções de dimensionamento.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

  • Margem baixa: 1vw
  • Margem esquerda: 30vw

Adicione um módulo de texto à coluna 2

Adicionar conteúdo

O próximo módulo será outro módulo de texto. Você deve fornecer o conteúdo de sua escolha.

Configuração de texto

Então você precisa alterar as configurações de texto na guia "Design".

  • Tamanho do texto: 0.8vw (computador), 1.3vw (tablet), 1.6vw (telefone)
  • Altura da linha: 2.2em

espaçamento

Adicione algumas margens na seção de espaçamento também.

  • Margem baixa: 3vw
  • Margem Esquerda: 30vw
  • Margem direita: 30vw (computador), 15vw (tablets e telefones)

Adicione um módulo de botão à coluna 2

Configurações do módulo de botão

Para o último módulo, que será um módulo de botão. Você adicionará o conteúdo de sua escolha e alterará as configurações da seguinte maneira:

  • Usar estilo personalizado: Sim
  • Tamanho da fonte: 1vw (computador), 1.5vw (tablet), 2vw (telefone)
  • Largura da borda do botão: 0px
  • Fonte do botão: Poppins
  • Peso do texto: negrito
  • Estilo da fonte: maiúscula

espaçamento

Acesse as configurações de espaçamento e adicione uma margem externa personalizada, bem como uma margem interna e é isso.

  • Margem externa esquerda: 30vw
  • Margem alta interna: 1vw
  • Margem baixa interna: 1vw
  • Margem interna esquerda: 3vw
  • margem interna direita: 3vw

para terminar

Neste tutorial, vimos como criar um título com texto animado, usando apenas as opções Divi internas. Essa é uma excelente técnica que permitirá capturar a atenção de seus visitantes de uma maneira muito original.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
8 ações
ação8
chilrear
Enregistrer