Home SimplyBook.me 中国 活用技巧:利用 CSS 程式码,轻松客制品牌专属预约网站!
SimplyBook.me 中国, 活用秘诀

活用技巧:利用 CSS 程式码,轻松客制品牌专属预约网站!

Tina
5月 5, 2021
Eye icon 101
Comment icon 0
Simplybook.me 一站式预约管理平台,帮您处理繁琐的预约排程管理工作,经营者可以省下更多的时间&人力成本,将精力用于专注提升服务品质!透过预约排程系统接单,不仅可以 全天候 24 小时自动化管理预约,还能确保在非营业时间也不漏单,轻松管理预约排程!2021 年跟着我们一起迈向数位化!

Simplybook.me 线上预约系统,提供完整且丰富的客制弹性,帮助您轻松打造品牌专属预约官网!不仅如此,我们也提供消费者多种便利的预约方式,让您能根据服务需求,建立消费预约流程。今天要分享的 CSS 客制功能,帮助您调整网站显示样式,如:微调 预约栏位、网站显示字型等,只要有 CSS 技巧,就能再更深入的客制预约网站风格!

这次我们将为您分享,透过 CSS 程式码调整预约网页显示内容,让您的预约网站更符合品牌形象,若有需要,也能直接隐藏栏位或是按钮喔!

开启 CSS 设计功能

首先,在加入 CSS 程式码前,需先启用 CSS 设计客制功能,此客制功能为免费启用,不会计算在使用的客制功能数量。

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

展开左侧列表 客制功能 → 点击 客制功能 → 搜寻并开启 CSS 设计,再点击设定,您就可以开始进行 CSS 的设计!

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

若之后想要调整 CSS 内的程式码,您也可以透过展开左侧列表 客制功能 → 点击 CSS 设计进行调整。

以下我们将分享几种语法,有需要的经营者也可以直接复制贴上加入到 CSS 栏位来使用喔!

将日历可预约时段显示更明显

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

在预设的预约行事历上,您可能会觉得日期显示不够显眼,想让消费者可以更清楚找到可预约时段,则您就可以透过以下的 CSS 程式码,将您预约网站行事历中的“可预约时段”和“不可预约的时段”调整颜色及粗体,让您的预约时段可呈现的更清楚!

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

在预约页面 CSS 设计内贴上以下程式码:

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .day-on {
text-decoration: none;
color: #F75000!important;
font-weight: 600!important;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_dateview_container .top-date-select .calendar .weeks-date .day-off {
opacity: .4;
color: #d6dae4;
}

以上的粗体字,您都可以针对颜色及粗细进行调整喔,第一个 color 是针对可预约时段日期的显示颜色,则 font-weight 是调整字体的粗细,若您希望文字可以更粗,需请您将数字在忘上加,如:1000,而第二个 color 则为无法预约日期的显示颜色,加入 CSS 语法后 → 点击 储存 CSS → 就完成啰!

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

调整完成后您可以看到日历上的日期都被调整成您刚刚设定的颜色及变成粗体,让消费者能更清楚及快速的找到可预约时段!

隐藏促销信件核取方块

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

在消费者填写预约资料时,预设栏位预设显示「我们可以发送促销与其他资讯给您吗?」给消费者进行勾选,当消费者有勾选此选项,您才可以发送促销信件、礼物卡、优惠券 … 等相关内容给客户,但若您不想由消费者选择,想透过后台自行调整是否发送促销相关内容给客户,则您可透过 CSS 隐藏此栏位。

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

一样于预约页面 CSS 设计内贴上以下程式码:

  • 未开启顾客登入权限功能,请您加入以下程式码:
#sb-main-container #main #sb-timeline #steps #details .detail-step-wrap .detail-step .license-links-container .promotions-letter-flag label[role=button]{
display: none;
}
  • 若有开启顾客登入权限功能,请加入以下程式码:
#main #client-login .custom-form #sb_terms_and_conditions .promotions-letter-flag label[role=button]{
display: none;
}

加入程式码后 → 请点击 储存 CSS → 在预约网站内您就可以顺利的隐藏促销信件的确认核取方块了!

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

隐藏社群登入方式

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

若您有开启顾客登入权限功能,您一定会看到其他社群媒体的登入方式,但您希望消费者仅能透过新注册帐密来登入,不开放社群登入方式,则您也可透过 CSS 设计来隐藏喔!

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

在预约页面 CSS 设计内加入以下程式码:

#client-login .social {
    display: none;
}
#header .nav-wrapper .items-wrapper .nav-item#sb_client_info .login-container .full-info #sb_login_form .not-logged .social {
    display: none;
}

加入完成后 → 再点击储存 CSS → 完成,轻松隐藏社群登入方式!

活用技巧:利用 CSS 程式碼,輕鬆客製品牌專屬預約網站!

以上三种程式码,轻松帮您调整预约网站的内容,若按照以上述的步骤加入 CSS 程式码网站还是尚未变更,记得按下 Ctrl or Cmd + Shift + R 强制重新整理再进行查看喔!


想要打造专属 在线预约网页的您别再等了,网络的世界变化非常快,不要让竞争对手抢得在线预约的先机,立即到 SimplyBook.me 注册,免费试用最完整的功能,若有任何操作问题,欢迎来信至 asia@simplybook.me 将有专人为您提供定制化的服务,也欢迎到微信公众号搜寻并追踪「SimplyBook.me 最佳预约排程软件」随时分享各种您所需的提升业绩秘笈!

活用技巧:透过 Simplybook 管理模式,轻松 编辑 / 管理 预约排程!
Arrow icon上一篇
SimplyBook.me 商家月报:每月给您不一样的新功能,丰富您的预约网站!
下一篇Arrow icon