搜尋
Close this search box.

【Elementor教學】WordPress建站秘笈大放送|網頁小白變高手

Elementor 是一款廣受歡迎的 WordPress 頁面架設插件,它讓用戶能夠透過拖放介面來創建和編輯網頁,無需編寫任何代碼。我們將為你詳細介紹Elementor如何助你一臂之力,無需專業知識,就能打造出風格獨具、功能全面的網站!

對於許多想要建立自己網站的朋友來說,學習編程和網站設計可能既耗時又具挑戰性。這就是Elementor應運而生的原因,它是一款直觀的網頁建構器,讓創建專業網站變得手到擒來。

無論你是想要為你的小生意建立一個網店,還是只是希望有一個個人部落格來分享你的生活點滴,Elementor都能為你提供所需要的工具,讓網站建設變得簡單而不失專業。

以下,我將為你詳細介紹Elementor如何助你一臂之力,無需專業知識,就能打造出風格獨具、功能全面的網站!

Elementor簡介

Elementor是一款流行的頁面建構器插件,專為WordPress平台設計,使用者可以通過拖放界面來創建和編輯網頁,無需編寫任何代碼。

它提供了一系列的小工具(widgets),如文本編輯器、圖片輪播、進度條、測試表單等,這些都可以被自由組合來創建獨特的頁面布局,它還包含了對響應式設計的支持,這意味著你可以為不同的設備和螢幕尺寸定制網頁設計。

這款插件自推出以來,因其直觀的操作界面、強大的功能和靈活的設計選項而受到許多設計師和開發者的喜愛。

Elementor主頁
來源:Elementor

如果你正尋找一個簡單、直觀且功能強大的網頁設計工具,那麼Elementor無疑是你的理想選擇。

現在,通過我們的專屬連結訂閱Elementor,你不僅可以輕鬆地將你的創意轉化為現實,更可以享有30天的退款保證。

你可以在沒有風險的情況下全面體驗Elementor Pro的所有高級功能。無論是動態內容、專業模板或是主題建構器,你都能盡情探索,無需擔心。如果Elementor沒有達到你的期望,或者它不適合你的專案,那麼在30天內,你都可以選擇無憂退款,不要錯過這個機會哦!

Elementor與Elementor Hosting的區別

面對一個新的事物,通常都會有很多誤區,比如分不清Elementor與Elementor Hosting就是許多新手上路的第一個難題,在這裏也爲大家總結出來了。

Elementor作為一個WordPress插件,提供免費和付費版本。免費版本已經提供了相當多的功能,對於基本的網頁設計是足夠的。然而,如果你想要進階的功能和更多專業的網站設計選項,Elementor Pro是一個付費升級版本,它的價格根據授權數量和功能範圍會有所不同。

Elementor主頁-
來源:Elementor

Elementor Hosting則是一個包含了Elementor Pro在內的全方位解決方案,其價格會比單獨購買Elementor Pro和標準WordPress寄存更高。

Elementor Hosting的價格通常包含了寄存服務、Elementor Pro訂閱,以及可能的其他增值服務,如日常備份、安全性掃描和專門的技術支援。

Elementor Hosting
來源:Fully Managed WordPress Hosting: Optimized by Elementor
功能ElementorElementor Hosting
定義WordPress插件,提供頁面建構功能專門為Elementor優化的網站寄存服務
主要用途網頁設計和建構提供網站的寄存空間和管理、Elementor Pro全部功能,以及增值服務
使用需求必須安裝在WordPress網站上預先安裝了包含Elementor在内以及其他的便携插件
使用者介面可視化拖放編輯器網站管理儀表板,包含Elementor編輯器
技術支援插件相關的支援網站寄存和元素建構器的全面支援
性能優化伺服器已經針對 Elementor 的特定需求進行了優化,提供更快的加載速度,更好的快取機制
價格免費版和付費版(約$49 – $999/年)從約$99/月起,依計劃而定
Elementor與Elementor Hosting的區別

為何選擇Elementor作為建站工具?

