Cómo personalizar el widget flotante (tope de la página)

Los widgets de su portal de Internet pueden personalizarse dentro de la página en la que estén colocados. Este artículo presenta varios códigos en CSS para modificar el widget flotante (o el que se integra en el tope de su página web).

Para obtener más información sobre los widgets del PMS de Cloudbeds, consulte el siguiente artículo: Widgets del motor de reservas de Cloudbeds para su sitio web.

  Estos códigos se le proporcionan como referencia y puede que no funcionen para todos los portales de Internet. Es posible que este deba personalizarse de acuerdo con el código de su sitio web, por lo que le recomendamos consultar con su desarrollador web para obtener asistencia adicional. Tome en cuenta que Cloudbeds no brinda a sus clientes soporte adicional para el desarrollo de sus portales de Internet.

Cómo cambiar el widget al pie de página

El widget flotante se integra en la parte superior o tope de su página web. Si desea moverlo a la sección inferior de su página web, deberá agregar estos códigos entre las etiquetas (o tags) de <body> y </body> (de su portal de Internet).

<style>
.CloudBedsWidget.floatWrapper {
padding-bottom: 0;
}
.CloudBedsWidget .float_bg2 {
position: fixed !important;
top:inherit;
bottom: 0;
border-bottom: none;
}
</style>

  Si necesita continuar personalizando sus widgets, por favor solicite ayuda de un desarrollador web experimentado página.

Cómo personalizar la apariencia del widget flotante

La personalización de este código permite cambiar la apariencia de su widget flotante. Agregue este código de CSS al código fuente de su portal de Internet, donde se integrará el widget.

<style>
.float_bg2 {
background: #fff;
width: 100%;
z-index: 50001;
left: 0;
top: 0;
display: block;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
border: none;
border-bottom: 2px solid #fff;
box-shadow: 0 3px 5px #fff;
}
</style>

Este código le permitirá cambiar la apariencia de la barra de «Buscar» en el widget flotante.

<style>
.CloudBedsWidget .widgetHotelsForm input[type=submit],.CloudBedsWidget .widgetHotelsForm button[type=submit] {
border-radius: 0 !important;
background: #d2a917;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: #fff;
padding: 4px;
min-width: 100px;
margin-top: -5px;
text-shadow: none;
white-space: normal;
cursor: pointer;
}
</style> 

  Si necesita modificar el texto mostrado o continuar personalizando sus widgets, por favor solicite ayuda de un desarrollador web experimentado página.

 ¡Transición a Booking Engine Plus! El motor de reservas de Cloudbeds ha sido reinventado para una nueva versión actualizada llamada el Motor de Reservas Plus de Cloudbeds y ofrecemos servicios de personalización para esta nueva versión. ¿Quiere saber más? Por favor, dele un vistazo a estos artículos:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 2

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.