Elementor教程：WordPress零基礎建站（非常詳細圖文教程）

很多人認為建站太難了，又要懂代碼、網頁設計，資料庫，又要配置服務器等等，無從下手，那怎么辦？曾經的不可能，現在可以輕易的去現實它，這里教大家如何零基礎用頁面構建器插件 Elementor主題（超輕框架） ，快速學會用 WordPress 建立你理想中的網站，

Elementor 頁面編輯器

Elementor是目前最強大的頁面構建器，完全拖放式可視化編輯，是WordPress中最快，最直觀的編輯器，只需拖放即可自定義，對于新手非常友好，非常易于使用和掌握，無需編碼; 生成的頁面代碼緊湊且針對每個設備進行了優化，Elementor有300多種精美的模板，從幾十個小部件中進行選擇，以創建你需要的任何內容：按鈕，標題，表格，只要你能想到的，沒有什么是你不能做的，

安裝 Elementor 插件

在WordPress儀表板中，導航到“ 插件”>“安裝插件”，搜索Elementor并單擊“ 安裝”，安裝Elementor后，單擊“ 激活”，

免費版的功能不全，本教程是按專業版來操作，Elementor Pro才能充分發揮Elementor的價值，訪問Elementor并購買該插件的專業版，然后以與上述相同的方式安裝和激活它，安裝Elementor Pro后，再通過轉到的WordPress的儀表板并導航到Elementor>許可證來輸入許可證，

創建網站頁面

前面我們已經介紹了基本準備作業設定，并且你已準備好所有內容，現在我們開始創建頁面，在本教程中，我們將構建一個簡單的網站，其中包含主頁，選單頁面，關于頁面和聯系我們頁面，我們將在本教程的其余部分使用Elementor Pro 模板匯入，讓我們開始吧，

使用Elementor創建你的主頁

安裝插件后，現在我們開始創建主頁，轉到“頁面”選項，然后單擊“新建頁面”，

我們把頁面標題為“主頁”，然后單擊“保存草稿”按鈕，一定要養成不斷保存作業的習慣，如果發生緊急情況，我們可以恢復，這可以減少失去勞動成果的機會，

在標題下，單擊“使用Elementor編輯”按鈕以打開插件的編輯器，

匯入Elementor模板

剛開始使用Elementor的最簡單的方法就是套用模板庫里的模板，這樣你就可以找出這個效果是如何設定的并探索該工具在實時環境中可以執行的操作，

單擊位于螢屏中心附近的“添加模板”按鈕，

Elementor有多種模板可供選擇，有免費的和付費Pro版本的插件，找到你喜歡的布局，然后單擊“插入”按鈕，

更改頁面布局

將滑鼠懸停在模板上時，你會看到一個淺藍色控制面板，中間圖示是該部分的編輯器，單擊此圖示左側面板視圖出現，編輯模板布局，布局下面可以看到內容寬度，單擊將布局更改為全寬，

更改頁面的內容

你可以開始自定義頁面的內容，這可以通過插入各種工具來完成，要編輯頁面的任何元素，只需單擊它們，左側面板將更改為該特定部分的編輯器，

你可以更改字體，顏色，大小甚至每個標題標簽在頁面上的顯示方式，

更改背景影像

另一個重要的部分是自定義背景影像，按照自己的意圖來更改背景，

回傳“編輯部分”螢屏，然后單擊“樣式”，

洗掉那里的影像后，選擇一個你想要的影像，

在更改背景時，有多個選項，在Elementor中背景可以使用漸變，和視頻內容，

更改字體顏色

如果要更改頁面的字體顏色，單擊要更改的元素，然后單擊“樣式”選項卡，從這里，你可以使用顏色選擇器修改文本顏色，或者輸入十六進制代碼（如果有），還可以訪問各種字體供你選擇，

選擇字體外觀時，最好不要包含太多不同顏色設定，過多的色往往會分散注意力，并可能導致訪客幾乎立即離開，

完成更改后，單擊左下角的“保存”按鈕，

