Como criar uma barra adesiva de rodapé com as opções adesivas do Divi

Se você está procurando uma maneira de adicionar um CTA que segue seus visitantes enquanto eles navegam pelo seu site, você pode usar uma barra de rodapé adesiva. Uma barra adesiva de rodapé é usada na parte inferior do seu navegador e você pode incluir qualquer frase de chamariz de sua escolha, seja um botão ou informações de contato. Assim que os visitantes rolarem para a área de rodapé de sua página, a barra de rodapé e o design do rodapé serão mesclados enquanto mudam os estilos de sua barra de rodapé adesiva. Essa bela estética pode ajudá-lo a aumentar as taxas de conversão em suas páginas! Você também poderá baixar o arquivo JSON de modelo gratuitamente.

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 modelo de rodapé global GRATUITAMENTE

Para colocar suas mãos no modelo de rodapé global gratuito, primeiro você precisará baixá-lo 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!

1. Crie um novo modelo de rodapé

Vá para Divi Theme Builder e adicione um novo rodapé global ou personalizado

Comece acessando o Divi Theme Builder no backend do seu site WordPress. Lá, adicione um novo rodapé global ou personalizado.

Comece a construir do zero

Comece a construir o modelo de rodapé do zero.

2. Construir design de rodapé

Configurações da seção

Cor de fundo

Uma vez dentro do editor de template, você notará uma seção. Abra essa seção e aplique uma cor de fundo preta.

• Cor de fundo: # 000000

Adicionar linha # 1

Estrutura da Coluna

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

Cor de fundo

Sem adicionar módulos ainda, abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: # ea6c01

Dimensionamento

Vá para a guia de design da linha e altere as configurações de dimensionamento a seguir.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 90%
• Largura máxima: 2580 px
• Alinhamento de linha: centro

Espaçamento

Adicione um pouco de preenchimento personalizado superior e inferior em tamanhos de tela menores também.

• Preenchimento superior: 5 px (apenas tablet e telefone)
• Preenchimento inferior: 5 px (apenas tablet e telefone)

Fronteira

Em seguida, adicione alguns cantos arredondados responsivos às configurações de borda.

• Todos os cantos:
  • Desktop: 30px
  • Tablet e telefone: 15px

Transbordamentos

E para ter certeza de que podemos criar sobreposições posteriormente no tutorial, definiremos os estouros de linha como visíveis.

• Excesso horizontal: Visível
• Estouro vertical: visível

Visibilidade das colunas 1 e 3

Para evitar que muitos itens da barra de rodapé apareçam em telas menores, ocultaremos a primeira e a última coluna em nossa linha no tablet e no telefone.

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

É hora de adicionar módulos, começando com um Módulo Blurb na coluna 1. Adicione algum conteúdo de sua escolha.

Selecione o ícone

Selecione um ícone a seguir.

Configurações de ícone

Vá para a guia de design do módulo e estilize o ícone de acordo:

• Cor do ícone: # f5d72e
• Ícone de círculo: Sim
• Cor do Círculo: # 000000
• Posicionamento de imagem / ícone: topo
• Alinhamento de imagem / ícone: centro
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 32px

Configurações de texto

Em seguida, altere as configurações de texto.

• Alinhamento de Texto: Centro
• Cor do Texto: Claro

Configurações de texto do título

Faça algumas alterações nas configurações do texto do título também.

• Fonte do título: Poppins
• Cor do texto do título: # 000000

Configurações do corpo do texto

Modifique as configurações do corpo do texto também.

• Fonte do corpo: Poppins
• Peso da fonte do corpo: Ultra negrito
• Tamanho do corpo do texto: 20 px

Dimensionamento

Coloque a largura do conteúdo em “100%” nas configurações de dimensionamento a seguir.

• Largura do conteúdo: 100%

Espaçamento

Para criar uma sobreposição, adicione alguma margem superior negativa às configurações de espaçamento.

• Margem superior: -60px

Animação

E conclua as configurações do módulo removendo a animação do ícone nas configurações de animação.

• Animação de imagem / ícone: sem animação

