Como adicionar ícones de mídia social ao menu do WordPress

Como diz o velho ditado, uma imagem vale mais que mil palavras. Poderíamos argumentar que é na verdade muito menos, mas não se pode negar que a web os ícones são poderosos e intuitivos, especialmente as das redes sociais. Aquele alegre pássaro azul em vôo? A câmera quadrada fina? O retângulo vermelho com cantos arredondados com o símbolo do jogo? Você sabe o que eles representam sem nem mesmo pensar. Logotipos de mídia social são algumas das imagens mais memoráveis ​​que existem.

Adicionar ícones de mídia social ao menu do WordPress é fácil e demorado. Vamos mostrar como. Mas antes de passarmos para os botões de metal, vamos discutir por que você deseja seus ícones de mídia social em seu menu.

  • Por que preciso de ícones de mídia social no menu do WordPress?
  • Como adicionar ícones sociais ao cabeçalho e rodapé usando o tema Bridge WordPress
  • Como adicionar ícones de mídia social a itens de menu do WordPress no Bridge
  • Como adicionar ícones de mídia social a itens de menu do WordPress usando um plugin

Por que preciso de ícones de mídia social no menu do WordPress?

Muitos ícones podem confundir sua interface, especialmente em dispositivos móveis. Ao colocá-los em um menu, você pode evitá-lo facilmente. Os usuários estão acostumados a procurá-los em menus e você pode fazer um menu mais elegante e intuitivo adicionar ícones a ele.

Da mesma forma, você poderia crie um menu social especial com apenas seus ícones de mídia social e incorpore esse menu em qualquer área pronta para widget para que seus visitantes acessem seu conteúdo de mídia social com um simples clique e sem nunca sair do seu site. Os usuários de dispositivos móveis irão apreciar especialmente isso.

Como adicionar ícones sociais ao menu de cabeçalho e rodapé usando o tema WordPress Bridge

Se você estiver usando nosso versátil tema Bridge, adicionar ícones sociais ao seu menu de cabeçalho ou rodapé é o mais simples possível. Temos até um widget dedicado para isso!

Mas se você preferir seus tutoriais em formato de texto, role para baixo. Iremos guiá-lo passo a passo em tudo o que você precisa fazer. Mostraremos como fazer isso no menu de cabeçalho, mas as áreas de rodapé funcionam da mesma forma, em princípio.

As áreas de widget disponíveis dependerão da demonstração do Bridge que você está usando. O cabeçalho da demonstração que estamos usando não contém nenhum ícone social.

Antevisão da demonstração do Bridge

Para consertar, você precisa navegar até Aparência / Widgets por meio do menu do lado direito do painel do WordPress.

Widgets de aparência

Em seguida, você precisa encontrar a área de widget correta. Queremos nossos ícones sociais ao lado do menu, e nesta demonstração do Bridge, a área correspondente é Cabeçalho inferior direito. Para colocar um ícone social em qualquer área de widget, você deve arrastar um Ícone social Qode widget para ele.

Widget de ícone social Qode

Em seguida, você precisa configurar este widget. Vamos selecionar o Círculo tipo de ícone (você pode escolher um tipo diferente de ícone, dependendo do estilo e aparência do seu site), o Fonte elegante pacote de ícones (também suporta Font Awesome), e o Facebook ícone de Ícone de fonte elegante menu suspenso e entre no Tamanho personalizado e Tamanho de formato personalizado (10 e 13 pixels para nós, respectivamente, mas você pode selecionar o seu). Para os fins desta demonstração, iremos fornecer o widget com o hiperlink da nossa página do Facebook (você irá, é claro, usar a sua) e alterar o objetivo para Nova janela. a Ícone social Qode O widget também contém várias configurações de layout, nas quais não entraremos em detalhes neste momento. Basta dizer que a infinidade de configurações de tamanho, cor e borda torna o widget muito versátil e adaptável a qualquer estilo.

Configurações do widget de ícone social Qode

Você pode preencher a mesma área com mais alguns ícones sociais, se quiser, como fizemos aqui. A ordem em que você classifica seus ícones sociais é a ordem (da esquerda para a direita) em que os ícones aparecerão no cabeçalho. E agora seu cabeçalho conterá caminhos para suas contas de mídia social.

Cabeçalho de ícones sociais

