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 tem uma seção "Heros", que não precisa mais provar a si mesma. Seu papel não é apenas destacar-se, mas também ser dividido em vários elementos que reforçam o chamado à ação que existe. As seções de herói de conteúdo de conteúdo estruturado e fáceis de entender são muito populares e usadas com frequência por diferentes tipos de sites.

E, embora criar seções de heróis de conteúdo dividido para a área de trabalho pareça simples, nem sempre confie nas aparências. É aqui que este tutorial será útil. Vamos recriar uma seção de herói dividida móvel altamente interativa que não só ficará bem no celular, mas em qualquer tamanho da tela. Também combinamos ótimas animações para combinar com o estilo de design 2019 até a perfeição. Esperamos que este tutorial incentive você a criar suas próprias seções de heróis para dispositivos móveis de conteúdo dividido.

Vamos!

exame

Antes de mergulhar no tutorial, vamos ver 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 preta à primeira coluna.

  • Coluna 1 Cor de fundo: #000000

Coluna 2 cor de fundo

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 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
  • Equalizar alturas de coluna: sim

espaçamento

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

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]

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

display

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

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ê tem que começar com o módulo de imagem na primeira coluna. Em vez de enviar uma imagem para a área da imagem, nós carregaremos a imagem nas configurações de segundo plano nas próximas etapas, então você terá que excluir a imagem adicionada por padrão. Assim, poderemos brincar com a maneira como a imagem é posicionada e quanto espaço ocupa em nossa fileira.

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
  • Repetir imagem de fundo: sem repetição
  • Misture a imagem de fundo: multiplique

dimensionamento

Usamos duas colunas de tamanho igual para a linha em que estamos trabalhando, mas o resultado não é o mesmo. Vamos alterar 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 mais 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 (desktop), 48vw (tablet), 72vw (telefone)
  • Estofado na parte inferior: 26.3vw (área de trabalho), 48vw (tablet), 72vw (telefone)

Animação

Finalmente, adicionaremos uma animação de slides ao módulo Image. Depois de aplicar a animação, você notará que a imagem só começará a aparecer quando entrar na primeira coluna. A cor de fundo da segunda coluna permanece na parte superior do módulo de imagem à medida que se desliza para a esquerda.

  • 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 Iniciando opacidade: 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 (área de trabalho), 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

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]

espaçamento

Altere também os valores de espaçamento.

  • Margem superior: -3.3vw (área de trabalho), -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 vamos precisar é de um módulo de texto. Adicione o 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 (desktop), 5vw (tablet), 6vw (telefone)

espaçamento

Altere os valores de espaçamento também.

  • Margem superior: 12vw
  • Margem esquerda: -20vw
  • Margem direita: 17vw (área de trabalho), 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 Iniciando opacidade: 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. Certifique-se de que a opção "Show Separator" esteja 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.

  • 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 Iniciando opacidade: 100%

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

Adicionar conteúdo

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

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]

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 (área de trabalho), 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 (área de trabalho), 19vw (tablet), 23vw (telefone)
  • Margem inferior: 12vw (área de trabalho), 19vw (tablet), 23vw (telefone)
  • Margem esquerda: -3vw
  • Margem direita: 20vw (área de trabalho), 6vw (tablet), 3vw (telefone)

Animação

E, no final, adicione uma animação de desvanecimento 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 Iniciando opacidade: 0%

Últimos pensamentos

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

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