選擇Elementor的理由有很多,下面總結了幾個非常實用的功能:

  • 無需程式碼知識:即使你沒有任何網頁開發經驗,你也可以使用Elementor建立專業的網頁。
  • 實時設計:你可以直接在前端界面上看到每一個更改的即時效果,這大大提高了設計效率。
  • 模板和小工具:Elementor提供了大量現成的模板和小工具,可助你快速開始並靈活搭建網頁。
  • 自定義能力:即使是Elementor的免費版本,也提供了豐富的自定義選項,而其Pro版本則進一步擴展了這些功能。
  • 響應式設計:你可以輕鬆調整設計以適應不同的設備,確保網站在任何設備上都能正常運作。
  • 強大的社群支持:Elementor擁有一個活躍的社群,你可以從中找到幫助、教程和額外的插件。
Elementor
來源:Drag & Drop Website Builder for WordPress | Elementor

Elementor的基本需求和安裝指南

如果想要使用Elementor,你需要提前做下面的這些準備:

  • 擁有一個運行中的WordPress網站。
  • 確保你的網站所在的主機環境符合WordPress和Elementor所推薦的PHP版本和MySQL版本。

安裝Elementor的步驟如下:

  1. 登入你的WordPress網站後台。
  2. 在側邊欄導航至「外掛程式」>「新增」。
  3. 在搜索框中輸入「Elementor」並執行搜索。
  4. 找到Elementor頁面建構器插件,點擊「立即安裝」。
  5. 安裝完成後,點擊「啟動」來啟用Elementor插件。

延伸閲讀:【WordPress 教學】5分鐘就完成|WordPress 架站新手指南!(link)

Elementor操作界面與功能概覽

Elementor的操作界面被設計得直觀且易於使用,即便是對於新手來說也能快速上手。以下是Elementor操作界面的基本結構和常用工具/設定選項的概覽。

Elementor操作界面基本結構

當你在WordPress後台啟動Elementor頁面建構器時,你會進入到一個全屏的編輯界面,其中包含以下主要部分:

  • 面板(Panel):位於屏幕左側,包含了所有可用的小工具和全局設定。這個面板是你拖放元素到內容區域的起點,也是你進行大部分設定工作的地方。
  • 預覽區域(Preview Area):面板的右側是預覽區域,這裡你可以看到你的頁面實時預覽。這是你進行拖放建構和即時編輯的地方。
  • 內容區域(Content Area):這是預覽區域中你實際放置小工具和內容的地方,你可以在這裡組合各種元素來創建頁面布局。
  • 頂部工具欄(Top Toolbar):這裡包含了一些快速訪問的功能,比如回到仪表盘、設置頁面設定、預覽和發布等。
Elementor操作界面基本結構
來源:Explore The Elementor Editor

常用工具和設定選項

小工具(Widgets)

Elementor的小工具是構成頁面的基本元素,例如文本編輯器、圖像、按鈕、標題、社交圖標等。小工具可以拖放到內容區域,並且每個小工具都有自己的設定選項,讓你可以定制大小、顏色、間距等。

Elementor 小工具
來源:Drag & Drop Website Builder for WordPress | Elementor

頁面設定

在頂部工具欄中,你可以訪問頁面設定,這裡你可以設定背景、設定頁面布局(例如全寬、盒裝)、管理頁面的元數據、設定響應式斷點,以及應用自定義CSS等。

Elementor 頁面設定
來源:Drag & Drop Website Builder for WordPress | Elementor

響應式設計

Elementor讓你可以針對不同的設備(桌面、平板、手機)來調整你的設計,以確保良好的響應式體驗。在底部的響應式模式切換器可以讓你切換到不同的設備視圖,並對每個視圖進行專門的設定。

Elementor響應式設計
來源:Drag & Drop Website Builder for WordPress | Elementor

動態內容

Elementor Pro版本提供了動態內容功能,允許你連接小工具到後台的數據,比如文章標題、特色圖片或者使用者資料。

Elementor動態內容
來源:Drag & Drop Website Builder for WordPress | Elementor

頁面結構設計

