網站主要頁面的創建與編輯

當你的觀眾來到你的網站時，對你網站的第一個印象就是你的網站主題和網站首頁，接著它們會瀏覽你網站的其它頁面及文章等等..。

因此，除了提供有價值的文章內容外，好的網頁主題設計將可吸引觀眾的目光、讓他們喜歡你的網站氛圍，並有助於你留住你的觀眾。同時，這也可以大大的提升你的網站在 Google 搜尋引擎上的排名。

接下來的教學，將以 Thrive Architect 外掛進行演示 (新增頁面)。如果你還沒完成 Thrive Architect 外掛的安裝，請先回到上一個課程進行安裝。

課程摘要
 
1. 創建網站的主要頁面
2. 主要頁面基本設置
2.1 網站首頁與文章頁面設置
2.2 創建網站上的主選單: 頁首選單 & 頁尾選單
3. 使用 Thrive Architect 編輯網站主要頁面
3.1 編輯 "網站首頁" 頁面 - 套用 Thrive Architect 頁面模板
3.2 創建 "關於我們" 頁面
3.3 創建 "隱私權條款" 頁面
3.4 創建 "聯絡我們" 頁面


1. 創建網站的主要頁面

  • 網站首頁
  • 聯繫我們
  • 最新消息 (文章)
  • 隱私權條款
  • 進入 WordPress 控制面板頁面，將游標移到頁面，單擊新增頁面標籤。
WordPress 新增頁面
  • 創建一個名為“網站首頁”的頁面。 

此頁面將被設定為網站首頁 (主頁)，依照個人需求，你可以製作一個專屬首頁，也可以用 "公司介紹" 或 "關於我們" 或 "購物網站首頁" 來當成網站首頁。

  1. 1
    輸入名稱，如“網站首頁”。
  2. 2
    然後單擊 “發佈” 按鈕發佈此頁面。
  3. 3
    接著，單擊 WordPress 圖標， 重回 WordPress 控制面板頁面。
WordPress網站首頁- Thrive Architect
  • 重複上述 1-3 步驟，創建另外四個頁面: 聯繫我們、關於我們、"隱私權條款"、最新消息 (文章)。

2. 主要頁面基本設置

2.1 網站首頁與文章頁面設置

  • 進入 WordPress 控制面板頁面，將游標移到左側，找到並點擊 "設定/閱讀"，在 "網站顯示內容" 中，點選 “靜態頁面”。 
  • 在 "靜態首頁" 欄中，選取先前創建的 "網站首頁"。(觀眾輸入你的網域後進來網站的第一個頁面) 
  • 在 "文章頁面" 欄中，選取先前創建的 "文章"。(文章發表後皆會在此頁面呈現) 
  • 然後單擊下方的 “儲存設定” 按鈕。 
WordPress網站首頁設定-min

2.2 創建網站上的主選單: 頁首選單 & 頁尾選單

  • 進入 WordPress 控制面板頁面，將游標移到外觀/選單，然後單擊 "選單" 標籤。
主選單 Primary Menu
”

主選單 (Primary Menu)  : 此選單會在頁首呈現，觀眾可以輕鬆地在你的網站上找到內容。

  • 建立主選單 (Primary Menu): 頁首選單 (Header Menu)
  1. 1
    單擊 "建立選單" 。
  2. 2
    在 "選單名稱" 欄中，填入 "主選單"
  3. 3
    勾選 "Primary Menu" 選項 。
  4. 4
    單擊 "建立選單" 按鈕。
主選單 Primary Menu 2-

接下來，添增主選單頁面：

  1. 1
    單擊 "檢視全部" 。
  2. 2
    將上個步驟建立的四個網頁 (網站首頁、最新消息 (文章)、關於我們、聯絡我們)，勾選起來。
  3. 3
    單擊 "新增至選單" 按鈕。
  4. 4
    勾選 "Primary Menu" 選項 。
  5. 5
    單擊 "儲存選單" 按鈕。
主選單 Primary Menu 3
  • 建立另一個主選單: 頁尾選單 (Footer Menu)
  1. 1
    單擊 "建立選單" 。
  2. 2
    在 "選單名稱" 欄中，填入 "頁尾選單 (Footer Menu)"
  3. 3
    單擊 "建立選單" 按鈕。
footer menu

接下來，頁尾選單 (Footer Menu) 頁面：

  1. 1
    將上個步驟建立的隱私權條款頁面 ，勾選起來。
  2. 2
    單擊 "新增至選單" 按鈕。
  3. 3
    單擊 "儲存選單" 按鈕。
footer menu 2
”

頁尾選單 (Footer Menu) ：此選單會在頁尾呈現，除了隱私權條款頁面，你也可以將公司政策頁面、地址以及聯絡方式放置於此。


3. 使用 Thrive Architect 編輯網站主要頁面

3.1 編輯 "網站首頁" 頁面 - 套用 Thrive Architect 頁面模板

  • 回到 WordPress 控制面板頁面，點擊進入"頁面/全部頁面"。
  • 點擊 "網站首頁" 裡的 "Edit with Thrive Architect" 按鈕。
編輯首頁 Thrive Architect
  • 選擇已經製作好的頁面模板，點擊進入"Pre-built Landing Page"。
編輯首頁 Thrive Architect
  • 選擇你想呈現的頁面模板，點擊套用。
編輯首頁 Thrive Architect

如果你想要重新選擇其它的頁面模板的話，可以依照下面的步驟重新選擇後開始編輯：

  1. 1
    點擊此圖標可以重新選取樣板。
  2. 2
    點擊此圖標可以展開編輯區塊，你可以利用拖拉的方式增加、編輯你想要的功能區塊。
