En esta entrada se va explicar como crear un div flotante para presentar cierta información en nuestro WordPress.
Aunque en vez de div o capa, se puede decir que vamos a crear un «botón flotante».
La idea es hacer algo similar al clásico botón de subir hacia arriba de cualquier web o un botón de contacto rápido para WhastApp.
Se va a crear una función en el fichero functions.php de nuestro tema que va a pintar ese botón, recuerda que es recomendable trabajar con el tema hijo para evitar pérdidas de código, y luego, le daremos estilo con CSS y haremos que sea flotante gracias a la propiedad position fixed.
Índice de contenidos
Parte 1: Código a añadir en el functions.php
Nos apoyamos en la acción wp_footer para llamar a una función que va a devolver el botón flotante.
Ahora, se debe insertar el código CSS que «va a convertir» el div o html del punto anterior en flotante y quedando siempre fijo a pesar de que se haga scroll.
Parte 2: CSS para hacer el botón flotante
Copia este CSS y añádelo a tu tema
No tienes que hacer nada más, el botón flotante ya debiera de aparecer en tu web.
Si pegas el botón muy arriba o muy abajo, puede que la cabecera de página o el pie quede por encima de tu botón, si te pasa esto, incremente el valor de la propiedad z-index hasta que salga por encima de ese elemento.
Otras variaciones del botón
En este ejemplo, el botón aparece abajo a la derecha, pero si puede situar en cualquier parte de nuestra web.
Botón abajo a la izquierda
Modifica los valores bottom y left a tu criterio.
Arriba a la izquierda
Modifica los valores top y left a tu criterio.
A la derecha y centrado verticalmente
Deja el valor top a 50vh y el right a tu criterio.
Deja tu comentario