在建立網頁時,合理的頁面結構設計是關鍵,它影響著網站的導航流暢性以及用戶體驗。

在Elementor的Youtube官網上可以看到詳細的Elementor使用教程:

Elementor詳細使用教程

當然,視頻教程可能略微繁瑣,我們會列出一些Elementor的重要功能,並提供簡單的操作示範,以下是如何建立第一個頁面、學習使用區塊和列來組織內容,以及使用內建範本快速搭建頁面的步驟。

建立第一個頁面

建立第一個頁面是網站創建過程中的第一步。以下是一個簡化的流程:

  1. 進入網站後台: 登入你的網站管理後台,如WordPress後台。
  2. 創建新頁面: 在後台菜單中選擇「頁面」並點擊「新增」。
  3. 命名頁面: 在頁面標題區域輸入新頁面的名稱。
  4. 設置頁面屬性: 根據需要設置頁面的模板、父頁面等屬性。
  5. 發布頁面: 最後,在內容編輯好後,點擊「發布」使頁面在網站上生效。
Elementor 建立頁面
來源:How To Create A New Page In Elementor

學習使用區塊和列來組織內容

區塊和列是組織網頁內容的基礎工具,它們確保內容在頁面上呈現出清晰和結構化的布局。

區塊(Sections)
區塊是最大的結構單位,可以看作是一塊獨立的畫布,每個區塊可以包含一行或多行列。

  • 創建區塊: 在頁面編輯器中選擇添加區塊。
  • 配置區塊: 設定背景顏色、背景圖像、間距、邊距、和其他風格設定。

列(Columns)
列是區塊內部用來垂直劃分空間的元素,每個區塊可以有多個列,允許你創建複雜的布局。

  • 添加列: 在區塊內選擇添加列。
  • 調整列: 利用拖放工具調整列的寬度,或者設定不同的響應式選項。
Elementor區塊
來源:Drag & Drop Website Builder for WordPress | Elementor

元件詳細使用

網頁上的元件(或稱為小部件)是構成網站的基本單位,各種元件組合在一起來提供豐富的用戶體驗。

以下將詳細介紹如何使用基本元件(如文字、圖片、按鈕)以及進階元件(如滑塊、表單)。

文字、圖片、按鈕等基本元件的使用

文字元件

  1. 添加文字:在頁面編輯器中,插入文字元件,通常是透過點擊工具欄上的「添加文字」或「文本框」圖標。
  2. 編輯文字:點擊文字區域,開始輸入或編輯文本。你可以設置文本的字體、大小、顏色、對齊方式等。
  3. 格式化文字:利用工具欄上的格式化選項,如粗體、斜體、下劃線,以及列表創建。

圖片元件

  1. 插入圖片:在編輯器中選擇「添加圖片」或「圖片框」,然後從電腦上選擇或拖放圖片到指定位置。
  2. 調整圖片大小:點擊圖片後,使用拖拽邊角的方式調整圖片尺寸。
  3. 設置圖片屬性:如替代文字(alt text),這對於SEO和無障礙訪問非常重要。
Elementor 新增元素
來源:Add Elements To A Page » Elementor

按鈕元件

  1. 添加按鈕:選擇「添加按鈕」或類似的選項,插入按鈕到頁面上。
  2. 自定義按鈕文本和鏈接:輸入按鈕文本並提供其應該導向的URL。
  3. 設計按鈕樣式:調整按鈕的顏色、大小、邊框和陰影等,以吸引用戶點擊。

進階元件如表單、彈窗的設定與應用

表單元件

  1. 添加表單:插入表單元件到頁面中。
  2. 添加和編輯字段:根據需要添加字段,如姓名、電子郵件、消息等。
  3. 設定表單行為:設定表單提交後的行動,如發送到特定電子郵件地址,顯示提交確認消息等。
Elementor 表單
來源:The #1 WordPress Popup Builder Plugin | Elementor.com

當涉及到網站的用戶體驗,動態效果和互動設計是不可忽視的部分,它們可以使網站變得更加生動和吸引用戶。下面將說明如何給元件添加動態效果,以及如何設計互動元件。

