Ir para o conteúdo principal

Como criar uma seção animada de herói 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]

A maioria dos sites possui uma seção "Heros", que não precisa mais se provar. Seu papel não é apenas se destacar, mas também ser dividido em vários elementos que reforçam a chamada à ação que existe. As seções de herói de conteúdo de conteúdo estruturado, fáceis de entender, são muito populares e frequentemente usadas por diferentes tipos de sites.

E embora a criação de seções de heróis de conteúdo dividido para a área de trabalho pareça simples, nem sempre dependa das aparências. É aqui que este tutorial será útil. Recriaremos uma seção de heróis divididos para dispositivos móveis altamente interativa que não só ficará boa no celular, mas seja qual for o tamanho da tela. Também combinamos ótimas animações para combinar com o estilo de design do 2019 com perfeição. Esperamos que este tutorial o incentive a criar suas próprias seções de heróis para dispositivos móveis com conteúdo dividido.

Vamos!

Visão geral

Antes de mergulhar no tutorial, vejamos o resultado que você pode obter após este tutorial.

Design de interface

Adicione uma nova seção

espaçamento

Comece criando uma nova página ou abrindo uma existente. Adicione uma nova seção regular, acesse as configurações de espaçamento e remova todas as margens de preenchimento superior e inferior por padrão.

  • Melhor preenchimento: 0px
  • Parte inferior do estofado: 0px

Adicione uma nova linha

Estrutura da coluna

Continuaremos adicionando uma nova linha e usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar mais módulos, abra as configurações de linha e adicione uma cor de fundo completamente preta.

  • Cor de fundo: #000000

Coluna 1 cor de fundo

Adicione também uma cor de fundo preto à primeira coluna.

  • Coluna 1 Cor de fundo: #000000

Coluna 2 cor de fundo

A mesma coisa para a segunda coluna.

  • Coluna 2 Cor de fundo: #000000

dimensionamento

Em seguida, vá para os parâmetros de dimensionamento e deixe a linha e suas colunas preencherem 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
  • Equalizar as alturas das colunas: Sim

espaçamento

Também removemos todas as margens superior e inferior padrão da linha.

  • Preenchimento no topo: 0px
  • Parte inferior do estofado: 0px
  • Estofado à direita: 1vw

display

Por fim, garantiremos que as duas colunas apareçam lado a lado em telas menores. Para fazer isso, precisaremos adicionar uma única linha de código CSS na guia Avançado da linha.

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]

exibição: flex;

Adicione um módulo de imagem à coluna 1

Deixe a área da imagem vazia

Agora vamos a todos os módulos que precisamos! Você precisa começar com o módulo de imagem na primeira coluna. Em vez de enviar uma imagem para a área de imagem, enviaremos a imagem para as configurações de segundo plano nas próximas etapas, para que você tenha que excluir a imagem adicionada por padrão. Assim, poderemos brincar com a maneira como a imagem é posicionada e com quanto espaço ela ocupa em nossa linha.

Adicione uma cor de fundo

Navegue até as configurações de fundo do módulo de imagem e adicione uma cor de fundo. Na próxima etapa, combinaremos essa cor de plano de fundo e uma imagem de plano de fundo usando um efeito de mesclagem para escurecer a imagem.

  • Cor de fundo: #686868

Adicione uma imagem de fundo

Adicione uma imagem de fundo de sua escolha e altere as configurações de fundo de acordo:

  • Tamanho da imagem de fundo: capa
  • Posição da imagem de fundo: centro
  • Repita a imagem de fundo: sem repetição
  • Misturar imagem de fundo: multiplicar

dimensionamento

Usamos duas colunas de tamanho igual para a linha em que estamos trabalhando, mas o resultado não é o mesmo. Alteraremos manualmente o tamanho de cada módulo adicionado para dar a impressão de que estamos usando uma estrutura de coluna diferente. A razão pela qual fazemos isso (em vez de apenas escolher outra estrutura de coluna) é tornar tudo responsivo

em telas menores. Acesse os parâmetros de dimensionamento do módulo de imagem e altere a largura.

  • Largura: 88%
  • Alinhamento do módulo: esquerda

espaçamento

Agora temos que decidir o tamanho da nossa imagem nas configurações de espaçamento. Também usamos uma unidade de exibição para esses valores para garantir que nosso design permaneça totalmente responsivo, independentemente do tamanho da tela.

  • Preenchimento superior: 26.3vw (computador), 48vw (tablet), 72vw (telefone)
  • Estofados na parte inferior: 26.3vw (desktop), 48vw (tablet), 72vw (telefone)

Animação

