4 botões de rolagem animados para a seção Hero do seu site Divi (e como criá-los)
Publicados: 2019-08-08Os botões de rolagem animados têm uma função simples, mas importante, de chamar a atenção do usuário e conduzi-lo para a sua página da web. Esses tipos de botões são normalmente encontrados acima da dobra para que um visitante possa simplesmente clicar no botão sem ter que rolar para a próxima seção importante da página da web. Na verdade, Divi tem esse recurso de botão de rolagem integrado ao módulo de cabeçalho de largura total.
Neste tutorial, vou mostrar como criar botões de rolagem animados totalmente personalizados no Divi. Portanto, se você está procurando uma alternativa criativa para o botão de rolagem embutido do Divi no módulo de cabeçalho de largura total, esses designs de botão de rolagem animados o ajudarão a apontar na direção certa (literalmente).
Espiada
Aqui está uma rápida olhada nos designs que construiremos juntos.
Baixe o layout dos botões de rolagem animados 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!
Inscreva-se no nosso canal no Youtube
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?
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)
- Imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Construindo a Seção do Cabeçalho
Antes de começarmos a projetar os botões de rolagem animados, precisamos configurar nossa seção de cabeçalho de simulação. Como vamos nos concentrar mais em obter os designs dos botões de rolagem animados, vamos manter o design do cabeçalho simples com um fundo escuro. Uma vez feito isso, podemos duplicar a seção para lidar com cada novo design de botão de rolagem.
Para começar, crie uma seção regular com uma linha de uma coluna.
Então, antes de adicionar um módulo, abra as configurações da seção e adicione um fundo escuro da seguinte maneira:
Cor de fundo: # 222222
Qualquer fundo escuro funcionará.
Adicione o Texto do Cabeçalho
Para criar o texto do cabeçalho simulado, adicione um novo módulo de texto à linha de uma coluna.
Em seguida, atualize o conteúdo do corpo com um cabeçalho h1 logo acima do texto de parágrafo padrão.
<h1>scroll button animation</h1> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Em seguida, atualize as configurações de design da seguinte forma:
Fonte do Texto: Karla
Alinhamento do Texto do Texto: Centro
Cabeçalho Tamanho do texto: 5vw
Cor do Texto: Claro
Este será o design básico da seção que usaremos para nossos diferentes botões de rolagem animados.
Design do botão de rolagem animado nº 1: texto vertical com animação de salto lento
Com nosso design básico de seção no lugar, estamos prontos para adicionar nosso primeiro botão de rolagem animado. Este botão de rolagem consiste em um módulo de sinopse que terá um ícone no lado direito. Em seguida, o texto e o ícone serão girados verticalmente para que o ícone de seta aponte para baixo. Depois disso, adicionaremos a animação de salto com uma duração lenta.
Veja como fazer.
Primeiro, adicione uma nova linha de uma coluna logo abaixo de nossa linha contendo o texto do cabeçalho.
Em seguida, adicione um módulo blurb à linha.
Nas configurações de sinopse, exclua o conteúdo do corpo padrão e adicione o seguinte:
Título: scroll
Ícone de uso: SIM
Ícone: seta para a direita (veja a imagem)
Em seguida, atualize as configurações de design da seguinte forma:
Cor do ícone: #ffffff
Posicionamento de imagem / ícone: esquerda
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 50px
Estilo da fonte do título: TT
Cor do texto do título: #ffffff
Tamanho do texto do título: 14px
Espaçamento entre letras de título: 3px
Altura da linha de título: 50 px (igual ao tamanho da fonte do ícone)
Em seguida, precisamos dar à nossa sinopse uma largura definida e girá-la verticalmente da seguinte maneira:
largura: 132px
Alinhamento do Módulo: centro
Transformar, girar eixo Z: 90 graus
Agora, tudo o que precisamos fazer é inverter a ordem do conteúdo da sinopse para que o ícone de seta fique à direita da sinopse em vez de à esquerda. Isso fará com que a seta seja exibida sob o texto vertical conforme pretendido. Para fazer isso, precisamos adicionar o seguinte CSS personalizado ao elemento principal:
direction: rtl;
Adicionando a animação de pulso lento
Para adicionar a animação, atualize o seguinte:
Estilo de Animação: Bounce
Direção da animação: baixo
Duração da animação: 5000ms
Atraso de animação: 400 ms
Animação de imagem / ícone: da esquerda para a direita
Resultado final
Agora vamos verificar o resultado final do design # 1.
Design do botão de rolagem animado nº 2: Animação de texto com letreiro vertical
Este próximo design é baseado no design # 1, pois manteremos o botão de rolagem de texto vertical criado usando o módulo blurb. A diferença será a animação. Para esse design, vamos adicionar uma animação de slide que começa com o botão de rolagem oculto acima do contêiner da linha e termina com o botão oculto abaixo da linha. Com a animação em loop, isso criará um efeito de animação de letreiro de texto que chama a atenção do usuário.
Veja como fazer.
Primeiro duplique toda a seção do design # 1.
Atualizar configurações da linha 2
Em seguida, atualize a linha da seção que contém o módulo de sinopse / botão de rolagem da seguinte forma:
Excesso horizontal: oculto
Estouro vertical: oculto
Atualizar as configurações do módulo Blurb
Para criar a animação do letreiro, primeiro precisamos usar transform translate para mover o texto da sinopse abaixo do contêiner da linha (oculto da visualização). Esta será a posição em que o texto estará no final da animação. Atualize o seguinte:
Transformar traduzir eixo Y: 115px
Em seguida, adicione as seguintes configurações de animação:
Estilo de animação: slide
Direção da animação: baixo
Duração da animação: 4000ms
Intensidade de animação: 195%
Opacidade inicial da animação: 100%
Curva de velocidade de animação: Linear
Repetição de animação: Loop
Resultado final
Agora vamos verificar o resultado final do design # 3.
Design do botão de rolagem animado nº 3: guia de seta com animação de slide para baixo com atraso
Para este próximo design, vamos combinar um módulo de texto e um módulo de sinopse para criar um design de guia de seta exclusivo.
Para este projeto, começaremos com o projeto básico da seção do cabeçalho. Portanto, você pode duplicar a seção de design # 3 duplicada e, em seguida, excluir o módulo blurb na linha 2.
Em seguida, adicione um módulo de texto à linha de uma coluna diretamente abaixo da primeira linha.
Em seguida, atualize o conteúdo do corpo com a palavra “scroll”.
Em seguida, atualize as configurações de design da seguinte forma:
Cor de fundo: #ffffff
Cor do texto do texto: # 222222
Alinhamento de texto: centro
Largura: 50px
Alinhamento do Módulo: centro
Margem: 0px inferior
Preenchimento: 20px superior, 20px inferior
Cantos arredondados 5px inferior esquerdo, 5px inferior direito
Adicione o ícone do Blurb
Agora que o módulo de texto está instalado, precisamos criar o ícone de sinopse diretamente abaixo dele para concluir o design da guia de seta. Para fazer isso, adicione um novo módulo de blurb no módulo de texto.
Em seguida, exclua o título padrão e o texto do corpo. Em seguida, adicione a atualização a seguir:
Ícone de uso: SIM
Ícone: triângulo de seta inferior (veja a imagem)
Em seguida, atualize as configurações da seguinte forma:
Cor do ícone: #ffffff
Margem: -36px superior, 0px inferior
Esta margem negativa irá anexar a seta ao módulo de texto para um bom design de aba de seta.
Em seguida, adicione o seguinte css à imagem do blurb para tirar alguma margem desnecessária abaixo do ícone.
CSS da imagem do Blurb:
margin-bottom: 0px;
Configurações e animação da linha 2
Como queremos adicionar a mesma animação a ambos os módulos que compõem o design do botão de rolagem, precisaremos adicionar a animação à linha que os contém. Atualize a configuração da linha da seguinte maneira:
Largura máxima: 100 px
Preenchimento: 0 px superior, 0 px inferior
Estilo de animação: slide
Direção da animação: baixo
Duração da animação: 1200 ms
Linha 1 Cor de fundo e sombra de caixa
O toque final desse design envolve a adição de uma cor de fundo à primeira linha diretamente acima da linha do botão de rolagem. E, atualizando o índice Z dessa linha, permitiremos que a animação do botão de rolagem apareça como se estivesse quebrando o cabeçalho.
Abra as configurações da linha 1 da seguinte maneira:
Cor de fundo: # 222222
Índice Z: 10
Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 80px
Força do desfoque de sombra da caixa: 22 px
Força de propagação da sombra da caixa: -70px
Cor da sombra: # 222222 (certifique-se de que corresponde à cor de fundo)
Resultado final
Agora confira o resultado final.
Design do botão de rolagem animado nº 4: animação de rolagem do mouse
Para este último botão de rolagem animado, vamos criar uma animação de rolagem do mouse combinando um módulo de texto e um módulo de sinopse.
Veja como fazer.
Para começar, você pode usar a seção de cabeçalho básico. Em seguida, adicione uma nova linha na linha 1.
Adicione o Módulo Blurb
Em seguida, adicione um módulo blurb à linha. Em seguida, exclua o título padrão e o texto do corpo.
Depois disso, atualize o ícone da seguinte maneira:
Ícone de uso: SIM
Ícone: círculo (veja a imagem)
Em seguida, atualize as configurações de design do blurb da seguinte maneira:
Cor do ícone: #ffffff
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 15px
Estilo de animação: slide
Direção da animação: baixo
Duração da animação: 1200 ms
Repetição de animação: Loop
Animação de imagem / ícone: sem animação
Em seguida, adicione o seguinte CSS personalizado à imagem do Blurb:
margin-bottom: 0px;
Adicione o Módulo de Texto
Em seguida, adicione um novo módulo de texto diretamente sob o módulo blurb. Em seguida, atualize o corpo do texto com a palavra “scroll”.
Em seguida, atualize as seguintes configurações de texto:
Cor do texto do texto: #ffffff
Alinhamento de texto: centro
Largura: 90px
Margem: 10px no topo, -30px à esquerda
Atualizar configurações da linha 2
Agora atualize as configurações de linha da seguinte forma:
Largura: 30px
Altura: 60px
Cantos arredondados: 16px
Largura da borda: 1px
Cor da borda: #ffffff
Estilo de borda: sólido
Excesso horizontal: visível
Excesso vertical: visível
O resultado final
Agora vamos verificar o resultado final:
Adicionando Funcionalidade de Link de Âncora
Links de âncora são aqueles links que saltam para diferentes seções de uma página. Eles são freqüentemente usados em sites de uma página. Podemos usar o mesmo conceito para adicionar um link de âncora aos nossos botões de rolagem para que eles descam na página até a seção desejada. Para adicionar a funcionalidade do link de âncora aos botões de rolagem animados, há duas coisas principais que você precisa fazer.
- Você precisa adicionar um ID CSS à seção ou linha para a qual deseja pular
- Você precisa adicionar um link de âncora com o mesmo CSS ID ao botão de rolagem
Aqui está como isso funcionaria. Primeiro, crie uma nova seção sob a seção de cabeçalho que contém o botão de rolagem. Em seguida, atribua à nova seção um ID CSS na guia avançada.
Em seguida, encontre o elemento / botão de rolagem que deseja transformar em seu link de âncora e adicione um url que comece com uma hashtag (ou símbolo de libra) e seja imediatamente seguido pelo ID CSS do elemento para o qual você está pulando.
Por exemplo, se o ID CSS da seção for “seção-2”, você deverá adicionar “# seção-2” como o URL do link.
Lembre-se de que o Divi permite que você adicione URLs de link a cada elemento do Divi, então fique à vontade para adicionar links a toda a linha que contém o botão de rolagem animado.
Para obter mais informações, verifique algumas coisas interessantes que você pode fazer com links de âncora.
Seja criativo!
Não tenha medo de combinar módulos diferentes e animá-los de maneiras diferentes. Na verdade, enquanto eu estava explorando novas maneiras de criar botões de rolagem com Divi, criei uma divertida animação de rolagem do polegar que poderia ser usada em dispositivos móveis. Eu o incluí no download gratuito acima, caso você queira conferir.
Pensamentos finais
Botões de rolagem animados como esses são fáceis de construir com Divi. E eles podem ser usados em mais lugares do que o cabeçalho, se você tratá-los como links de âncora. Espero que esses designs inspirem você a criar um botão de rolagem totalmente novo para o seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!