如何給元件添加動態效果

在Elementor中給元件添加動態效果的步驟通常如下:

  1. 選擇元件:首先,在Elementor的編輯界面中,點擊你想要添加動態效果的元件。
  2. 訪問動態設定:在元件的編輯選項中,找到「進階」標籤,然後尋找「動態效果」或「Motion Effects」的選項。
  3. 配置效果
    • 滾動效果:可以設定元件在用戶滾動頁面時的行為,比如淡入、放大、旋轉等。
    • 滾動視差:設定背景圖片或元件在滾動過程中以不同速度移動,創建視差效果。
    • 滑鼠追蹤:可以讓元件根據用戶滑鼠的位置移動或產生變化。
  4. 細節調整:你可以調整動態效果的持續時間、延遲以及觸發點等,以達到理想的動態效果。
  5. 預覽效果:調整完畢後,使用Elementor的預覽功能檢查動態效果。
Elementor 元件
來源:Elementor Dynamic Content Feature for WordPress

互動元件的設計

對於互動元件,如標籤切換、彈出視窗等,設計步驟通常包括:

標籤切換(Tabs)

  1. 添加標籤小部件:在Elementor中,拖放「標籤」小部件到你想要的區域。
  2. 自定義標籤:輸入每個標籤的標題和內容。你可以添加文本、圖片、影片或任何其他Elementor小部件作為內容。
  3. 樣式設計:切換到「樣式」標籤來設置標籤的外觀,包括字體、顏色、背景、邊框等。
  4. 動態效果:為標籤切換添加動態效果,如切換時的淡入淡出效果。
  5. 響應式調整:確保標籤在不同設備上都有良好的顯示效果。
Elementor 標簽
來源:Elementor Dynamic Content Feature for WordPress

彈出視窗(Pop-ups)

  1. 創建彈出視窗:在Elementor的儀表板中,選擇「Templates」>「Popups」並點擊「Add New Popup」。
  2. 設計彈出內容:使用Elementor的小部件來設計彈出視窗的內容,例如添加表單、圖片或文字。
  3. 彈出視窗設置:配置彈出視窗的觸發條件、顯示頻率和動畫效果。
  4. 樣式自定義:定義彈出視窗的外觀,包括寬度、高度、背景、顏色、邊框和陰影等。
  5. 發佈並整合:設定完成後,發佈彈出視窗。然後,將它與按鈕或其他觸發元素相關聯,以便當用戶點擊時彈出視窗會顯示。
  6. 測試功能:在不同的裝置和瀏覽器上測試彈出視窗以保證其正常運作。
Elementor 彈出視窗
來源:Elementor Dynamic Content Feature for WordPress

小Tips

  • 使用者體驗(UX):因爲過多的動態效果或不必要的彈出視窗可能會打擾到你,導致使用體驗差。所以在你在設計這些互動元件時,Elementor始終將你的體驗放在首位。
  • 性能考量:動態效果和彈出視窗可能會增加網頁的加載時間,Elementor在這方面確保它們經過優化,不會對你的網站性能造成負面影響。
  • 可訪問性(Accessibility):Elementor關注到了包括殘障人士在内的所有人,保證你製作出來的動態效果和互動元件都是可以被看到的。例如它確保鍵盤導航和螢幕閱讀器兼容性。

元件樣式與間距調整

調整元件樣式與間距是為了確保網頁布局的美觀性和功能性,提升用戶的交互體驗。下面是對元件樣式與間距調整的詳細說明:

樣式調整

  1. 字體樣式
    • 字體大小:通常使用 px、em 或 rem 單位來設置字體大小。
    • 字體顏色:可以用十六進制代碼、RGB 或 RGBA 值來定義。
    • 行高:行高決定了文本行之間的垂直距離,對於文本的可讀性非常重要。
  2. 背景
    • 背景顏色:可以為元件設置單一顏色或漸變色。
    • 背景圖片:可以設置背景圖像,並定義它的位置、大小和重複方式。
  3. 邊框
    • 邊框樣式:實線、虛線、點線等。
    • 邊框寬度:邊框的粗細。
    • 邊框顏色:邊框的顏色。
  4. 陰影
    • 盒子陰影:為元件添加陰影以產生立體感。
    • 文字陰影:為文本添加陰影以增強可讀性或美觀性。

