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

更新於 發佈於 閱讀時間約 7 分鐘
raw-image

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

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

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

WordPress 網頁設計4大步曲

WordPress 網頁設計4大步曲

(延伸閱讀︰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快速完成網頁製作的全流程。希望這個指南能夠幫助你輕鬆地創建出一個專業而吸引人的網站。

留言
avatar-img
留言分享你的想法!
avatar-img
Digiworld的沙龍
12會員
317內容數
Digiworld的沙龍的其他內容
2025/04/18
3 個簡單卻高效的方法,幫助你提升 CTR,讓廣告真正吸引潛在客戶,避免讓錢白白打水漂!
Thumbnail
2025/04/18
3 個簡單卻高效的方法,幫助你提升 CTR,讓廣告真正吸引潛在客戶,避免讓錢白白打水漂!
Thumbnail
2025/04/09
到了2025年,網頁設計已經進入一個全新的階段,AI工具變成中小企業跟網店賣家的最佳幫手!不管你是想做一個超專業的國際網店,還是只要一個簡單的個人網站,完全不用學寫程式,只要30分鐘就能用ChatGPT 4o搞定一個超漂亮的網頁!
Thumbnail
2025/04/09
到了2025年,網頁設計已經進入一個全新的階段,AI工具變成中小企業跟網店賣家的最佳幫手!不管你是想做一個超專業的國際網店,還是只要一個簡單的個人網站,完全不用學寫程式,只要30分鐘就能用ChatGPT 4o搞定一個超漂亮的網頁!
Thumbnail
2025/03/09
隨著 AI 與自動化技術的普及,美容業正迎來一場革命。想實現銷售額的倍增,現在就花幾分鐘一起探討如何利用自動化技術改造美容業務吧~
Thumbnail
2025/03/09
隨著 AI 與自動化技術的普及,美容業正迎來一場革命。想實現銷售額的倍增,現在就花幾分鐘一起探討如何利用自動化技術改造美容業務吧~
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
這篇涵蓋了 Notion 建立網站的基礎,還有免費的教學資源,讓你不用寫程式,就能用 Notion 快速建立個人網站! Notion 簡易入口網站適合學生、求職、接案、小店家使用,能快速產出一個網站,節省成本又快速方便。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
你想要搭建一個既經濟實惠、高性能、可擴展且安全的網站,而又無需管理繁瑣後台的工作和懂編碼技術嗎? 今天,我將分享一個高性價比的解決方案,幫助你在微軟 Azure Static App靜態應用的服務上,使用 Hugo 構建一個高性能且安全的網站。 最棒的是什麼? 你甚至不需要了解任何編程知識
Thumbnail
你想要搭建一個既經濟實惠、高性能、可擴展且安全的網站,而又無需管理繁瑣後台的工作和懂編碼技術嗎? 今天,我將分享一個高性價比的解決方案,幫助你在微軟 Azure Static App靜態應用的服務上,使用 Hugo 構建一個高性能且安全的網站。 最棒的是什麼? 你甚至不需要了解任何編程知識
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
這是一篇全面,適合新手學習的Woocommerce教學。  你可以低成本(只需要Server + Domain費用), 就可以透過Wordpress + Woocommerce,去建立網店。  你將會學習:前期Server設置、使用Wordpress、安裝Woocommerce、設立outgoin
Thumbnail
這是一篇全面,適合新手學習的Woocommerce教學。  你可以低成本(只需要Server + Domain費用), 就可以透過Wordpress + Woocommerce,去建立網店。  你將會學習:前期Server設置、使用Wordpress、安裝Woocommerce、設立outgoin
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹
Thumbnail
無須基礎,只要「複製 + 貼上」就能學會 (RWD Bootstrap + jQueryUI + fancyBox + CKeditor + Google Chart) 每個特效均為您示範 WebFomr + MVC 雙重範例 ASP.NET 教學 — 前端特效輕鬆學 (9.9小時) 課程介紹
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News