Yüzen bileşeni (Widget) özelleştirme

Gabriela Garcia

Güncellenme 01 Mart 2026 16:46

Web Sitesi bileşenleri, yerleştirildikleri web sitesinde özelleştirilebilir. Bu makale, özellikle kayan bileşenlerle ilgili yardımcı olabilecek bazı CSS kodları sunmaktadır.

Cloudbeds PMS bileşenleri hakkında daha fazla bilgi için lütfen şu makaleyi ziyaret et: Cloudbeds Rezervasyon Motoru web sitesi bileşenleri.

Bu kodlar referans amaçlı verilmiştir ve tüm web sitelerinde çalışmayabilir. Web sitenizin koduna göre özelleştirilmesi gerekebilir. Ek yardım için lütfen web geliştiricinize danışın. Cloudbeds kişisel web sitesi geliştirme desteği sağlamamaktadır.

Bileşenin konumunu alta değiştir

Varsayılan olarak, kayan bileşen web sitenizin üst kısmında konumlanır. Web sitenizin altına taşımak için bu stilleri <body> ve </body> etiketleri arasına ekleyin (web sitenizde).

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

Bileşenlerinizi özelleştirmeye devam etmek için lütfen deneyimli bir web sayfası geliştiricisinden yardım isteyin.

Kayan bileşenin görünümünü özelleştir

Bu kodu özelleştirerek kayan bileşenin görünümünü değiştirebilirsin. Bu CSS’i, bileşenin yer aldığı web sitesinin kaynak koduna ekle.

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

Bu kod ile kayan bileşendeki «Ara» butonunun görünümünü değiştirebilirsin.

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

Görüntülenen metni değiştirmek veya bileşenlerinizi özelleştirmeye devam etmek istersen, lütfen deneyimli bir web sayfası geliştiricisinden yardım iste.

Rezervasyon Motoru Plus'a Geçiş! Cloudbeds Rezervasyon Motoru, Cloudbeds Rezervasyon Motoru Plus adlı yeni ve geliştirilmiş bir versiyon olarak yeniden tasarlandı. Bu yeni versiyon için artık özelleştirme hizmetleri sunuyoruz. Daha fazla bilgi edinmek ister misin? Lütfen aşağıdaki makalelere göz at: