Cómo crear un botón de llamada fijo en móviles

Cómo crear un botón de llamada fijo en móviles con Elementor

Share on facebook
Share on google
Share on twitter
Share on linkedin

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:

  1. Incluimos un botón de llamada en la sección y le damos estilo.
  2. Incluimos el enlace con la etiqueta tel de la siguiente manera: tel:+34900000000

Asignar ID de CSS a la sección

Con el ID lo que hacemos es poder dar un estilo personalizado 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.

El resultado…

 

A partir de aquí se puede adaptar o personalizar el estilo a cada web, pero sirve como base.

Share on facebook
Share on google
Share on twitter
Share on linkedin

2 comentarios en “Cómo crear un botón de llamada fijo en móviles con Elementor”

    • 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,

Deja un comentario