用 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
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
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 搜尋資料後,到店家的官網查看資訊,進而完成消費等。從另一個角度來看,如果經營者能因應搜尋引擎演算法的特性,將網站效益最大化,提昇搜尋結果排名,那無疑是增加更多曝光機會、觸及潛在客戶的最好選擇! 在先前分享
Thumbnail
先前 SimplyBook.me 有介紹過如何利用 API 客製功能啟用,在 WordPress 加入 SimplyBook.me 預約外掛,而今天要介紹的是更簡單的方式,來幫助商家快速的在 WordPress 加入線上預約外掛! 在官網或 WordPress / Wix 加入預約外掛的好處是?
Thumbnail
先前 SimplyBook.me 有介紹過如何利用 API 客製功能啟用,在 WordPress 加入 SimplyBook.me 預約外掛,而今天要介紹的是更簡單的方式,來幫助商家快速的在 WordPress 加入線上預約外掛! 在官網或 WordPress / Wix 加入預約外掛的好處是?
Thumbnail
每位網站站長,都希望套用優雅和專業的網站字形 為自己新建立的部落格或網站 套上獨特的中文字形 換走醜陋的【新細明體】 這點困擾很多新手站長 我們以最多人使用的 WordPress 為例 不需要學習 CSS 語法 透過套用 WordPress 的字形外掛 即可以輕鬆地變換網站的字形
Thumbnail
每位網站站長,都希望套用優雅和專業的網站字形 為自己新建立的部落格或網站 套上獨特的中文字形 換走醜陋的【新細明體】 這點困擾很多新手站長 我們以最多人使用的 WordPress 為例 不需要學習 CSS 語法 透過套用 WordPress 的字形外掛 即可以輕鬆地變換網站的字形
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News