用 CSS 加入品牌字型,打造專屬預約網頁!

更新於 發佈於 閱讀時間約 4 分鐘
SimplyBook.me 提供了豐富的客製功能,讓商家能更有彈性的打造專屬預約網站,當然,在選用客製功能時,您可能會遇到一些困難,接下來這篇文章,我們將分享如何使用 CSS 客製功能,調整網站顯示字型!
SimplyBook.me 除了支援多種不同的客製功能外,也提供超過 15 個以上的範本,幫助經營者打造更符合品牌風格的一站式官網,每個範本都能從設計不同的預約按鈕顏色、官網主視覺等,當然也能透過 CSS 語法進一步客製。

為何需要客製化預約範本?

當然,SimplyBook.me 提供的主題及設計範圍已具備足夠的完整性,但您可能需要一些些微調的內容,如:調整字體顯示、調整某特定區塊的顏色顯示,以便讓您的品牌視覺呈現的更完整。而透過 CSS 客製功能將維護您的線上品牌,讓透過社群平台瀏覽預約項目的客戶能感受到品牌一致性。
用 CSS 加入品牌字型,打造專屬預約網頁!
如上方兩張圖片呈現,左邊為原本的範本視覺,透過 CSS 設計,您可以客製範本顯示的風格,如:調整 Logo 顯示大小、調整預約頁面按鈕的擺放位置,調整特定區域的顏色、調整字體等,藉此打造一致的品牌視覺。
大部分的調整都會需要 CSS 程式語法來自訂,因此會需要找到適合的 CSS 程式設計師來協助調整,而若您只需要調整網頁顯示字型,我們會在本篇文章中,提供更完整的操作說明!

啟用 CSS 設計,調整網頁字型

在沒有 CSS 設計師且想調整字型的情況下,可以透過 Google Fonts 的整合來調整網頁字體,首先先到 Google Fonts 官網挑選適合的字體:
挑選後,先點擊畫面右上方的按鈕,展開右側欄位,接著挑選喜歡的字體,點擊「+Select this style」。
您挑選的字體會被自動加入 Selected family,接著點擊 Embed 選項,然後再選擇 @ import 就會看到對應的程式碼。