Como adicionar ícones de mídia social a itens de menu do WordPress no Bridge

Primeiro, você deve navegar para Aparência / Menus e procure seu menu de navegação superior. No nosso caso, seu nome é Mega Menu. Em seguida, você precisa adicionar um link para um perfil de mídia social, nosso perfil do Twitter no nosso caso. Para fazer isso, você precisa adicionar um Link personalizado item de menu ao seu menu. Encontre o Links personalizados artigo no Adicionar itens de menu e cole o seu url no Url campo. Para o nosso Twitter, vamos simplesmente escrever Nosso Twitter no Texto do link campo e clique no Adicionar ao menu botão.

Menu de links personalizados

O item agora está na parte inferior do seu Estrutura do menu, o que significa que aparecerá na extremidade direita do menu de navegação superior. Gostamos de lá, mas é claro que você pode organizar seus menus como quiser. Expanda o item para configurá-lo. de Tipo, você precisa selecionar largura com íconespois este é o único tipo de item de menu que exibirá um ícone no Bridge. Também selecionaremos o Fonte incrível para nós Pacote de íconese fa-twitter para nós Ícone. Claro, você pode selecionar o Fonte elegante Pacote de ícones e o ícone que você gosta para seu perfil social. Role um pouco mais para baixo e clique no Salvar menu botão.

Configurações de item de menu

E agora seu menu conterá um link para seu ícone social. Você pode adicione quantos desses links sociais desejare também atribuindo ícones a outros itens de menu, mas isso está além do escopo desta demonstração.

Item de menu com visualização de ícone

Como adicionar ícones de mídia social ao menu do WordPress usando um plug-in

Nossa primeira sugestão é sempre usar a funcionalidade interna de um tema para qualquer efeito que você deseja obter. Se o tema que você está usando não tem a funcionalidade desejada, um plug-in geralmente oferece uma boa solução. O plugin que usaremos é Imagem do Menu. Depois de instalar e ativar o plug-in, primeiro você será solicitado a ativar as notificações para este plug-in (que Pular) e, em seguida, na tela Configurações. Aqui você pode redimensionar os ícones para se adequar ao estilo do seu site. Nós apenas iremos Guardar mudanças e seguir em frente.

Leia Também:  Como indexar o novo conteúdo do WordPress mais rápido no Google
Configurações de imagem do menu

Em seguida, navegue para Aparência / Menus e encontre o seu menu de navegação superior, o Mega Menu. Por favor selecione Links personalizados desde o Adicionar itens de menu menu do lado esquerdo e configure-o. Para os fins desta demonstração, colaremos o URL do nosso perfil do Instagram no Url campo e legenda com Nosso Instagram no Texto do link campo antes de clicar no Adicionar ao menu enquanto você pode escolher o perfil social e o ícone que deseja.

Links personalizados

Isso vai colocar um Links personalizados item na parte inferior do seu Estrutura do menu, o que significa que aparecerá na extremidade direita do menu. Você pode organizar seus menus como quiser, mas vamos deixar isso aí. Você precisa expandir o item para configurá-lo. Vamos estabelecer o Posição do título para Então, o que significa que o ícone aparecerá no esquerda do Etiqueta de navegaçãoe clique Definir imagem para selecionar uma imagem de sua biblioteca de mídia ou fazer upload de uma.

Configurações de item de menu

Fornecemos à nossa biblioteca de mídia um ícone gratuito do Instagram. Você pode enviar qualquer outra imagem que desejar para cada item do menu, mas vamos deixar assim, porque queremos que nosso ícone social realmente se destaque e seja instantaneamente reconhecível. Você também pode selecionar uma versão diferente para um ícone de rolagem clicando no Definir imagem ao passar o mouse ícone. Finalmente, quando estiver satisfeito com suas configurações, você precisa clicar no Salvar menu botão.

Ícone de carregamento do item de menu

E o link do seu perfil do Instagram agora será a estrela do nosso menu de navegação superior!

Visualização do Instagram do item do menu

Em conclusão

Como mostramos, adicionar ícones aos itens de menu é rápido e fácil. Quer você use as opções integradas do seu tema ou um plug-in, você pode tornar sua presença na mídia social conhecida para os visitantes do seu site com apenas alguns cliques do mouse. Nos dias de hoje, você pode se dar ao luxo de não fazer isso?

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: