Como customizar o Widget / Botão de Reservas Flutuante

Seguir

Os widgets / botões de reservas instalados nos sites das propriedades podem ser personalizados. Este tutorial disponibiliza alguns códigos CSS que podem ajudá-lo a personalizar o seu widget flutuante.

Para mais informações sobre widgets do myfrontdesk, acesse esse tutorial: Como instalar o widget do motor de reservas no website

Os códigos aqui fornecidos são apenas para referência e podem não servir para alguns sites. Talvez será necessário ser adaptado de acordo com o código do seu site. Fale com um desenvolvedor web para mais esclarecimentos. A Cloudbeds não fornece suporte para o desenvolvimento dos sites das propriedades.

Mudar a posição do widget para a parte inferior

Por padrão, o widget flutuante ficará posicionado no topo do seu site. Para movê-lo na parte inferior do seu site, adicione estes códigos entre as tags <body> e </ body> (no seu site).

<style>
.CloudBedsWidget.floatWrapper {
padding-bottom: 0;
}
.CloudBedsWidget .float_bg2 {
position: fixed !important;
top:inherit;
bottom: 0;
border-bottom: none;
}
</style>
Customizar a aparência do widget flutuante

Ao customizar esse código, você pode mudar a aparência do widget flutuante. Adicione esse CSS ao código fonte do seu site onde o widget está localizado.

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

Com esse código você pode alterar a aparência do botão "Buscar" no widget flutuante.

<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> 
Esse artigo foi útil? Envie uma solicitação

Comentários

Powered by Zendesk