Clone o módulo do Blurb e coloque a duplicata na coluna 3

Depois de concluir o primeiro módulo Blurb na coluna 1, clone-o uma vez e coloque a duplicata na coluna 3.

Alterar conteúdo e ícone

Altere o conteúdo e o ícone da duplicata.

Adicionar Módulo Blurb à Coluna 2

Selecione o ícone

Em seguida, adicione um novo Módulo Blurb à coluna 2. Deixe a caixa de conteúdo vazia e selecione um ícone de sua escolha.

Cor de fundo

Adicione uma cor de fundo a seguir.

• Cor de fundo: # 000000

Configurações de ícone

Vá para a guia de design do módulo e altere as configurações do ícone de acordo:

• Cor do ícone: #ffffff
• Posicionamento de imagem / ícone: topo
• Alinhamento de imagem / ícone: centro
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 30px

Dimensionamento

Faça algumas alterações nas configurações de dimensionamento a seguir.

• Largura: 70px
• Alinhamento do Módulo: Centro
• Altura: 40px

Espaçamento

Em seguida, aplique os valores de margem e preenchimento personalizados em diferentes tamanhos de tela.

• Margem superior: -20 px (apenas tablet e telefone)
• Preenchimento superior: 5 px
• Preenchimento inferior: 0 px

Fronteira

Em seguida, adicione alguns cantos arredondados às configurações de borda.

• Todos os cantos: 10px

Animação

E remova a animação padrão nas configurações de animação.

• Animação de imagem / ícone: sem animação

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

O próximo e último módulo que precisamos nesta linha é um Módulo de Texto na coluna 2. Adicione algum conteúdo de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Peso da Fonte do Texto: Semi Negrito
• Tamanho do texto: 18 px
• Altura da linha de texto: 1.8em
• Alinhamento de Texto: Centro

Adicionar linha # 2

Estrutura da Coluna

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

Dimensionamento

Sem adicionar módulos, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Largura máxima: 2580 px

Espaçamento

Adicione alguma margem superior e inferior a seguir.

• Margem superior: 50px
• Margem inferior: 50px

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

Adicione um Módulo de Imagem à coluna 1 e carregue seu logotipo ou qualquer tipo de imagem de sua escolha.

Dimensionamento

Vá para a guia de design do módulo e altere as configurações de dimensionamento da seguinte forma:

• Largura: 59%
• Alinhamento do Módulo: Esquerda

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo H3

Em seguida, adicione um Módulo de Texto à coluna 2 com algum conteúdo H3 de sua escolha.

Configurações de texto H3

Altere as configurações de texto H3 do módulo da seguinte forma:

• Fonte do título 3: Poppins
• Peso da fonte do cabeçalho 3: negrito
• Cor do texto do título 3: # 6d6d6d

Clonar Módulo de Texto 3x e Espalhar nas Colunas 3 e 4

Depois de concluir este Módulo de texto, você pode clonar três vezes e espalhar as duplicatas pelas duas colunas restantes da linha.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo em cada Módulo de Texto duplicado.

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Adicione outro Módulo de Texto logo abaixo do Módulo de Texto anterior na coluna 2 e adicione algum conteúdo vinculado de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Poppins
• Tamanho do texto: 30px
• Altura da linha de texto: 1em
• Alinhamento de Texto: Esquerda
• Cor do Texto: Claro

Configurações de texto de link

Altere a cor do texto do link também.

• Cor do texto do link: #ffffff

Clonar Módulo de Texto Conforme Necessário

Depois de concluir o Módulo de Texto, clone-o quantas vezes desejar.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo e os links em cada módulo duplicado.

Adicionar Módulo de Texto à Coluna 3

Adicionar conteúdo

Em seguida, adicione outro Módulo de Texto à coluna 3. Adicione algum conteúdo vinculado de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Poppins
• Tamanho do texto: 22 px
• Altura da linha de texto: 1em
• Alinhamento de Texto: Esquerda
• Cor do Texto: Claro

Configurações de texto de link

Modifique a cor do texto do link também.

• Cor do texto do link: # ea6c01

Clonar Módulo de Texto conforme Necessário

