在簡短使用指南中,介紹如何從怡和綠電超商 Webflow網站編輯基本元素(即顏色、字體、CMS 內容等)的所有基礎知識
如果您對 Webflow 不是很熟悉,建議您參訪Webflow University的 Webflow 101 速成課程,因為它將教您關於Webflow啟動和運行,以及解決你可能遇到的問題。
最好在 Chrome 或 Safari 網絡瀏覽器中使用 Webflow Editor。
請記住,每次修改網站內容,必須點選發布按鈕 Publish ,網站才能使更改的內容在網站上生效。
網站編輯器通常有兩種編輯面板,以下介紹三種進入編輯頁面的方法:
1.從網站後台直接點選 Open site 進入編輯器
進入編輯器後,請務必將左上角的模式改選為 Build,再進行內容編輯,
Design模式下編輯網站可能會破壞網站現有版型設計。
2.從網站後台的項目菜單...訪問編輯器
進入編輯器後,可透過下方編輯欄進行編輯。
此編輯面板較為簡潔明瞭,且能確保不會導致頁面版型遭到破壞,
與其他新增編輯者的頁面操作方式一致,詳細頁面編輯操作請參考PDF。
3.由 www.yihoget.com.tw?edit 網址直接進入
此進入方法為所有編輯人員皆可使用,填寫下方登入欄位,即可進行編輯。
此編輯面板較為簡潔明瞭,且能確保不會導致頁面版型遭到破壞,
詳細頁面編輯操作請參考PDF。
靜態頁面的內容在建立時就已經確定,並且每次用戶訪問時內容都不會變化。
內容基本上固定不變,也因編輯修改較為複雜,通常不建議隨意針對靜態頁面進行大幅度的版面調整。
內容主要包括主頁、關於、服務內容、聯絡我們及公司治理等資訊頁面。
從左側邊欄導航器中可以輕鬆辨別何為「靜態頁面」,即顯示為灰白色文字標題。
如果你想編輯此類內容,只需雙擊它,即可直接在此處進入此頁面進行編輯。
編輯欄位中的Pages中,Static Pages即顯示所有的靜態頁面,按右下方的Next可看到更多靜態頁面。
由於網頁建置的靜態頁面頁面繁多,建議透過右上方的Search pages搜尋欄位輸入欲編輯的頁面標題,以快速找到該靜態頁面項目。
網站是一個動態的平台,時常需要更新和修改資訊。然而,對網站的內容進行新增或修改,需要有一定程度的網頁設計或程式設計的專業知識。
因此,需要可以更有效且方便針對動態頁面變更的工具,讓編輯者可以更輕鬆地管理網站內容。這就是動態網頁和內容管理系統(Content Management System,CMS)的重要性。
CMS編輯頁面在主要編輯器與簡易編輯器中皆分為兩種形式進入編輯頁面:
目前怡和綠電超商網站需要編輯的CMS頁面目前僅有【文章消息s Template 】。
進入【文章消息s Template】,即可在上方快速選點選欲進入的消息文章頁面,進行頁面內容更改。
後續會需要新增內容的項目主要以【PDF下載檔案】、【綠電交易年月報表】、【文章消息】及【電廠實績】為主。
Static Pages欄位以下的資訊皆為動態資訊欄位,但細項繁雜,不易找尋欲編輯頁面,不建議透過此方法找尋動態頁面。
Collections選項裡的項目為動態頁面分類,分類清晰,找尋快速,通常欲進行動態網頁資訊的編輯由此進行操作。
・欲修改、新增、刪減 檔案分類名稱、消息分類名稱,請點選【分類s】
・欲更換、新增、刪減 PDF檔案,請點選【PDF下載檔案s】
・欲修改、新增、刪減 年月報表資訊,請點選【綠電交易年月報表s】
・欲修改、新增、刪減 公益、新聞、知識補給、產業新訊等文章資訊,請點選【文章消息】
・欲修改、新增、刪減 電廠實績分類項目,請點選【電廠實績分類s】
・欲修改、新增、刪減 電廠實績資訊,請點選【電廠實績s】
每次進行更改時,最好轉到視口頂部導航中,並確保目前視窗為Desktop桌面,全部修改完後再進入其他尺寸的視窗進行預覽。
如果只是進行文字內容更改或圖像更換,並且不刪除任何區塊,則不需要進行其他尺寸視窗的預覽。
但是,如果需要自訂模板版型、設計排版編輯類或建立新區塊,那需要不斷進入不同尺寸裝置,進行編輯、版型修改,以確保設計皆呈現適當的畫面。(不建議自行修改或新增內容區塊,如有需要修改請洽詢)
如果您想自訂在任何社群平台(如 Facebook、X 等)分享網站時顯示的標題、描述和圖像,您可以前往左側邊欄中的頁面部分,找尋欲修改的頁面,點擊小設定圖示,已進行SEO meta 元標題、Open Graph 標題、描述以及 Open Graph 圖像的編輯。
這些頁面設置對於 SEO 搜尋引擎功能及分享連結非常重要。
頁面標籤在搜索引擎中的可見性和搜尋性能方面起著非常重要的作用,它能告訴搜索引擎該頁面內容是關於什麼&引導用戶將點擊什麼標題來訪問該頁面。
因此請務必確認使用的標題中是人們常用來描述你的業務的關鍵字詞。
描述可添加關於頁面的詳細信息(大約 150 個字符)。
若任何文本在預覽中被截斷,需修剪內容長度。
當Settings輸入完後,點擊上方的 Save , 當編輯內容全部完成,在點擊右上方的 Publish ,即可立即更新網頁資訊。
如果出現問題,例如,如果您不喜歡網站的去向,或者如果您出於任何原因只想轉到以前的版本,您隨時可以轉到備份部分。
您可以在左側邊欄的「設定」部分中找到Backups (可能會隨著系統更新,設定按鈕位置會有所不同),點選即可看到所有自動或手動備份。只需單擊即可恢復到舊備份。
以下是新增與編輯人員的詳細操作:
1.進入專案設定
登入編輯器後,選擇左上方的導覽器,進入該專案的「Site Settings」。
2.找到 Site access 頁籤
在專案設定頁面上,點選左側的「Site access」標籤。
3.邀請新的人員
在 Site access 頁面,點選「Add to Editor」並輸入要邀請的人員的電子郵件地址。
4.發送邀請
點選「Invite」按鈕,系統會自動寄送邀請信至對方信箱中。
受邀者接受邀請後,即可開始編輯。
請注意!編輯者需至:
www.yihoget.com.tw?edit 網址進行內文編輯。
此外,網站至多可新增三名共同編輯者。
編輯器允許多人同時編輯靜態和動態頁面。
只有一個人可以同時在設計器中工作,但多人可以同時在編輯器中工作。
如果兩個人同時編輯相同的內容,以最後發佈的內容為主,因此需要與團隊協調編輯時間。
當客戶通過網站提交表單時,提交的數據將被發送到表單通知設置中指定的電子郵件以及匯集到Forms Setting中。
以下是關於如何處理 表單提交資料(Form Submission Data) 的操作說明,以方便查看、管理和導出訪客提交的數據:
1.進入專案設定
登入編輯器後,選擇左上方的導覽器,進入該專案的「Site Settings」。
2.找到 Forms 頁籤
在專案設定頁面上,點選左側的「Forms」標籤。
3.設定提交表單收取信箱
設定欲收到表單通知的信箱,如有多位信箱需收到客戶表單,可在「Send form submissions to」欄位中,
以「, 」英文逗號+空白鍵+其他收件信箱 ( 例:OOO@gmail.com, OOO@gmail.com )
4.查看提交表單
在 Forms 頁面,下拉至「Form submission data」。
資訊網站中已設定兩種表單,「Contact form 業務聯絡表單」及 「Hr contact form 人才招募表單」。
5.導出表單資訊
點選「Export Data」按鈕,系統會自動寄送CSV檔案至yihogetweb@gmail.com信箱中。
當頁面暫時不想讓訪客瀏覽時,可將頁面導致404搜尋頁面:
1.左方頁面編輯欄位
滑鼠指向欲隱藏頁面,並點選齒輪標示,及跳出設定卡。
將設定卡右上方的藍色選項" Save "更改為“ Save as draft ”,
再點選“ Publish ”發布頁面即可。
2.點選右上方Publish
發布頁面,即完成隱藏頁面(導向404頁面)。
4.查看提交表單
在 Forms 頁面,下拉至「Form submission data」。
資訊網站中已設定兩種表單,「Contact form 業務聯絡表單」及 「Hr contact form 人才招募表單」。
5.導出表單資訊
點選「Export Data」按鈕,系統會自動寄送CSV檔案至yihogetweb@gmail.com信箱中。