A maioria dos sites tem uma seção “Heróis”, que não precisa mais ser provada. O seu papel não é apenas destacar-se, mas também estar dividido em vários elementos que reforçam o apelo à ação que existe. As seções do herói para conteúdo divididos com estrutura fácil de entender são muito populares e frequentemente usados por diferentes tipos de sites.
E apesar de criar seções de heróis para conteúdo dividido para o escritório parece simples, nem sempre se deve confiar nas aparências. É aqui que este tutorial será útil. Vamos recriar uma seção de split hero móvel altamente interativa que não só ficará ótima no celular, mas independentemente do tamanho da tela. Também combinamos animações excelentes para combinar perfeitamente com o estilo de design de 2019. Esperamos que este tutorial inspire você a criar suas próprias seções mobile hero para conteúdo dividir.
Vamos!
Visão geral
Antes de mergulharmos no tutorial, vamos dar uma olhada no que você pode obter depois de concluir 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 a ele, vá para as configurações de espaçamento e remova todas as margens de preenchimento padrão superior e inferior.
- Melhor preenchimento: 0px
- Preenchimento inferior: 0 px
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 as configurações de dimensionamento e deixe a linha e suas colunas preencherem toda a largura da tela.
- Faça esta linha com 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
- Preenchimento inferior: 0 px
- Estofado à direita: 1vw
display
Finalmente, vamos garantir que as duas 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.
display: flex; |
Adicione um módulo de imagem à coluna 1
Deixe a área da imagem em branco
Agora estamos indo para todos os módulos de 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 de imagem, faremos o upload da imagem para as configurações de fundo nas próximas etapas, portanto, precisamos remover a imagem adicionada por padrão. Assim, podemos brincar com a forma como a imagem está posicionada e quanto espaço ela ocupa em nossa fileira.
Adicione uma cor de fundo
Vá para as configurações de fundo do módulo Imagem e adicione uma cor de fundo. Na próxima etapa, combinaremos essa cor de fundo e uma imagem 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
- Mix de 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 parecer que estamos usando uma estrutura de coluna diferente. O motivo pelo qual estamos fazendo 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 precisamos 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 animação de slide ao módulo Imagem. Depois de aplicar a animação, você notará que a imagem não começará a aparecer até o momento em que entrar na primeira coluna. A cor de fundo da segunda coluna permanece no topo do módulo de imagem conforme é arrastada para a esquerda.
- Estilo de Animação: Slide
- Repetir animação: uma vez
- Direção da 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 de que precisamos na coluna 1 é um módulo de botão. Insira 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 de que precisaremos é um módulo de texto. Adicione qualquer 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
Altere os valores de espaçamento também.
- 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 de que precisamos na segunda coluna é um módulo de divisão. Certifique-se de que a opção “Mostrar separador” esteja habilitada.
- 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 Opacidade inicial: 100%
Adicione o módulo de texto # 2 à coluna 2
Adicionar conteúdo
Vamos passar para o próximo e último módulo de que precisamos na segunda coluna! Adicione uma descrição de sua escolha.
Configurações de texto
Em seguida, vá para 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
- Atraso de animação: 1000 ms
- Animação Opacidade inicial: 0%
Considerações finais
Neste tutorial, mostramos a você como criar incríveis 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 muito responsivas. Se você tiver alguma dúvida ou sugestão, deixe um comentário e sinta-se à vontade para compartilhá-lo nas redes sociais!