間距調整

  1. 内距(Padding)
    • 控制元件內容與其邊框之間的空間。
    • 可以分別設置上、下、左、右的內距。
  2. 外距(Margin)
    • 控制元件與其他元件之間的空間。
    • 同樣可以獨立設置上、下、左、右的外距。
Elementor 元件微距
來源:The #1 WordPress Popup Builder Plugin | Elementor.com

如果對以上步驟有所迷惑的,可以參考Elementor官方的操作詳細解析,以快速地找到自己還不瞭解的地方。接下來我們會介紹一些Elementor的小插件,讓你操作起來更方便!

Elementor擴充插件有哪些?

Elementor提供了許多內建的小部件和功能,但你也可以透過安裝擴充插件來增強它的功能,提高工作效率。以下是一些擴充Elementor功能的插件範例:

Essential Addons for Elementor

這是最流行的 Elementor 擴充插件之一,它增加了許多新的小部件和模塊,如內容時間軸、測試內容區塊、進階表格等。

Essential Addons for Elementor
來源:Essential Addons for Elementor – Ultimate Elements Library for Elementor

Ultimate Addons for Elementor

這個插件提供了一系列創新的 Elementor 小部件和設計選項,以幫助你創建更加出色的網頁設計。

Ultimate Addons for Elementor
來源:Ultimate Addons for Elementor

PowerPack for Elementor

這個擴充插件提供了超過 70 個創新的小部件,可以幫助你改善你的頁面佈局和元素。

PowerPack for Elementor
來源:PowerPack Addons for Elementor (Free Widgets, Extensions and Templates) – WordPress plugin

安裝這些插件的步驟大致如下

  1. 登入你的 WordPress 管理介面
  2. 轉到「外掛」>「新增」。
  3. 在搜索框中輸入你想要的 Elementor 擴充插件名稱。
  4. 找到插件後,點擊「立即安裝」,然後啟動它。

一旦安裝並啟動了這些擴充插件,它們新增的小部件和功能將會出現在 Elementor 的介面中,你可以像使用 Elementor 的內建小部件一樣使用它們。

雖然擴充插件可以大大增強 Elementor 的功能,但過多的擴充插件可能會影響網站的性能,因此建議只安裝真正需要的擴充插件。

此外,總是保持外掛更新至最新版本,以保證兼容性和安全性。

Elementor 教學總結

Elementor的魔力,可能你已經聽聞一二,但親自上手操作,才能深切體會到它帶來的便利與創新。從基礎的版面配置到精緻的動態效果,Elementor總是能讓你的網站在眾多網站中脫穎而出,不論是個人作品集還是商業平台,它都是你最佳的拍檔。

那麼,為什麼不現在就開始呢?不用再煩惱編碼或是設計的技術門檻,Elementor像是你的數位魔法棒,只要點幾下,想要的網頁就出現啦。不管你是不是科技達人,都能輕輕鬆鬆打造出專業級的網站來,快來一起加入Elementor的大家庭吧!

延伸閲讀:

關於Elementor 的常見問題解答(FAQ)

Elementor 是什麼?

Elementor 是一款用於WordPress 的頁面建構器插件,它提供了一個直觀的拖放介面,讓用戶無需編寫代碼就能設計和建立網站頁面。它包含了各種小部件、模板和設計選項,以幫助創建專業的網站。

Elementor 免費嗎?

Elementor 有免費版本和付費版本(Pro)。免費版本提供了基本的建構功能,而Pro 版本則提供更多高級功能和額外的小部件。

我可以在任何主題上使用Elementor 嗎?

Elementor 設計得與大多數WordPress 主題兼容,但最好是使用那些特別為Elementor 優化的主題,以確保最佳的兼容性和性能。

