Muchos sitios corporativos muestran un número de teléfono para que los clientes se comuniquen. Cuando las computadoras de escritorio eran la forma más popular de acceder a los sitios web, los usuarios guardaban un número de teléfono y llamaban desde un dispositivo separado. Por supuesto, la mayoría de los usuarios ahora acceden al sitio y hacen llamadas telefónicas desde el mismo dispositivo. Esto abre la posibilidad de agregar un enlace a la llamada, creando un número de teléfono en HTML en el que se puede hacer clic.
En este artículo, veremos cómo agregar un enlace a una conversación, así como otros enlaces en los que se puede hacer clic, como correo electrónico y otras llamadas a la acción.
Suscríbete a nuestro canal de YouTube
Cómo funcionan los enlaces de conexión
Crear un número de teléfono en el que se pueda hacer clic es fácil con HTML. HTML5 incluye protocolos como tel: y mailto: que los navegadores pueden usar. Los navegadores reaccionan de manera diferente a estos protocolos. Algunas personas iniciarán una aplicación de teléfono y agregarán un número a la pantalla mientras esperan que se haga clic en el botón Llamar. Otros llamarán y otros preguntarán si estás bien primero.
Dado que es HTML, puede agregar protocolos en cualquier lugar de su sitio web, incluido el encabezado, el pie de página, las barras laterales, en el cuerpo de las publicaciones y páginas, y en los widgets.
Agregar un enlace de teléfono HTML a su sitio web
Agregue código como texto en la ubicación donde desea que aparezca el enlace:
<a href="tel:123-456-7890">123-456-7890</a>
Href = tel: crea un enlace a la conversación. Esto le dice al navegador cómo usar el número.
«Tel: 123-456-7890» forma el número de teléfono HTML. El número entre comillas es el número a llamar.
El número etiquetado> Mostrar un mensaje en lugar de un número se vería así: Sus invitados verán el texto, pero cuando hagan clic en él, verán su pantalla de marcación con su número listo para hacer clic en el botón de llamada. Algunos números de teléfono tienen la extensión. Puede agregar un código que cree una breve pausa antes de marcar el número de extensión. Suma PAGS. agregará una pausa de un segundo antes de expandirse. El código podría verse así: Esto marca el número, espera un segundo y luego marca el número de extensión. Puede esperar un tono de marcación usando en en cambio pags. Códigos de países se puede agregar uniendo + con código de país delante del número de teléfono. Un ejemplo podría verse así: Una de mis comodidades favoritas para llevar un teléfono inteligente es que busco un negocio local y el resultado de Google me da un número de teléfono en el que se puede hacer clic. Puedo hacer clic en un número para llamar sin tener que escribirlo o tratar de recordarlo. Esta característica es imprescindible ahora. 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 usando microdatos. Los microdatos le dicen a los motores de búsqueda que los números son números de teléfono, por lo que aparecen como un enlace a una llamada en la que se puede hacer clic. Puede crear esto enriqueciendo la etiqueta con algunas etiquetas de búsqueda locales. Por ejemplo, el código podría verse así: Con HTML5, no está limitado a números de teléfono. Puede agregar otras llamadas a la acción, como correo electrónico, mensaje, fax, etc. Los protocolos HTML5 incluyen: Todos estos protocolos se utilizan de la misma manera que vimos anteriormente. Veamos algunos ejemplos. Uno de los mejores lugares para agregar un enlace a una conversación es la información de contacto en la página Contacto. Ya sea que esté utilizando el editor clásico o el nuevo editor de Gutenberg, deberá ver la versión de texto de la página. En el editor clásico, haga clic en Texto Correa. En Gutenberg, haga clic en tres puntos en la esquina 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 de la 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. El código HTML para el correo electrónico es mailto: La dirección de correo electrónico se agrega al final de la siguiente manera: Al igual que con un enlace telefónico, puede usar la parte visual para agregar un mensaje como: Aquí hay un ejemplo de la página de contacto del paquete de diseño de Spa. Agregué un módulo de notas con un ícono y el texto Enviar correo electrónico. Elegí la pestaña Texto y agregué el código HTML del correo electrónico. Ahora se puede hacer clic en el texto y se abrirá su aplicación de correo electrónico. Puede tener código HTML para abrir cualquier url. Esto es bueno si desea enviar lectores a sus páginas para suscribirse a boletines, eventos, etc. Para vincularlos, su código HTML contendrá una URL. Por ejemplo: Agregué otra nota de código para ver la página de eventos. Uno de los problemas con la vinculación de enlaces es que no son útiles en computadoras de escritorio o tabletas. Puedes resolver este problema con Divi creando módulos específicos para cada tipo de dispositivo y luego deshabilitándolos en otros dispositivos. Aquí creé dos módulos con un número de teléfono: uno contiene el número de teléfono HTML y el otro no. Deshabilité el que tiene el número en el que se puede hacer clic en tabletas y computadoras de escritorio para que nunca vean el enlace. También deshabilité el módulo sin enlace para teléfonos, por lo que los usuarios de teléfonos solo verán el módulo de enlace. Puede agregar código al encabezado o pie de página usando el editor de temas. Utilice siempre un tema secundario, de lo contrario, el código PHP se sobrescribirá al actualizar el tema. Esto requerirá algunos estilos CSS para que se vea bien. En el panel, vaya a Apariencia> Editor> Cabecera de tema (o Tema Pie de página). Pon el código en la parte del código.<a href="tel:123-456-7890">CLICK TO CALL</a>
Agregar una extensión
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Añadir códigos de país
<a href="tel:+1123-456-7890">123-456-7890</a>
Agregar microdatos al SEO local
<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>
Otras llamadas a la acción
Agregar el código a su página de contacto
Crear código para un enlace de correo electrónico o URL
<a href="mailto:[email protected]"> [email protected] </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: [email protected]"> Click here to send me an email</a>
< href="mailto: [email protected]"; Click here to send me an email</a>
Agregar código para abrir URL
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
Apagar en escritorio y tableta
Agregar código al encabezado o pie de página
Así es como se ve cuando pongo un enlace a una llamada telefónica y un enlace a un correo electrónico en el encabezado del tema Twenty Nineteen. Lo es y funciona, pero no es muy bonito. Puede solucionar esto agregando espacio de color y márgenes para mantenerlos separados entre sí. Por supuesto, esto se hace en CSS.
Estilo de enlaces
Debe agregar código al campo CSS adicional en el Personalizador.
Su código podría verse así:
a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}
Esto le dice a CSS cómo diseñar 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.
CSS funciona dondequiera que esté el código en widgets, publicaciones, etc. Incluso puede usar íconos en lugar de texto.
Agregar código al menú secundario de Divi
Divi puede incluir su número de teléfono y dirección de correo electrónico en un menú adicional sobre el encabezado. Se puede hacer clic en el botón de correo electrónico de forma predeterminada, pero no en el número de teléfono. Un número de teléfono se puede convertir en un enlace a una llamada usando un número de teléfono HTML similar al que usamos en los ejemplos anteriores.
ir Personalizar temas > Título y navegación > elementos de encabezado. Esto le dará un cuadro de texto donde puede agregar su número de teléfono. Afortunadamente, no solo estás limitado a los números. También puede agregar código HTML. Agregué el código HTML de los ejemplos anteriores. También aumenté el tamaño de letra del número de teléfono para que sea más fácil ver las imágenes.
Puede mostrar que se puede hacer clic agregando su mensaje a la parte visual del enlace. Puede reemplazar el número con un mensaje o agregar un 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 muestra solo texto.
En esto agregué un número de teléfono junto con el texto.
Pruebas en dispositivos móviles
Te recomiendo que pruebes los enlaces con dispositivos móviles para asegurarte de que funciona. Si no tiene acceso a un teléfono inteligente, puede usar las herramientas para desarrolladores de Google Chrome.
Haga clic derecho en su página de inicio y seleccione Controlar. En la esquina superior izquierda de la pantalla, verá una lista de dispositivos. Seleccione el que desee para ver cómo se ve su sitio web en esta pantalla. Al hacer clic en el enlace del número de teléfono HTML, se abrirá un cuadro de diálogo que le pedirá que seleccione una aplicación. Si puede ver esto, el enlace está funcionando. Todavía recomiendo probarlo en un teléfono inteligente real, pero es una buena señal de que el enlace hace algo.
Agregar enlaces de conexión con complementos
También puede agregar un enlace de enlace al encabezado con el complemento. Por lo general, incluyen funciones de estilo, agregando múltiples CTA y la capacidad de encender y apagar según el dispositivo del visitante. También son fáciles de configurar y usar. Esta es una excelente opción si no desea mantener el código. Estas son algunas de las mejores opciones.
botón llamar ahora
El botón Llamar ahora agrega un botón de «clic para llamar» en la parte inferior de la pantalla para los visitantes móviles. No aparece en otros dispositivos. También puede agregar texto si lo desea. El botón es un ícono de teléfono, por lo que es fácil entender para qué sirve. Todo lo que tienes que hacer es activar el botón e ingresar tu número de teléfono. Puede cambiar el comportamiento predeterminado en la configuración avanzada.
Botones laterales adhesivos
Este complemento le permite agregar botones que se adhieren al costado de su sitio web y permanecen en la pantalla mientras el usuario se desplaza. Puede agregar un número de teléfono en el que se pueda hacer clic, una dirección de correo electrónico, íconos de redes sociales y ubicaciones de tiendas. Colóquelos a la derecha o a la izquierda, elija estilos de animación y rollover, ajuste los colores y elija dónde mostrarlos.
Tira de contacto de velocidad
Este agrega una barra de contacto que incluye enlaces en los que se puede hacer clic al número de teléfono, número de fax, encabezado, dirección, dirección de correo electrónico, redes sociales y URL personalizadas. Coloque 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 responde la barra. También puede ajustar el tamaño. puede agregar más contenido usando ganchos de filtro.
Tira de contacto móvil
Este complemento agrega enlaces a su sitio web mientras navega en dispositivos móviles. Puede elegir qué enlaces se muestran entre 13 opciones que incluyen teléfono, correo electrónico, Skype, URL personalizadas y redes sociales. Tiene integración FontAwesome para iconos. Puede diseñar los enlaces y elegir el tamaño, el borde, la opacidad, etc. Configure el menú en la parte superior o inferior de la pantalla. El menú permanece en la pantalla mientras el usuario se desplaza. También incluye desplazamiento hacia arriba y un carrito de WooCommerce con botones de contador de artículos.
Pensamientos finales
La popularidad de los teléfonos inteligentes para acceder a sitios web crece cada día. Esta popularidad hace que las conexiones telefónicas sean una necesidad absoluta. Agregar números de teléfono en los que se puede hacer clic puede marcar la diferencia entre los usuarios que llaman a su empresa y sus competidores. Afortunadamente, no es difícil crear enlaces en los que se pueda hacer clic para agregar números de teléfono HTML a encabezados, pies de página, widgets, páginas y publicaciones en su sitio de WordPress.
Queremos escuchar de ti. ¿Ha agregado enlaces a conexiones en su sitio web? Háganos saber acerca de su experiencia en los comentarios a continuación.
Imagen destacada a través de Jane Kelly / shutterstock.com
