如何使用自訂頁面?

透過自訂頁面,我們能用來建立更加靈活的頁面。例如:設計活動頁、商品文案頁、自訂首頁…等。

操作教學

首先我們先進入商店後台 > 介面管理 > 自訂頁面 > 新增

自訂頁面總共分成三個部分:

1.配置
2.設計
3.CSS

配置

配置的左邊有幾個開關,可以自行決定是否要在自訂頁面顯示。開關分別對應的位置可以參考下圖。

配置的右邊,有代稱、標題、描述、狀態 四個欄位。

代稱:用來識別這個頁面的代稱。例如:ollpage-1,那自訂頁面的連結就會是

https://你的網站網址/page/ollpage-1

範例:

https://exttest.ollstore.tw/page/ollpage-1

標題:該頁面的title。會顯示在瀏覽器分頁的地方 和 搜尋引擎的搜尋結果頁所顯示的標題。

描述:此頁面的Meta描述。不會顯示在頁面上,主要是用來設定搜尋引擎的搜尋結果所顯示的描述用。

狀態:是否啟用這個頁面。無論是否有啟用,都能正常設為首頁。
建議要設為首頁的自訂頁面,將狀態設為關閉。以避免首頁跟自訂頁面內容相同,被搜尋引擎視為重複內容,因而降低頁面排名。

設計

設計的左邊有四個單元,分別是標題、內容、圖片、商品單元。(未來會繼續添加新單元),右邊則是設計編輯區。

我們能從這四個單元展開,裡面有不同的子單元。將喜歡的子單元加入到設計編輯區。

標題單元:這個單元內有 H1~H6 子單元,也就是不同大小的標題。

點選左邊的子單元[+]按鈕後,設計編輯區便會增加剛剛加入的單元。我們可以從設計編輯區來預覽效果或利用右邊的上下、編輯、移除的編輯控制按鈕來調整單元的順序與內容。

註:設計編輯區的預覽效果,可能會跟實際頁面呈現的樣式有出入。

內容單元: 裡面有 純文字、HTML 兩個單元。

純文字單元,只能輸入純文字內容。
HTML單元,可輸入文字,改變字體大小、顏色、插入超連結、圖片、嵌入影片、表格…..。

圖片單元:可以加入 1~6欄的連結圖片。(類似首頁廣告圖,但更有變化性)

1欄與2欄圖
3欄與6欄

商品單元:有 最新商品、推薦商品、特惠商品、自訂商品 四個單元。

最新商品、推薦商品、特惠商品,跟首頁內建的效果一樣。但自訂頁面的這三個單元可以通過編輯來改變名稱與數量。

例如:將[最新商品]改為[新品上市],並調整成只顯示5筆最新商品。(最多顯示25筆)

也可以通過自訂商品,加入自己想要顯示的商品,例如當月主打商品,過季特賣商品… (搭配標題單元+自訂商品便能搭配出各種組合)

CSS

我們可以通過CSS來改變樣式。CSS相關教學請參閱入門指南 > 形象篇 > CSS基本入門教學。(內容製作中…)

實際演示

保存後,我們可以點選[檢視]實際查看頁面效果。
範例一:無開啟配置頭部、自訂選單、跑馬燈…
https://exttest.ollstore.tw/page/ollstore-1

範例二:有開啟配置頭部、自訂選單、跑馬燈…..
https://exttest.ollstore.tw/page/ollpage-2

發佈留言