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.

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.

Copiar

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

Copiar

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.

Copiar

Arriba a la izquierda

Modifica los valores top y left a tu criterio.

Copiar

A la derecha y centrado verticalmente

Deja el valor top a 50vh y el right a tu criterio.

Copiar
¡Valora este artículo y ayúdame a mejorar la calidad del blog, si no te ha servido, déjame un comentario para revisarlo!
(Votos: 0 Promedio: 0)