Como usar os efeitos de flutuação da altura do divisor de seção para revelar o conteúdo no Divi
Publicados: 2019-06-24Os divisores de seção continuam a ser um elemento popular do design Divi. Existem muitos estilos de divisória para escolher com opções úteis que tornam mais fácil adicionar transições e planos de fundo exclusivos à sua página.
Neste tutorial, usaremos os divisores de seção de maneira um pouco diferente. Divi permite ajustar a altura e a disposição de cada divisória. Isso nos permite posicionar divisores acima de certas áreas ou conteúdo dentro da seção. Usando a opção de foco para altura do divisor, podemos adicionar efeitos de foco exclusivos que revelam conteúdo parcialmente oculto. Isso funciona muito bem para chamar a atenção para uma determinada frase de chamariz ou botão no qual deseja que os visitantes cliquem.
Vamos começar.
Espiada
Baixe os efeitos de flutuação da altura do divisor de seção GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
Inscreva-se no nosso canal no Youtube
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Algumas imagens simuladas para usar no design. Usarei algumas imagens com fundos transparentes do pacote de layout da Juice Shop.
Depois disso, você está pronto para começar!
Implementando o projeto de efeito de flutuação da altura do divisor de seção no Divi
Criando a Seção e Linha
Primeiro, vamos criar uma seção regular com uma linha de duas colunas.
Antes de adicionar um módulo, abra as configurações da seção e atualize o seguinte:
Cor do gradiente de fundo à esquerda: # 73ba57
Cor certa do gradiente de fundo: # 2a4c23
Largura: 80%
Largura máxima: 1080px
Alinhamento de Seção: Centro
Adicionando o Título da Seção
Para adicionar o título da seção, crie um módulo de texto e atualize o conteúdo do corpo com o seguinte cabeçalho h2:
<h2>The Juice</h2>
Em seguida, atualize o design da seguinte forma:
Fonte do título 2: Lato
Tamanho do texto do título 2: 80px
Cabeçalho 2 espaçamento entre letras: -5px
Margem: -50px superior, -40px inferior
Índice Z: -1
A margem personalizada e o índice z permitirão que o texto fique atrás da imagem que adicionaremos na próxima etapa.
Adicionando a imagem
No módulo de texto com o título na coluna 1, adicione um módulo de imagem. Em seguida, faça upload de uma imagem com fundo transparente. Estou usando uma imagem do pacote de layout da Juice Shop de 240 x 300 pixels.
Em seguida, ajuste o alinhamento da imagem para o centro.
Adicionando uma frase de chamariz na coluna 2
Na coluna 2, adicione um módulo de apelo à ação.
Adicione um URL de link de botão para garantir que o botão seja exibido.
Definição do estilo do plano de fundo e do texto do título do CTA
Em seguida, atualize as seguintes configurações de design:
Cor de fundo: #ffffff
Cor do texto: escuro
Fonte do título: Lato
Peso da fonte do título: pesado
Estilo da fonte do título: TT
Tamanho do texto do título: 18px
Estilo do botão CTA
Atualize o design do botão da seguinte maneira:
Cor do texto do botão: #ffffff
Cor de fundo do botão: # 73ba57
Largura da borda do botão: 0 px
Estilizando a borda do CTA
Em seguida, adicione uma borda para enquadrar o módulo da seguinte maneira:
Largura da borda: 10px
Cor da borda: rgba (115,186,87,0,15)
Adicionando o efeito de flutuação da altura do divisor para revelar a frase de chamariz
Agora é hora de adicionar o efeito de pairar sobre a altura do divisor de seção para revelar a frase de chamariz. Para fazer isso, devemos primeiro criar nossos divisores de seção.
Adicionando o Divisor Superior
Abra as configurações de seção e o divisor superior com as seguintes configurações.
Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: # 73ba57
Altura do divisor superior: 70% (padrão), 0% (foco)
Virar divisor superior: horizontal
Observe que a altura do divisor começa com uma altura padrão de 70% e, em seguida, muda para uma altura de 0% ao passar o mouse.
Adicionando o Divisor Inferior
Em seguida, adicione um Divisor inferior semelhante à seção com as seguintes configurações.
Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: # 73ba57
Altura do divisor superior: 70% (padrão), 0% (foco)
Virar divisor superior: horizontal
Disposição do divisor: no topo do conteúdo da seção
Este divisor inferior também começa com uma altura de 70% que muda para 0% ao pairar. No entanto, como a opção de organização do divisor é definida na parte superior do conteúdo, o divisor de seção oculta a parte inferior da chamada à ação na coluna 1. Em seguida, ao passar o mouse, o resto da chamada à ação é revelado.
Confira o resultado até agora.
Adicionando um efeito de flutuação de sombra de caixa para uma transição e design exclusivos
Para uma transição e design únicos ao pairar, podemos adicionar um efeito de pairar de sombra de caixa que ocorrerá simultaneamente com o efeito de pairar de altura do divisor. Para fazer isso, adicione a seguinte sombra de caixa à seção.
Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px
Posição vertical da sombra da caixa: 0 px
Força de propagação da sombra da caixa: 0 px (padrão), 150 px (pairar)
Cor da sombra da caixa: # 73ba57
Retardando a duração da transição
Para uma última etapa, vamos diminuir um pouco a duração da transição.
Duração da transição: 700ms
Resultado final
Aqui está o resultado final no desktop.
Se você não quiser que o conteúdo fique oculto na tela do tablet e do telefone, você pode facilmente alterar a disposição do Divisor para “abaixo do conteúdo da seção” para esses dispositivos.
Aqui está o design final do tablet e do telefone.
Experimentando outros estilos de divisores de seção para designs totalmente exclusivos em segundos
Com esta configuração no lugar, você pode facilmente experimentar diferentes estilos e combinações de divisores!
Aqui estão mais alguns que incluí no download gratuito.
Pensamentos finais
Esperançosamente, este post deu a você um pouco de inspiração sobre como criar alguns efeitos exclusivos de pairar sobre a altura do divisor de seção para revelar o conteúdo. Na verdade, ajustar a altura do divisor ao pairar pode ser um ótimo elemento de design por si só. E os exemplos de design devem ajudá-lo a iniciar sua própria exploração e designs.
Estou ansioso para ouvir de você nos comentários.
Saúde!