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

更新於 發佈於 閱讀時間約 5 分鐘
SimplyBook.me 提供了豐富的客製功能,讓商家能更有彈性的打造專屬預約網站,當然,在選用客製功能時,您可能會遇到一些困難,接下來這篇文章,我們將分享如何使用 CSS 客製功能,調整網站顯示字型!

SimplyBook.me 除了支援多種不同的客製功能外,也提供超過 15 個以上的範本,幫助經營者打造更符合品牌風格的一站式官網,每個範本都能從設計不同的預約按鈕顏色、官網主視覺等,當然也能透過 CSS 語法進一步客製。

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

當然,SimplyBook.me 提供的主題及設計範圍已具備足夠的完整性,但您可能需要一些些微調的內容,如:調整字體顯示、調整某特定區塊的顏色顯示,以便讓您的品牌視覺呈現的更完整。而透過 CSS 客製功能將維護您的線上品牌,讓透過社群平台瀏覽預約項目的客戶能感受到品牌一致性。

raw-image
raw-image

如上方兩張圖片呈現,左邊為原本的範本視覺,透過 CSS 設計,您可以客製範本顯示的風格,如:調整 Logo 顯示大小、調整預約頁面按鈕的擺放位置,調整特定區域的顏色、調整字體等,藉此打造一致的品牌視覺。

大部分的調整都會需要 CSS 程式語法來自訂,因此會需要找到適合的 CSS 程式設計師來協助調整,而若您只需要調整網頁顯示字型,我們會在本篇文章中,提供更完整的操作說明!

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

raw-image

在沒有 CSS 設計師且想調整字型的情況下,可以透過 Google Fonts 的整合來調整網頁字體,首先先到 Google Fonts 官網挑選適合的字體:

raw-image

挑選後,先點擊畫面右上方的按鈕,展開右側欄位,接著挑選喜歡的字體,點擊「+Select this style」。

raw-image

您挑選的字體會被自動加入 Selected family,接著點擊 Embed 選項,然後再選擇 @ import 就會看到對應的程式碼。

raw-image

挑選完字體後,回到 SimplyBook.me 後台,展開左側列表 → 點擊客製功能 → 在客製功能列表 → 選擇並啟用 CSS 設計。

raw-image

最後就是將字型的程式碼加入 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 徹底重整瀏覽器,就能看到更改後的字型喔!

raw-image
raw-image

字體調整前&調整後如上方圖片顯示,有需要調整字體的店家可以到 Google Fonts 挑選適合的字體,再透過上面的文章教學來更換喔!

嘿,數位的世界變化非常快,別讓競爭對手搶得預約線上化的先機,立即到 SimplyBook.me 註冊,免費試用最完整的功能,打造專屬品牌風格的線上預約網站👍 SimplyBook.me 提供專人顧問諮詢,若有任何操作問題,歡迎來信至 taiwan@simplybook.me 或是私訊 SimplyBook.me 粉絲專頁,將有專人為您提供客製化的服務。

