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

6 min de leitura
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 Ao passar o mouse.

Etapa 1 | Adicione o botão de ícone

Para começar, escolha um botão de ícone no painel Adicionar 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. Clique em Adicionar no lado esquerdo do Editor.
  2. Clique em Botão.
  3. Clique em Ícone.
  4. Clique ou arraste o botão para adicioná-lo à sua página.
O painel Adicionar no Editor. A aba Botão foi selecionada e o cursor está passando sobre os 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 Alterar Texto e Ícone.
  3. Clique em O que o botão mostra? e selecione uma opção no menu dropdown:
    • Texto e ícone: mostre o texto e um ícone no botão. Configure as seguintes opções:
      • Qual o conteúdo dele?: insira o texto que você deseja exibir no botão.
      • Escolha um ícone: clique em Substituir ícone para selecionar um novo ícone para o seu botão. Você pode escolher entre as mídias gratuitas disponíveis no Wix ou fazer upload da sua própria mídia.
    • Apenas ícone: exibe apenas um ícone no botão. Configure as seguintes opções:
      • Escolha um ícone: clique em Substituir ícone para selecionar um novo ícone para o seu botão. Você pode escolher entre as mídias gratuitas disponíveis no Wix ou fazer upload da sua própria mídia.
      • Qual é o alt text ?: 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 Qual o conteúdo dele?.
    • 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 Qual é o alt text?.
O painel de configurações do botão. Ele foi configurado 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. Selecione o 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. Selecione o botão.
  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.
    • Ao passar o mouse: como o botão é exibido quando os visitantes passam o mouse sobre ele.
5. Clique em uma das abas para personalizar o design:
O painel de design no Editor. A visualização Normal foi selecionada e o cursor está passando sobre a opção Background

Esse artigo foi útil?

|