muchos sitios web comerciales muestran un número de teléfono para que sus clientes puedan contactarlos. Cuando los escritorios eran la forma más popular de acceder a los sitios, los usuarios tomaban nota del número de teléfono y llamaban desde un dispositivo separado. Por supuesto, la mayoría de los usuarios ahora acceden al sitio web y hacen la llamada telefónica desde el mismo dispositivo. Esto abre la oportunidad de agregar un enlace de llamada, creando un número de teléfono HTML en el que se puede hacer clic.,
en este artículo, echaremos un vistazo a cómo agregar un enlace de llamada, así como algunos otros enlaces en los que se puede hacer clic, como el correo electrónico y otros CTA.
Suscríbase a nuestro canal de Youtube
cómo funcionan los enlaces de llamadas
hacer clic en un número de teléfono se hace fácilmente con HTML. HTML5 incluye protocolos como tel: y mailto: que los navegadores pueden usar. Los navegadores responden de manera diferente a estos protocolos. Algunos iniciarán la aplicación del teléfono y agregarán el número a la pantalla mientras esperan que haga clic en el botón Llamar. Otros harán la llamada, mientras que otros preguntarán si está bien primero.,
dado que es HTML, puede agregar los protocolos en cualquier lugar de su sitio, incluyendo el encabezado, pie de Página, barras laterales, dentro del contenido de las publicaciones y páginas, y dentro de widgets.
agregar un enlace de llamada de número de teléfono HTML a su sitio web
agregue el código como texto a la ubicación que desea que aparezca el enlace:
<a href="tel:123-456-7890">123-456-7890</a>
Href=tel: crea el enlace de llamada. Esto le indica al navegador cómo usar el número.
«Tel: 123-456-7890» crea el número de teléfono HTML. El número entre comillas es el número al que llamará.,
el número dentro de las etiquetas >< es la parte visual y puede ser cualquier cosa que desee, incluido el número de teléfono, una línea de texto como «haga clic para llamar» o «Llame Ahora», o cualquier otra llamada a la acción que desee. Debe ser descriptivo de lo que va a suceder cuando hacen clic.,
mostrar un mensaje en lugar del número se vería así:
<a href="tel:123-456-7890">CLICK TO CALL</a>
sus visitantes verán el texto, pero cuando hagan clic en él verán la pantalla de marcación de sus teléfonos con su número listo para que hagan clic en el botón de llamada.
agregar una extensión
algunos números de teléfono tienen una extensión. Puede agregar código que creará una breve pausa antes de marcar el número de extensión. Agregar P delante de la extensión agregará una pausa de un segundo., El código podría tener este aspecto:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
esto marca el número, espera un segundo y luego marca la extensión.
Puede hacer que espere un tono de marcado usando w en lugar de p.
agregar códigos de país
Los códigos de país se pueden agregar incluyendo a + junto con el código de su país antes del número de teléfono., Un ejemplo podría ser el siguiente:
<a href="tel:+1123-456-7890">123-456-7890</a>
agregar microdatos para SEO Local
Una de mis comodidades favoritas de llevar un teléfono inteligente es cuando busco un negocio local y el resultado en Google me da un número de teléfono en el que se puede hacer clic. Puedo hacer clic en el número para hacer la llamada sin tener que escribirlo o tratar de memorizarlo. Esta característica es ahora una necesidad. Afortunadamente, puede agregarlo a su sitio web para que Google pueda proporcionar su número de teléfono en las búsquedas locales.
Esto se hace con microdatos., Los microdatos informan a los motores de búsqueda que los números son un número de teléfono por lo que se muestran como un enlace de llamada en el que se puede hacer clic. Puedes crear esto enriqueciendo el marcado con algunas etiquetas para búsquedas locales.
por ejemplo, el código podría tener este aspecto:
otras llamadas a la acción
con HTML5, no estás limitado a números de teléfono. Puede agregar otras llamadas a la acción, como correo electrónico,mensajería, fax, etc., Los protocolos HTML5 incluyen:
- tel: – realizar una llamada telefónica
- mailto: – abrir una aplicación de correo electrónico
- callto: abrir Skype
- sms: – enviar un mensaje de texto
- fax: – enviar un fax
todos estos protocolos se utilizan de la misma manera que vimos anteriormente. Veamos algunos ejemplos.
agregar el código a su página de contacto
uno de los mejores lugares para agregar un enlace de llamada está dentro de su información de contacto en su página de contacto.,
ya sea que esté utilizando el Editor clásico o el nuevo editor Gutenberg, deberá ver la versión de texto de la página. En el editor clásico, haga clic en la pestaña Texto. En Gutenberg, haga clic en los tres puntos en la parte superior derecha y seleccione Editor de código.
agregue el código en lugar de su número de teléfono.
salga del Editor de código o obtenga una vista previa de la página y verá que su número de teléfono ahora es un enlace en el que se puede hacer clic.,
crear código para un enlace de correo electrónico o URL
el código HTML para el correo electrónico es mailto: la dirección de correo electrónico se agrega al final, así:
Al igual que el enlace del teléfono, puede usar la parte visual para agregar un mensaje, como:
< href="mailto: "; Click here to send me an email</a>
Este es un ejemplo de la página de contacto del spa layout Pack. He añadido un módulo de blurb con un icono y el texto enviar un correo electrónico. Seleccioné la pestaña Texto y agregué el HTML del correo electrónico. Ahora se puede hacer clic en el texto y se abrirá su aplicación de correo electrónico.,
Agregar Código para abrir URLs
puede tener el HTML para abrir CUALQUIER URL que desee. Esto es bueno si desea enviar lectores a páginas para suscripciones a boletines, eventos, etc. Para enlazar a ellos, su código HTML incluirá la URL. Por ejemplo:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
he añadido otro propaganda con el código para ver la página de eventos.
desactivar en escritorio y tableta
Un problema con los enlaces de llamada es que no son útiles para escritorios o tabletas., Puede resolver esto con Divi creando módulos que sean específicos para cada tipo de dispositivo y luego deshabilitándolos en los otros dispositivos.
Aquí, he creado dos módulos con el número de teléfono: uno incluye un número de teléfono HTML y el otro no. he desactivado el que tiene el número clicable en tabletas y escritorios, por lo que nunca verán el enlace. También he desactivado el módulo sin el enlace para teléfonos, por lo que los usuarios de teléfonos solo verán el módulo con el enlace.
agregar el código a su encabezado o pie de Página
Puede agregar el código a su encabezado o pie de Página utilizando el editor de temas., Siempre use un tema hijo o su código PHP se sobrescribirá cuando actualice el tema. Esto requerirá un poco de estilo CSS para verse bien.
en su Panel de control, vaya a Apariencia > Editor > encabezado del tema (o pie de Página del tema). Coloque el código dentro de la parte <body> del código. Busqué una etiqueta de terminación < / a>, hice clic en enter para agregar algunas líneas adicionales y pegué en mi código., Puedes ver el código aquí en las líneas 28 y 29.
así es como se ve cuando coloqué el enlace de llamada y el enlace de correo electrónico dentro del encabezado del tema Twenty Nineteen. Está ahí y funciona, pero no es muy bonito. Esto se puede arreglar agregando color y espacio de margen para que se separen entre sí. Por supuesto, esto se hace en CSS.
estilo de los enlaces
deberá agregar código al campo CSS adicional en el personalizador.
Su código podría tener este aspecto:
esto le dice al CSS cómo estilizar el texto para tel: y mailto:., Cambia la fuente del número de teléfono a marrón, la fuente del correo electrónico a naranja y agrega un pequeño margen a la derecha de cada enlace.
el CSS funciona donde el código está incluido dentro de widgets, publicaciones, etc. Incluso puedes usar iconos en lugar de texto.
agregar el código al menú secundario de Divi
Divi puede incluir su número de teléfono y correo electrónico en el menú secundario sobre el encabezado. El botón de correo electrónico ya se puede hacer clic de forma predeterminada, pero el número de teléfono no lo es., El número de teléfono se puede convertir en un enlace de llamada utilizando un número de teléfono HTML similar que hemos utilizado en ejemplos anteriores.
Ir al Tema Personalizador > Encabezado & Navegación > Elementos de Encabezado. Esto le dará un cuadro de texto donde puede agregar su número de teléfono. Afortunadamente, no estás limitado a solo números. También puede agregar HTML. He añadido el HTML de los ejemplos anteriores. También aumenté el tamaño de fuente del número de teléfono para que sea más fácil ver las imágenes.,
puede hacer obvio que se puede hacer clic agregando un mensaje a la parte visual del enlace. Puede reemplazar el número con el mensaje, o agregar el mensaje al final del número. Podría verse así:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Este ejemplo solo muestra el texto.
En esto, he añadido el número de teléfono junto con el texto.
Testing on Mobile
recomiendo probar los enlaces con dispositivos móviles para asegurarse de que funciona., Si no tienes acceso a un smartphone, puedes usar las herramientas para desarrolladores de Google Chrome.
Haga clic derecho en su página de inicio y seleccione Inspeccionar. En la esquina superior izquierda de la pantalla, verás una lista de dispositivos. Seleccione la opción para ver cómo se ve su sitio web en esa pantalla. Al hacer clic en el enlace número de teléfono HTML, se abrirá un cuadro de diálogo que le pedirá que elija una aplicación. Si ves esto, el enlace funciona. Todavía recomiendo probarlo en un teléfono inteligente real, pero esto es una buena indicación de que el enlace está haciendo algo.,
agregar enlaces de llamadas con complementos
También puede agregar un enlace de llamada a su encabezado con un complemento. Por lo general, incluyen características para el estilo, la adición de múltiples llamadas a la acción y la capacidad de activarse o desactivarse en función del dispositivo del visitante. También son fáciles de configurar y usar. Estas son excelentes opciones si no desea manejar el código. Estas son algunas de las mejores opciones.
botón de llamada ahora
el botón de llamada ahora agrega un botón de clic para llamar en la parte inferior de la pantalla para sus visitantes móviles. No se muestra en otros dispositivos., También puede agregar texto si lo desea. El botón es un icono del teléfono, por lo que es fácil entender para qué sirve. Todo lo que tienes que hacer es activar el botón e introducir tu número de teléfono. Puede cambiar el comportamiento predeterminado en la configuración avanzada.
Más información
Sticky Side Buttons
Este complemento le permite agregar botones que se adhieren al lado de su sitio web y permanecen en la pantalla cuando el Usuario se desplaza. Puede agregar un número de teléfono en el que se puede hacer clic, una dirección de correo electrónico, iconos de redes sociales y ubicaciones de tiendas., Establézcalos a la derecha o a la izquierda, elija Estilos de animación y rollover, Personalice los colores y elija dónde se muestran.
Más información
Speed Contact Bar
esta agrega una barra de contactos que incluye enlaces en los que se puede hacer clic para un número de teléfono, número de fax, un título, dirección, correo electrónico, redes sociales y URL personalizadas. Establezca la barra en la parte superior o inferior y ajuste el tamaño, el color, el color del texto y los enlaces, y cómo reacciona la barra. También puede ajustar el tamaño. puede agregar más contenido usando ganchos de filtro.,
Más información
Mobile Contact Bar
este complemento agrega enlaces a su sitio web cuando se ve en dispositivos móviles. Puede elegir qué enlaces se muestran entre las 13 opciones que incluyen teléfono, correo electrónico, Skype, URL personalizadas y redes sociales. Tiene integración FontAwesome para los iconos. Puede estilizar los enlaces y elegir el tamaño,el borde, la opacidad, etc. Establezca el menú en la parte superior o inferior de la pantalla. El menú permanece en la pantalla cuando el Usuario se desplaza. También incluye scroll to top y woocommerce cart con botones de contador de artículos.,
Más información
Pensamientos finales
la popularidad de los teléfonos inteligentes para acceder a sitios web está aumentando cada día. Esta popularidad hace que los enlaces de llamadas pasen de ser una simple conveniencia a una necesidad completa. Agregar números de teléfono en los que se puede hacer clic puede marcar la diferencia entre los usuarios que llaman a su negocio o a sus competidores. Afortunadamente, no es tan difícil crear enlaces clicables para agregar números de teléfono HTML a sus encabezados, pies de página, widgets, páginas y publicaciones de su sitio web de WordPress.