Como criar belos rodapés de rolagem revelados abaixo dos divisores de seção

Em todas as tendências de design, os rodapés continuam sendo essenciais. As pessoas se acostumaram com eles, o que os torna altamente amigáveis. Eles ajudam os visitantes a organizar sua estada em seu site e a navegar até a página exata que procuram. Com Divi, você pode criar facilmente qualquer tipo de rodapé em uma única seção.

Agora, se você quer dar ao seu rodapé alguma dimensão e interação extra, você vai adorar este post. Vamos combinar criativamente uma seção de rodapé com divisores de seção para criar uma revelação de rolagem de rodapé.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout GRATUITAMENTE

Para colocar as mãos no layout gratuito, 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.

Baixe os arquivos

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.

DOWNLOAD

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

1. Crie uma nova página em branco e faça upload do layout de escolha

Adicionar nova página em branco

A primeira coisa que você precisa fazer é criar uma nova página em branco.

Carregar página inicial do pacote de layout da empresa SaaS

Mude para o Visual Builder e carregue a página inicial do SaaS Company Layout Pack. Embora estejamos usando esse layout específico, você pode fazer a técnica funcionar em qualquer tipo de página em que estiver trabalhando.

2. Adicione o índice Z a cada seção e remova as animações da seção

Adicionar Z Index à seção Hero

Continue alterando o índice z da seção hero na página.

• Índice Z: 3

Copie o índice Z e cole em todas as outras seções da página

Copie o índice z e cole-o em todas as outras seções da página. Aumentar o índice z para cada uma das seções é uma etapa crucial para fazer o tutorial funcionar. Isso permitirá que cada uma das seções apareça no topo da seção de rodapé que adicionaremos mais tarde na postagem.

Remover animação da seção do herói

Para garantir que o rodapé permaneça oculto até o final da página, também removeremos todas as animações da seção. Abra a seção do herói e remova a animação.

• Estilo de animação: Nenhum

Estenda a animação para todas as seções da página

Estenda os estilos de animação a todas as seções da página.

3. Modifique a última seção na página

Mudar a cor do fundo

Passe para a última seção da página e altere a cor do plano de fundo.

• Cor de fundo: # f2f2f2

4. Adicione a seção regular nº 1 ao final da página

Configurações da seção

Cor de fundo

Como você pode notar na visualização deste post, o rodapé aparecerá abaixo de um divisor de seção. Dedicaremos uma nova seção na parte inferior de nossa página para este divisor de seção. Abra as configurações da seção e use uma cor de fundo totalmente transparente. Isso permitirá que o rodapé apareça através do contêiner da seção, embora sua posição seja abaixo dele.

• Cor de fundo: rgba (0,0,0,0)

Divisor superior

Passe para a guia de design da seção e adicione um divisor superior de sua escolha.

• Estilo do divisor: Encontrar na lista
• Altura do divisor: 250 px (desktop), 150 px (tablet), 100 px (telefone)
• Repetição horizontal do divisor: 2x

Índice Z

Esta nova seção também precisa de um índice z aumentado.

• Índice Z: 3

5. Adicione a seção regular nº 2 ao final da página

Configurações da seção

Cor de fundo

É hora de criar a seção de rodapé! Adicione outra nova seção regular ao final da página e selecione uma cor de fundo de sua escolha.

• Cor de fundo: # 202332

Dimensionamento

Vá para a guia de design e certifique-se de que a largura seja '100%'.

• Largura: 100%

Espaçamento

Também precisaremos aumentar o preenchimento superior da seção.

• Enchimento superior: 500px

Índice Z

O índice z que atribuímos a esta seção é inferior ao das outras seções da página. Isso nos ajudará a ocultar a seção até chegarmos ao fim da página.

• Índice Z: 2

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim

Espaçamento entre colunas

Abra as configurações da coluna 1 a seguir e adicione algum preenchimento à esquerda.

