您想發現並了解 Elementor 介面是什麼樣子嗎?本指南適合您。

設計一個具有專業外觀的網站並不適合所有人,尤其是我們都認為我們絕對必須是程式設計和網頁設計方面的專業人士。

如今,我們看到 WordPress 生態系統不斷出現新的工具,以便為設計網站提供更簡單的解決方案,即使是大多數初學者也能輕鬆掌握。

關於WordPress佈局的設計,我們已經必須提交插件 可視化編輯器,這無疑是佈局設計的最佳工具之一。

但值得注意的是,這種解決方案並不適合所有人。這就是為什麼在本教程中,我們將向您介紹 Elementor WordPress 插件,這是一個免費增值 WordPress 插件(免費,但可在訂閱下擴展)。

Elementor介面演示

目錄


從哪裡獲得Elementor for WordPress

我們正在認真考慮讓您了解插件的潛力,免費解決方案將幫助您入門,而無需支付任何費用。 此免費解決方案可在 WordPress.org。 作為一個 WordPress 插件,它的安裝方式與其他插件一樣 儀表板中的插件. 

如果該插件能夠完全滿足您的要求,那麼您將能夠獲得該站點上所有功能的完整許可證 正式元素.

Elementor的主要特點

Elementor 是 WordPress 最受歡迎的頁面建立器之一,這是有充分理由的。憑藉其強大的功能和直覺的介面,它為創建專業網站提供了強大的解決方案,而無需編碼技能。以下是 Elementor 主要功能的概述,這些功能對於任何 WordPress 使用者來說都是不可或缺的:

拖放可視化編輯器 :Elementor 提供直覺的視覺化編輯器,讓您透過拖放元素來設計頁面。您可以即時看到變化,更輕鬆地個人化您的網站。

豐富的小部件 :Elementor 提供多種可用小部件,可讓您為頁面添加各種元素,例如按鈕、圖庫、輪播、表單等。專業版透過聯絡表單、滑桿和投資組合等高級小部件擴展了此功能。

預定義模板 :Elementor 提供了一個預製範本庫,可用作頁面的起點。這些模板涵蓋了各種風格和需求,可以輕鬆創建美觀且實用的頁面。

主題編輯器 :透過 Elementor Pro,您不僅可以自訂頁面內容,還可以透過內建主題編輯器自訂頁首、頁尾和網站的其他整體部分。這使您可以在整個網站上創建視覺一致性。

建立貼文模板 :貼文範本產生器功能可讓您為特定貼文類型(例如部落格文章或 WooCommerce 產品)設計佈局。此選項對於為不同類型的內容建立一致的設計特別有用。

彈出視窗產生器 :Elementor Pro 包含一個彈出視窗產生器,可讓您為廣告、註冊表單或其他訪客互動建立自訂彈出視窗。您可以定義顯示條件以精確定位您的受眾。

進階佈局控制 :Elementor 提供了針對版式、邊距、間距和響應式佈局的高階控制項。您可以針對不同的裝置類型調整網站的佈局,確保在行動裝置、平板電腦和桌面裝置上獲得最佳的使用者體驗。

支援和文檔 :Elementor 提供全面的支持,包括詳細的文件、線上教學課程和活躍的社群。專業用戶受益於直接的高級支持,確保快速有效地幫助解決任何問題。

擴展和集成 :Elementor 與各種外掛程式和整合相容,可為您的網站添加附加功能。無論您想要整合行銷工具、SEO 外掛程式還是電子商務解決方案,Elementor 都可以輕鬆擴展您網站的功能。

下表總結了 Elementor 的功能。