Por fim, adicionaremos uma animação de slide ao módulo Imagem. Depois de aplicar a animação, você notará que a imagem só começará a aparecer quando entrar na primeira coluna. A cor de segundo plano da segunda coluna permanece na parte superior do módulo de imagem enquanto ela desliza para a esquerda.

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]

  • Estilo de Animação: Slide
  • Repetir animação: uma vez
  • Direção de animação: esquerda
  • Duração da Animação: 1450ms
  • Animação de Intensidade: 60%
  • Animação Opacidade inicial: 100%

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

Adicione uma cópia

O próximo módulo que precisamos na coluna 1 é um módulo de botão. Digite uma cópia de sua escolha.

Configurações de botão

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

  • Use estilos personalizados para o botão: Sim
  • Tamanho do texto do botão: 1.5vw (computador), 2.5vw (tablet), 4vw (telefone)
  • Cor do texto do botão: #ffffff
  • Cor de fundo do botão: #e02b20
  • Largura da borda do botão: 0px
  • Raio da borda do botão: 1px
  • Botão Fonte: Poppins
  • Peso da fonte: negrito

espaçamento

Altere também os valores de espaçamento.

  • Margem superior: -3.3vw (computador), -6vw (tablet), -9.1vw (telefone)
  • Preenchimento esquerdo: 8vw
  • Estofado à direita: 8vw

Caixa de sombra

E adicione uma sombra sutil para criar profundidade na página.

  • Força de desfoque de sombra de caixa: 20px
  • Cor da sombra: rgba (0,0,0,0.3)

Adicione o módulo de texto # 1 à coluna 2

Adicionar conteúdo H1

Na segunda coluna! O primeiro módulo que precisaremos é um módulo de texto. Adicione conteúdo H1 de sua escolha.

Configurações de texto H1

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

  • Fonte: Poppins
  • Cor do texto do título: #ffffff
  • Tamanho do título do texto: 4vw (computador), 5vw (tablet), 6vw (telefone)

espaçamento

Mude também os valores de espaçamento.

  • Margem superior: 12vw
  • Margem esquerda: -20vw
  • Margem direita: 17vw (computador), 15vw (tablet), 1vw (telefone)

Animação

E adicione uma animação sutil.

  • Estilo de Animação: Slide
  • Repetir animação: uma vez
  • Direção de Animação: Down
  • Duração da Animação: 1450ms
  • Animação de Intensidade: 10%
  • Animação Opacidade inicial: 100%

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

visibilidade

O próximo módulo que precisamos na segunda coluna é um módulo de divisão. Verifique se a opção "Mostrar separador" está ativada.

  • Mostrar divisor: sim

Cor

Em seguida, vá para a guia Design e altere a cor do separador.

  • Cor: # e02b20

Animação

Adicione uma animação ao módulo de divisão a seguir.

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. [Recomendado]

  • Estilo de Animação: Slide
  • Repetir animação: uma vez
  • Direção de Animação: Direita
  • Duração da Animação: 1450ms
  • Animação de Intensidade: 83%
  • Animação Opacidade inicial: 100%

Adicione o módulo de texto # 2 à coluna 2

Adicionar conteúdo

Vamos para o próximo e último módulo que precisamos na segunda coluna! Adicione uma descrição de sua escolha.

Configurações de texto

Em seguida, acesse as configurações de texto na guia Design e faça algumas alterações de acordo:

  • Fonte do texto: Poppins
  • Peso da fonte do texto: Light
  • Cor do texto: #919191
  • Tamanho do texto: 0.9vw (computador), 1.8vw (tablet), 2.2vw (telefone)
  • Espaçamento de letras de texto: 0.1vw
  • Altura da linha de texto: 2.2em

espaçamento

Altere também os valores de espaçamento.

  • Margem superior: 9vw (computador), 19vw (tablet), 23vw (telefone)
  • Margem inferior: 12vw (computador), 19vw (tablet), 23vw (telefone)
  • Margem esquerda: -3vw
  • Margem direita: 20vw (computador), 6vw (tablet), 3vw (telefone)

Animação

E no final, adicione uma animação fade ao módulo e pronto!

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

Considerações finais

Neste tutorial, mostramos como criar belas seções de heróis de conteúdo dividido com o Divi. As seções de herói de conteúdo dividido são muito populares e frequentemente usadas na Web, mas também é importante garantir que elas sejam altamente responsivas. Se você tiver alguma dúvida ou sugestão, deixe um comentário e sinta-se à vontade para compartilhá-lo nas redes sociais!

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
4 ações
ação4
chilrear
Enregistrer