挑選完字體後,回到 SimplyBook.me 後台,展開左側列表 → 點擊客製功能 → 在客製功能列表 → 選擇並啟用 CSS 設計。
最後就是將字型的程式碼加入 CSS 設計最上方,加入字型的邏輯如下:
原本的程式碼
@import url(‘https://fonts.googleapis.com/css?family=Oswald');
:not(.fa):not(.fi) {
font-family: ‘Oswald’ !important;
}
將語法中粗體的字段調整:
  • @ import url 後面的語法替換成 Google fonts 的語法
  • 更換 font-family 語法
就會變成下方的顯示:
@import url(‘https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap');
:not(.fa):not(.fi) {
font-family: ‘Balsamiq Sans’, cursive;
}
簡單來說,就是粗體的字段改變,將 Google fonts 內的程式碼貼上替換為新的語法即可!
備註:在 CSS 儲存後 -> 瀏覽預約網頁 -> 請按下 Ctrl + Shift + R 徹底重整瀏覽器,就能看到更改後的字型喔!
字體調整前&調整後如上方圖片顯示,有需要調整字體的店家可以到 Google Fonts 挑選適合的字體,再透過上面的文章教學來更換喔!

嘿,數位的世界變化非常快,別讓競爭對手搶得預約線上化的先機,立即到 SimplyBook.me 註冊,免費試用最完整的功能,打造專屬品牌風格的線上預約網站👍 SimplyBook.me 提供專人顧問諮詢,若有任何操作問題,歡迎來信至 taiwan@simplybook.me 或是私訊 SimplyBook.me 粉絲專頁,將有專人為您提供客製化的服務。
即將進入廣告,捲動後可繼續閱讀
為什麼會看到廣告
avatar-img
26會員
165內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Haoyi Fan的沙龍 的其他內容
五年前,因為自己有興趣,原本只是利用下班時間學習美甲等服務,但為了有更多時間陪伴小孩,毅然決然挑戰中年轉業契機,正式進入新的職場。這次 SimplyBook.me 很榮幸專訪 沛芮指藝美學 的經營者 Perry,聊聊她的經營心法及數位工具使用,接下來就一起來看看 Perry 的專訪故事吧 :)
肌轉 Fitness Studio 抗疫之路!共同創辦人現身分享! 做為 LINE 外掛市集合作夥伴,SimplyBook.me 很榮幸受邀參與這次 LINE 的直播活動:5 大產業商家抗疫心法,同時也很非常感謝肌轉能代表健身產業出席此活動,以下會幫大家回顧肌轉共同創辦人 — 小蝶 提到的重點內容
吸引更多線上預約!提昇業績的 11 招基本功大公開! 讓客戶透過線上預約完成服務體驗,對公司&企業經營品牌都有正向的效果,在 GetApp 消費者心聲研究中,超過 70% 客戶更喜歡透過線上預約 完成預訂不是沒有原因的!當然,為客戶打造一個專屬且 美觀直覺的線上預約網站 只是第一步,如果你想要獲得更
經過數日優化及調整,SimplyBook.me 日前推出了管理者專用 App,有別於過往在手機裝置中,透過網頁查詢預約資訊,現在經營者也能到 App Store 或是 Google Play 下載專屬應用程式(App),無時無刻管理客戶預約排程!因專注在使用便利性,目前 SimplyBook.me
SimplyBook.me 提供了豐富的客製功能,讓商家能更有彈性的打造專屬預約網站,當然,在選用客製功能時,您可能會遇到一些困難,接下來的日子裡,我們也會開始介紹每個客製功能的用途及特色。 先前我們也分享過很多種 不同類型的客製功能,如:行銷推廣類、預約功能擴充類或網站內容類等,這次介紹的「重新
6 步驟!快速打造 LINE 預約機器人! 因為 LINE 外掛市集的推廣,有越來越多經營者想了解如何使用 LINE 收單,管理客戶預約!而本篇文章將分享 6 大操作步驟,看完後,你也會知道如何透過 SimplyBook.me 功能,快速打造 LINE 官方帳號預約收單機器人! 經營 LINE 官方
五年前,因為自己有興趣,原本只是利用下班時間學習美甲等服務,但為了有更多時間陪伴小孩,毅然決然挑戰中年轉業契機,正式進入新的職場。這次 SimplyBook.me 很榮幸專訪 沛芮指藝美學 的經營者 Perry,聊聊她的經營心法及數位工具使用,接下來就一起來看看 Perry 的專訪故事吧 :)
肌轉 Fitness Studio 抗疫之路!共同創辦人現身分享! 做為 LINE 外掛市集合作夥伴,SimplyBook.me 很榮幸受邀參與這次 LINE 的直播活動:5 大產業商家抗疫心法,同時也很非常感謝肌轉能代表健身產業出席此活動,以下會幫大家回顧肌轉共同創辦人 — 小蝶 提到的重點內容
吸引更多線上預約!提昇業績的 11 招基本功大公開! 讓客戶透過線上預約完成服務體驗,對公司&企業經營品牌都有正向的效果,在 GetApp 消費者心聲研究中,超過 70% 客戶更喜歡透過線上預約 完成預訂不是沒有原因的!當然,為客戶打造一個專屬且 美觀直覺的線上預約網站 只是第一步,如果你想要獲得更
經過數日優化及調整,SimplyBook.me 日前推出了管理者專用 App,有別於過往在手機裝置中,透過網頁查詢預約資訊,現在經營者也能到 App Store 或是 Google Play 下載專屬應用程式(App),無時無刻管理客戶預約排程!因專注在使用便利性,目前 SimplyBook.me
SimplyBook.me 提供了豐富的客製功能,讓商家能更有彈性的打造專屬預約網站,當然,在選用客製功能時,您可能會遇到一些困難,接下來的日子裡,我們也會開始介紹每個客製功能的用途及特色。 先前我們也分享過很多種 不同類型的客製功能,如:行銷推廣類、預約功能擴充類或網站內容類等,這次介紹的「重新
6 步驟!快速打造 LINE 預約機器人! 因為 LINE 外掛市集的推廣,有越來越多經營者想了解如何使用 LINE 收單,管理客戶預約!而本篇文章將分享 6 大操作步驟,看完後,你也會知道如何透過 SimplyBook.me 功能,快速打造 LINE 官方帳號預約收單機器人! 經營 LINE 官方
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。 以下內容會說明每個設計調整的原因跟
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微調是我社群的一個系列內容,這篇則是提供給訂閱會員的詳細解說版,會說明為何調整的原因跟我的看法,以及原本設計可能有的問題,如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享,歡迎訂閱會員。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
排版微調 VOL.1-詳細解說版 排版微調是我社群的一個系列內容,這篇則是提供給訂閱會員的詳細解說版,會說明為何調整的原因跟我的看法,以及原本設計可能有的問題,如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。
Thumbnail
什麼是 CSS 預處理器 CSS 預處理器是一種工具,使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇,它們通常會提供一些純 CSS 中沒有的功能,例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護,並提高開發效率。 為什麼使用 CSS 預處
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每月會有三篇微調詳解固定分享給訂閱會員,歡迎訂閱。 以下內容會說明每個設計調整的原因跟
Thumbnail
排版微系列調專門分享如何透過一些調整讓設計與排版更好看,並且每張設計都會說明為何調整的原因,以及原本設計可能有的問題。 如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享給訂閱會員,歡迎訂閱。
Thumbnail
排版微調是我社群的一個系列內容,這篇則是提供給訂閱會員的詳細解說版,會說明為何調整的原因跟我的看法,以及原本設計可能有的問題,如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因,如果你看完喜歡,我每週五會固定分享,歡迎訂閱會員。
前言 今天課程要來學習,在 .css 設計樣式後,怎麼透過選擇器,讓 .html 可以有所配對,經過這一步後,便可以開始學習,如何正式設計 .css 了。 選擇器 介紹 還記得上次課程,我們在 .css 檔案中,撰寫的程式碼嗎?讓我們來複習看看: .highlight { co
Thumbnail
排版微調 VOL.1-詳細解說版 排版微調是我社群的一個系列內容,這篇則是提供給訂閱會員的詳細解說版,會說明為何調整的原因跟我的看法,以及原本設計可能有的問題,如果你是設計初學者那這份內容會很適合你,因為會很細節的去講解排版原因。
Thumbnail
如何透過 CSS 來美化和增強文本的可讀性,對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本,包括字型設定、文本排列、裝飾等多方面。
Thumbnail
您對前端有興趣,對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程,瀏覽器私有前綴及處理,開發者對新特性漸進增強,優雅降級處理,Web標準定義、作用等。