特點元素免費元素專業
拖放頁面編輯器OUIOUI
預定義模板OUIOUI
基本小部件OUIOUI
小工具專業版OUI
頁首和頁尾編輯器OUI
建立貼文模板OUI
建立 WooCommerce 模板OUI
彈出視窗產生器OUI
第三方小部件支持OUI
技術支援OUI
行銷特色(表格OUI
存取高級模板庫OUI
進階效果和動畫OUI
檢查和備份工具OUI
建立表單OUI
先進的排版控制OUI
響應式佈局控制OUI
定期更新的可訪問性OUIOUI
元素特性。

 

請注意,這是該插件提供的各種功能的詳盡列表。 您可以在以下找到更多詳細信息 探索他們的網站.


開始使用Elementor

即使您是建立 WordPress 網站的新手,Elementor 的入門也非常快速且簡單。按照以下步驟設定 Elementor 並開始像專業人士一樣設計您的頁面。

我們不會在這裡介紹整個安裝過程。 由於這是一個WordPress插件,因此已在中說明了安裝過程 以前的教程.

安裝 Elementor

  1. 存取您的 WordPress 儀表板: 登入您的 WordPress 管理面板。
  2. 導航到擴充: 轉到“擴充功能”,然後按一下“新增”。
  3. 搜尋元素: 在搜尋欄中輸入“Elementor”。您會找到 Elementor(免費版)。首先,安裝並啟動免費版本。
  4. 安裝元素: 安裝完成後按一下“立即安裝”,然後按一下“啟動”。

但是,安裝後,您將被帶到該插件的主頁。

概覽頁面 deelementor.png

如果螢幕上顯示此頁面,則表示您已成功安裝 Elementor 外掛程式。我們目前在本教程中使用完整版本,但介面不應與免費版本有太大差異。

在進入編輯介面之前,我將邀請您註冊您的許可證。這僅適用於選擇專業版的使用者。

如果您有免費版本,則可以存取下一部分。要註冊您的許可證,您會注意到 WordPress 上有一個通知,提示您註冊許可證。

通知插件 elementor.png

所以只需點擊 現在升級 造訪註冊頁面並點擊 啟用.

註冊許可證 elementor.png

如果您的許可證是,您通常會看到確認頁面 活躍.

有效許可證 elementor.png

如果您沒有到達此頁面,我邀請您與插件的開發人員聯繫以獲取更多信息 協助解決問題.

元素介面

Elementor 的介面旨在提供流暢直覺的使用者體驗,讓您可以輕鬆建立和自訂 WordPress 頁面。以下是 Elementor 介面主要部分的詳細概述,以及可協助您更好地理解每個元素的視覺化範例。

工作區(內容區)

La 工作區內容區,是您建立和檢視頁面的中心空間。您可以在此處新增和編輯小部件和部分。佈局是即時顯示的,讓您可以看到發生的變化。

工作區

小部件面板

Le 小部件面板 位於介面左側。它包含各種可以拖放到工作區域的元素。小部件按類別組織,例如「常規」、「基本」、「佈局」等,以便更輕鬆地找到元素並在頁面上添加元素。

Elementor 小部件組

Elementor 小工具組是 Elementor 提供的功能區塊組。部分的數量取決於您是否使用完整版本以及是否使用 WooCommerce、Yoast SEO 或其他相容外掛程式。

根據這些條件,您的介面上將有更多或更少的部分。由於我們使用的是啟用了 WooCommerce 外掛程式的完整版本,因此我們的介面如下所示。

Elementor 小部件組

頂部工具列

La 頂部工具列 包括基本選項,例如:

  • 商標 : 在選單中顯示以下功能:主題產生器、歷史記錄、帳戶首選項、鍵盤快速鍵等。
  • 新增元素的按鈕: 允許您顯示要插入頁面的小工具面板
  • 站點設定按鈕: 顯示許多全域站點選項設定
站點設定
  • 結構按鈕: 允許您查看頁面的整體結構並無憂地瀏覽它。如果您的頁面有多個巢狀部分,此功能將對您有很大幫助。
  • 頁面標題/文章: 顯示頁面或文章的標題及其狀態(草稿、已發佈等)
  • 行動導航選單 :可讓您在桌面、平板電腦和行動裝置視圖之間切換。這對於確保您的設計具有響應能力並針對所有設備類型進行良好調整至關重要。
  • 頁面設定 :存取頁面設置,包括佈局選項和樣式設定。
  • 發布/更新 :儲存並發布對頁面所做的變更。
  • 超可視化 :以眼睛表示,讓您可以看到頁面在真實情況下的行為。

因此,左側有該插件提供的不同小部件,右側有修改的即時預覽。在本教程中,我們使用 Elementor 的免費 Hello 主題。


如何使用Elementor

建立您的第一頁

Elementor 適用於 WordPress 頁面和貼文。無論您使用經典介面還是新的古騰堡介面,您都會看到一個按鈕,邀請您使用 Elementor 建構器。

  • 建立一個新頁面: 轉到“頁面”並點擊“新增”。
  • 為您的頁面命名: 為您的頁面指定標題並發布。
  • 使用 Elementor 編輯: 按一下「使用 Elementor 編輯」按鈕啟動 Elementor 的視覺化編輯器。
使用 elementor.png 建構子編輯頁面

實際上,您並不總是需要使用 Elementor 編輯貼文。因此,我邀請您僅在頁面上使用該插件。

點擊該按鈕,您將訪問 Elementor 設計介面,該介面給人一種似曾相識的感覺(對於使用 WordPress 自訂器的使用者)。

如何將小部件新增至 Elementor 編輯器

將標題、圖像、按鈕等小工具從左側面板拖曳到內容區域。您可以透過點擊每個小部件來調整它的設定。

添加小部件

自訂小工具: 按一下小工具以開啟其自訂選項。您可以調整文字、圖像、顏色、大小等。

自訂小工具

使用模板: 若要加快流程,請使用預先定義的範本。點擊資料夾圖示進入範本庫,您可以選擇範本並一鍵匯入。


實際案例

如何放置Elementor塊

展開某個部分後,您將找到 Elementor 小工具。不同的 Elementor 小工具透過「拖放」放置在帶有虛線的突出顯示區域中。

如何放置Elementor塊

如何在 Elementor 中選擇部分的佈局

在新增 Elementor 小工具之前,您應該考慮透過點擊突出顯示部分上的「+」按鈕來選擇佈局。

選擇 Elementor 中某個部分的佈局

根據您的需要,您將選擇最適合的佈局。

一旦選擇了佈局,您就可以在同一突出顯示區域中看到該部分的表示。此部分將顯示與您的選擇相對應的相同數量的列。就我而言,我選擇了包含 2 列的列。

元素或列號

內部帶有“+”號的不同列是可以接受 Elementor 小部件的區域。

如果您在未先選擇佈局的情況下新增 Elementor 區塊,則預設會選擇單列佈局。

Elementor 部分之間可以重新排序,遵循“ 拖放”。

如果您不想再使用某個部分,也可以將其刪除。

這是一個包含2個塊的部分示例,即標題塊和文本塊。

帶有 2 個區塊的 elementor 部分.png

如何使用其他設計工具

完成設計後,要做的一件事情就是保存工作。 您將在顯示不同Elementor部分的部分的最底部找到該選項。

備份elementor.png

您可以選擇直接保存(發布),也可以另存為草稿或模板。 我們將在以後進一步探討這些不同點。

在設計時,您可能還想在沒有 Elementor 附加介面的情況下預覽變更。您所要做的就是點擊 Elementor 編輯器頂部欄中的眼睛圖示。

預覽更改 elementor.png

碰巧在設計過程中發生了錯誤(非自願行為)。

在這種情況下,Elementor 為您提供歷史記錄,讓您可以瀏覽所有操作。

從清單中刪除要撤銷的操作

動作 elementor.png

這將使您輕鬆返回。

這 ” 設置 » 允許您修改特定於頁面的某些選項,例如標題、特色圖像或狀態等。

elementor設置.png

常見問題

什麼是元素?

Elementor 是 WordPress 的拖放頁面建立器,讓使用者無需編碼即可直觀地設計網站。它提供了一個直覺的介面,帶有拖放工具,用於在頁面上添加和自訂元素。

Elementor 是免費的嗎?

Elementor 提供免費版本,具有足夠的基本功能來建立簡單的網頁。專業版可透過訂閱獲得,提供高級功能,例如附加小部件、高級模板和廣泛的自訂選項。

Elementor 專業版有哪些優勢?

Elementor 的專業版提供高級小工具、專業範本、更深層的設計選項以及建立自訂頁首、頁尾和存檔的功能。它還允許增強與第三方工具和行銷功能的整合。

如何在我的 WordPress 網站上安裝 Elementor?

要安裝 Elementor,請前往 WordPress 儀表板,點擊“外掛程式”,然後點擊“新增”。在搜尋框中搜尋“Elementor”,然後按一下“立即安裝”,最後按一下“啟動”。您也可以透過從 Elementor 網站下載 ZIP 檔案並透過「擴充功能」>「新增」>「上傳擴充功能」匯入來安裝 Elementor Pro。

如何使用Elementor建立頁面?

安裝 Elementor 後,請前往 WordPress 儀表板中的頁面或帖子,然後按一下「使用 Elementor 編輯」。您將被帶到 Elementor 編輯器,您可以在其中拖放小部件和部分來設計頁面。使用左側面板向頁面新增和自訂元素。

Elementor 是否與所有 WordPress 主題相容?

是的,Elementor 的設計目的是與大多數 WordPress主題。但是,為了實現最佳集成,建議使用專為 Elementor 設計的主題,這可提供更高的相容性和靈活性。

我可以使用 Elementor 建立電子商務網站嗎?

是的,Elementor 與 WooCommerce 相容,可讓您建立和自訂產品頁面、商店頁面和結帳頁面範本。專業版提供 WooCommerce 特定小工具來改善線上商店的外觀。

如何預覽使用 Elementor 所做的更改?

您可以透過點擊 Elementor 編輯器中的「預覽」按鈕來預覽變更。這使您可以在即時發布更改之前查看頁面的外觀。

Elementor 提供技術支援嗎?

是的,Elementor 透過論壇、知識庫和票務系統為 Pro 用戶提供技術支援。您也可以在 Elementor 官方網站上存取詳細的教學和指南。

我可以在 Elementor 中使用第三方擴充功能嗎?

是的,Elementor 與許多添加附加功能和小部件的第三方擴充功能相容。您可以將它們安裝為 WordPress插件 普通的以擴展 Elementor 的功能。


與本文類似的資源

結論

Elementor 是一款功能強大且多功能的解決方案,無需編碼即可建立出色的 WordPress 頁面。憑藉其直覺的介面和強大的功能,它可以讓初學者和專業人士立即設計出有吸引力且實用的網站。

透過了解 Elementor 介面的主要部分,您將能夠有效地導航編輯器、最佳地使用小部件以及自訂頁面的各個方面以滿足您的特定需求。

工作區, 小部件面板和其他工具旨在提供最大的靈活性,同時保持易用性。透過無縫整合部分和列,並利用樣式和佈局選項,您可以將您的願景變為現實。

不要忘記利用即時預覽功能來確保您的設計在所有裝置上看起來都很棒。有了 Elementor,每個專案都成為一個機會 創建一個網站 令人印象深刻,真正脫穎而出。

有關使用 Elementor 的更多提示和教程,請訂閱我們的部落格並隨時關注最新的更新和提示。與其他 WordPress 和網頁設計愛好者分享本文,幫助他們充分發揮 Elementor 的潛力。

現在就開始探索 Elementor 為您提供的無限可能性,並將您的想法轉化為迷人的網頁設計!

別起來Pinterest上