Clone este módulo quantas vezes você precisar.

Mudar o Conteúdo

E, é claro, altere o conteúdo e os links conforme necessário.

Adicionar Módulo de Texto à Coluna 4

Adicionar conteúdo

Na coluna 4, adicionaremos outro Módulo de Texto abaixo do primeiro Módulo de Texto. Adicione algum conteúdo de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Poppins
• Tamanho do texto: 16px
• Altura da linha de texto: 1.8em
• Alinhamento de Texto: Esquerda
• Cor do Texto: Claro

Adicionar mídia social para seguir a coluna 4

Adicionar redes sociais de escolha

Em seguida, adicione um Módulo de Acompanhamento de Mídia Social ao final da coluna. Adicione as redes sociais de sua escolha.

Remova a cor de fundo de cada rede social individualmente

Remova a cor de fundo de cada rede social individualmente.

Espaçamento

Volte para as configurações regulares do módulo, vá para as configurações de espaçamento e adicione alguns valores de margem personalizados.

• Margem superior: -15px
• Margem esquerda: -8px

Adicionar linha # 3

Estrutura da Coluna

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

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Equalize Alturas de Coluna: Sim
• Largura máxima: 2580 px

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Em seguida, adicione um Módulo de Texto à coluna 1. Insira algum conteúdo de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Poppins
• Cor do texto: # 595959
• Tamanho do texto: 13px
• Alinhamento de Texto: Centro

Configurações de texto de link

Modifique a cor do texto do link também.

• Cor do texto do link: # 595959

Clone o módulo de texto duas vezes e coloque duplicatas nas colunas restantes

Depois de concluir o módulo na coluna 1, você pode cloná-lo duas vezes e colocar as duplicatas nas duas colunas restantes da linha.

Alterar Alinhamentos de Texto

Altere os alinhamentos de texto para cada Módulo de Texto duplicado de acordo:

• Módulo de texto na coluna 2:
  • Desktop: Center
  • Tablet e telefone: esquerdo

• Módulo de texto na coluna 3:
  • Desktop: Right
  • Tablet e telefone: esquerdo

Mudar o Conteúdo

E mude o conteúdo em ambos os módulos duplicados também.

3. Aplicar efeitos aderentes à barra de rodapé

Abra a linha 1 e aplique as configurações fixas

Agora que nossa base de design está pronta, é hora de aplicar o efeito adesivo. Abra a primeira linha na seção, vá para a guia avançada e aplique as seguintes configurações fixas:

• Posição pegajosa: grudar no fundo
• Deslocamento inferior aderente:
  • Desktop: 50px
  • Tablet e telefone: 20px

Estilos pegajosos de linha

Cor de fundo

Agora que tornamos nossa linha fixa, podemos aplicar estilos fixos à linha e a todos os seus elementos filhos. Comece adicionando uma cor de fundo pegajosa à linha # 1.

• Cor de fundo pegajosa: # 000000

Aplicar estilos fixos aos módulos do Blurb nas colunas 1 e 3

Configurações de ícone

Em seguida, abra os Módulos do Blurb nas colunas 1 e 3 e adicione uma cor de círculo aderente.

• Cor do círculo aderente: # ea6c01

Configurações de texto do título

Adicione uma cor de texto de título aderente também.

• Cor do texto do título aderente: # ea6c01

Aplicar estilos fixos ao módulo Blurb na coluna 2

Cor de fundo

Em seguida, abra o Módulo Blurb na coluna 2 e aplique uma cor de fundo pegajosa.

• Cor de fundo pegajosa: # ea6c01

4. Salvar todas as alterações do construtor de modelo e tema

Depois de concluir as etapas fixas, certifique-se de salvar suas alterações de modelo e construtor de tema antes de visualizar o resultado em seu site!

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

Neste post, mostramos como ser criativo com as opções pegajosas do Divi. Mais especificamente, mostramos como construir uma barra de rodapé adesiva que se mescla com a área principal do rodapé quando as pessoas rolarem a página em que estão. Você também conseguiu baixar o arquivo JSON de modelo 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ê 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.