在Elementor保存頁面后，單擊左下角的的“全域設定”選項，

將狀態下拉選單切換為“已發布”，

單擊左上角的“選單”圖示退出到儀表板，

將頁面設定為你網站的主頁

現在頁面已創建并發布，是時候將其設定為主頁了，轉到WordPress的“設定”選單，然后單擊“閱讀”，

在“首頁顯示”選項下，你將看到一個顯示靜態頁面的單選按鈕，這告訴WordPress你要使用特定頁面作為你網站的主頁，單擊“靜態頁面”旁邊的單選按鈕，

現在可以更改首頁和帖子頁面選項，現在，單擊下拉視窗，然后單擊剛才創建的“主頁”頁面，

拉到設定頁面的底部，然后單擊“保存更改”按鈕，

現在我們完成了在Elementor中創建主頁，

創建其余的網站頁面

接下來我們用同樣的方法創建“關于我們”或“聯系我們”頁面，

自定義你的網站

上面我們在講創建主頁時有講到自定義，下面我們以另一個模板做一個補充，

編輯區域部分

當你將滑鼠懸停在某個區域部分上時，你會看到一個藍色邊框，其中包含一個句柄，可讓你編輯該部分，添加新區域部分或完全洗掉該區域頁面，>你也可以從那里右鍵單擊手柄和訪問區域控制元件，如下面的螢屏截圖所示，

單擊+圖示可以在現有區域上方添加新部分，然后，你必須單擊粉紅色+或檔案夾圖示以創建部分的結構或選擇預制模板，

編輯內部部分小部件或列元素

以類似的方式，你可以單擊灰色邊框和相應的手柄來編輯內部部分，您可以修改列的寬度并更改列之間的間距，右鍵單擊句柄，可以添加更多列，復制現有列，洗掉它們等，

編輯小部件

最后，你可以通過單擊視窗小部件句柄中的鉛筆圖示或右鍵單擊它來編輯現有視窗小部件，你可以更改它的內容以及訪問樣式控制元件，復制視窗小部件，洗掉它們等，

還可以通過從螢屏左側拖動它們并將它們放到頁面上來添加新的小部件，

自定義顏色

你可能最想要做的自定義是調整模板的顏色，調整為符合你的業務或品牌顏色，并使用自己的風格個性化模板，你可以在全域級別和單個視窗小部件級別修改顏色，在全域級別編輯顏色意味著你使用Elementor創建的任何新頁面都將繼承這些樣式，因此你只需創建結構并輸入內容即可，要修改全域顏色設定，請單擊頁面編輯螢屏上的左漢堡選單，然后，單擊“樣式”選單下的“默認顏色”鏈接，你也可以通過輸入自己的十六進制顏色代碼來調整默認顏色方案，或者如果你沒有自己的顏色方案，則可以應用預先制定的顏色方案，可以通過單獨自定義每個視窗小部件來覆寫全域樣式設定，要自定義單個視窗小部件的顏色，請選擇要設定樣式的視窗小部件，然后單擊小部件編輯螢屏上的“樣式”選項卡

自定義排版

與顏色類似，你可以在全域級別和單個視窗小部件級別編輯站點的排版，

在全域范圍內，你可以為主要和次要標題，正文和重音文本設定字體系列和字體粗細，

要設定單個視窗小部件的排版樣式，請單擊要編輯的視窗小部件，然后單擊樣式，從Family旁邊的下拉選單中，可以選擇上百種Google字體，也可以選擇默認，并應用在全域設定下設定的默認字體，

自定義影像