留言
avatar-img
留言分享你的想法!
avatar-img
Haoyi Fan的沙龍
27會員
165內容數
Haoyi Fan的沙龍的其他內容
2023/07/24
在未來的行銷趨勢中,AI 行銷工具絕對是扮演著關鍵的角色,透過活用這些工具來幫助您為品牌帶來更多銷售機會、提昇工作生產力,改善客戶體驗等,都能直接或間接的影響經營成效。現在每天都會有不同的行銷 AI 工具湧現,如果您有興趣使用 AI 工具,SimplyBook.me 會在本文為您推薦 5 個實用的
Thumbnail
2023/07/24
在未來的行銷趨勢中,AI 行銷工具絕對是扮演著關鍵的角色,透過活用這些工具來幫助您為品牌帶來更多銷售機會、提昇工作生產力,改善客戶體驗等,都能直接或間接的影響經營成效。現在每天都會有不同的行銷 AI 工具湧現,如果您有興趣使用 AI 工具,SimplyBook.me 會在本文為您推薦 5 個實用的
Thumbnail
2023/07/11
對於服務業經營者而言,除了平常要打理店內大小事外,還要經營數位通路,以接觸更多潛在消費者,在營運成本和人力資源有限的情況下,如何透過導入數位工具來提升經營效率,以成為所有經營者的重要課題。 因應經營者的不同需求,也有不同類型的系統,像是:會員管理、行銷推廣或社群規劃等,而本篇文章則會以線上預約系統
Thumbnail
2023/07/11
對於服務業經營者而言,除了平常要打理店內大小事外,還要經營數位通路,以接觸更多潛在消費者,在營運成本和人力資源有限的情況下,如何透過導入數位工具來提升經營效率,以成為所有經營者的重要課題。 因應經營者的不同需求,也有不同類型的系統,像是:會員管理、行銷推廣或社群規劃等,而本篇文章則會以線上預約系統
Thumbnail
2023/06/12
開店創業一直是許多人的夢想甚至是人生目標,但實際開始後,卻並非外界看到的風光明媚,背後面對的問題及辛酸往往不為人知!SimplyBook.me 將為規劃要開設服務業相關品牌的經營者,分享完整的開店攻略,並推薦適合的數位工具,幫助您在開業前可以做好更萬全的準備,以面對未知的挑戰,朝成功開店的方向前進!
Thumbnail
2023/06/12
開店創業一直是許多人的夢想甚至是人生目標,但實際開始後,卻並非外界看到的風光明媚,背後面對的問題及辛酸往往不為人知!SimplyBook.me 將為規劃要開設服務業相關品牌的經營者,分享完整的開店攻略,並推薦適合的數位工具,幫助您在開業前可以做好更萬全的準備,以面對未知的挑戰,朝成功開店的方向前進!
Thumbnail
看更多
你可能也想看
Thumbnail
本文探討了洗鞋業中的創新趨勢:線上預約系統。文章介紹了ezPretty和Google線上預訂服務如何提供快捷、個性化的洗鞋服務。強調了從商家角度,結合環保和創新策略以提升服務品質。最後,推薦ezPretty線上預約系統,展現其在提高業務效率方面的優勢。
Thumbnail
本文探討了洗鞋業中的創新趨勢:線上預約系統。文章介紹了ezPretty和Google線上預訂服務如何提供快捷、個性化的洗鞋服務。強調了從商家角度,結合環保和創新策略以提升服務品質。最後,推薦ezPretty線上預約系統,展現其在提高業務效率方面的優勢。
Thumbnail
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
Thumbnail
在2-1已和大家介紹過,上、下章和回目錄的按鈕,寫作Blogger和一般Blogger另一個不同,大概就是目錄。同樣由於是個人創作的部落格,不可能會有專屬手機APP,目錄最好也是能夠,自動調節成合適的大小。 同樣是編輯CSS和利用無序清單元素的<li>就能辦到,而且語法也相差不大。同樣要先說明
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
寫作Blogger和一般Blogger最大的不同,就是有無上、下章和回目錄的按鈕了。又由於是個人創作的部落格,不可能會有專屬手機APP,這些按鈕最好是能夠,自動調節成合適的大小。 那麼會不會很難呢?其實並不難,一樣是編輯CSS就能辦到,這次會利用到的,還有無序清單元素的<li>。但要先說明的是
Thumbnail
數位行銷的方式有許多種,除了廣告投放、社群行銷、網紅行銷外,也有越多越來服務業品牌,開始透過 SEO(搜尋引擎優化)來經營內容,以獲得更多搜尋流量。而就長遠經營的角度來看,不僅所需成本降低,在透過不斷的累積內容及優化關鍵字的情況下,內容行銷絕對是每個企業品牌獲得流量的重要利器,更是能勝出潛在競爭對手
Thumbnail
數位行銷的方式有許多種,除了廣告投放、社群行銷、網紅行銷外,也有越多越來服務業品牌,開始透過 SEO(搜尋引擎優化)來經營內容,以獲得更多搜尋流量。而就長遠經營的角度來看,不僅所需成本降低,在透過不斷的累積內容及優化關鍵字的情況下,內容行銷絕對是每個企業品牌獲得流量的重要利器,更是能勝出潛在競爭對手
Thumbnail
站內優化涉及網站內部的所有相關排名因素,例如:標題、內容、圖片、用戶體驗…等,用於網站和內容的相關原則都屬於這個範疇,目的是使網站其對搜尋引擎更加友好。瞭解了影響站内優化的因素,現在來拆分,如何做好站内優化!
Thumbnail
站內優化涉及網站內部的所有相關排名因素,例如:標題、內容、圖片、用戶體驗…等,用於網站和內容的相關原則都屬於這個範疇,目的是使網站其對搜尋引擎更加友好。瞭解了影響站内優化的因素,現在來拆分,如何做好站内優化!
Thumbnail
SimplyBook.me 活用秘訣分享,因 SimplyBook.me 提供多種不同的預約網站範本,且每個範本的圖片規格皆不大相同,今天要為經營者介紹,在選定預約範本後,如何找到適合的圖片上傳規格,並在預約網頁中加入適合且符合品牌風格的視覺! SimplyBook.me 線上預約排程系統,除了幫助
Thumbnail
SimplyBook.me 活用秘訣分享,因 SimplyBook.me 提供多種不同的預約網站範本,且每個範本的圖片規格皆不大相同,今天要為經營者介紹,在選定預約範本後,如何找到適合的圖片上傳規格,並在預約網頁中加入適合且符合品牌風格的視覺! SimplyBook.me 線上預約排程系統,除了幫助
Thumbnail
SimplyBook.me 提供了豐富的客製功能,讓商家能更有彈性的打造專屬預約網站,當然,在選用客製功能時,您可能會遇到一些困難,接下來這篇文章,我們將分享如何使用 CSS 客製功能,調整網站顯示字型! SimplyBook.me 除了支援多種不同的客製功能外,也提供超過 15 個以上的範本,幫助
Thumbnail
SimplyBook.me 提供了豐富的客製功能,讓商家能更有彈性的打造專屬預約網站,當然,在選用客製功能時,您可能會遇到一些困難,接下來這篇文章,我們將分享如何使用 CSS 客製功能,調整網站顯示字型! SimplyBook.me 除了支援多種不同的客製功能外,也提供超過 15 個以上的範本,幫助
Thumbnail
在網路蓬勃發展的數位時代,大多數人都已習慣透過「搜尋」來找到「解答」,像是使用 Google 搜尋資料後,到店家的官網查看資訊,進而完成消費等。從另一個角度來看,如果經營者能因應搜尋引擎演算法的特性,將網站效益最大化,提昇搜尋結果排名,那無疑是增加更多曝光機會、觸及潛在客戶的最好選擇! 在先前分享
Thumbnail
在網路蓬勃發展的數位時代,大多數人都已習慣透過「搜尋」來找到「解答」,像是使用 Google 搜尋資料後,到店家的官網查看資訊,進而完成消費等。從另一個角度來看,如果經營者能因應搜尋引擎演算法的特性,將網站效益最大化,提昇搜尋結果排名,那無疑是增加更多曝光機會、觸及潛在客戶的最好選擇! 在先前分享
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News