Cerrar video

Colocar un botón fijo o flotante en la parte inferior de nuestro sitio con divi

por | Nov 17, 2019 | Tutorial gratuito | 75 Comentarios

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…

75 Comentarios

  1. oscar

    Se puede dejar este botón en una sola página o personalizar para diferentes páginas? gracias.

    Responder
    • Oscar Viedma

      Claro amigo, solo debes pegar el código HTML en un módulo código de divi en la página que deseas insertarlo.

      Responder
      • Luis

        Hola como estas, donde puedo encontrar el código de modulo, excelente tus cursos

        Responder
        • Oscar Viedma

          Hola Luis muchas gracias ¿Código de qué módulo amigo?

          Responder
  2. Amaia

    Muchas gracias por tu aportación. Feliz semana.

    Responder
  3. mireia

    Hola, se puede poner mas de uno y en diferentes idiomas?

    Responder
    • Oscar Viedma

      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 🙂

      Responder
      • Angel Sosa

        Dónde veo ésta caracteristica?!
        Gracias!

        Responder
        • Oscar Viedma

          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.

          Responder
  4. Dom

    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

    Responder
    • Oscar Viedma

      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

      Responder
  5. Dom

    Hola Oscar, aun no veo el error, ni la repeticion del codigo.

    Deseo poner DDDD07 amarillo,

    hover efect, #FFAA00 naranjo.

    Responder
    • Dom

      Oscar ,ya lo solucioné… gracias por el código.

      Responder
      • Oscar Viedma

        Perfecto Dom, qué bueno que lo lograste. ¡Si se pudo! Un abrazo.

        Responder
      • Oscar Viedma

        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

        Responder
  6. Josep Oriol Panadés Magriña

    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.

    Responder
    • Oscar Viedma

      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.

      Responder
  7. Josep Oriol Panadés Magriña

    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?

    Responder
    • Oscar Viedma

      Exacto Josep, solo debes colocar el fragmento HTML, el CSS queda igual porque serán los mismos estilos para todos los botones.

      Responder
      • Oriol Panades

        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.

        Responder
  8. Alan

    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!

    Responder
    • Oscar Viedma

      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 🙂

      Responder
  9. Edgardo

    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á

    Responder
    • Oscar Viedma

      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 🙂

      Responder
    • Edgardo

      Genial, gracias…sigo aprendiendo. Ya me suscribí al boletín.

      E. García

      Responder
  10. Edgardo

    Me acabo de percatar que en tu blog lo usas de esa manera.

    E. García

    Responder
  11. Keiber Leon

    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!!!

    Responder
    • Oscar Viedma

      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.

      Responder
    • Renzo SA

      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?

      Responder
      • Oscar Viedma

        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.

        Responder
  12. Miguel

    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?

    Responder
    • Oscar Viedma

      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>

      Responder
  13. Paul

    Hola Oscar, excelente contenido como siempre.

    Consulta, como podría poner el botón en el lado izquierdo.

    Gracias.

    Responder
    • Oscar Viedma

      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… 🙂

      Responder
      • Paul

        Gracias, lo mejor de lo mejor en lo que existe en internet!.

        Saludos.

        Responder
  14. Carlos

    ¿Como coloco un link de PayPal en el Boton?

    Responder
    • Oscar Viedma

      Solo debes reemplazar el numeral «#» del enlace html 🙂

      Responder
        • Oscar Viedma

          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>

          Responder
          • Carlos

            ¿Cómo cambio el tipo de letra?

          • Oscar Viedma

            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;

          • Carlos

            Muchas gracias

            Una ultima pregunta

            ¿Cómo hago para al darle clic me mande a otra ventana?

          • Oscar Viedma

            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>

  15. Miriam Euan

    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!

    Responder
    • Oscar Viedma

      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…

      Responder
      • Miriam Euan

        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

        Responder
        • Oscar Viedma

          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.

          Responder
  16. luis fernando

    hoia, hice todo lo que esta en el video, pero el boton no me sale. Uso el theme extra de divi. Agradeceria la ayuda.

    Responder
    • Oscar Viedma

      Hola Luis, la verdad no lo he probado con extra. Pero supongo que debe funcionar igual. ¿Cual es tu sitio?

      Responder
  17. Fredy

    Hola Oscar, podrías iluminarme como dejar ese mismo botón en la cabecera de mi pagina web.

    Responder
    • Oscar Viedma

      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;

      Responder
  18. Cristian

    Hola Oscar, se puede configurar el botón para que ejecute un código tipo pop up [wpb-quote-button%20id=178] ?

    Responder
    • Oscar Viedma

      Hola Cristian habría que intentarlo. ¿El shortcode es el pop up o es el botón cómo tal?

      Responder
  19. laura

    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

    Responder
    • Oscar Viedma

      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.

      Responder
  20. ALEXANDER RHENALS

    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

    Responder
    • Oscar Viedma

      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.

      Responder
      • alexander

        excelente oscar si se adapta a lo que quiero. gracias por el empujón y que buenos tus tutoriales.

        Responder
        • Oscar Viedma

          Genial Alexander, muchas gracias a ti por estar al pendiente. Un abrazo 🙂

          Responder
  21. Diego Jimenez

    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

    Responder
    • Oscar Viedma

      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.

      Responder
  22. Jaime

    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/

    Responder
    • Oscar Viedma

      Hola Jaime, en que página no te gustaría mostrarlo? Se debe realizar con CSS.

      Responder
        • Oscar Viedma

          Para ocultar el icono en esa página usa este fragmento CSS:

          .page-id-141 .btn-flotante {
              display: none;
           }
          
          Responder
          • Jaime

            Que pena contigo, pero en que modulo o sección pondría ese código en la pagina que no quiero que salga.?

          • Oscar Viedma

            Ese código va en Divi > Opciones del tema > CSS Personalizado…

          • Jaime

            Muchas gracias, si me sirvió 😀

  23. Alonso

    Gracias me sirvió de mucho

    Responder
  24. john

    Hola amigo como hago para colocarle un link al botón, para que cuando lo toquen se abra un popup en divi, gracias

    Responder
  25. Raul Ortega

    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.

    Responder
    • Oscar Viedma

      Puedes hacerlo con divi scroll effects, para que este transparente cuando no se haga scroll y conforme hagas scroll vaya apareciendo.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest