Como destacar interativamente os detalhes de contato em seu rodapé global com a Divi

Embora um rodapé apareça na parte inferior do design de uma página, é uma parte muito importante de qualquer site que você cria. As pessoas estão acostumadas com o conceito de rodapé e esperam isso em cada site que visitam. Com o Divi's Theme Builder, você pode criar qualquer desenho de rodapé que desejar, mas se estiver procurando por uma abordagem exclusiva, você vai adorar este tutorial. Hoje, mostraremos como destacar interativamente os detalhes de contato que aparecem na primeira parte do seu rodapé. Você também poderá baixar o arquivo JSON 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á que uma seção já está lá. Abra as configurações da seção e aplique uma cor de fundo.

• Cor de fundo: # e8e8e8

Adicionar linha # 1

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 e modifique as configurações de dimensionamento da seguinte forma:

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

Espaçamento

Adicione um pouco de preenchimento inferior a seguir.

• Estofamento inferior: 1%

CSS do elemento principal da coluna

Em seguida, abra as configurações da coluna 1, navegue até a guia avançada e aplique as seguintes linhas responsivas do código CSS ao elemento principal da coluna:

Área de Trabalho:

display: flex;
flex-direction: row;

Tablet e telefone:

display: block;

Adicione o Módulo de Texto # 1 à Coluna 1

Conteúdo Responsivo

É hora de adicionar módulos, começando com um primeiro Módulo de Texto. Adicione algum conteúdo responsivo de sua escolha. Certifique-se de incluir o número de telefone no tablet e celular, onde as opções de foco não são tão óbvias.

Hover Content

Modifique o conteúdo de foco a seguir.

Cor de fundo

Em seguida, aplique uma cor de fundo.

• Cor de fundo: #ffffff

Hover Background Color

Modifique a cor de fundo ao pairar.

• Hover Background Color: # 00ff88

Configurações de texto H3

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

• Fonte do título 3: Oswald
• Peso da fonte do cabeçalho 3: negrito
• Estilo da fonte do título 3: maiúsculas e sublinhado
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: # 000000
• Tamanho do texto do título 3:
  • Desktop: 2,5vw
  • Tablet: 4.5vw
  • Telefone: 5.5vw

Dimensionamento

Certifique-se de que a largura seja “100%” a seguir.

• Largura: 100%

Espaçamento

Em seguida, aplique os seguintes valores de espaçamento responsivo:

• Margem inferior:
  • Área de Trabalho: /
  • Tablet e telefone: 1%
• Margem direita:
  • Desktop: 1%
  • Tablet e telefone: 0%
• Enchimento superior: 10vh
• Preenchimento inferior: 10vh

CSS do elemento principal

Aplique as seguintes linhas de código CSS ao módulo também:

flex: 1;
position: relative !important;
transition: flex 800ms !important;

Hover Main Element CSS

E altere a propriedade CSS flex do elemento principal de foco.

flex: 3;

Clonar Módulo de Texto Duas Vezes

Depois de concluir o primeiro módulo, você pode cloná-lo duas vezes para reutilização. Você notará que os módulos duplicados aparecerão automaticamente um ao lado do outro.

Modificar Módulo de Texto # 2

Alterar conteúdo e conteúdo flutuante

Abra o primeiro Módulo de Texto duplicado e modifique o conteúdo responsivo e instantâneo.

Alterar espaçamento

Remova a margem direita deste módulo também.

Modificar Módulo de Texto # 3

Alterar conteúdo e conteúdo flutuante

Em seguida, abra as configurações do terceiro Módulo de Texto e altere a cópia.

Alterar espaçamento

Remova a margem direita nas configurações de espaçamento e adicione alguma margem esquerda.

• Margem esquerda:
  • Desktop: 1%
  • Tablet e telefone: 0%

Adicionar linha # 2

Estrutura da Coluna

Adicione outra linha à seção usando a seguinte estrutura de coluna:

Cor de fundo

Abra as configurações de linha e aplique a seguinte cor de fundo:

• Cor de fundo: # 141414

Dimensionamento

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

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

Espaçamento

Modifique as configurações de espaçamento da linha também.

• Enchimento superior:
  • Desktop: 100px
  • Tablet e telefone: 50px
• Preenchimento inferior:
  • Desktop: 100px
  • Tablet e telefone: 50px
• Preenchimento esquerdo:
  • Desktop: 8%
  • Tablet e telefone: 10%
• Preenchimento direito:
  • Desktop: 8%
  • Tablet e telefone: 10%

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo H4

Em seguida, adicione um primeiro Módulo de texto à coluna 1 com algum conteúdo H4 de sua escolha.

Configurações de texto H4

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

• Fonte do título 4: Oswald
• Estilo da fonte do título 4: maiúsculas
• Cor do texto do título 4: #ffffff
• Tamanho do texto do título 4:
  • Desktop: 26px
  • Tablet: 22px
  • Telefone: 18px
• Altura da linha do título 4: 1,3em

Espaçamento

Aplique alguma margem inferior também.

• Margem inferior: 20px

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo

Adicione outro Módulo de Texto abaixo do anterior e inclua alguns itens de rodapé com links de sua escolha.

Configurações de texto de link

Altere as configurações de texto do link do módulo de acordo:

• Fonte do link: Lato
• Cor do texto do link: # 00ff88
• Tamanho do texto do link: 17 px

Espaçamento

A seguir, aplique um pouco de margem inferior responsiva.

• Margem inferior:
  • Desktop: 0px
  • Tablet e telefone: 50px

Reutilizar coluna 1

Remova as colunas 2, 3 e 4

Depois de concluir os dois módulos de texto na coluna 1, você pode excluir as três colunas restantes da linha.

Clonar coluna 1 três vezes

E reutilize a primeira coluna, clonando-a três vezes.

Alterar todo o conteúdo duplicado

Certifique-se de alterar todo o conteúdo duplicado em cada nova coluna.

Remova a margem inferior do módulo de texto nº 2 na coluna 4

E remova a margem inferior do último Módulo de texto na coluna 4.

Adicionar linha # 3

Estrutura da Coluna

Passe para a próxima e última linha. Use a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Largura: 90%
• 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 com algum conteúdo de sua escolha.

Configurações de texto

Altere as configurações de texto do módulo de acordo:

• Fonte do texto: Lato
• Tamanho do texto: 17px

Clonar Módulo de Texto e Colocar Duplicado na Coluna 2

Clone o Módulo de Texto na coluna 1 uma vez e coloque a duplicata na coluna 2.

Mudar o Conteúdo

Altere o conteúdo do módulo duplicado.

Alterar o Alinhamento do Texto

E use um alinhamento de texto responsivo diferente.

• Alinhamento de texto:
  • Desktop: Right
  • Tablet e telefone: esquerdo

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

Nesta postagem, mostramos como ser criativo com o rodapé do seu site. Mais especificamente, mostramos como destacar interativamente os detalhes de contato usando o Divi Theme Builder. Você também conseguiu 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ê 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.