Crear un botón de llamada fijo en los dispositivos móviles puede hacernos ganar algunos clientes. Implementarlo con Elementor es relativamente sencillo. Los pasos son los siguientes:
Crear sección
El primer paso es crear la sección y su contenido.
Un ejemplo puede ser, un simple botón, que cuando lo pulse el usuario, les marque directamente nuestro teléfono. Para ello:
- Incluimos un botón de llamada en la sección y le damos estilo.
- Incluimos el enlace con la etiqueta tel de la siguiente manera: tel:+34900000000
Asignar ID de CSS a la sección
Ello nos permitirá ocultarlo en versiones de escritorio, fijarlo a footer, etc.
Se encuentra, entre las opciones de Elementor, en el grupo de Avanzado, bajo la denominación de ID de CSS.
Se podría utilizar también una clase y el resultado sería el mismo.
Dar estilo al botón de llamada
Para que se muestre solo en versión móvil, y que en ésta aparezca fija, utilizamos código CSS:
@media screen and (min-width: 768px){
#secfija{
display:none;
}}
@media screen and (max-width: 768px){
#secfija{
position:fixed;
width: 100%;
bottom:0;
right:0;
padding-bottom:20px;
padding-right:20px;
z-index:999;
}}
Lo que decimos, básicamente, es que se muestre solo en resoluciones inferiores a 768px, y que cuando lo haga, se quede fija en la parte de abajo, a todo el ancho y con un relleno arriba y abajo de 20px.
A partir de aquí se puede adaptar o personalizar el estilo a cada web, pero sirve como base.
4 comentarios
Super simple gracias por la explicación
Hola Alexander,
Si, es un método sencillo. Si bien, en las últimas actualizaciones de Elementor ya incluye directamente la opción («Efecto de desplazamiento» en «Avanzado») sigue siendo un método útil para aplicar cualquier estilo a un elemento, fila o sección.
Saludos,
Hola que tal, escribo por un problema con esos botones de llamada. Todo funciona bien en la computadora, pero en el movil el botón no me abre el panel para hacer la llamada desde mi web. Hice una pequeña en tarjeta en pdf con vinculo de llamada y resulata que cuando recién abro el vinculo con qr, el vinculo de la llamada funciona, pero cuando guardo el pdf en mi teléfono, ya no funciona. Alguma idea de que le hago a mi movil para arreglar el problema? pues en otros móviles si funciona
Hola Rodrigo,
Por lo que comentas, la incidencia sucede solo en tu móvil, no en otros. Tendrás que revisar el dispositivo (configuración, etc.) para ver porqué falla, pues parece que la implementación que has hecho está correcta. En la revisión de tu dispositivo no podemos ayudarte.
Suerte,