上面我們講了自定義顏色和字體，影像替換也一樣的簡單，單擊要換的部分，在這種情況下，我想更改“精選選單”部分中的影像，我點擊了Kiwi Bliss列，然后轉到Style選項卡，首先，你需要通過單擊“ 洗掉”洗掉現有影像，然后單擊“ +”以上載您自己的影像，加載媒體庫后，單擊“上載檔案”，然后單擊“ 選擇檔案”按鈕，然后，你將選擇所需的影像，然后單擊“ 插入媒體”按鈕，還可以更改其位置并控制其大小，還可以選擇更改背景覆寫或完全洗掉它，以及設定影像文本的顏色，如果你使用常規影像而不是背景影像，則選項會略少，例如，要更改和自定義主頁的“膳食定價”部分中的影像，您將按照洗掉現有影像然后上傳自己的影像的相同步驟進行操作，然后，你可以更改影像不透明度并添加各種CSS濾鏡，例如“模糊”，“亮度”等，你可以為影像懸停狀態應用不同的樣式，并且一旦訪問者用滑鼠懸停在影像上，這些樣式將可見，要自定義網站上的其他圖片，發布以保存它們，

自定義頁面布局

根據自己的喜好配置所有樣式后，就可以開始調整布局了，例如，我們正在使用的主頁有3列，但如果你的企業有4個服務怎么辦？在這種情況下，您需要添加另一列，

要執行此操作，請右鍵單擊內部區域手柄，然后選擇“ 添加”列，將創建一個新列，然后你可以繼續添加所需的小部件，或者，你可以復制現有列以節省時間，復制完列后，將內容替換為你自己的內容，

你也可以在頁面中添加其他部分，如前所述，以下是添加示例關于部分的分步程序：

1. 單擊選單定價下方部分句柄中的+圖示，
2. 將結構設定為一列
3. 將列調整為全寬
4. 拖動標題視窗小部件并鍵入標題
5. 拖動內部視窗小部件并選擇兩列
6. 將影像添加到左列，并將文本小部件添加到右列
7. 從計算機中選擇一張影像并將其上傳到影像小部件
8. 在“文本”小部件中輸入業務的簡要說明
9. 拖動文本小部件下方的按鈕小部件
10. 設定按鈕以鏈接到“關于”頁面，

完成所需更改后，單擊綠色“ 發布”按鈕，更改就會馬上生效，

添加社交媒體鏈接

如上圖，我們正在使用的模板帶有頁腳中的社交媒體鏈接，單擊圖示并使用鏈接到首選社交媒體組態檔的圖示替換它們來輕松編輯它們，單擊“ 添加專案” 按鈕添加更多鏈接，通過更改形狀自定義圖示，然后單擊“ 樣式” 選項卡以控制圖示顏色，大小，填充等，從下面的螢屏截圖中可以看出，我添加了一個Pinterest圖示，并將圖示更改為藍色的方形，值得一提的是，拖動社交鏈接在頁面的任何位置添加社交圖示小部件，然后，選擇要顯示的圖示，并更改形狀，大小，顏色等來配置它們的顯示方式，在此示例中，我已將圖示添加到上一步中創建的“關于”部分，完成修改主頁后，單擊“ 發布” ，然后單擊“ 退出到儀表板” 按鈕，

自定義聯系表單

到目前為止，大多數自定義都發生在主頁上，讓我們來看看如何調整聯系我們頁面上的聯系表單等其他元素，首先回傳“ 頁面”>“所有頁面” 并選擇“ 聯系我們” 頁面，單擊使用Elementor編輯，

單擊表單小部件，然后開始修改資訊，單擊各個表單元素以添加電子郵件，電話號碼，日期，文本，網站等欄位，單擊“ 添加專案” 按鈕添加更多欄位，

在這個例子中，我為座位選項添加了一個欄位，以便潛在客戶可以選擇室內或室外桌子，

該表單還允許你選擇將接收表單提交的電子郵件以及填寫表單后應發生的情況，選擇接收電子郵件通知，將訪問者重定向到特殊的感謝頁面，將其添加到您的電子郵件串列等，完成后，單擊綠色“ 發布” 按鈕，您的更改將在頁面上生效，

自定義復制

直接編輯小部件并用你自己的文本替換文本，也可以從任何頁面開始，轉到“頁面”>“所有頁面” ，然后將滑鼠懸停在要編輯的頁面上，單擊Edit with Elementor ，在下面的示例中，我正在編輯“關于”頁面副本，

