Dado que el mundo vive en dispositivos móviles, tiene sentido proporcionar enlaces de contacto en los que se pueda hacer clic en su sitio web que aprovechen la experiencia móvil. Estos enlaces de contacto, como un enlace de clic para llamar, pueden iniciar una llamada en su teléfono móvil con un solo clic. Otros, como un enlace de direcciones, pueden abrir direcciones a una dirección comercial en Google Maps. Estos son realmente convenientes para los usuarios y imprescindibles para ciertas empresas.
En este tutorial, le mostraremos cómo crear una barra de contacto móvil Divi con enlaces de clic para llamar, correo electrónico, SMS e indicaciones. Para hacer esto, usaremos el constructor Divi para diseñar la barra y los botones en un pie de página global. Luego, agregaremos URL personalizadas a cada enlace de contacto para traer a casa la funcionalidad que necesitamos.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Cómo agregar la descarga de plantilla de barra de contacto fijo a su sitio Divi
¡ADVERTENCIA!: Agregar esta plantilla anulará la plantilla de sitio web predeterminada (si tiene una) en su sitio Divi. Sugerimos agregar esto a un sitio de prueba para que no arruine nada en un sitio en vivo.
Para importar la plantilla de barra de pie de página fija a su propio sitio web, descomprima el archivo zip de descarga para acceder al archivo JSON.
Luego vaya al Panel de WordPress y navegue a Divi> Theme Builder.
Luego haga clic en el ícono de portabilidad en la parte superior derecha de la página.
Dentro de la ventana emergente de portabilidad, elija el archivo JSON que acaba de descomprimir y seleccione la opción «Descargar la copia de seguridad antes de importar», en caso de que tuviera algo en la plantilla del sitio web predeterminado que no quisiera anular.
Luego haga clic en el botón Importar.
Por último, guarde los cambios de Theme Builder y vea una página en vivo para ver la barra de pie de página fija.
Ahora, vayamos al tutorial, ¿de acuerdo?
Para este tutorial, vamos a agregar una barra de contacto móvil al pie de página global usando Divi Theme Builder . Comience navegando a Divi> Theme Builder. Luego haga clic en el Área de pie de página global dentro de la plantilla de sitio web predeterminada. En el menú desplegable, seleccione Crear pie de página global.
NOTA: Si ya tiene un pie de página global, puede abrir editar el pie de página global y agregar la barra de contacto además del pie de página actual.
Elija la opción «Construir desde cero».
Parte 2: Creación de la barra de contenido fijo
Dentro del Editor de diseño de pie de página global, comience el proceso de diseño agregando una fila de una columna a la sección predeterminada.
Ajustes de sección
Antes de comenzar a agregar módulos, abra la configuración de la sección y asígnele una altura establecida de la siguiente manera:
- Altura: 80px
Esto es importante para crear el espacio en la parte inferior de la página donde la fila fija finalmente se detendrá. También eliminaremos el relleno superior e inferior predeterminado.
- Relleno: 0px arriba, 0px abajo
Configuración de fila
Ahora que nuestra sección está lista, estamos listos para personalizar la fila para que sirva como la barra de contacto fija. Abra la configuración de la fila y luego actualice lo siguiente:
Fondo
- Color de fondo: #751136
Tamaño
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
- Altura: heredar
Aunque la fila será fija, queremos que la altura de la fila coincida con la altura de la sección principal para que el espacio en la parte inferior de la página contenga adecuadamente la fila. Para ello debemos teclear el texto “heredar” para la altura.
Espaciado
- Relleno: 0px arriba, 0px abajo, 15% izquierda, 15% derecha
CSS personalizado
Queremos asegurarnos de que el contenido dentro de la fila permanezca alineado verticalmente y que las columnas no se rompan en dispositivos móviles. Para hacer esto, agregue el siguiente CSS personalizado al elemento principal de la fila:
|
01
02
03
|
display:flex;flex-wrap:nowrap;align-items:center; |
Posicionamiento fijo
Para hacer que la fila sea fija para que flote en la parte inferior de la pantalla, debemos darle una posición fija en la ubicación inferior izquierda de la siguiente manera:
- Posición: Fija
- Ubicación: abajo a la izquierda
- Índice Z: 99999
Parte 3: Creación de enlaces de llamada para hacer clic, correo electrónico, SMS y dirección
Ahora que nuestra barra de contacto está completa, estamos listos para agregar los botones de contacto en los que se puede hacer clic junto con las URL personalizadas.
El primer botón de contacto que vamos a crear es el botón de clic para llamar. Para crearlo, agregue un nuevo módulo publicitario a la columna.
Contenido
En la pestaña de contenido, agregue un Título y un Icono a la propaganda de la siguiente manera:
- Título: Llamada
- Icono de uso: SÍ
- Icono: teléfono
Fondo
Luego dale un color de fondo blanco:
- Color de fondo: #ffffff
Configuración de diseño
Vaya a la pestaña de diseño y actualice la configuración de la siguiente manera:
Icono
- Color del icono: #751136
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 2em
Fuente del titulo
- Tito Estilo de fuente: TT
- Alineación del texto del título: Centro
- Color del texto del título: #751136
- Tamaño del texto del título: 1em
Tamaño del cuerpo del texto
Si se dio cuenta, hemos estado dimensionando los elementos publicitarios utilizando la unidad de longitud «em». Esto es relativo al tamaño del cuerpo del texto. Por lo tanto, ajustar el tamaño del texto del cuerpo de la publicidad (aunque no se muestre el texto del cuerpo) ajustará el tamaño de todos los elementos de la publicidad con la unidad de longitud em. Esta es simplemente una forma conveniente de cambiar el tamaño del botón en el futuro sin tener que ajustar cada elemento individualmente.
Actualice el cuerpo del texto de la siguiente manera:
- Tamaño del cuerpo del texto: 12px
Tamaño
Dale a la publicidad una altura y un ancho establecidos de la siguiente manera:
- Ancho: 4.5em
- Alineación del módulo: centro
- Altura: 4.5em
Acolchado y Esquinas
- Acolchado: 0,5 em superior
Sombra de la caja
- Sombra de caja: ver captura de pantalla
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 2px
- Color de sombra: rgba(255,255,255,0.55)
CSS personalizado
Para hacer que el contenido del módulo de propaganda esté centrado verticalmente, agregue el siguiente CSS personalizado al elemento principal:
|
01
02
|
display:flex;align-items:center; |
Y elimine el espacio debajo del icono de publicidad agregando la siguiente imagen de publicidad:
|
01
|
margin-bottom: 0.3em; |
Adición de la URL del enlace de llamada
Para agregar una URL de enlace de llamada que iniciará una llamada en un teléfono móvil , agregue el número después del prefijo «tel:».
- URL del enlace del módulo: tel: 555-555-5555
Para crear el botón de correo electrónico, duplique toda la columna.
Agregar el ícono de correo electrónico y la URL del enlace
Luego actualice la propaganda duplicada en la columna 2 con un nuevo Título e Icono.
Para agregar una URL de enlace de llamada que iniciará un correo electrónico en una aplicación móvil, agregue la dirección de correo electrónico después del prefijo «mailto:».
- URL del enlace del módulo: mailto: email@address.com
Para crear el botón SMS, duplique la columna 2.
Agregar el icono de SMS y la URL del enlace
Luego actualice la propaganda duplicada en la columna 2 con un nuevo Título e Icono.
Para agregar una URL de enlace de llamada que iniciará un correo electrónico en una aplicación móvil, agregue la dirección de correo electrónico después del prefijo «sms:».
- URL del enlace del módulo: sms:+15555555555
Para crear el botón de SMS, duplique la columna 3.
Agregar el icono de indicaciones y la URL del enlace
Luego actualice la propaganda duplicada en la columna 3 con un nuevo Título e Icono.
Para agregar una URL de enlace de llamada que iniciará direcciones a través de Google Maps, use estas estructuras de URL de dirección .
Para este tutorial, agregaremos un enlace de indicaciones que generará indicaciones desde la ubicación actual del usuario hasta GooglePlex en Mountain View, CA.
- URL del enlace del módulo:
01https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA
Para agregar su propia dirección a la URL, reemplace el texto después de «destino =» en la URL, asegurándose de separar las palabras con símbolos más («+»).
Al hacer clic en el botón debería aparecer algo similar a esto…
Ocultar sección en el escritorio
Como queremos que la barra de contactos solo se muestre en dispositivos móviles, podemos deshabilitar toda la sección en el escritorio. Para hacer esto, abra la sección de configuración y actualice lo siguiente:
- Deshabilitar en: Escritorio
Resultados finales
Más enlaces de contacto
Con HTML5, no está 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
Y si lo desea, también puede agregar un enlace de Waze específico para la URL de indicaciones.
Pensamientos finales
La barra de contacto parece ser una gran adición a cualquier sitio web de la empresa que quiera que sea conveniente para los usuarios contactarlos desde un dispositivo móvil. Y una vez que se familiarice con las estructuras de las URL de los enlaces, estará listo para cualquier tipo de enlace de contacto que desee.
Para obtener más información, consulte nuestra publicación sobre Enlaces telefónicos .
Espero escuchar de usted en los comentarios.
¡Salud!