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 destaca é 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 literalmente mostrar o título, você está no lugar certo.

Neste tutorial, combinaremos as configurações de animação do Divi para criar um título que se destaque e capte 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.

  • Preenchimento 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 de linha e mude 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 a largura total da tela.

  • Faça com que esta linha de largura total: Sim
  • Use uma largura de medianiz 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 é de 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 segundo plano do módulo e adicione uma cor de segundo plano.

  • 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
  • Preenchimento inferior: 3vw

Animação

Por último, mas não menos importante, adicionaremos uma animação. É importante certificar-se de 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

Quando terminar de editar o primeiro módulo de texto, você poderá continuar e cloná-lo quantas vezes quiser, dependendo da duração do 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. Para este 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
  • Copiar 2 = deixe assim, mude a duração da animação (Atraso de Animação): 1500ms
  • Copiar 3 = Cor de fundo: #ffb200, cor do texto: #FFF, altera a duração da animação: 2000ms
  • Copiar 4 = Cor de fundo: #000, cor do texto #FFF, altera a duração da animação: 2500ms

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

Depois de terminar de personalizar todos os módulos de texto, você poderá 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, nos certificamos de que todos os módulos que seguem o primeiro módulo apareçam acima deste primeiro módulo de texto.

  • Margem superior: -31.98vw

Linha de transformação

Transform Traduzir

Continue transformando toda a linha, começando pelos 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á no lugar, podemos começar a adicionar os módulos restantes. Adicione uma nova linha usando a seguinte estrutura de coluna:

dimensionamento

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

  • Faça com que esta linha de largura total: Sim
  • Use uma largura de medianiz 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 de 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. Certifique-se de que a opção "Mostrar divisor" esteja ativada.

  • Mostrar Separador: Sim

Cor

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

  • Cor: #000000

Dimentionnement

Altere 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

Em seguida, 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:

  • Use 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, além de 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 internas do Divi. Esta é uma excelente técnica que permitirá capturar a atenção de seus visitantes de uma maneira muito original.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

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