Como adicionar ícones sociais ao menu principal do Divi
Publicados: 2017-06-27No tutorial Divi de hoje, mostraremos como adicionar ícones sociais ao menu principal do site Divi. Seguindo este tutorial passo a passo, você será capaz de adicionar ícones sociais a qualquer site que você criar - seja para você ou um cliente.
Já temos a capacidade de adicionar ícones sociais diretamente no cabeçalho e rodapé de um site com o personalizador de tema Divi. Mas se não é isso que você está procurando, este tutorial pode ajudá-lo porque, em muitos casos; as pessoas preferem ter os ícones sociais em seu menu principal em vez do cabeçalho ou rodapé de seu site.
Mostraremos exatamente como você pode adicioná-los, personalizá-los e abri-los em uma nova guia. Essas são todas as coisas que você realmente precisa saber para que os ícones sociais em seu menu principal possam agregar valor a todo o seu site.
Por que adicionar ícones sociais ao menu principal?
Sites e canais de mídia social são, em muitos casos, complementares. Nem todo o conteúdo que está sendo compartilhado em um site aparece nos canais de mídia social e vice-versa. É por isso que promover seu site em seus canais de mídia social e seus canais de mídia social em seu site não é incomum e francamente; altamente encorajado.
Você deseja que as pessoas interajam com sua empresa ou marca da maneira com a qual estão mais familiarizadas. Seu site geralmente é um ' território desconhecido ' para eles. A barreira de contatá-lo diretamente por meio do seu site pode, portanto, ser maior do que nos canais de mídia social. A maioria das pessoas que visita sua página no Facebook ou no Twitter já está integrada às plataformas e a sensação de conforto pode influenciar seu comportamento de forma positiva.
É por isso que, em geral, colocar ícones sociais em seu site é muito recomendável. Mas por que compartilhá-los explicitamente em seu menu principal? Listamos dois dos principais motivos.
Fácil de encontrar / O menu segue o visitante durante a visita
Ao adicionar ícones sociais ao seu site, você deseja que eles fiquem o mais visíveis possível. As pessoas não deveriam se esforçar para encontrar os ícones sociais em seu site. É aí que colocar os ícones sociais no menu principal pode fazer a diferença. O menu principal segue uma pessoa durante toda a sua permanência em seu site. Não há necessidade de procurar os ícones, os ícones vêm até você. A única coisa que a pessoa precisa fazer é clicar e chegará lá.
O menu principal segue uma pessoa durante toda a sua permanência em seu site. Não há necessidade de procurar os ícones, os ícones vêm até você. A única coisa que um visitante precisa fazer é clicar neles e eles chegarão lá.
Ação de Disparo
Como mencionado anteriormente; os canais de mídia social e os sites são complementares. Eles trabalham juntos e geralmente têm os mesmos objetivos, como informar leads em potencial e atraí-los para os serviços ou produtos que estão sendo oferecidos. Quanto mais eles são confrontados com eles, maior a probabilidade de sua curiosidade ser acionada
Para apoiar a conexão entre o site e os canais de mídia social, é bom confrontar os visitantes com os ícones sociais com a maior freqüência possível. Quanto mais eles se deparam com eles, mais provável é que sua curiosidade seja acionada e mais provável que eles eventualmente cliquem neles.
Como adicionar ícones sociais ao menu principal do Divi
Inscreva-se no nosso canal no Youtube
Instale o Font Awesome
Em primeiro lugar, precisamos instalar o Font Awesome em nosso site WordPress. Faremos isso adicionando algum código CSS nas opções de tema do Divi.
Abra seu site WordPress, vá para Divi> Opções de tema> Integração e cole o seguinte código na seção <head>:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
Font awesome agora deve ser adicionado às fontes que estão sendo usadas em seu site. Agora você pode adicionar esses ícones ao seu menu principal, seguindo a próxima parte de nossa postagem passo a passo.
Comece a criar o menu principal
Muito provavelmente, você já criou seu próprio menu principal personalizado, onde listou todas as páginas que deseja que apareçam no menu principal do seu site. Se você ainda não fez isso, vá para a página 'Menus' em Aparência e crie um novo menu.
Em seguida, dê um nome ao menu, adicione as páginas que deseja que apareçam em seu menu principal e selecione a opção 'Menu principal' abaixo.
Adicionar ícones sociais
Continuando, queremos adicionar os ícones sociais. Ao criar o menu principal, você pode escolher onde deseja que seus ícones sociais sejam exibidos. Na maioria dos casos, eles virão logo após as páginas, mas você também pode colocá-los primeiro. Existem ícones de mídia social disponíveis para todos os sites importantes e mais populares que existem; do Facebook ao Twitter, Instagram, LinkedIn e muito mais.
Comece abrindo o seguinte link no site Font Awesome. Precisaremos deste site na próxima parte deste post, onde adicionaremos os ícones manualmente.
Adicionar ícones manualmente
A mesma maneira de trabalhar se aplica a cada ícone social que você adiciona ao seu menu principal. Como exemplo, mostraremos como adicionar o ícone do Instagram. Para todos os outros ícones que você gostaria de adicionar também; saiba que é a mesma maneira de trabalhar (apenas o ícone, o código HTML e o URL diferem de acordo).
Abra a opção 'Links personalizados' e você verá dois campos aparecerem: URL e rótulo de navegação. Obviamente, o campo URL é onde você digita a URL que leva o visitante a um dos canais de mídia social. Neste exemplo, queremos que o ícone leve ao Instagram, então basta digitar a sua URL do Instagram.
Em seguida, acesse o site Font Awesome em seu navegador e procure o ícone do Instagram na barra de pesquisa. Da mesma forma, você pode pesquisar o Facebook, LinkedIn e qualquer outro ícone.
Depois de clicar no ícone do Instagram, você verá que o site fornece o seguinte código HTML:
<i class="fa fa-instagram" aria-hidden="true"></i>
Este é o código exato que precisamos usar no campo Navigation Label, então vá em frente e complete o link customizado copiando e colando o código no campo.
Repita o mesmo processo para cada um dos ícones sociais que você deseja que apareça no menu principal e observe como fica no front end do seu site.
Alterar a aparência dos ícones sociais
Mudanças coletivas no menu principal (incluindo ícones sociais)
O Theme Customizer permite que você faça todas as mudanças de aparência que gostaria de fazer no seu menu principal em um só lugar.
As alterações que você pode fazer no menu principal com as opções Divi se aplicam aos ícones sociais também. Quando você está dando uma determinada cor ao seu menu principal, por exemplo, os ícones sociais terão a mesma cor. Isso porque estamos usando uma fonte em vez de uma imagem para fazer este trabalho.
Você pode fazer todas essas alterações que deseja fazer na aparência no Customizador de Tema, indo para Cabeçalho e Navegação> Barra de Menu Principal. As alterações feitas são aplicadas em tempo real e oferecem uma boa perspectiva de como você deseja que seja o menu principal.
Abra os ícones sociais em uma nova guia
Esta parte da postagem é algo extra que você pode fazer com os ícones sociais. Provavelmente, você não deseja afastar seus visitantes do site, mesmo que eles acessem seus canais de mídia social. Você deseja manter ambas as interações vivas pelo maior tempo possível, abrindo os links de mídia social em uma nova guia toda vez que alguém clica neles.
Podemos facilmente fazer com que a opção 'Abrir em uma nova guia' funcione em todos os ícones de mídia social, voltando ao menu que criamos antes. Precisamos fazer todos os ajustes manualmente em cada um dos ícones. Neste exemplo, vamos fazer as alterações no ícone do Instagram.
Vá em frente e exclua o URL fornecido no campo URL e cole o seguinte código no URL de navegação:
<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
Faça o mesmo para cada um dos ícones se quiser que eles abram em uma nova guia. Cada vez que um visitante clica neles, eles se abrem em uma nova guia que permite mantê-los por perto o máximo possível.
Pensamentos finais
Este tutorial certamente ajudará você a integrar ícones sociais em seu próprio site Divi da maneira que desejar. Você pode personalizá-los e ajustá-los ao restante do menu principal. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo. Manteremos contato e tentaremos responder a todas as dúvidas ou sugestões que você tiver.
Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!
Imagem em destaque via Oceans / shutterstock.com