Passar para o conteúdo principal

Como Adicionar Botões de Redes Sociais na Sua Loja (WordPress + Elementor)

Aprenda a adicionar botões de redes sociais em qualquer parte da sua loja — rodapé, topo, página de contato ou sobre nós. Usando o widget Ícones Sociais do Elementor, você consegue personalizar cor, tamanho, ícones, animação e links das suas redes.

🧭 Quando usar

  • Ao configurar o rodapé (footer) da loja

  • Ao adicionar ícones de redes sociais no topo ou menu lateral

  • Ao personalizar páginas internas como Contato e Sobre nós

  • Ao criar elementos visuais para aumentar autoridade da marca

✅ Pré-requisitos

  • WordPress instalado

  • Tema ativo + Elementor

  • Links das suas redes sociais (Instagram, Facebook, TikTok, Twitter etc.)

🛠️ Passo a passo

Passo 1 — Acessar o editor de tema

  1. Abra o painel WordPress.

  2. Vá até Modelos » Theme Builder (Construtor de Tema).

  3. Acesse o Rodapé (Footer) ou a área onde deseja inserir os ícones.

Passo 2 — Inserir o widget de ícones sociais

  1. Na barra lateral do Elementor, pesquise por Ícones Sociais (Social Icons).

  2. Arraste o widget para o local desejado (ex.: footer).

  3. Por padrão, os ícones aparecem desconfigurados — vamos ajustar no próximo passo.
    ​

Passo 3 — Configurar cada ícone (Instagram, Facebook, etc.)

  1. Clique no ícone para editar.

  2. Em Ícone, escolha a rede social (Instagram, Facebook, TikTok…).

  3. O nome muda automaticamente conforme a rede escolhida.

  4. Em Link, adicione a URL completa, por exemplo:

    https://instagram.com/nomedasualoja

  5. Clique em Atualizar.


    ​

Passo 4 — Personalizar cores e estilo

  1. Em Cor oficial, altere para Personalizado.

  2. Configure:

    • Cor primária (fundo): sua cor principal (ex.: laranja do site).

    • Cor secundária (ícone): branco.

  3. Em Forma, escolha Círculo para manter um visual moderno.

💡 Dica: Copie o código hexadecimal da cor do seu site para manter consistência visual.

Passo 5 — Duplicar para criar novos ícones

  1. Clique com botão direito no ícone → Duplicar.

  2. Altere apenas o ícone (ex.: de Instagram para Facebook).

  3. O estilo permanece igual, o que mantém o design padronizado.
    ​

Passo 6 — Ajustar tamanho, espaçamento e animação

  1. Vá para a aba Estilo → Tamanho:

    • Valor recomendado: 15–18 px.

  2. Padding (espaço do ícone até o fundo):

    • Valor recomendado: 0.5.

  3. Espaçamento entre ícones:

    • Sugestão: 5 a 8 px.

  4. Em Animação ao passar o mouse, escolha:

    • Glow (cresce suavemente)

    • Pulse (efeito de pulso)
      ​

🧩 Exemplos práticos

  • Exemplo 1: Rodapé com ícones de Instagram + Facebook com animação Glow.

  • Exemplo 2: Página de contato com botões de WhatsApp, TikTok e YouTube.

  • Exemplo 3: Ícones no topo da loja, alinhados à direita, com estilo circular.

🧪 Solução de problemas

  • Ícone não muda de cor
    ​Causa provável: Cores oficiais ainda ativadas.
    ​Como resolver: Alterar para Personalizado em Estilo.

  • Link não funciona
    ​Causa provável: URL sem “https://”.
    ​Como resolver: Copiar o link completo da rede social.

  • Ícone gigante ou desproporcional
    ​Causa provável: Tamanho ou padding muito alto.
    ​Como resolver: Ajustar tamanho para 15–18 px e padding ~0.5.

🔎 Referências e links úteis

🗂️ Metadados

  • Categoria: Design e Personalização

  • Subcategoria: Elementor / Rodapé

  • Tags: redes sociais, Elementor, ícones sociais, WordPress, footer

  • Nível: básico

  • Atualizado em: 2025-11-09

Artigos relacionados
Respondeu à sua pergunta?