網站編輯器-進階

主題顔色設置

  打開CMS點擊 綫上商店點擊 設計點擊頁簽 主題設定點擊主題右邊的齒輪icon。

 

  在此可以編輯您的網店主題顔色以及主目錄（頁頂導航）。

 

  通過顔色選擇器選擇顔色或者直接輸入顔色代碼可以自訂主題顏色。

 

  編輯完畢後點擊[儲存]。

 

  自訂主題顔色：輸入rgb(0, 0, 0)。

  標題字型&字體大小：這是控制網店商品名稱的字體及大小。

  内容字型&字體大小：這是控制網店menu的字體大小以及商品詳情頁面内容的字體大小。

  頁頂背景顔色：輸入rgb(255, 255, 1)。

  頁頂目錄字顔色：輸入rgb(0, 0, 0)。

  頁頂次目錄背景顔色：輸入rgb(255, 243, 255)。

  搜索欄背景顔色：表示網店搜索欄的背景顔色。

  產品詳情價格背景顔色：輸入#ff0000。

  產品詳情詳情選取SKU顔色：輸入#ff0000。

  加購背景顔色：輸入#dfe2e4。

  加購文字顔色：輸入#ff0000。

  推廣活動背景顔色：輸入#dfe2e4。

  推廣活動文字顔色：輸入#007aff。

  組合商品背景顔色：輸入#dfe2e4。

  組合商品文字顔色：輸入#ff0000。

  關於主題相關的顔色設置效果如下圖。

 

 

公司Logo和圖標

  網店的首頁等地往往需要顯示出公司的Logo和圖標。

  上載公司Logo和圖標的方式如下：

  打開CMS點擊 綫上商店點擊 設計點擊頁簽 Logo及圖標 。

 

  點擊[Browse...]分別上載您的公司logo和網站小圖示點擊[儲存]。

 

[儲存]後，打開網上商店的前臺，可以看到公司LOGO顯示在了左上角。

 

而網站小圖示會顯示在瀏覽器標籤頁的名稱前上。

 

編輯主頁

  在之前的playbook-網站編輯器（初階）中已經製作了一個簡單的主頁，接下來我們繼續介紹編輯主頁的進階方法。

  打開CMS點擊 網上商店點擊 設計點擊頁簽 主題設定 ，在[近期使用]下可以看到您選擇過的網店主題點擊[編輯主頁]打開主頁編輯頁面。

 

  放大/縮小網站編輯器：

    通過選擇上方的百分比來放大/ 縮小網站編輯器，可以更好地觀察主頁整體和細節。

 

  頁面預覽：

    點擊[桌面預覽]可以預覽當前頁面在web當中的顯示效果。點擊旁邊的小三角形，還可以點擊[手機預覽]預覽當前頁面在手機上的顯示效果。[手機預覽]下的下拉框可以選擇預覽打開時顯示的語言。

 

  複製頁面：

    點擊[另存爲]可以複制當前頁面。

 

    輸入複製頁的名稱點擊[儲存]。

 

    複製後您可在「所有分頁」中找到已複制頁。

 

 

