Agregar boton flotante a wordpress
Forma #1:
Mediante Elementor creando un Popup
https://www.youtube.com/watch?v=qA7xE_FVtdc
Forma #2:
Mediante un plugin especifico para esa funcion. Se recomienda: Button Generator – easily Button Builde
https://es.wordpress.org/plugins/button-generation/
Forma #3:
Mediante Codigo CSS y HTML. Se recomienda usar el siguiente plugin para insertar codigos: Insert Headers and Footers by WPBeginner
https://es.wordpress.org/plugins/insert-headers-and-footers/
<style>
.btn-flotante {
font-size: 16px; /* Cambiar el tamaño de la tipografia */
color: #ffffff; /* Color del texto */
letter-spacing: 2px; /* Espacio entre letras */
background-color: #be0216; /* Color de fondo */
padding: 15px 15px; /* 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: #000000; /* 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;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="https://vinas-en-flor.meitre.com/" class="btn-flotante" style="color: #ffffff; text-decoration: None">
<span class="glyphicon glyphicon-calendar"></span> Reservas
</a>
0 Comentarios