Hola, en este tutorial te enseñaré a crear un botón fijo o flotante (sticky button) que nos vaya siguiendo al hacer scroll en nuestro sitio, esto lo haremos obviamente con divi y para divi.
La idea de tener un botón fijo en la parte inferior derecha o izquierda de nuestro sitio web es para generar una llamada a la acción que queremos hagan los visitantes de nuestro sitio, por ejemplo: Puede ser una llamada a la acción para comprar algo, para suscribirse a nuestro newsletter, para ponerse en contacto, en fin, esto ya va a depender de la estrategia del sitio.
Para realizar este ejercicio vamos a requerir de un pequeño fragmento de código CSS que te dejo a continuación:
.btn-flotante {
font-size: 16px; /* Cambiar el tamaño de la tipografia */
text-transform: uppercase; /* Texto en mayusculas */
font-weight: bold; /* Fuente en negrita o bold */
color: #ffffff; /* Color del texto */
border-radius: 5px; /* Borde del boton */
letter-spacing: 2px; /* Espacio entre letras */
background-color: #E91E63; /* Color de fondo */
padding: 18px 30px; /* Relleno del boton */
position: fixed;
bottom: 40px;
right: 40px;
transition: all 300ms ease 0ms;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
z-index: 99;
}
.btn-flotante:hover {
background-color: #2c2fa5; /* Color de fondo al pasar el cursor */
box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-7px);
}
@media only screen and (max-width: 600px) {
.btn-flotante {
font-size: 14px;
padding: 12px 20px;
bottom: 20px;
right: 20px;
}
} Así mismo también vamos a requerir el fragmento de código HTML del botón:
<a href="#" class="btn-flotante">Llamada a la acción</a>En el video a continuación te explico en que consiste el código CSS y HTML y en que parte de tu sitio web creado con divi lo debes pegar para que funcione correctamente.
Así que no esperes más y dale play al video…
Se puede dejar este botón en una sola página o personalizar para diferentes páginas? gracias.
Claro amigo, solo debes pegar el código HTML en un módulo código de divi en la página que deseas insertarlo.
Hola como estas, donde puedo encontrar el código de modulo, excelente tus cursos
Hola Luis muchas gracias ¿Código de qué módulo amigo?
Y DONDE PONGO Llamada a la acción EN CADA PAGINA? YA QUE SI LO MANTENGO EN EL BODY DE DIVI OPTIONS SE VISUALIZA EN TODAS
Hola Maria Isabel, ¿Qué es lo que deseas lograr? ¿Mostrar el botón en una sola página?
Muchas gracias por tu aportación. Feliz semana.
Hola Amaia, feliz semana 🙂
Hola, se puede poner mas de uno y en diferentes idiomas?
Sí claro que se puede. También en la versión de Divi 4.2+ divi ya viene con una función para fijar elementos en cualquier parte de tu sitio web. Con esa nueva característica ya no es necesario hacerlo con código como lo hacemos en este tutorial 🙂
Dónde veo ésta caracteristica?!
Gracias!
Angel, para fijar un elemento de divi tienes que entrar a los ajustes del módulo / Avanzado / Puesto y aquí debes colocar la posición Fixed o Fija. Luego la puedes mover por toda el área de tu web.
Hola muy buen tutorial, muchas gracias. pero tuve problema cuando quizé editar los colores … no se ve reflejado los cambios, mira mi sitio es http://www.solute.cl
Hola Dom, ¿qué colores deseas? Creo estás repitiendo el código dos veces por eso no se reflejan los colores. Revisa eso y me comentas
Hola Oscar, aun no veo el error, ni la repeticion del codigo.
Deseo poner DDDD07 amarillo,
hover efect, #FFAA00 naranjo.
Oscar ,ya lo solucioné… gracias por el código.
Perfecto Dom, qué bueno que lo lograste. ¡Si se pudo! Un abrazo.
Por cierto si el botón lo tienes en todas tus páginas y quieres que te enlace a la sección de contacto desde otra página, puedes colocar la url completa, por ejemplo, en lugar de colocar en el enlace solamente: #nombreSeccion ponlo así: tusitio.com/#nombreSeccion
Buenos días Oscar,
he colocado el botón en mi página y se ve correctamente. Mi sitio esta en 4 idiomas, he intentado traducirlo a través de WPML en Traducciones en cadena, pero no lo consigo. Me podrías arrojar un poco de luz, de como poder traducir el botón en los distintos idomas.
Gracias.
Hola Josep, tu caso es muy interesante, lo que yo haría es colocar el enlace html del botón en cada página, esto a través del módulo código. Así tendrías un botón diferente en cada idioma que necesites.
Hola Oscar, te refieres a que elimine este enlace de Llamada a la acción de integración, y haga ponga un módulo de código con este código en cada una de las páginas variando el link y la traducción del botón? El fragmento de CSS lo dejo igual en integración?
Exacto Josep, solo debes colocar el fragmento HTML, el CSS queda igual porque serán los mismos estilos para todos los botones.
Hola Oscar entendido, ya lo he probado en el site en Español,. Lo único que me ocurre, es que en algunas secciones de la web el botón me queda oculto por debajo de las img. He modificado el valor de z-index pero continua pasando. No se muy bien como arreglar.
Me puedes pasar tu sitio, lo inspecciono y te paso el código, si no quieres hacerlo público envíamelo por mensaje [email protected]
que buen tutorial simple y muy entendible, me sirvio para hacerle un efecto a unos botones que estaba haciendo y por casualidad me encontre este tutorial. Bendiones!
Genial Alan, me alegra saber que te ha servido. Espero ya estés suscrito al canal de youtube para que no pierdas los próximos tutoriales 🙂
Hola Oscar, buscando información encontré tu tutorial y me sirvió de maravilla, en este caso yo necesitaba que el boton me llevará a la parte superior del sitio, ya que el sitio lo hice "onepage" (le cambié el texto a: "subir" .
Sin embargo he visto que utilizan para esto un icono de una flecha sin texto, ?cómo puedo hacerlo?
saludos,
E. García – Panamá
Hola Edgardo, para colocar el botón de scroll up no hace falta realizarlo con este método. Divi por defecto viene con esa característica solo tienes que entrar a las opciones del tema divi / deslizar y activar la opción que dice: Botón de volver arriba.
Eso es todo 🙂
Genial, gracias…sigo aprendiendo. Ya me suscribí al boletín.
E. García
Me acabo de percatar que en tu blog lo usas de esa manera.
E. García
Hola Oscar espero que te encuentres bien, muy buen tutorial pero cuando voy a la versión móvil el botón no es fijo, si no que se va hacia la parte de abajo, como crees que puedo solucionar ese problema, gracias!!!
Hola Keiber, el botón debe ser fijo en cualquier resolución. ¿Tienes tu sitio en línea? Para poder revisar qué está sucediendo con el botón. Envíame la url del sitio donde tienes el botón, lo reviso y te digo que sucede. Un abrazo.
Estimado Oscar es posible personalizar un botón de MercadoPago? En su página me deja generar un botón que tiene codigo script y abre una ventana cuando doy click en dicho botón, pero al colocar el codigo en el módulo código solo aparece un botón azul que se llama «pagar» y no parece llamativo, Paypal por otro lado si te da un código bien personalizado color amarillo, cabe la posibilidad?
Hola Renzo, la verdad desconozco el botón de MercadoPago pero seguramente se puede personalizar con código CSS. Tendría que verlo en tu sitio para ver que tanto se puede modificar.
Oscar, muchas gracias por el tutorial, muy útil.
Tengo una pregunta, ¿Es posible cambiar el diseño del botón por uno personalizado (.svg o .png) ya diseñado?
Hola Miguel, sí es posible. En lugar de usar el fragmento HTML del botón puedes usar algo así: <a href=»#»><img src=»URL_IMAGEN.jpg» /> </a>
se puede poner una imagen dentro del css del boton ?
Sí, dependerá si quieres colocar la imagen de fondo o a un lado del texto
Hola Oscar, excelente contenido como siempre.
Consulta, como podría poner el botón en el lado izquierdo.
Gracias.
Gracias Paul. En el código CSS en la clase .btn-flotante busca la propiedad right: 40px; y reemplaza right por left. Lo mismo para el @media… 🙂
Gracias, lo mejor de lo mejor en lo que existe en internet!.
Saludos.
¿Como coloco un link de PayPal en el Boton?
Solo debes reemplazar el numeral «#» del enlace html 🙂
No me sale, le pongo el link y se suma al link de mi sitio web por ejemplo
http://www.google.com/www.paypal.com
¿Como puedo hacer que solo mi sitio web aparezca?
En el código HTML debes colocar el enlace de esta manera:
<a href=»https://www.paypal.com/» class=»btn-flotante» rel=»nofollow ugc»>Botón PayPal</a>
¿Cómo cambio el tipo de letra?
Debe tomar la tipografía de tu sitio. Pero si quieres modificarla puedes colocar dentro de la clase .btn-flotante. Algo así: font-family: ‘Poppins’, sans-serif;
Muchas gracias
Una ultima pregunta
¿Cómo hago para al darle clic me mande a otra ventana?
Hola Carlos, al enlace html solo hay que agregarle target=»_blank» algo así:
<a href=”https://www.paypal.com/” class=”btn-flotante” rel=”nofollow ugc” target=»_blank»>Botón PayPal</a>
Hola, soy nueva en esto y estoy explorando sin embargo cuando entro en la web con el móvil, si hay letra pequeña que no veo, intento ampliar deslizando los dedos, como es normal, pero no se puede. ¿Hay alguna manera de añadir esa función? Es necesaria!!
Un saludo.
Se que este comentario no es acorde al título pero necesito ayuda muchas gracias!
Hola Miriam qué tal, lo ideal es que el tamaño del texto tenga un tamaño de texto al menos de 14px para que sea leíble y así evitar el zoom. Pero sí aun así necesitas el zoom puedes activarlo con el siguiente código:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1″ />
Lo debes pegar en Opciones del tema -> Integración -> Agregar código al head de su blog…
Hola!! eres genial por tu pronta respuesta, pero qué crees no funciona en el móvil sigue sin poderse ampliar con los dedos, por ejemplo el menú para ver detalles de la carta no se puede ver bien, ¡sufro con esto!, no soy nada experta, pero tus videos me han ayudado avanzar un monto, solo me he atorado en esto. http://www.gelatoscopio.mx
A lo mejor es el navegador o el teléfono. Yo he inspeccionado tu sitio desde mi celular y si puedo hacer el zoom con los dedos.
hoia, hice todo lo que esta en el video, pero el boton no me sale. Uso el theme extra de divi. Agradeceria la ayuda.
Hola Luis, la verdad no lo he probado con extra. Pero supongo que debe funcionar igual. ¿Cual es tu sitio?
Hola Oscar, podrías iluminarme como dejar ese mismo botón en la cabecera de mi pagina web.
Hola Fredy, lo que podrías hacer es crear tu cabecera desde el generador de temas de divi e insertar el fragmento html del botón en un módulo código.
Y en el código CSS en la clase «.btn-flotante» borrar las siguientes líneas para que no se quede fijo:
position: fixed;
bottom: 40px;
right: 40px;
Hola Oscar, se puede configurar el botón para que ejecute un código tipo pop up [wpb-quote-button%20id=178] ?
Hola Cristian habría que intentarlo. ¿El shortcode es el pop up o es el botón cómo tal?
Hola, el Botón me funciona en el pc de escritorio pero cuando voy al teléfono dice: No se pudo abrir el enlace , la página es sandypulpas.com
Hola Laura. Seguramente tiene que ver con la URL de whatsapp que has insertado. Debes revisar que la url de WA sea la correcta. Saludos.
Oscar buenos días, bueno decidi por poner el código QR en mi pie de página. pero en su defecto dejé el botón porque lo voy a necesitar para varios enlaces especificamente necesitaria cuatro botones iguales a este flotante pero ubicados en el centro de la pagina no en la esquina porque me tapa el botón de whatsapp. me podrias ayudar porfa. yo compre tus totoriales y me parecen especiales. tu tienes mi usuario y clave de wordpress para entrar. ciudadelaeducativacooedumag.edu.co gracias espero me colabores. ya el botón lo ubique en el centro pero abajo lo necesitaría en el centro parte izquierda de la pagina y como te comente con 4 botones para enlazar varias paginas desde ellos. gracias oscar
Hola Alexander qué tal, ¿Por qué no intentas colocar los botones cómo lo hemos hecho en este tutorial?
Puedes usar la misma técnica que usamos en el tutorial que te comparto para colocar tus botones.
excelente oscar si se adapta a lo que quiero. gracias por el empujón y que buenos tus tutoriales.
Genial Alexander, muchas gracias a ti por estar al pendiente. Un abrazo 🙂
Hola Oscar, excelente tutorial, me gustaría saber cómo hago ya con el botón implementado para que no se muestre en una de las páginas en especifico y en las demás si.
Es decir
mi botón en este caso lanza a la página de «contáctanos», pero en esta página también me sale. como puedo evitar que salga allí?
gracias
Hola qué tal Diego, podemos ocultar el botón para la página específica con CSS, si me compartes la url de la página dónde no quieres mostrar el botón yo te ayudo con el CSS.
Saludos.
Hola Buen día, me gustaría saber cómo hago para que no se muestre en una de las páginas en especifico y en las demás si.
espero que me ayudes con esta duda :/ está es mi Url https://sandancol.com/
Hola Jaime, en que página no te gustaría mostrarlo? Se debe realizar con CSS.
Hola, mira sería para que no salga en esta pagina https://sandancol.com/thanks/
Por favor ayuda :/
Para ocultar el icono en esa página usa este fragmento CSS:
.page-id-141 .btn-flotante { display: none; }Que pena contigo, pero en que modulo o sección pondría ese código en la pagina que no quiero que salga.?
Ese código va en Divi > Opciones del tema > CSS Personalizado…
Muchas gracias, si me sirvió 😀
Gracias me sirvió de mucho
Hola amigo como hago para colocarle un link al botón, para que cuando lo toquen se abra un popup en divi, gracias
Hola John, el link lo vas a colocar en el href=»#» simplemente reemplaza el asterisco.
El pop up lo puedes crear con este plugin o con este otro tutorial sin plugins.
Hola Oscar! muchas gracias por tu información, tengo un problema el botón flotante que cree con scroll, para que apareciera en cierta parte de la pagina, (lo cree como modulo codigo) al momento de ejecutar la pagina aparece desde el inicio por detrás de las demás secciones activo, llevando al proceso de pago, como podría resolver esto, que solo se ejecute en el momento que aparezca visible. muchas gracias.
Puedes hacerlo con divi scroll effects, para que este transparente cuando no se haga scroll y conforme hagas scroll vaya apareciendo.
Hola Oscar, gracias por el vídeo , una cosa se puede poner el elemento fijo pero que se posicione bajo del todo pero que no llegue al footer?
Muchas gracias
Hola Agustin qué tal, no quizá lo debas realizar con divi sticky options.
Hola, excelente tutorial como siempre. Dos preguntas, es posible cambiar de posición en pantalla el botón, y otra preguntita aprovechando, es posible rotar el botón para ponerlo digamos pegado a la derecha pero en posición vertical? muchas gracias
Hola Aldo, para cambiar la posición del botón debes jugar con las propiedades de btn-flotante:
bottom: 40px;
right: 40px;
También puedes usar: «top» y «left» dependiendo la posición dónde lo desees colocar.
Muy Buenas, geniales tus tutoriales, en mi caso me gustaría colocar el botón en el centro de la pagina, he intentado con center o middle, pero no pilla el cambio. ¿Me podrias indicar que debo poner? muchas gracias.
Hola Elizabeth, muchas gracias.
Para centrar horizontalmente el botón flotante en la parte inferior, simplemente necesitas cambiar la propiedad right por left: 50% y luego aplicar una transformación para centrarlo respecto a su propio ancho.
Actualiza tu clase .btn-flotante así:
.btn-flotante { font-size: 16px; text-transform: uppercase; font-weight: bold; color: #ffffff; border-radius: 5px; letter-spacing: 2px; background-color: #E91E63; padding: 18px 30px; position: fixed; bottom: 40px; left: 50%; /* Centrado horizontal */ transform: translateX(-50%); /* Ajuste para centrar respecto a su propio ancho */ transition: all 300ms ease 0ms; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); z-index: 99; } .btn-flotante:hover { background-color: #2c2fa5; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3); transform: translate(-50%, -7px); /* Ajuste también aquí */ } @media only screen and (max-width: 600px) { .btn-flotante { font-size: 14px; padding: 12px 20px; bottom: 20px; } }Hola Oscar como puedo cambiar fuente del texto e intentado y nada
Hola Andrea, la fuente la toma de tu sitio web, la que tengas preestablecida.
Si quieres agregarla manualmente debes agregar la propiedad font-family + nombre de fuente a la clase .boton-flotante, algo así:
.btn-flotante { font-family: Open Sans,Arial,sans-serif; }Muy buen video, gracias
Gracias Gustavo. Un abrazo 🙂
Excelnete explicacion pero si quisiera usarlo como un boton de regresar?
Hola Sergio, si quieres usarlo para volver atrás, el href del enlace debe ser: javascript: history.go(-1)
hola como puedo hacer que el boton aparezca en la mitad de la página y no al inicio?
Hola Luciana, puedes aplicar el efecto de este tutorial al botón 🙂
Qué bueno, muchas gracias. He estado intentándolo varias veces en una de mis webs y me estaba costando mucho. Muy buen video, saludos.
Cualquier problema que estés teniendo me lo puedes describir y veo la manera de poder ayudarte 🙂
Un abrazo.
Hola, como estas?
Tengo un boton switch, deseo que al ingresar a la web y si el boton se pulsa on, no cambie al actualizar la pagina y que otras personas vean que ese boton esta on.
En cada actualización o cargue de pagina me vuelve a quedar off
Hola Maria, veo que necesitas una funcionalidad específica, por ahora no tengo un tutorial para hacer lo que deseas 🙁
Si eres parte de los tutoriales premium puedes solicitar esta característica a través de esta página, de esta manera otros usuarios pueden votar por dicha funcionalidad para darle prioridad 😀