• Preenchimento esquerdo: 20px

Borda direita da coluna

Adicione uma borda direita à coluna também.

• Largura da borda direita: 1px
• Cor da borda direita: # 515151

Copiar e Colar Estilos de Colunas

Aplique as alterações a todas as colunas estendendo os estilos ou usando a opção de copiar e colar.

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

É hora de começar a adicionar módulos! Adicione um novo Módulo de imagem à primeira coluna e carregue seu logotipo.

Dimensionamento

Vá para a guia de design e altere a largura em diferentes tamanhos de tela.

• Largura: 35% (desktop), 30% (tablet), 25% (telefone)
• Alinhamento do Módulo: Esquerda

Espaçamento

Adicione alguma margem inferior também.

• Mostrar espaço abaixo da imagem: Sim
• Margem inferior: 50px

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar conteúdo

Vamos para a segunda coluna! Adicione um primeiro Módulo de Texto com algum conteúdo de sua escolha.

Configurações de texto

Modifique as configurações de texto.

• Fonte do texto: Nunito Sans
• Peso da Fonte do Texto: Semi Negrito
• Cor do texto: #ffffff
• Tamanho do texto: 19px

Espaçamento

E adicione alguma margem superior e inferior personalizada em diferentes tamanhos de tela.

• Margem superior: 15px (desktop e tablet), 10px (telefone)
• Margem inferior: 15 px (desktop e tablet), 10 px (telefone)

Adicionar Módulo de Texto # 2 à Coluna 2

Adicionar conteúdo

Adicione um segundo Módulo de Texto à segunda coluna e insira algum conteúdo de sua escolha.

Adicionar Link

Adicione um link que corresponda ao item de rodapé.

• URL do link do módulo: #

Configurações de texto

Modifique as configurações de texto a seguir.

• Fonte do texto: Nunito Sans
• Cor do Texto: #dbdbdb
• Tamanho do texto: 17px

Espaçamento

E adicione um pouco de preenchimento personalizado superior e inferior em diferentes tamanhos de tela.

• Margem superior: 15px (desktop e tablet), 10px (telefone)
• Margem inferior: 15 px (desktop e tablet), 10 px (telefone)

Clone o módulo de texto # 2 quantas vezes forem necessárias

Clone o segundo Módulo de texto na coluna 2 quantas vezes forem necessárias.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo.

Mudar links

Junto com os links.

• URL do link do módulo: #

Clonar Módulos na Coluna 2 e Colocar nas Colunas Restantes

Depois de preencher a segunda coluna, você pode clonar os dois módulos quantas vezes forem necessárias e colocar as duplicatas nas duas colunas restantes da linha.

Mudar o Conteúdo

Altere o conteúdo de cada duplicata.

Mudar links

Junto com o link.

• URL do link do módulo: #

6. Torne a seção nº 2 fixada no final da página

Adicionar CSS personalizado

Agora, para criar a revelação de rolagem, vamos garantir que a seção de rodapé fique na parte inferior de nossa página, adicionando duas linhas de código CSS ao elemento principal da seção.

position: fixed;
bottom: 0;

7. Adicione a margem inferior à seção 1 para criar o efeito de revelação

Adicionar margem inferior em diferentes tamanhos de tela

Também precisaremos de algum espaço na parte inferior de nossa página que permitirá que o rodapé apareça. Abra a seção que contém o divisor de seção e adicione alguma margem inferior em diferentes tamanhos de tela e pronto!

• Margem inferior: 400px (desktop), 700px (tablet), 800px (telefone)

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como criar belas revelações de rolagem de rodapé abaixo dos divisores de seção para criar um efeito único. Essa é uma ótima maneira de tornar qualquer rodapé interativo e chamar a atenção para os itens listados nele. Esperamos que este tutorial inspire você a criar suas próprias revelações de rodapé de divisor de seção! Se você tiver dúvidas ou sugestões, certifique-se de deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.