header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
Contrate um profissionalAlcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image

Editor Wix: adicionar e configurar um link em um botão de ícone

Neste artigo
  • Etapa 1 | Adicione o botão de ícone
  • Etapa 2 | Configure o texto e o ícone do botão de ícone
  • Etapa 3 | Adicione um link para o botão do ícone
  • Etapa 4 | Personalize o botão de ícone
Os botões de ícone são uma maneira divertida e visual de ajudar os visitantes a navegar pelo seu site. Para garantir que eles saibam o que o ícone do seu ícone faz, você pode adicionar uma tooltip (dica de ferramenta) informativa que aparece quando o mouse passa sobre ele.
Configure o link no botão do ícone e personalize o ícone que é exibido para cada um de seus estados: Normal e Interativo.

Etapa 1 | Adicione o botão de ícone

Para começar, escolha um botão de ícone no painel Elementos e arraste-o para sua página. Existem vários designs para você escolher, dependendo da ação e do visual desejado.

Para adicionar um botão de ícone ao seu site:

  1. Vá para o seu editor.
  2. Clique em Elementos  no lado esquerdo do editor.
  3. Clique em Botão.
  4. Clique em Ícone.
  5. Clique ou arraste o botão para adicioná-lo à sua página.
O painel Elementos no Editor. A aba Botão foi selecionada e o cursor está passando sobre Botões de ícone

Etapa 2 | Configure o texto e o ícone do botão de ícone

Configure o que você gostaria de exibir no seu botão. Você pode exibir um ícone, texto ou ambos.
O texto e os ícones mostrados nos botões devem conter um call-to-action claro e permitir que os visitantes saibam para onde serão direcionados.

Para configurar o texto e o ícone do botão:

  1. Clique no botão de ícone.
  2. Clique em Configurações.
  3. Clique em Escolha o que exibir e selecione uma opção no dropdown: 
    • Texto e ícone: mostre o texto e um ícone no botão. Configure as seguintes opções:
      • Texto insira o texto que você deseja exibir no botão.
      • Ícone: clique em Substituir ícone para selecionar um novo ícone para o seu botão. Você pode escolher entre uma mídia gratuita disponível no Wix ou fazer upload da sua própria.
    • Apenas ícone: exibe apenas um ícone no botão. Configure as seguintes opções:
      • Ícone: clique em Substituir ícone para selecionar um novo ícone para o seu botão. Você pode escolher entre uma mídia gratuita disponível no Wix ou fazer upload da sua própria.
      • Nome acessível: insira uma descrição de alt text do ícone.
    • Apenas texto: exibe apenas texto no botão. Insira o texto que deseja exibir no botão em Texto.
    • Nada: crie um botão transparente que não exibe texto ou um ícone. Insira uma descrição de texto alternativo do botão em Nome acessível.
O painel de configurações do botão. Ele foi definido para mostrar um texto e um ícone.

Adicione um link para o botão de ícone para direcionar os visitantes do site para o local relevante. Você pode vincular a muitos lugares diferentes, incluindo uma página no seu site, um site externo, documento ou email.

Para adicionar um link ao seu botão:

  1. Clique no botão de ícone.
  2. Clique no ícone Link .
  3. Selecione um tipo de link à esquerda.
  4. Dependendo do tipo de link selecionado, adicione as informações relevantes.
  5. Clique em Ok.
Observação:
Se o link do URL tiver caracteres incompatíveis, a seguinte mensagem de erro será exibida: Verifique o URL e tente novamente. Para passar pela validação, utilize um serviço de encurtamento de link como o bit.ly ou o goo.gl
O painel de link no editor. Um email foi selecionado como o tipo de link e as informações relevantes foram inseridas
Dica:
Saiba mais sobre os tipos de links que você pode adicionar.

Etapa 4 | Personalize o botão de ícone

Após adicionar um link ao botão do ícone, personalize-o exatamente como você precisa. Você pode escolher o preenchimento do background, fazer o design do texto e muito mais.

Para personalizar seu botão de ícone:

  1. Clique no botão de ícone.
  2. Clique no ícone Design .
  3. Selecione um design predefinido diferente ou clique em Personalizar design para ajustar o design existente.
  4. Em Personalizar design, escolha o estado do botão no menu dropdown.
    • Normal: como o botão é exibido antes que os visitantes interajam com ele.
    • Interativo: como o botão é exibido quando os visitantes passam o mouse sobre ele.
  5. Personalize o design nas seguintes abas:
O painel de design no Editor. A visualização Normal foi selecionada e o cursor está passando sobre a opção Background