元件

  在設計頁面時，需要加入不同的元件。

  當將滑鼠移動到元件上時，元件上會顯示五個藍色的icon。

 

  編輯元件：點擊。

  為元件設定邊距：點擊輸入元件邊距

  刪除元件：點擊。

  鎖定元件：點擊。

  複制元件：點擊。

 

  分段元件：

   通過拖放[分段]元件或點擊[新增分段]可以新增一個分段。

   

    在加入其他元件前，應該先加入分段，然後再拖放其他元件到[分段]中。

    將鼠標移到分段内時，分段右側會顯示一列綠色icon，點擊最上面的對分段設定進行編輯。

 

    選擇分段的背景顏色，也可以留空此処或輸入“transparent”。

    如有需要，可上載背景圖片。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  富文本元件：

    通過[富文本元件]可以加入文字、圖片和影片，還可以在富文本内容插入連結。

 

    網站的實際顯示的富文本内容以及樣式，會與網站編輯器上顯示的富文本内容以及樣式一致，所見即所得。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  圖片元件：

    通過[圖片元件]可以加入圖片。

    上載網頁版及手機版圖片確認后點擊[儲存]。網站編輯器上載了什麽圖片，網店就會顯示什麽樣的圖片。

 

    您還可以為圖片加連結來連結您在Posify創建的頁面，包括品牌、分類、商品以及等。

 

    除了可以連結到在Posify内創建的頁面，也可以自定義URL。例如：可以連結到YouTube頁面。

    直接將鏈接輸入到方框中點擊自定義鏈接點擊右上角[儲存]即可。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  幻燈片元件：

    通過[幻燈片元件]可以加入幻燈片。

 

    上載幻燈片圖片，可以一次上載多張。

 

    同樣的，在幻燈片中也可以為圖片加連結來連結您在Posify創建的頁面。

    開啟「進階設計設定」以編輯進階設計設定。

    其中比較重要的是設置[自動轉頁間隔（秒）]。

 

  商品分類元件：

    通過[商品分類元件]可以展示商品分類。

 

    勾選想要展示的商品分類。

 

    選擇排序方式。可以 按商品價格排序、按英文字母排序、按日期排序 。

 

    選擇顯示模式。可以選擇分頁、幻燈片或者框格。

 

    可以給不同設備設定不同的每頁顯示（商品）數量。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  單件商品元件：

    通過[單件商品元件]可以加入單個商品。

 

    選擇商品。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  Youtube元件：

    通過[Youtube元件]可以加入Youtube視頻。

 

    直接輸入Youtube鏈接。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  Facebook元件：

    通過[Facebook元件]可以加入Facebook專頁。

 

    輸入Facebook頁面鏈接。

 

    選擇頁面類型。可以選擇 只顯示標題、生活時報、訊息或者活動 。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  地點元件：

    通過[地點元件]可以加入地點。

 

    在此處顯示的地點為商家自己設定的地點。關於如何設定和新增地點，請查看一般設定模塊下的playbook-商戶檔案與地點。

    選擇顯示的地點和隱藏的地點。

 

    選擇排序方式，可以選擇 預設順序或者按英文字母順序 。

 

    選擇顯示模式。可以選擇列表、Google地圖或者百度地圖。

 

    可以設定不同設備上顯示不同的列數。

 

    勾選顯示的内容。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  QR Code元件：

    通過[QR Code元件]可以加入二維碼。

 

    有五種不同類型的QR Code可以選擇，分別是：

    自由文本: 輸入任何文本。

    鏈接: 輸入鏈接。

    聯繫人: 輸入聯繫人資訊。

    電話: 輸入電話號碼。

    短信: 輸入電話號碼和短信內容。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  表格元件：

    通過[表格元件]可以加入表格。

 

    此處選擇的表格需要提前預設好。預設方法請看顧客模塊下的playbook-表格管理。預設好之後表格將會顯示在下圖的下拉框選項中。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  圖標元件：

    通過[圖標元件]可以加入圖標。

 

    選擇合適的圖標，系統提供了多種圖標可供選擇。

 

    通過顔色選擇器選擇圖標的顔色，也可以直接輸入顔色代碼。

 

    輸入圖標尺寸。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  分享元件：

    通過[分享元件]可以加入分享按鈕。

 

    輸入分享文本和分享鏈接。

 

    選擇分享按鈕形狀，可以選擇圓形或方形，但選擇圓形將禁用標註和數量。

    注意：這個功能主要在手機內使用，手機需要安裝相應的APP才可以跳轉鏈接到對應的APP中去。

 

    選擇是否顯示標註和數量。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

    啓用需要顯示的按鈕。

 

  博客詳情元件：

    通過[博客元件]可以加入博客。

 

    選擇要顯示的博客。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  博客列元件：

    通過[博客列元件]可以加入博客列。使用該元件前需要先建立博客，如果還沒有建立博客，請網上商店模塊下的playbook-網站博客管理。

 

    選擇博客組、商品分類以及品牌。

 

    選擇顯示模式，可以選擇 分頁、幻燈片或框格 。

 

    可以設定在不同設備上每頁顯示（博客）數量不同。

 

    選擇顯示模板。

 

    選擇排序方式，可以選擇 按日期排序(由新至舊)或者按日期排序(由舊至新) 。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  品牌元件：

    通過[品牌元件]可以添加某品牌的商品列。

 

    勾選需要展示的品牌。

 

    選擇排序方式，可以選擇 默認排序、按商品價格排序、按英文字母排序、按日期排序 。

 

    選擇顯示模式，可以選擇 分頁、幻燈片或者框格 。

 

    可以設置在不同設備上不同的每頁顯示（商品）數量。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  標簽元件：

    通過[標簽元件]可以在頁面内添加標簽（您在Posify創建的頁面）。

 

    選擇顯示模式， 水平或者垂直 。

    點擊[新增標簽]，可以新增標簽。

 

    輸入[標簽標題]，並選擇[自定義頁面]，即該標簽下顯示的頁面内容。

 

    在網店中，點擊不同的標簽顯示設定的對應的頁面内容。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  分類組元件：

   通過[分類組元件]可以選擇分類在您的網站顯示。

 

    勾選想要顯示在頁面上的分類。

 

    選擇顯示模式，可以選擇 樹狀、框格或者幻燈片 。

 

    選擇排序方式，可以選擇 默認排序、按英文字母排序(A-Z)或者按英文字母排序(Z-A) 。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  品牌組元件：

    通過[品牌組元件]可以選擇品牌在您的網站顯示。

 

    勾選想要顯示在頁面上的分類。

 

    選擇顯示模式，可以選擇 樹狀、框格或者幻燈片 。

 

    選擇排序方式，可以選擇 默認排序、按英文字母排序(A-Z)或者按英文字母排序(Z-A) 。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  按鈕元件：

    通過[按鈕元件]可以在網站上添加按鈕，其中按鈕的文字和圖標都可以自定義設定。

 

    點擊[從這裏選擇預設按鈕]可以直接選用系統預設的模板按鈕。

 

    點擊選擇模板按鈕點擊右下角[使用]。

 

    如果不使用模板，也可以自定義文字和圖標。

    在[圖標及文字]下編輯按鈕文字、字體大小和顔色，並選擇按鈕圖標。

 

    在[背景及效果]下選擇背景顯示和鼠標懸停的顯示方式，[背景顯示]指的是未做任何操作時按鈕顯示的顔色/圖片，[鼠標懸停]指的是鼠標懸停在按鈕上時顯示的顔色/圖片。可以選擇 單色、漸變色或者背景圖片 。

    單色：按鈕的背景只有單一一種顏色。

    漸變色：按鈕的背景有一個漸變的效果，需要設置漸變開始時以及漸變結束時的兩種顏色。

    背景圖片：上傳圖片作爲按鈕背景。

 

    在[形狀及邊框]下設置按鈕的寬度、高度以及邊距。

 

    設置邊框的圓角效果，輸入的數字越大，邊框的圓角效果越大，角越圓。

    設置邊框的顔色以及寬度。

    設置按鈕的對齊方式，可以選擇靠左對齊、靠右對齊或者居中。

 

    設定按鈕連結到的位置，可以是Posify的内建頁面，包括網站的首頁、商家自定義的頁面以及商品頁面等。或者將外部的鏈接複製到[連結]的輸入框中，選擇[自定義鏈接]也可以連結到外部網站。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  下載中心元件：

    通過[下載中心元件]可以在頁面中添加一個下載中心，在下載中心裏顯示的文件可以支持顧客下載查看。

 

    此處可以下載的文件需要在 商品-商品相關設定-資料夾設置 中上載，具體上載方法請看商品模塊的playbook-資料夾設置。

    勾選想要顯示的資料夾並填寫一頁顯示的文件個數。

 

    開啟「進階設計設定」以編輯進階設計設定。

 

  手風琴元件：

    通過[手風琴元件]添加一段可以打開/收起的富文本。

 

    輸入富文本内容，如果默認[手風琴元件]為打開狀態，勾選[内容默認打開]。

 

    開啟「進階設計設定」以編輯進階設計設定。