[Ad_1]
Vamos.
Visão geral
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
escritório
Móvel Esteira
Baixe o layout GRATUITAMENTE
Para obter o layout gratuito, você precisará baixá-los primeiro usando o botão abaixo. Para acessar o download, você precisará se inscrever em nossa lista de discussão Divi Daily usando o formulário abaixo de. Como novo assinante, você receberá ainda mais benefícios Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será "reinscrito" ou receberá e-mails adicionais.
Vamos começar a recriar!
Adicionar duas seções de espaço reservado
Adicione uma nova seção
Comece adicionando uma seção de espaço reservado à página em que você está trabalhando.
dimensionamento
Abra as configurações de seção e altere a altura nas configurações de dimensionamento.
Seção clone
Clone a seção uma vez. Isso deixa você com duas seções de espaço reservado em sua página. Essas seções de espaço reservado irão ajudá-lo a ver o efeito final depois de passar pelo tutorial. Em um site ativo, as seções de espaço reservado serão substituídas por seções normais que você usa em toda a página.
Adicionar nova seção entre as seções de espaço reservado
Depois que as seções de espaço reservado estiverem no lugar, adicione uma nova seção entre as seções de espaço reservado.
Cor de fundo
Abra as configurações da seção e use uma cor de fundo branca.
- Cor de fundo: #ffffff
espaçamento
Alterne para a guia de design da seção e altere os valores de preenchimento superior e inferior de acordo:
- Preenchimento superior: 10vh
- Preenchimento inferior: 10vh
Adicionar linha # 1
Estrutura da coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha, vá para as configurações de dimensionamento e altere os valores máximos de largura e largura.
- Largura: 100%
- Largura máxima: 100%
Adicione um módulo de texto à coluna
Adicione uma cópia
O único módulo de que precisamos para esta linha é um módulo de texto. Adicione uma cópia de sua escolha.
Configurações de texto
Mude para a guia de design do módulo e altere as configurações de texto de acordo:
- Fonte do texto: Montserrat
- Peso da fonte do texto: ultra negrito
- Estilo da fonte do texto: maiúsculas
- Cor do texto: # fff2ea
- Tamanho do texto: 11vw
- Altura da linha de texto: 1 em
- Alinhamento do texto: Centro
Adicionar linha # 2
Estrutura da coluna
Adicione outra linha à seção usando a seguinte estrutura de coluna:
dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:
- Usar largura de medianiz personalizada: Sim
- Largura da calha: 2
- Largura: 90%
- Alinhamento de linha: Centro
Adicionar módulo de imagem à coluna
Enviar Imagem
Adicione um módulo de imagem à coluna da linha. Faça upload de uma imagem de sua escolha.
alignement
Mude para a guia de design do módulo e altere o alinhamento da imagem de acordo:
dimensionamento
Em seguida, vá para as configurações de dimensionamento e force a largura total no módulo.
Adicionar módulo de botão à coluna
Adicione uma cópia
O próximo e último módulo que adicionaremos à coluna é um módulo de botão. Use uma cópia de sua escolha.
Alinhamento de botão
Vá para a guia Design e altere o alinhamento do botão.
Configurações de botão
Em seguida, defina o estilo do botão da seguinte maneira:
- Use estilos personalizados para o botão: Sim
- Tamanho do texto do botão: 16 px
- Cor do texto do botão: # 000000
- Cor de fundo do botão: #ffffff
- Largura da borda do botão: 0 px
- Espaçamento das letras dos botões: 2 px
- Fonte do botão: Montserrat
- Peso da fonte do botão: negrito
- Estilo da fonte do botão: maiúscula
espaçamento
Use também valores de preenchimento personalizados nas configurações de espaçamento.
- Preenchimento superior: 20 px
- Preenchimento inferior: 20 px
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Adicione posicionamento absoluto à linha 1
Depois de completar a segunda linha, volte para a linha # 1. Abra as configurações de linha, vá para a guia avançada e torne a seção absoluta. Ao fazer isso, a linha e o módulo de texto dentro serão colocados abaixo da linha que contém o módulo de imagem.
- Posição: Absoluta
- Localização: Centro
Clone a linha n ° 1 e coloque a duplicata sob a linha n ° 2
Para permitir que o módulo de texto apareça acima da imagem, precisaremos de outra linha com um valor de índice z maior. Clone a primeira linha e coloque a duplicata abaixo da segunda linha.
Aplicar efeitos à linha 3
Aumentar o índice Z
Abra a linha duplicada e altere o índice z na guia avançada.
Mudar a cor do texto
Abra o módulo de texto na linha e altere a cor do texto.
Aplicar o modo de mistura à linha
Em seguida, abra as configurações de linha e altere o modo de mesclagem nas configurações de filtros.
Use o efeito de rolagem no módulo de texto na linha # 3
Adicione um efeito fade in e fade out
Conclua o tutorial reabrindo o pod de texto, indo para os efeitos de rolagem e ativando o efeito fade in e fade out. É isso!
- Ativar fade in e fade out: Sim
- Opacidade inicial: 0%
- Opacidade média: 0% (a 26%)
- Opacidade final: 100% (a 28%)
- Gatilho de efeito de movimento: meio do elemento
Visão geral
Agora que passamos por todas as etapas, vamos dar uma última olhada no resultado em diferentes tamanhos de tela.
escritório
Móvel Esteira
Considerações finais
Neste artigo, mostramos como ser criativo com os efeitos de rolagem integrados do Divi. Especificamente, mostramos como embaralhar a cópia de rolagem. A princípio, a cópia parece estar abaixo da imagem. Após rolar, a cópia é revelada acima da imagem e mesclada com a imagem. Você também pode baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.
Se você quiser saber mais sobre o Divi e obter mais brindes do Divi, assine nosso newsletter por e-mail e para o nosso Canal do youtube para que você seja sempre uma das primeiras pessoas a conhecer e aproveitar esse conteúdo gratuito.
[Ad_2]