使用Elementor 會使我的網站變慢嗎?

Elementor 本身是經過優化的,不應該顯著減慢網站速度。然而,如果你使用大量的小部件、高解析度圖像或者複雜的佈局,這可能會影響頁面加載時間。為保持網站速度,建議優化圖像大小和使用快速的主機服務。

如何更新Elementor?

Elementor 可以通過WordPress 的插件頁面進行更新。當有可用更新時,你將在你的WordPress 控制面板上看到通知。只需點擊更新,並確保在更新前備份網站。

Elementor Pro 的主要功能有哪些?

Elementor Pro 提供了額外的功能,包括主題建構器、WooCommerce 建構器、彈窗建構器、動態內容、自定義欄位支持,以及50 多個高級小部件等。

如何獲得Elementor 支持?

Elementor 免費用戶可以訪問Elementor 的知識庫和社區論壇尋求幫助。Pro 用戶可以通過其官方網站的支持系統獲得優先支持。

Elementor 是否支持響應式設計?

Elementor 支持響應式設計,允許你對手機、平板和桌面的顯示效果進行分別設定。

我可以使用Elementor 銷售產品或服務嗎?

使用Elementor Pro 的WooCommerce 建構器,你可以設計專業的線上商店頁面,來銷售你的產品或服務。

Elementor 是否適合初學者?

Elementor 的拖放介面設計得非常直觀,非常適合初學者。此外,它還提供了大量的預製模板和小部件,可以幫助初學者快速上手並創建專業看起來的頁面。

如何在Elementor 中自定義CSS?

在Elementor 中自定義CSS很簡單。在編輯元素時,轉到「進階」標籤,然後在「自定義CSS」區域添加你的CSS 代碼。這允許你對任何元素進行細致的樣式調整。

Elementor 是否支持多語言網站?

Elementor 與多語言插件如WPML 和Polylang 等兼容,這使得創建多語言網站成為可能。

如果我停止使用Elementor,我的內容會發生什麼?

如果你停止使用Elementor,你的內容將會保留,但是它將失去原有的Elementor 格式和樣式。你的內容將回到WordPress 的標準編輯器,可能需要進行重新格式化。

Elementor 和Gutenberg 有什麼不同?

Gutenberg 是WordPress 核心的一部分,它是一個塊編輯器,提供了基本的頁面編排功能。Elementor 是一個更強大、功能更全面的獨立頁面建構器插件,提供高級設計功能和更大的靈活性。

如何在Elementor 中使用範本或範本套件?

在Elementor 中,你可以點擊「添加範本」按鈕選擇預製範本,或者你可以從Elementor 範本庫中選擇並插入範本。範本套件通常是一組相互協調的頁面和區塊設計,可用於快速建立整個網站。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

更多精彩內容

線上課程平台
網站架設
【線上課程平台推薦】4 大線上開課平台|讓你賣課程當老師!

線上課程平台有哪些?怎麼在網站開課當老師?一文教你知識變現!為你整理好了線上課程平台選擇標準,更有4 大專業線上開課平台推薦,免費體驗無憂試用!功能全面,為你對比各大平台收費價格和優缺點,快來看看自己適合選擇哪個平台開網課!

虛擬主機
Hostinger 評價+教學:架站教程與評測大放送!

你對主機、網站感興趣嗎?你瞭解什麽是Hostinger嗎?本篇文章將具體介紹Hostinger,爲你帶來最全面、最完整的Hostinger教學。從Hostinger背景瞭解,到優劣勢分析,到主機購買意見,再到網站架設,一站式學習Hostinger,點進來看看吧!

UI UX
網站架設
UI UX設計是什麼?新手3分鐘學會UI/UX Design!附範例分析

UI UX設計是什麼?設計新手還在擔心搞不懂這個問題嗎?快跟著我們一起從頭開始掌握UI UX設計原理、關鍵要素和核心原則!一步步教你學會UI和UX設計步驟和重點技巧,用軟體工具來高效完成UI UX設計工作!想又快又好地做完UI UX設計?別錯過我們的全面教程!