Ter uma forte presença nas redes sociais é crucial para o sucesso de qualquer site. Seu público quer se conectar com você em suas plataformas favoritas. Uma maneira de facilitar isso é fornecer links para suas redes sociais em seu site. Felizmente, isso é fácil de fazer com o Divi . Neste artigo, veremos como adicionar ícones de redes sociais ao rodapé do Divi.
Vamos começar.
Aqui está uma prévia de como meu rodapé ficará na versão desktop e na versão mobile.
Pré-visualização para computador
Veja como ficará o layout na versão para desktop com os novos ícones de redes sociais no rodapé do Divi.
Pré-visualização para dispositivos móveis
Veja como o layout ficará em dispositivos móveis com os novos ícones de redes sociais no rodapé do Divi.
Primeiro, precisaremos de um modelo de rodapé. A Elegant Themes oferece diversos modelos de cabeçalho e rodapé gratuitos que combinam com os modelos disponíveis no Divi. Esses modelos já vêm com estilo definido e podem ser baixados gratuitamente. Você encontra modelos de rodapé gratuitos no blog da Elegant Themes. Basta pesquisar por “rodapé gratuito”.
Muitos deles já incluem ícones de redes sociais no rodapé. Para este tutorial, escolhi um rodapé que não os inclui. Estou usando o modelo de rodapé gratuito do pacote de layout para ONGs do Divi .
Baixe seu modelo de rodapé gratuito e descompacte-o. Você só precisará fazer o upload do arquivo JSON.
Observação: os ícones de redes sociais podem ser adicionados a qualquer modelo que você já tenha. Para este tutorial, vou usar um novo modelo. O processo para adicionar os ícones de redes sociais é o mesmo.
Use o Construtor de Temas Divi
Para este tutorial, usaremos o Construtor de Temas do Divi . Esta é a maneira recomendada de criar rodapés personalizados no Divi. Você pode criar vários designs e aplicá-los a todas as páginas ou a páginas específicas. Para acessar o Construtor de Temas do Divi, vá em Divi > Construtor de Temas no painel do WordPress.
Para carregar o modelo de rodapé, selecione o ícone de Portabilidade no canto superior direito. Uma janela será aberta. Escolha Importar e clique em Escolher Arquivo . Navegue até o arquivo JSON no seu computador e selecione-o. Clique em Importar Modelos do Divi Theme Builder na parte inferior da janela. Aguarde a conclusão do carregamento.
Agora você terá um modelo global de cabeçalho e rodapé. Exclua o modelo de cabeçalho se não quiser usá-lo. Clique em Salvar alterações . Agora você está pronto para adicionar ícones de redes sociais ao rodapé do Divi.
Adicionar ícones de redes sociais ao rodapé
Em seguida, você precisará abrir o modelo para fazer suas edições. Selecione o ícone de edição à esquerda do rodapé global (o ícone de lápis) ou clique nos três pontos à direita e clique em Editar nas opções.
Em seguida, escolha onde deseja posicionar os ícones de redes sociais no rodapé. Vou adicioná-los ao espaço vazio abaixo de "Campanhas". Também adicionarei um título e um divisor, além de estilizar os ícones para que combinem com o layout.
Primeiro, precisamos de um título que combine com os demais elementos do rodapé. Clone o título na área acima e arraste-o para a área onde você deseja posicionar os ícones de redes sociais.
Em seguida, abra seu novo módulo de texto e altere o texto de "Campanhas" para "Siga-nos".
Em seguida, clone o módulo Divider sob o título Campaigns e arraste-o para baixo do seu novo título Follow Us.
Seu modelo de rodapé agora ficará como o do exemplo acima. Agora, tudo o que você precisa fazer é adicionar um módulo de Seguir nas Redes Sociais .
Para adicionar o módulo, clique no ícone de mais (+) no local onde deseja inseri-lo. Role a página para baixo ou pesquise por "Seguir nas Redes Sociais" e clique no módulo para inseri-lo.
Depois de adicionar o módulo pelo Divi Builder, ele será aberto e exibirá os ícones padrão. Você terá duas opções para prosseguir.
A primeira opção é clicar em "Adicionar nova rede social" para adicionar cada ícone. Você pode usar o estilo padrão de cada rede social ou estilizar um ícone e aplicar esse estilo aos demais.
A segunda opção é excluir o segundo ícone, estilizar o primeiro, cloná-lo para cada ícone que você quiser adicionar e alterá-los para a rede desejada.
O método que você escolher não importa. O trabalho é essencialmente o mesmo. Eu gosto de ver todos os ícones no lugar, então vou usar a primeira opção.
Clicar em Adicionar nova rede social abre as Configurações da rede social. Clique na caixa suspensa em Rede e escolha a rede que deseja adicionar. Insira o URL da sua página no campo URL do link da conta. Clique no ícone de marca de seleção verde para fechar as configurações.
Continue esse processo até adicionar todas as suas redes sociais. Em seguida, precisamos estilizar os elementos para que combinem com o restante do rodapé.
Este rodapé no meu modelo tem bastante verde e laranja. O botão tem bordas arredondadas e os outros ícones têm um círculo atrás deles. O texto sobre o fundo verde é branco. Vou usar esses elementos como referência de design ao estilizar os ícones de redes sociais.
Primeiro, abra as configurações do título. Vá para a aba Design e adicione 20px de preenchimento superior. Agora temos um espaço entre Campanhas e Siga-nos. Feche o módulo.
- Preenchimento superior = 20px
Em seguida, abra o módulo Seguir nas Redes Sociais. Selecione a aba Design e, em Alinhamento, selecione Alinhamento Centralizado .
- Alinhamento do módulo = Centro
Selecione a aba Conteúdo . Escolha uma rede social para personalizar e clique no ícone de engrenagem para abrir as configurações.
Desça até as opções de fundo e digite o número #347362. Isso dará ao ícone um fundo verde que combina com o CTA no rodapé e fica ótimo sobre o fundo bege.
- Plano de fundo = #347362
Selecione a guia Design . Em Ícone, ative Usar tamanho de ícone personalizado . Defina o tamanho da fonte do ícone para 24px.
- Tamanho da fonte do ícone = 24px
Em seguida, role para baixo até Borda . Ajuste os Cantos Arredondados para 24px. Clique no ícone de visto verde para fechar as configurações e retornar às configurações do módulo.
- Cantos arredondados = 24px
Clique com o botão direito do mouse na rede social que você estilizou e selecione "Estender estilos do item" .
Selecione até onde deseja estender os estilos (esta página, esta coluna, etc.) e clique em Estender .
O novo estilo foi aplicado aos demais ícones de redes sociais. Agora você pode salvar a página e sair.
Aqui estão os resultados para desktop e dispositivos móveis.
Resultados para computador
Veja como o layout fica na versão para desktop com os novos ícones de redes sociais no rodapé do Divi.
Resultados para dispositivos móveis
Veja como o layout fica em dispositivos móveis com os novos ícones de redes sociais no rodapé do Divi.
Considerações finais
Essa foi a nossa explicação sobre como adicionar ícones de redes sociais ao rodapé do Divi. O módulo "Seguir nas Redes Sociais" do Divi é ótimo para isso. Os modelos de rodapé globais do Construtor de Temas do Divi facilitam a adição desses ícones ao seu rodapé. Com apenas alguns passos, você pode adicionar ícones de redes sociais ao rodapé do Divi com facilidade e personalizá-los para combinar com o seu site.
0 Comentários