自訂網站外觀

主要是修改網站整體的設計,只要在此修改整個網站都會套用,不需要再一頁一頁修改,對於大型網站非常方便,可以節省很多時間。在此介紹如何修改網站整體設計,如 logo 、頁首、頁尾、整體設計、字體設定等修改。

1.進入自訂

登入後,您可於前台任何一個頁面上方點選自訂(1),或於後台首頁點選點選 (2) ,也可於選單中的 外觀 >自訂(3),即可進入修改整個網站的設計,如 logo 、頁首、頁尾、整體設計、字體、顏色設定等修改。

2.自訂網站功能簡介

通常您只需要使用到頁首或頁尾的功能,其他需要時斟酌使用,請勿變更主題,會導致版面遺失。


  1. 版面:修改網站指定首頁及頁面、文章、彙整頁、側邊欄等版面尺寸等設定。
  2. 頁首:設定Logo、選單等,於每頁最上方的內容。
  3. 頁尾: 設定每頁下方的頁尾內容。
  4. 頁面標題: 進階設定標題功能(提供進階使用,不熟悉請勿使用)。
  5. 顏色&背景: 設定整站的顏色。
  6. 字型:網站字體設定。
  7. 按鈕: 按鈕樣式設定。
  8. 表單欄位:表單樣式設定。
  9. 選單: 設定選單位置、調整順序等。
  10. 小工具:設定側邊欄等小工具。
  11. 商店: 商店通知、目錄、商品圖片、結帳、產品頁面、購物頁面等設定。
  12. 附加的 CSS:可自訂CSS 修改外觀。
  13. Header/Footer scripts: 可於網頁中埋入代碼。

PS.

  • 右圖最下方的三個圖示,可切換電腦、平板、手機預覽 。
  • 在頁面中看到鉛筆的圖示,代表可以直接點選進入設定的捷徑。
  • 設定完成後,點選發布,可套用至整個網站。

3.頁首設計(Logo, 選單等)

頁首是全網站每個頁面的上方位置,分為頂部、主要、底部三欄,您可自由放置內容,點選三欄中任一位置,也可以直接新增頁首項目.

  1. 進入自訂頁面後,點選有鉛筆的圖示,即可進入該項目的編輯模式。
  2. 點選移動圖示,可自行拖曳至您希望置放的位置。
  3. 點選齒輪,可進入編輯該功能(如圖為標題設定) => 標誌設定
  4. 頂欄 是否固定位置、或僅於滾動時顯示及樣式設定。
  5. 主要頁首 是否固定位置、或僅於滾動時顯示及樣式設定。
  6. 底欄 是否固定位置、或僅於滾動時顯示及樣式設定。
  7. 手機的側邊欄位設定。
  8. 頁首 快選設定,可選用預先設計的頁首設定。
  9. 可設定是否為透明標題,可將選單置於頁首主視覺內,擁有更好的空間利用。

4. 網站標誌設定

  1. 點選標誌與網站標籤的 齒輪圖示
  2. 選擇希望顯示的樣式,有純 Logo, Logo + 網站名稱等。
  3. 點選 “選取標誌“的圖片上按一下,可進入媒體庫,選擇自己的 Logo 標誌,或上傳自己的標誌。
  4. 可修改網站標題,預設為網站名稱,通常無需修改。下方可設定是否需要顯示標題。
  5. 可修改網站標語,預設為網站標語,通常無需修改。下方可設定是否需要顯示標語
  6. 繼續往下可看到網站圖示設定,可依需求上傳小圖示。

5. 調整頁首

  1. 點選整個頁首最左方的 齒輪圖示(以修改主要頁首為例)。
  2. 版面中可設定是否要固定於頂部,在滾動到下方瀏覽網站商品時,選單仍會固定於上方,可以隨時操作選單。
  3. 如果啟用於滾動時顯示,則只會於滾動時才會出現頁首,可以看到更多內容。
  4. 如果想修改整個頁首顏色,或是放上背景圖片,增加設計感,可點選樣式,於此設定。
  5. 如果是放置圖片背景,通常可以加上顏色遮罩,讓選單文字較為明顯,同時也能更有質感。

6. 自訂內容(標題或其他內容)於頁首底部

您可能希望在頁首下方也能展示一些內容,您可以自由設定:

  1. 點選頁首底部您想增加內容的位置,會出現選單,或是將左邊可用的項目拉進到您想放的位置即可。
  2. 有很多工具您可以選擇,舉例來說,我們選擇 HTML,來加入標題。
  3. 點選自訂項目上的 “齒輪圖示”,左方會出現編輯框,您可自訂相關內容。
  4. 如果想使用預設的內容變數,請點選 4,選擇需要的內容。
  5. 您可以插入一些變數,他會隨著頁面而顯示,這邊的範例,我們加入標題,您就能看到標題就會顯示出來。
  6. 點選整個頁首底部最左方的 齒輪圖示,以設定相關的顯示方式、樣式、背景等內容