加載編輯螢屏后，單擊要編輯的文本，你會注意到左側顯示的文本編輯器看起來像常規的WordPress帖子編輯器，然后，你可以編輯器里更改文本，添加影像，表單，鏈接，格式化文本等，

要編輯站點上的其他文本區域，只需重復上述步驟即可，單擊文本，洗掉現有副本，然后輸入你自己的內容，完成后，單擊綠色的“ 發布” 按鈕，更改將在頁面上生效，

在編輯文本時，你仍然可以對排版進行調整并調整文本的顏色，如前面所述，

添加頁頭和頁腳模板

使用Elementor模塊功能，你可以添加自定義或預制的頁眉和頁腳模板，并在網站的每個頁面上使用它們，或者你可以為每個頁面創建不同的標題，

添加頁頭

要創建頁頭，請單擊任何頁面上最頂部分的+ 圖示，然后單擊“ 檔案夾” 圖示，加載模板庫后，單擊模塊，然后從下拉選單中選擇Header 類別，

選擇你喜歡的頁頭，然后單擊“ 插入” 按鈕，然后，單擊“ 部分設定” ，在“ 布局”設定下將HTML標記設定為頁頭，還可以將寬度設定為全寬，調整視窗小部件之間的間距，向其添加更多視窗小部件等，

在下面的截圖中看到的，我洗掉了搜索圖示并將其替換為社交圖示，完成調整標題后，右鍵單擊其句柄并選擇另存為模板，然后，你可以在網站的所有頁面上重復使用標頭，

添加自定義頁腳

以類似的方式，為頁面創建頁腳部分，首先單擊頁面上最后一部分下方的檔案夾圖示，然后從下拉選單中選擇“ 模塊”，然后選擇“ 頁腳 ”，選擇喜歡的頁腳模塊，然后單擊“ 插入”，可以使用與頁面上任何其他部分和視窗小部件相同的方式設定頁腳元素的樣式，

完成頁腳設計后，單擊其句柄并按“ 另存為”模板，為其命名并單擊“ 保存”，然后可以在你網站的任何頁面上重復使用它，完成頁眉和頁腳元素的添加和樣式設定后，只需單擊“ 發布”即可螢屏左側的按鈕，你的頁面將完全自定義并在你的網站上生效，

保存頁眉和頁腳后，回傳并將其應用到其他頁面，要執行此操作，請轉到“ 頁面”>“所有頁面”，然后選擇要使用Elementor編輯的頁面，然后，單擊最上面部分上方的+圖示，單擊檔案夾圖示并轉到我的模板，找到已保存的標題部分，然后單擊“ 插入” 按鈕，要添加頁腳，請滾動到頁面底部，然后單擊最底部的檔案夾圖示，單擊我的模板，然后選擇已保存的頁腳塊，單擊更新 保存更改，

自定義WordPress

完成頁面上的所有更改后，我們還需要在WordPress中進行一些最后的自定義，上傳LOGO，創建導航選單，

上傳網站標志-LOGO

首先我們來上傳一個LOGO，為此，在WordPress儀表板中轉到“ 外觀”>“自定義”，加載定制程式后，單擊“ 站點身份”，然后單擊“ 選擇圖示” ，

加載媒體庫時，單擊“ 上傳檔案”，上傳好后，單擊“ 發布”以保存更改，

創建一個導航選單

轉到外觀>選單，然后輸入選單名稱，然后，單擊“ 創建選單”，從那里，檢查創建并在螢屏右側上方自定義的頁面，

你可以拖動頁面以自定義它們顯示的順序，并選擇此選單的位置，完成自定義選單后，單擊“ 保存選單”，

最后，我們已經在教程中介紹了很多方法，但愿你已經成功的學會了從頭開始為你的業務創建了一個站點，正如你所看到的，當你知道如何處理網站設計以及所涉及的內容時，你會發現，真的不難啊，