Blocos

Blocos » Bloco de ícones sociais

O bloco de ícones sociais permite adicionar ícones de redes sociais a qualquer página ou post para direcionar as pessoas aos seus perfis.

Veja um exemplo:

Sumário

Inserir bloco de ícones sociais

Para adicionar o bloco de ícones sociais, selecione-o no botão Adicionar bloco. Como alternativa, digite /social em uma nova linha e pressione Enter. Ao adicionar o bloco pela primeira vez, você também verá uma configuração que ajuda a definir o tamanho dos ícones:

Um bloco de ícones em branco com a opção Tamanho na barra de ferramentas expandida do bloco para exibir diferentes tamanhos de ícones.

Você encontra instruções detalhadas sobre como adicionar blocos neste link.


Adicionar perfis de redes sociais

Ao adicionar o bloco pela primeira vez, você verá o botão +. Clique em + para adicionar o primeiro ícone.

O bloco de ícones sociais sem ícones e o símbolo de mais para adicionar o primeiro.

Será exibida uma lista com todos os ícones disponíveis. Selecione a opção desejada na lista ou pesquise um ícone, como “Facebook”. Faça isso para adicionar os ícones de todas as redes sociais.

O ícone de mais expandido para mostrar os diferentes ícones que podem ser adicionados, bem como a opção Pesquisar.

Em seguida, vincule o ícone ao seu perfil da rede social. Para fazer isso, clique no ícone. Será exibida uma caixa para inserir seu endereço. Digite ou cole o link do seu perfil da rede social e clique no ícone de seta para inseri-lo.

GIF mostrando o processo de clicar no ícone social e adicionar o link ao seu perfil da rede social.
Como adicionar um link ao seu ícone social

⚠️

Se você não adicionar um link ao ícone, ele não será exibido na visualização nem no site publicado.


Adicionar novos ícones

Clique no botão Adicionar ícone (+), à direita dos ícones atuais. Será exibida uma lista com todos os ícones disponíveis. Você pode pesquisar o ícone desejado para selecioná-lo.

GIF: clique no botão Adicionar ícone para abrir uma lista de ícones sociais disponíveis.
Adição de um novo ícone.

Se você não encontrar o ícone desejado, use o botão de link genérico:

Adicione um novo ícone e pesquise Link para adicionar uma rede social personalizada que não está em nossa lista padrão.
O ícone de link genérico

Lista de ícones compatíveis

Os ícones a seguir estão disponíveis para uso:

  • 500px
  • Bandcamp
  • Behance
  • CodePen
  • DeviantArt
  • Dribbble
  • Dropbox
  • Etsy
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Goodreads
  • Google
  • Instagram
  • Last.fm
  • LinkedIn
  • E-mail (links mailto:)
  • Mastodon
  • Meetup
  • Medium
  • Patreon
  • Pinterest
  • Pocket
  • Reddit
  • Feed RSS (URLs com /feed/)
  • Skype
  • Snapchat
  • SoundCloud
  • Spotify
  • Telegram
  • TikTok
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • VK
  • WordPress
  • Yelp
  • YouTube

Remover um ícone

Para remover um ícone, clique nele para acessar a barra de ferramentas individual. Clique no botão de reticências (três pontos) do ícone em questão e selecione Remover bloco:

GIF: clique no botão de reticências (três pontos) acima do ícone específico para acessar a opção de remover o bloco.
Remoção de um ícone de rede social.

Configurações do bloco

Todos os blocos têm opções específicas na barra lateral do editor, além das opções encontradas na barra de ferramentas do bloco. Se a barra lateral não for exibida, clique no ícone de engrenagem ao lado do botão Publicar.

Estilos

Nas configurações do bloco, você pode escolher um dos três diferentes estilos de ícones:

  • Padrão
  • Apenas o logotipo
  • Retângulo com pontas arredondadas
As configurações do bloco de ícones sociais ao lado do editor exibindo as opções Estilos, Layout e Configurações de link.
Configurações do bloco
Alinhamento do layout

Você pode escolher o alinhamento dos ícones à esquerda, no centro, à direita ou com espaço entre os itens.

Você também pode optar por abrir links em uma nova guia ativando a opção “Abrir em uma nova guia”. Quando ativada, os links nos ícones sociais serão abertos em uma nova guia.

Configurações de cor

É possível modificar suas opções em Configurações de cor.

O painel Configurações de cor das configurações do bloco de ícones sociais é exibido.
  • Ícone color: Changes the color of the icons in the Social Icons block.
  • Plano de fundo do ícone color: Changes the background color of all of the icons.

Avançado

Na guia Avançado, é possível adicionar uma classe CSS ao seu bloco, permitindo a gravação de CSS personalizado e a estilização do bloco conforme você achar melhor. Saiba mais.

A seção Avançado permite adicionar uma classe CSS ao bloco.
A seção Avançado permite adicionar uma classe CSS ao bloco.

Cada ícone de rede social também pode ter a própria classe individual. Para adicionar uma classe a um ícone, selecione-a e modifique o campo Classe CSS adicional do ícone em questão:

As configurações específicas de um ícone social incluem o rótulo Link (para leitores de tela) e a opção Classes CSS adicionais.
Campo de classe CSS de um ícone individual