【2023 WordPress No Code 簡易上手課程】網站設計只需1小時

WordPress和網站託管寄存是什麼？

WordPress是一種開源(Open Source)的內容管理系統(CMS)，讓使用者可以方便地進行網站設計和管理網站，而無需具備專業的編程技能。WordPress的靈活性和易用性使其成為全球最受歡迎的CMS之一，支持從個人博客(Blog)到大型企業網站的各種網站類型。

網站託管寄存，也就是將網站的所有檔案和資料庫儲存於一個伺服器上，讓網站可以在網路上被存取。選擇適合的託管寄存服務是關鍵，因為它影響著網站的性能、穩定性和安全性。

（延伸閱讀︰WordPress網站寄存商選擇推薦，一步即可擁有 WordPress）

Astra設計和Elementor插件（免費和付費版本）是什麼？

Astra是一個超快、簡易且高度自定義的WordPress主題，特別適合與頁面構建器一同使用。它提供了各種預設的網站版型，並允許你根據需求進行調整。

Elementor則是一個強大的頁面構建器插件，讓你可以透過拖放的方式創建網站，而不需要編寫任何程式碼。它提供了許多豐富的設計元素和模板，你可以輕鬆地設計出專業的網站頁面。

免費版本的Astra和Elementor已經提供了大量的功能，但如果你需要更多的設計選項或高級功能，可以考慮升級到付費版本。

如何安裝和設置Astra和Elementor？

1. 首先，你需要在WordPress後台的「外觀」選項中安裝Astra主題。
2. 接著，在「插件」選項中安裝Elementor插件。
3. 安裝完畢後，你可以根據自己的需求進行相應的配置和設定。

如何使用Elementor創建主頁？

1. 在WordPress後台，選擇「頁面」>「新增」來創建一個新的頁面，並將其設定為你的主頁。
2. 接著，點擊「使用Elementor編輯」來開啟Elementor的界面。
3. 在Elementor的界面中，你可以拖放各種元素（如文字、圖片、按鈕等）到頁面上，並對它們進行風格和版型的調整。透過這種方法，你可以創建出一個具有吸引力的主頁。

如何使用Elementor創建靜態頁面？

創建靜態頁面的流程與創建主頁相似。靜態頁面通常用於呈現不會頻繁變更的內容，如「關於我們」、「聯繫我們」等頁面。你可以利用Elementor的各種元素和功能來設計靜態頁面。

創建新的靜態頁面

1. 在WordPress儀表板中，導航到"頁面"，然後點擊"新增"。
2. 為你的新頁面輸入一個標題，然後在右側欄位中選擇"Elementor畫布"作為你的頁面布局。
3. 點擊"編輯與Elementor"按鈕以打開Elementor頁面構建器。

使用Elementor設計網站頁面

1. 在Elementor界面中，你會看到一個中央區塊和一個左側欄位。中央區塊是你的頁面預覽，左側欄位是你的元件庫。
2. 從左側欄位拖放元件到中央區塊以創建你的頁面布局。這些元件包括標題、文字、圖片、按鈕等等。
3. 點選已放置的元件可以編輯它的內容和樣式。你可以改變字體、顏色、尺寸、間距，等等。
4. 使用Elementor的"區域"和"列"來創建更複雜的佈局。你可以在一個區域中添加多列，然後在每一列中添加元件。

保存和發佈你的頁面

1. 當你對你的頁面設計滿意時，點擊下方的綠色"更新"按鈕以保存你的變更。
2. 回到WordPress儀表板，並在"頁面"裡找到你剛才創建的頁面。
3. 點擊"發佈"以使你的新靜態頁面在網站上生效。

如何使用側邊欄和小部件創建Blog/ news類別頁面？

側邊欄和小部件是WordPress中的重要工具，可以用來提供額外的內容和功能。例如，你可以在側邊欄中添加「最新文章」、「文章分類」等小部件，來幫助讀者導航你的博客或新聞類別頁面。以下是如何使用Elementor創建Blog/News類別頁面的步驟：

注意: 以下步驟可能需要Elementor Pro（Elementor的付費版）來完成，因為某些功能（例如"Posts"小部件）可能不在免費版中提供。

1. 創建一個新的頁面或模板

• 在你的WordPress儀表板中，點擊"頁面" > "新增"或者"Elementor" > "My Templates" > "新增"。如果你正在創建一個模板，確保選擇"Archive"類型的模板，然後點擊"Create Template"。

2. 添加側邊欄區域

• 點擊Elementor編輯器中的"+"按鈕，選擇一個兩列的佈局。這將創建一個主內容區域和一個側邊欄。

3. 在主內容區域添加"Posts"小部件

• 在左側Elementor控制面板中，找到"Posts"小部件（你可能需要在搜索框中輸入"Posts"以快速找到它），然後將其拖放到你剛剛創建的主內容區域中。
• 在小部件設定中，你可以選擇文章的顯示方式（如網格、列表等），選擇顯示哪些類別的文章，以及其他設定。

4. 在側邊欄區域添加小部件

• 在左側Elementor控制面板中，你可以找到各種小部件，例如"Search"、"Recent Posts"、"Categories"等。將你希望在側邊欄中顯示的小部件拖放到側邊欄區域中。
• 你可以為每個小部件設定標題，並根據需要調整其他設定。

5. 保存和發佈你的頁面或模板

• 當你對你的Blog/News類別頁面設計滿意時，點擊下方的綠色"更新"按鈕以保存你的變更。
• 如果你創建的是一個頁面，你可以直接點擊"Publish"以發佈你的頁面。
• 如果你創建的是一個模板，你需要在WordPress儀表板中的"Settings" > "Reading"中設定此模板為你的文章目錄頁面。

這樣，你就成功使用Elementor的側邊欄和小部件創建了一個Blog/News類別頁面。

如何設置選單？

選單是網站的重要導航工具。在WordPress後台的「外觀」>「選單」選項中，你可以創建和管理選單。

創建一個新的選單後，你可以添加各種項目（如頁面、文章、自定義連結等），並將它們拖放到你想要的位置。你還可以設定選單的位置，如主選單、側邊欄或頁面底部。

如何使用頁面底部（Footer）？

頁面底部（footer）是一個可以顯示一些重要信息和連結的區域，例如版權信息、隱私政策、聯繫方式等。

在WordPress的「外觀」>「小部件」或「自訂」>「頁面底部」選項中，你可以設計和管理頁面底部。如果你使用Elementor，也可以使用其「頁面底部」模板來設計一個更專業的頁面底部。

文章重點！快速簡便的網站設計方法

創建一個專業的網站並不需要很複雜。以下是一些簡單而有效的設計網頁技巧：

1. 使用Astra和Elementor提供的預設模板。這些模板已經經過專業設計，你只需要稍作調整即可使用。
2. 保持設計的一致性。例如，使用相同的顏色方案和字型，以建立一個統一和專業的品牌形象。
3. 優化網站性能。例如，使用Astra這樣的輕量級主題，並定期更新和優化你的WordPress網站。

以上就是使用WordPress、Astra和Elementor快速完成網頁製作的全流程。希望這個指南能夠幫助你輕鬆地創建出一個專業而吸引人的網站。