編輯首頁 Thrive Architect
”

依照個人需求，你可以使用任何頁面當網站主頁，例如："公司介紹" 或 "關於我們" 或 "購物網站主頁"。


3.2 創建 "關於我們" 頁面

  • 回到 WordPress 控制面板頁面，進入"頁面/全部頁面"。
  • 點擊 "關於我們" 裡的 "Edit with Thrive Architect" 按鈕。
關於我們1
  •  點擊 "Normal Page" 。
關於我們2
  •  點擊 " + " 已展開功能區塊列表。
  •  將你想使用的編輯區塊，利用拖方的方式，放置於頁面編輯區、開始編輯你的內容。
關於我們3


3.3 創建 "隱私權條款" 頁面

  •  回到 WordPress 控制面板頁面，進入"頁面/全部頁面"。
  •  點擊 "隱私權條款" 裡的 "Edit with Thrive Architect" 按鈕。
隱私權條款1
  •  點擊 " + " 已展開功能區塊列表。
  •  將文字編輯區塊，利用拖方的方式，放置於頁面編輯區、開始編輯你的內容。
隱私權條款2

你可以採用此模板：隱私權條款範本文件下載


3.4 創建 "聯絡我們" 頁面

  •  回到 WordPress 控制面板頁面，進入"頁面/全部頁面"。
聯絡我們
  •  點擊 "聯絡我門" 裡的 "Edit with Thrive Architect" 按鈕。
聯絡我們2
  •  選取左邊欄位，並點擊 "Normal Page" 。
聯絡我們3
  •  點擊 "+" 符號已展開功能區塊列表。
  •  在上方搜尋欄位，輸入 "Contact Form" 以搜尋該區塊。
聯絡我們4
  • 找到 "Contact Form" 區塊，按住滑鼠左鍵不放，將它拖曳至 "聯絡我們" 下方之區塊中。
聯絡我們5
  • 接著會彈出需多模板 (Templates) 區塊，選擇左邊欄位的 "Contact Form" 標籤，點擊後再選擇 "Contact Form 02"。(這裡以 "Contact Form 02"為範例，你可以選擇你想要的模板套用)
聯絡我們6
  • 編輯 "聯絡我們" 表格
  1. 1
    點擊一下模板表格區塊，這時左邊會出現編輯區塊。
  2. 2
    點擊一下 "Name" 編輯圖標 (如下)，將 Name 改成中文。
  3. 3
    點擊一下 "Email" 編輯圖標 (如下)，將 Email 改成中文。
  4. 4
    點擊一下 "Textarea" 編輯圖標 (如下)，將 Message 改成中文。
聯絡我們 8-min

將 Name 改成中文:

聯絡我們9-min

將 Email 改成中文

聯絡我們10-min

將 Message 改成中文

聯絡我們11-min

將 Send message 按鈕，改成中文

  • 點擊一下 "Send message" 按鈕，此時左邊會出現編輯欄位。
  • 點擊一下 "Edit From Element" 按鈕。
聯絡我們12-min
  • 點擊一下 "Send message" 按鈕，此時就可以修改文字成中文了。
  • 修改完成後，點擊一下 "Done" 按鈕。
聯絡我們13-min

設定 Email

當有人訪問此頁面並向你提交消息時，你就會收到電子郵件；同時系統也會自動回信給提交訊息者。

  1. 1
    點擊一下模板表格區塊，這時左邊會出現編輯區塊。 
  2. 2
    點擊 "Add Connection" 按鈕。
  3. 3
    在" Connection" 欄位裡選取 Email 選項。
  4. 4
    選擇 "Send email from this site" 選項。
  5. 5
    點擊 "Compose Email" 按鈕。
聯絡我們14
  1. 1
    輸入你的電子郵件地址。  
  2. 2
    打開 “Send confirmation email to the user that submitted the form” 圖標。
  3. 3
    然後，單擊 “Save and Apply” 按鈕。
聯絡我們15
  • 輸入你想回覆給寄件者的信件抬頭及內容。
  • 點擊 “Save and Apply” 儲存。
聯絡我們16


增加隱私權條款

有鑑於目前對於「個人資料」的保護有著愈來愈嚴格的規範。因此，在網站上增加《隱私權條款》頁面，除了顯示網站擁有人的責任感之外，還可以突顯網站的專業形象。

  1. 1
    點擊 "+ Add new" 圖標。 
  2. 2
    選擇 "GDPR Checkbox"。
  3. 3
    取消 "Email" 勾選。
  4. 4
    點擊 "APPLY" 按鈕。
聯絡我們17 GDPR


將 GDPR 條款改成中文版隱私權條款

  • 點擊 "Edit Form Elements" 按鈕。
聯絡我們18 GDPR
  1. 1
    點擊此文字框即可進行修改。參考條文內容如下: 我同意提供以上的個人資料， 以便通過電子郵件接收貴網站提供的訊息及資料。[非經您書面同意，本網站不會將個人資料用於其他用途。]隱私權條款 
  2. 2
    將 "隱私權條款" 文字框起來。
  3. 3
    接著點擊鏈結圖標。
  4. 4
    複製先前創建的 "隱私權條款" 頁面鏈結，貼於此處。
  5. 5
    點擊 "Insert" 按鈕。
  6. 6
    點擊 "DONE" 按鈕。
聯絡我們19 GDPR
  • 最後，點擊 "SAVE WORK" 按鈕，即完成了 "聯絡我們" 頁面!
聯絡我們20 GDPR

參考資源

隱私權條款範本

下載
前往
我已經完成課程
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>