一個設計精美的網站可以給人留下很好的第一印象。然而，建立一個一流的網站並不總是那麼容易——尤其是如果您沒有以前的設計或開發經驗。
這就是WordPress Elementor網站構建器的用武之地。通過選擇這個現代的、使用者友好的外掛，您可以建立一個令人驚歎的網站，而無需編寫任何程式碼。
這篇文章將涵蓋您需要了解的有關這個廣受歡迎的WordPress頁面構建器的所有資訊。然後，我們將向您展示如何導航Elementor的一些最重要的任務，例如建立佈局、頁面，甚至自定義Elementor模板。
- WordPress Elementor簡介
- Elementor Free與Elementor Pro
- 如何安裝Elementor
- 使用Elementor：要掌握的4個基本任務
- 如何在Elementor中構建頁面
- 如何查詢和安裝預製的Elementor模板
- 如何使用Elementor構建模板
- 開始使用Elementor的提示和技巧
WordPress Elementor簡介
在Internet的早期，建立網站需要先進的Web開發和設計技能，或訪問專家團隊。這意味著構建網站非常耗時，通常令人沮喪，而且可能很昂貴。
藉助現代頁面構建器，您現在無需專業技能即可建立專業設計、高效能的網站。一旦您的網站啟動並執行，您可以隨時快速輕鬆地新增內容或更改佈局，即使您是非編碼員。
有各種WordPress頁面構建器，但有超過500萬個活動安裝，Elementor外掛是最受歡迎的外掛之一。Elementor使您能夠 通過直觀的拖放編輯器 建立從整個網站到單個登入頁面的所有內容。
Elementor頁面構建器
使用Elementor，您可以使用單一平臺控制網站設計的各個方面。這樣，您的網站就可以完美地反映您的品牌。
Elementor直觀、無程式碼的編輯器在沒有設計和開發經驗的網站所有者中特別受歡迎。它也非常適合有線上創業想法但不一定有資金聘請專門的設計或開發團隊的企業家和小型企業。
即使您是經驗豐富的專業人士，也有很多理由使用Elementor。僅僅因為您具有編碼技能並不意味著始終從頭開始建立所有內容是明智的。
Elementor具有大量功能，可幫助您在更短的時間內構建屢獲殊榮的網站。這包括90多個現成的小部件 和專業設計的網頁模板。
Elementor網站主頁
通過這種方式，Elementor可以提高您的生產力和利潤。如果您定期構建WordPress網站（即，為自由開發者和WordPress代理機構），這些節省時間的功能可能會特別有利可圖。
Elementor Free與Elementor Pro
Elementor是“免費增值”軟體。您可以免費下載核心Elementor外掛或購買Elementor Pro許可證。
Elementor pro的定價選項
免費的WordPress外掛提供了構建具有視覺吸引力的銷售頁面、產品列表、商業網站等所需的一切。它包括40多個小部件、100個模板和300多個塊。塊是預先設計的部分模板，您可以混合和匹配以建立獨特的設計。
Elementor區塊庫
如果您想要更高階的功能，可以購買Elementor Pro。這會解鎖一些額外的小部件，以及Elementor的Theme Builder。
Elementor主題生成器
使用主題生成器，您幾乎可以編輯每個站點元素，包括頁首和頁尾。您還可以建立自定義帖子和存檔頁面設計。
如果您正在開發線上商店，Elementor Pro還包括一個WooCommerce Builder。您可以使用它來自定義您網站的WooCommerce內容，包括產品頁面、產品存檔和結帳頁面。您還可以訪問專門用於提高轉化率的小部件，例如Custom Add To Cart、Upsells和Product Related。
Elementor WooCommerce構建器
Elementor Pro還帶有一個Popup Builder 和一個Form Builder。儘管有單獨的外掛可以幫助您建立表單和彈出視窗，但通過選擇Elementor，您可以最大限度地減少需要安裝和維護的外掛數量。
使用過多的外掛會使您的網站更容易受到黑客攻擊。它甚至可能影響您網站的效能。因此，最好的做法是儘量減少已安裝的數量。此外，由於您使用同一平臺設計所有網站元素，您應該會發現更容易實現一致的外觀和感覺。
Elementor Pro許可證包括訪問60多個專業網站工具包。這些是可以幫助您建立完整網站的模板、頁面、彈出視窗和其他元件的捆綁包。如果您購買專家許可證或更高版本，您還可以訪問20個專家網站工具包。
此外，每個Pro許可證都包含高階支援。通常，您會在一天內收到Elementor專家支援團隊的答覆。但是，如果您選擇Elementor Pro Studio或更高版本，您將升級到VIP支援。這使您可以參與與Elementor的VIP支援團隊的實時聊天。您還將收到有關您的票的優先回復，這些回覆通常會在30分鐘內送達。
如果您是代理機構、開發人員或設計師，您可能對專家網路個人資料感興趣。在那裡，您可以展示您的作品並吸引潛在客戶的注意。
Elementor專家網路
如果您對通過專家網路做廣告感興趣，您也可能對Elementor Pro的專家、工作室或代理許可證感興趣。這些許可證授權您在這個受歡迎的市場上建立個人資料。
Elementor Pro計劃每年從49美元到999美元不等。該公司還提供30天退款保證，因此您可以在購買前試用。
如何安裝Elementor
由於它是一個WordPress外掛，因此安裝Elementor既快速又簡單。您可以 直接從WordPress儀表板下載免費外掛。
要下載免費版本，請導航至Plugins > Add New。在搜尋欄位中，輸入Elementor。當外掛出現時，點選立即安裝。
出現提示時，單擊啟用。該外掛將為您的WordPress側邊欄新增一個Elementor選項。
WordPress儀表板中的Elementor
您現在已準備好開始使用Elementor！要開始使用，只需單擊側欄中的Elementor選項。
或者，您可以直接從WordPress儲存庫下載Elementor外掛。然後，登入您的WordPress儀表板並導航到Plugins > Add New > Upload Plugin。然後，您可以單擊選擇檔案，然後選擇 剛剛下載的Elementor .zip檔案。
如何將Elementor Pro連線到WordPress
有兩種方法可以將Elementor Pro連線到WordPress。如果您尚未購買Elementor Pro許可證，則需要前往官方網站，然後選擇Get Started。
然後，您可以按照螢幕上的說明建立Elementor帳戶。出現提示時，輸入有關您要建立的網站型別的一些資訊。
建立一個Elementor帳戶
接下來，選擇您要購買的計劃。由於Elementor需要一個活躍的WordPress網站，因此您需要輸入您網站的域。然後Elementor將執行檢查以驗證您的網站是否正在使用WordPress平臺。
假設您有一個活躍的WordPress網站，下一步是單擊Install Elementor。如果您當前登入到您的站點，您將自動被重定向到Elementor外掛頁面。
出現提示時，單擊立即安裝 > 啟用。然後Elementor會將頁面構建器外掛新增到您的站點。
或者，如果您已經購買了Elementor Pro許可證，請前往官方網站並使用您在確認電子郵件中收到的詳細資訊登入。
在您的Elementor帳戶中，從左側選單中選擇訂閱。然後，您可以單擊下載Zip。
下載ZIP
接下來，登入到您的WordPress儀表盤並導航到Plugins > Add New。然後，您可以上傳 剛剛下載的Elementor Pro.zip檔案。
安裝並啟用Elementor Pro後，WordPress應提示您輸入許可證金鑰。或者，您可以導航到Elementor > License > Connect & Activate。
如果您當前已登入Elementor帳戶，WordPress應自動驗證您的許可證。如果不是，請在提示啟用許可證時輸入您的Elementor使用者名稱和密碼。
使用Elementor：要掌握的4個基本任務
使用Elementor，您可以設計獨特的網站，而無需特殊的設計或開發技能。但是，在構建完整的網站之前熟悉基礎知識會有所幫助。考慮到這一點，這裡快速介紹了Elementor工作流程。
1. 啟動Elementor頁面構建器
要在Elementor頁面構建器中設計新頁面或帖子，請導航到Pages/Posts > Add New。您可以通過單擊使用Elementor編輯來啟動Elementor編輯器。
在編輯器中使用Elementor選項進行編輯
或者，您可能有一個可以從改造中受益的現有頁面。在這種情況下，只需導航到相關頁面並開啟它進行編輯。然後，您可以單擊“使用Elementor編輯”按鈕。
Elementor編輯器開啟
在螢幕左側，您會看到Elementor側邊欄。在這裡您可以找到可以新增到設計中的所有元素，例如按鈕和標題。
Elementor側邊欄還包含一個全域性小部件部分。如果您計劃在多個設計中重複使用相同的小部件，您可能希望將其儲存為全域性小部件。這使您的自定義元素可以隨時輕鬆訪問。它還提供了一箇中心位置，您可以在其中編輯一次小部件以進行通用更改。然後Elementor將在您的整個網站上覆制這些更改。
右側是實時預覽畫布，您可以在其中建立設計。Elementor將在您進行編輯時自動更新以實時顯示您的更改。
2. 新增部分、列和小部件
Elementor編輯器提供對三個主要構建塊的訪問：部分、列和小部件。我們已經接觸過Elementor的現成小部件，所以讓我們看看如何將它們新增到您的設計中。
通常，您將首先建立一個部分，方法是單擊主畫布中的+圖示。Elementor然後會要求您選擇您的結構。
在Elementor中新增一個部分
結構選項由一個或多個列組成。最終，您會將小部件放置在這些列中。它們在建立更有條理的佈局方面發揮著重要作用。
選擇您的列結構
做出決定後，Elementor會將此部分新增到您的佈局中。要將此部分移動到新位置，請單擊它，然後抓住出現的藍色虛線手柄。
要編輯一個部分，只需按住Control鍵並單擊此藍色虛線手柄。這將啟動一個上下文選單，您可以在其中進行簡單的更改，例如複製或刪除選定的部分。
隨時新增更多部分
假設您要進行更復雜的編輯，按住Control鍵單擊藍色手柄並選擇Edit Section。Elementor側邊欄現在將更新以顯示您可以對此部分進行的所有其他更改。
額外的，更復雜的編輯可用
您還可以將小部件新增到此部分。在Elementor側邊欄中，找到您要使用的小部件並將其拖到主畫布上。
當您拖動小部件時，Elementor將突出顯示您可以放置此專案的所有不同部分和列。準備好後，只需鬆開滑鼠即可。Elementor現在將此小部件新增到您選擇的部分。
3. 編輯您的網站設定
您可以使用Elementor編輯站點範圍的設定。這包括更改預設字型和HTML顏色。您還可以修改WordPress新增到站點影象等元素的邊框和陰影。
通過在站點級別調整這些設定，您可以確保整個WordPress網站的外觀和感覺保持一致。與逐頁應用這些更改相比，此過程也明顯更快、更容易。要檢視可用的站點設定，請單擊Elementor側欄中的漢堡選單。
配置站點範圍的設定
您現在可以探索您的選擇並進行任何必要的更改。當您準備好釋出新站點設定時，請單擊Elementor側邊欄最底部的更新按鈕。
4.檢查您的修訂歷史
在您編輯設計時，Elementor會悄悄記錄您的更改。您可以輕鬆地剝離您的編輯，如果您意識到自己犯了錯誤，這可以挽救生命。
Elementor的歷史日誌還讓您可以自由地進行實驗。您可以測試各種更改，然後快速刪除它們。通過鼓勵您進行實驗，Elementor可以提高您完成設計的質量。
要檢視Elementor的日誌，請單擊側邊欄底部的歷史記錄圖示。Actions選項卡記錄了您在Elementor中所做的每一項更改。這可以是從建立新部分到編輯現有文字的任何內容：
檢視Elementor日誌
每次按Save，Elementor都會將頁面的當前版本記錄為新修訂。您可以在“修訂”選項卡中檢視所有這些快照 。如果您想恢復到以前的儲存，只需在“修訂 ”列表中找到它並單擊它。
如何在Elementor中構建頁面
現在您已經熟悉了基本的Elementor工作流程，讓我們看看如何使用這些知識來設計一些新頁面。首先，我們將介紹使用免費的Elementor外掛建立標準WordPress頁面。然後我們將看看如何使用WooCommerce和Elementor Pro開發一個高轉化的產品頁面。
1. 如何建立一個標準的WordPress頁面
每個網頁都是不同的。但是，您會在各個站點中找到一些常見元素。這包括標題、正文和影象等媒體。讓我們看看如何建立包含這些關鍵元件的頁面。
首先，通過導航到Pages > Add New > Edit with Elementor建立一個新頁面。接下來，通過單擊+圖示為您的設計新增一個部分。我們將從標題開始，因此我們要選擇單列布局。
建立一個新的Elementor頁面
在Elementor側邊欄中，找到標題小部件。現在，將此小部件拖放到您的新部分中。然後，您可以在Elementor側邊欄中輸入標題文字，並使用各種設定來設定標題樣式。
設定標題的樣式
然後，單擊+圖示新增第二個部分。我們將嵌入影象，然後提供一些支援文字，所以現在我們將選擇多列布局。
新增部分並選擇列
接下來，將Text Editor小部件從Elementor側邊欄中拖放到這個新的Section中。然後，您可以使用側邊欄設定新增和設定文字樣式。
當您對文字感到滿意時，找到影象小部件。再一次，使用拖放將此小部件新增到您的部分。
拖放文字小部件
在邊欄中，單擊預覽縮圖。您現在可以使用WordPress媒體庫上傳新圖片或選擇之前上傳的圖片。
要檢視您的設計，請單擊Elementor側邊欄底部的眼睛圖示。這會在新選項卡中顯示頁面佈局的預覽。
預覽您的Elementor頁面
當您對自己的設計感到滿意時，請單擊“釋出” 按鈕。請注意，如果您的頁面已經上線，則此按鈕將要求您更新 。
2. 如何建立WooCommerce產品頁面
如果您經營的是WooCommerce商店，則可以使用Elementor Pro建立自定義產品頁面。這可能涉及修改庫存WooCommerce頁面以更好地反映您網站的品牌。或者，您可能正在嘗試優化您的頁面以推動更多轉化。
要設計自定義WooCommerce產品頁面， 請從WordPress儀表板中選擇模板。然後，單擊新增新按鈕。在下一個視窗中，開啟第一個下拉選單並選擇Single Product。
WooCommerce為單一產品設定
為您的新模板起一個描述性名稱，然後單擊Create Template。這將啟動包含所有可用單一產品設計的Elementor庫。
WooCommerce中可用的單一產品設計
要仔細檢視模板，請將滑鼠懸停在它上面，然後在它出現時單擊放大鏡圖示。如果您想將此設計應用到您的商店，請單擊插入。
將滑鼠懸停在模板上以仔細檢視
Elementor的模板具有一系列現成的元件。要編輯任何這些元素，只需單擊它們。Elementor側邊欄將更新以顯示該特定專案的所有設定。
現成的元件
Elementor Pro提供了一系列WooCommerce小部件，您可以將它們新增到您的設計中。要檢視可用的內容，請滾動到Elementor側邊欄中的WooCommerce或產品部分。
側邊欄中可用的WooCommerce小部件
這些部分包括具有高階內建功能的小部件，例如WooCommerce麵包屑、購物車和結帳。要將這些元素新增到您的設計中，只需將它們拖到Elementor畫布中並釋放它們。然後，您可以將小部件拖放到要顯示此內容的部分中。
拖放WooCommerce小部件
當您對自己的設計感到滿意時，點選Publish。然後，您可以選擇新增條件並指定要使用此設計的區域。例如，您可以將此模板應用於特定產品類別或在您的商店中使用它。
如何查詢和安裝預製的Elementor模板
Elementor模板是預先設計的頁面和塊，可簡化網站建立過程。頁面是完整的內容佈局，而塊是包含預構建小部件的部分。塊的一些流行示例包括頁首、頁尾、評論和推薦以及常見問題解答 (FAQ)。
Elementor庫
免費的Elementor外掛帶有100多個整頁模板和300多個塊。如果您升級到Elementor Pro，您將可以訪問一些其他選項。
單擊“新增模板”圖示以將模板應用於您當前的設計。此按鈕應作為每個部分塊的一部分出現，並由一個白色資料夾表示。這將啟動Elementor庫。
從Elementor庫中新增模板
在這裡，您會找到可以應用於您的頁面的所有塊和頁面模板。您可以通過將滑鼠懸停在其上並單擊其放大鏡圖示來預覽任何模板。
將滑鼠懸停在模板上以近距離檢視
當您找到要使用的模板時，單擊“插入” 。如果您之前沒有連線到Elementor的模板庫，彈出視窗會要求您完成該步驟。
連線到模板庫
建立此連線後，Elementor將插入您選擇的模板。您現在可以自定義它。例如，您可以新增更多小部件或刪除任何佔位符內容。
如何使用Elementor構建模板
Elementor附帶了多種現成的模板。但是，有時您可能會考慮特定的外觀。在這種情況下，您可能更喜歡設計模板。
建立您的設計可以確保整個站點的一致性。如果您是WordPress代理商，您甚至可以使用模板來加速設計和開發。例如，您可以構建一個模板庫，其中包含您通常應用於客戶站點的所有內容和設定。然後，您可以使用這些模板作為所有未來專案的起點。
要開始使用， 請從WordPress儀表板中選擇模板。然後，單擊新增新的。
新增新模板
在隨後的彈出視窗中，開啟第一個下拉選單並選擇您要建立的模板型別。您的選項是Page、Section或Landing Page。
選擇模板型別
接下來，給這個設計一個描述性的名字，然後點選Create Template。這將啟動標準Elementor頁面構建器。您現在可以像建立常規頁面一樣構建模板。只需新增部分、列和小部件，直到您對佈局感到滿意。
要將此設計儲存為模板，請單擊“更新/釋出” 按鈕旁邊的箭頭。然後您可以選擇另存為模板。
另存為模板
此設計現在將儲存到Elementor庫中。您可以通過啟動庫並選擇“我的模板”選項卡來訪問它。
在“我的模板”選項卡中的庫中找到您的模板
或者，您可以通過導航到WordPress儀表板中的模板 > 儲存的模板來訪問您的自定義模板。您還可以開啟任何設計並進行任何必要的更改。
開始使用Elementor的提示和技巧
Elementor可以幫助您快速設計和構建開箱即用的WordPress網站。但是，一些節省時間的技巧可以進一步提高您的工作效率。
有時，您可能會構建一個想要在同一頁面中重用的部分。您可以建立一個副本，而不是手動重新建立此部分。只需單擊以選擇有問題的部分，然後按住Control鍵單擊出現的虛線手柄。
然後選擇複製。這會在原件正下方建立一個重複的部分。
或者，有時您可能希望在多個頁面甚至不同網站上重複使用相同的部分。您可以將任何部分儲存為塊模板。這會將您的設計新增到Elementor庫中，因此始終觸手可及。
要將塊變成可重複使用的模板，請按住Control並單擊其虛線圖示。然後選擇另存為模板。
將區塊變成可重用的模板
您可以通過在畫布上選擇它然後使用Elementor側邊欄中的控制元件來編輯任何小部件。但是，當您有許多其他小部件時，在不同小部件之間導航可能會變得很尷尬。對於重疊的小部件或在小空間內新增許多元素時尤其如此。
Elementor的導航器提供了所有頁面小部件的列表檢視，這些小部件被組織成相應的部分和列。通過在此“樹形面板”中選擇它們，您可以輕鬆地在小部件之間導航。Elementor側邊欄將更新以顯示當前選定小部件的所有選項。
所選小部件的顯示選項
鍵盤快捷鍵是最終的節省時間，Elementor帶有各種內建熱鍵。按Cmd/Ctrl + ? 在鍵盤上檢視這些快捷方式。
Elementor鍵盤快捷鍵
這將啟動一個包含所有可用熱鍵的視窗。您可以通過熟悉部分或全部這些快捷方式來增強您的網頁設計和開發。
小結
建立WordPress網站並不總是那麼容易，尤其是如果您不是經驗豐富的網頁設計師或開發人員。幸運的是，Elementor頁面構建器可以消除構建網站的痛苦和複雜性。
無論您選擇免費外掛還是高階外掛，您都可以使用Elementor來設計和構建您需要的任何型別的帖子或頁面。該構建器還附帶了一系列現成的模板。或者，您可以建立模板並在多個頁面或多個網站上重複使用它們。
評論留言