muitos sites de negócios mostram um número de telefone para que os seus clientes possam contactá-los. Quando os desktops eram a maneira mais popular de acessar os sites, os usuários anotariam o número de telefone e ligariam de um dispositivo separado. Claro, a maioria dos usuários Agora acessar o site e fazer o telefonema a partir do mesmo dispositivo. Isto abre uma oportunidade para adicionar um link de chamada – criando um número de telefone HTML que é clicável.,
neste artigo, vamos dar uma olhada em como adicionar um link de chamada, bem como alguns outros links clicáveis, como e-mail e outros CTAs.
Subscreva o nosso canal do Youtube
como as ligações de chamadas funcionam
fazer um número de telefone clicável é facilmente feito com HTML. HTML5 inclui protocolos como tel: e mailto: que navegadores podem usar. Os navegadores respondem de forma diferente a estes protocolos. Alguns vão lançar o aplicativo de telefone e adicionar o número para o display enquanto espera por você para clicar no botão de chamada. Outros farão a chamada, enquanto outros irão perguntar se está tudo bem primeiro.,
Uma vez que é HTML, você pode adicionar os protocolos em qualquer lugar do seu site, incluindo o cabeçalho, rodapé, barras laterais, dentro do conteúdo de posts e páginas, e dentro de widgets.
adicionando uma ligação de chamada de número de telefone HTML ao seu Website
adicione o código como texto à localização que deseja que a ligação apareça:
<a href="tel:123-456-7890">123-456-7890</a>
href=tel: cria a ligação de chamada. Isto diz ao navegador como usar o número.
“Tel: 123-456-7890” cria o número de telefone HTML. O número dentro das citações é o número que ele vai chamar.,
O número dentro de >< tags é a parte visual e pode ser qualquer coisa que você quer que ele seja, incluindo o número de telefone, uma linha de texto, como “Clique para ligar” ou “ligue Agora”, ou qualquer outra chamada para a ação que você deseja. Deve ser descritivo do que vai acontecer quando eles clicarem.,
mostrar uma mensagem em vez do número pareceria com isto:
<a href="tel:123-456-7890">CLICK TO CALL</a>
os visitantes irão ver o texto, mas quando clicarem nele, verão a tela de marcação dos seus telefones com o seu número pronto para eles clicarem no botão de chamada.
adicionando uma extensão
alguns números de telefone têm uma extensão. Você pode adicionar um código que irá criar uma breve pausa antes de marcar o número de extensão. A adição de P na frente da extensão irá adicionar uma pausa de um segundo., O código pode ser assim:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Isto marca o número, espera um segundo e, em seguida, a extensão de diais.
pode fazer com que ele espere por um tom de discagem usando w em vez de P.
adicionando códigos de país
Os códigos de país podem ser adicionados incluindo a + juntamente com o código do seu país antes do número de telefone., Um exemplo pode parecer como este:
<a href="tel:+1123-456-7890">123-456-7890</a>
Adicionar Microdados para o Local de SEO
Um dos meus favoritos conveniências de transportar em torno de um smartphone é quando eu procurar um local de negócios e o resultado no Google me dá um número de telefone clicável. Eu posso clicar no número para fazer a chamada sem ter que anotar ou tentar memorizá-lo. Esta característica é agora uma necessidade. Felizmente, você pode adicioná-lo ao seu site para que o Google possa fornecer o seu número de telefone em pesquisas locais.isto é feito com microdados., Microdata informa aos motores de busca que os números são um número de telefone para que eles sejam mostrados como um link de chamada clicável. Você pode criar isso enriquecendo a marcação com algumas tags para pesquisas locais.
Por exemplo, o código pode ser assim:
outras chamadas para a ação
com HTML5, você não está limitado a números de telefone. Você pode adicionar outras chamadas para a ação, tais como e-mail, mensagens, fax, etc., HTML5 protocolos incluem:
- tel: – coloque uma chamada de telefone
- mailto: – abra um aplicativo de e-mail
- callto: abra o Skype
- sms: – envie uma mensagem de texto
- fax: enviar um fax
Todos esses protocolos são usados da mesma maneira como vimos acima. Vejamos alguns exemplos.
adicionando o Código à sua página de contacto
um dos melhores locais para adicionar um link de chamada está dentro do seu contacto na sua página de contacto connosco.,
Se estiver a usar o Editor clássico ou o novo editor Gutenberg, terá de ver a versão de texto da página. No editor clássico, carregue na página Texto. Em Gutenberg, clique nos três pontos no canto superior direito e selecione Editor de código.
adicione o código no lugar do seu número de telefone.
sair do Editor de código ou visualizar a página e você verá que o seu número de telefone é agora um link clicável.,
a Criação de Código para um Link de e-Mail ou URL
O código HTML para e-mail mailto: O endereço de email é adicionado ao final, como este:
assim como o telefone link, você pode usar o visual parcela a adicionar uma mensagem, tais como:
< href="mailto: "; Click here to send me an email</a>
Aqui um exemplo do Spa layout pack página de contato. Adicionei um módulo de borrão com um ícone e o texto envia um e-mail. Seleccionei a página de texto e adicionei o e-mail HTML. O texto agora é clicável e vai abrir o seu aplicativo de E-mail.,
adicionando código para abrir URLs
você pode ter o HTML para abrir qualquer URL que quiser. Isto é bom se você quiser enviar leitores para Páginas para inscrições newsletter, eventos, etc. A fim de se ligar a eles, o seu código HTML irá incluir a URL. Por exemplo:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
adicionei outro sinopse com o código para ver a página de eventos.
desactivar no ecrã e Tablet
um problema com ligações de chamadas é que não são úteis para ecrãs ou tablets., Você pode resolver isso com Divi, criando módulos que são específicos para cada tipo de dispositivo, e, em seguida, desativá-los nos outros dispositivos.
aqui, eu criei dois módulos com o número de telefone: um inclui um número de telefone HTML e o outro não. eu desativei o um com o número clicável em tablets e desktops, então eles nunca vão ver o link. Eu também desativei o módulo sem o link para telefones, então os usuários de telefone só vão ver o módulo com o link.
adicionando o Código ao seu cabeçalho ou rodapé
pode adicionar o código ao seu cabeçalho ou rodapé com o editor de temas., Use sempre um tema infantil ou o seu código PHP será substituído quando você atualizar o tema. Isto exigirá algum estilo CSS para parecer bom.
no seu Painel de instrumentos, vá para a aparência > Editor > cabeçalho do tema (ou rodapé do tema). Inserir o código na parte do Código <corpo>. I looked for an ending tag </a>, clicked enter to add a few extra lines, and pasted in my code., Você pode ver o código aqui nas linhas 28 e 29.
Aqui está o que parece quando eu coloquei a ligação de chamada e E-mail dentro do cabeçalho do tema vinte e dezenove. Está lá e funciona, mas não é muito bonito. Isto é reparável adicionando espaço de cor e Margem para que eles se afastem um do outro. Claro, isso é feito na CSS.
esticar as ligações
terá de adicionar código ao campo CSS adicional no Personalizador.
o seu código pode ser assim:
Isto diz ao CSS como estilo o texto para tel: e mailto:., Ele muda a fonte de número de telefone para castanho, a fonte de E-mail laranja, e adiciona uma pequena margem à direita de cada link.
o CSS funciona onde quer que o código seja incluído dentro de widgets, posts, etc. Você pode até usar ícones em vez de texto.
adicionar o Código ao menu secundário Divi
Divi pode incluir o seu número de telefone e E-mail no Menu secundário acima do cabeçalho. O botão de E-mail já está clicável por padrão, mas o número de telefone não está., O número de telefone pode ser transformado em um link de chamada usando um número de telefone HTML semelhante que nós usamos em exemplos anteriores.
Ir para o Tema Personalizador de > Cabeçalho & Navegação > Elementos de Cabeçalho. Isto lhe dará uma caixa de texto onde você pode adicionar o seu número de telefone. Felizmente, não se limita a números. Você também pode adicionar HTML. Eu adicionei o HTML dos exemplos anteriores. Também aumentei o tamanho da fonte do número de telefone para facilitar a visualização das imagens.,
pode tornar óbvio que é clicável adicionando uma mensagem à parte visual da ligação. Você pode substituir o número com a mensagem, ou adicionar a mensagem ao final do número. Ele poderia ser assim:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Este exemplo apenas mostra o texto.
neste, adicionei o número de telefone juntamente com o texto.
Testing on Mobile
recomendo testing the links with mobile devices to make sure it works., Se não tiver acesso a um smartphone, pode utilizar as ferramentas de desenvolvimento do Google Chrome.
carregue com o botão direito na sua página inicial e seleccione inspeccionar. No canto superior esquerdo da tela, você verá uma lista de dispositivos. Selecione aquele para ver como o seu site fica naquela tela. Se carregar na ligação do número de telefone HTML, deverá abrir uma janela a pedir-lhe para escolher uma aplicação. Se vires isto, a ligação funciona. Eu ainda recomendo experimentá-lo em um smartphone real, mas esta é uma boa indicação de que o link está fazendo alguma coisa.,
adicionando ligações de chamada com Plugins
Você também pode adicionar uma ligação de chamada ao seu cabeçalho com um plugin. Eles geralmente incluem recursos para o estilo, adicionando várias chamadas para a ação, e a capacidade de ser ligado ou desligado com base no dispositivo do visitante. Eles também são fáceis de configurar e usar. Estas são grandes escolhas se você não quer lidar com o código. Aqui estão algumas das melhores opções.
Call Now Button
Call Now Button adds a click-to-call button to-call to the bottom of the screen for your mobile visitors. Não aparece noutros dispositivos., Você também pode adicionar texto se quiser. O botão é um ícone do telefone para que é fácil entender para o que é. Tudo que você tem que fazer é ativar o botão e digitar o seu número de telefone. Você pode alterar o comportamento padrão nas configurações avançadas.
Mais Informações
Lado Pegajoso Botões
Este plugin permite adicionar os botões que ficam ao lado do seu website e permanecem na tela quando o usuário navega. Você pode adicionar um número de telefone clicável, endereço de E-mail, ícones de mídia social, e locais de loja., Configure – os à direita ou à esquerda, escolha os estilos de animação e rollover, personalize as cores e escolha onde elas aparecem.
Mais Informações
a Velocidade de Barra de contactos
Esta adiciona uma barra de contactos que inclui links clicáveis para um número de telefone, número de fax, um título, endereço, e-mail, redes sociais, e URLs personalizadas. Defina a barra para cima ou para baixo e ajuste o tamanho, Cor, Cor do texto e links, e como a barra reage. Você também pode ajustar o tamanho. você pode adicionar mais conteúdo usando ganchos de filtro.,
Mais informações
barra de contacto móvel
Este plugin adiciona ligações ao seu website quando visto em dispositivos móveis. Você pode escolher quais links são mostrados a partir de 13 opções, incluindo telefone, e-mail, Skype, URLs personalizados e redes sociais. Ele tem integração FontAwesome para os ícones. Você pode Estilo os links e escolher o tamanho, borda, opacidade, etc. Defina o menu no topo ou no fundo do ecrã. O menu permanece na tela quando o Usuário se desloca. Ele também inclui scroll to top e WooCommerce cart com botões de contador de itens.,
Mais Informações
Pensamentos finais
a popularidade dos smartphones para acessar sites está aumentando a cada dia. Esta popularidade leva ligações de chamada de ser uma conveniência simples para uma necessidade completa. A adição de números de telefone clicáveis pode fazer a diferença entre os utilizadores que ligam para o seu negócio ou para os seus concorrentes. Felizmente, não é assim tão difícil criar links clicáveis para adicionar números de telefone HTML para seus cabeçalhos, rodapé, widgets, páginas e posts de seu site WordPress.