Como adicionar ícones sociais ao menu principal do Divi

É virtualmente impossível administrar um site de sucesso sem ter uma presença dedicada nas redes sociais. Quer você escolha Instagram, Twitter, TikTok, Facebook ou qualquer combinação desses e qualquer outra coisa, as pessoas querem interagir com você e sua marca diretamente. Garantir que você tenha ícones sociais no menu principal do Divi é uma ótima maneira de canalizar o tráfego de seu site para a rede de sua escolha. É rápido e fácil, e vamos acompanhá-lo em cada etapa.

Vamos começar!

Antevisão

Área de Trabalho

Móvel

Use o Divi Theme Builder para enviar um Global Header Freebie

Neste artigo, usaremos o pacote de layout do Tennis Club e o brinde de cabeçalho / rodapé. Você pode baixar o pacote de layout de dentro do seu construtor Divi e o pacote de cabeçalho / rodapé de nosso blog. Quando você fizer o download, os arquivos estarão como um arquivo .zip . Certifique-se de extraí-los para que você tenha um arquivo .json para carregar no Divi.

Agora, vá para o painel do WordPress e encontre o Divi Theme Builder em Divi - Theme Builder . Clique no ícone de seta para cima e para baixo no canto superior direito da página. Isso abre o modal Portabilidade , selecione a guia Importar , encontre o arquivo .json para o cabeçalho / rodapé que você baixou e clique em Importar Modelos Divi Theme Builder .

Em seguida, você deseja ir para a seção de cabeçalho do seu site. Por serem ícones sociais, vamos colocá-los no Cabeçalho Global porque imaginamos que eles deveriam estar em todas as páginas do seu site (a menos que especificado de outra forma).

Você deve estar dentro do construtor agora. Se você seguiu as instruções acima, o novo cabeçalho carregado já deve aparecer no lugar.

Você pode notar que já existem ícones sociais aqui. Esses ícones sociais não estão no menu principal Divi, que é o que estamos trabalhando hoje, no entanto. Então, vamos entrar nas ervas daninhas disso, certo?

Adicionar ícones sociais à barra de menu principal

Em primeiro lugar, vamos mudar a estrutura de linha / coluna. Queremos encontrar a linha na seção # 2 (a inferior com os links Home / Contact ).

Estamos selecionando a estrutura de duas colunas para este tutorial, mas é a que funciona melhor para o seu site. Depois de escolher isso, vá para as configurações de linha e navegue até a guia Design . Encontre o menu Dimensionamento e ative a opção Usar largura de medianiz personalizada . Defina o valor da largura da medianiz como 1. Você pode inserir o número ou usar o controle deslizante para fazer isso.

Clique na marca de seleção verde para salvar suas configurações. Em seguida, volte para as configurações de linha. Desta vez, selecione a engrenagem de configurações para a coluna superior / primeira / esquerda.

Em seguida, navegue até a guia Avançado . Encontre a área CSS personalizado e clique no campo Elemento principal . Dentro deste campo, você desejará adicionar o seguinte CSS.

width:80%;

ou

width:80%!important;

Você pode ter que adicionar a tag! Important para estilizar este elemento. Tudo bem. Não deve criar problemas de desempenho ou código espaguete para lidar, porque é um único elemento.

Em seguida, vá para as configurações de capacidade de resposta e use o mesmo código para alterar a largura da coluna de volta para 100% para dispositivos móveis.

Em seguida, repita esta etapa para a segunda coluna. Só desta vez, defina o valor padrão em 20% e ainda tenha o valor do celular em 100% .

Feito isso, salve suas alterações e prepare-se para adicionar e estilizar seus ícones de mídia social.

Adicionar Módulo de Acompanhamento de Mídia Social

Clique no ícone preto + na coluna 2 para adicionar um novo módulo e role até encontrar Social Media Follow . Insira.

Independentemente do cabeçalho que você está usando, os ícones de mídia social padrão provavelmente não corresponderão ao seu estilo. Nem serão posicionados corretamente. A próxima etapa será estilizá-los e espaçá-los corretamente. Dentro das configurações do módulo Social Media Follow , vá para Design e então Alignment . Escolha onde deseja que o módulo seja colocado.

Estamos escolhendo justificado à direita para desktop e, em seguida, indo para as opções de capacidade de resposta e centralizando-o.

O próximo passo é rolar para baixo no menu Ícone . Escolha a cor do ícone que você deseja. Este é o f do Facebook, o pássaro do Twitter, a câmera do Instagram. Este não é o fundo azul, por exemplo.

O próximo passo é o espaçamento. Realmente, a principal coisa que precisa ser ajustada é a margem superior. Vamos aplicar uma margem superior de 1,5 vw para que ela centralize com o texto do menu. Se você quiser mais ou menos para dispositivos móveis, também pode ajustar isso.

Agora, clique na guia Conteúdo e acesse o ícone de rede social individual que deseja personalizar. Você repetirá essas etapas para cada ícone que escolher para o seu site.

Role para baixo até Plano de fundo e selecione a cor desejada que corresponda ao design do seu site. Novamente, lembre-se de que isso só mudará o plano de fundo desse ícone em particular.

Você também pode querer alterar a cor deste ícone específico. Você pode fazer isso na guia Design e na seção Ícone , assim como no próprio módulo geral. Esta configuração substituirá a geral, então você não precisa se preocupar em interferir em outras se quiser cores únicas.

Em seguida, role para baixo até a entrada Borda na guia Design e, dentro dela, você encontrará a Largura da Borda . Defina este valor para 3px e, em seguida, selecione uma cor de borda que se destaque do plano de fundo do menu principal Divi.

Neste ponto, você retornará à guia Conteúdo e repetirá essas etapas para cada ícone de rede social que deseja exibir. Se quiser que cada um dos ícones neste módulo compartilhe o mesmo design, você pode simplesmente clicar com o botão direito naquele que criou e selecionar Copiar estilos de item .

Em seguida, clique com o botão direito nas outras redes que deseja estilizar e selecione Colar estilos de itens .

E é isso! Certifique-se de clicar no botão Salvar no canto inferior direito da tela para salvar o layout geral. Então, você está seguro para X para fora da tela de edição no canto superior direito.

Certifique-se de que a página Divi Theme Builder mostre Todas as alterações salvas no canto superior esquerdo. Caso contrário, clique em Salvar alterações . Uma vez feito isso, seu site estará ao vivo exibindo os ícones de mídia social em seu Menu Principal Divi!

Resultados finais

E é assim que seus resultados finais devem se parecer.

Área de Trabalho

Móvel

Empacotando

Garantir que seu público sempre encontre suas redes sociais primárias é moleza com a Divi. Em apenas algumas etapas, você pode ajustar um de nossos pacotes de cabeçalho / rodapé de brinde para incluir seus ícones de mídia social no menu principal (ou onde você quiser). Boa sorte!

O que você acha dos ícones de mídia social no menu principal? Onde você tende a colocá-los?