不少人認爲建站太難了，又要懂代碼、網頁設計，數據庫，又要配置服務器等等，無從下手。那怎麼辦？曾經的不可能，如今能夠輕易的去現實它，這裏教你們如何零基礎用頁面構建器插件 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個服務怎麼辦？在這種狀況下，您須要添加另外一列。
要執行此操做，請右鍵單擊內部區域手柄，而後選擇「 添加」列。將建立一個新列，而後你能夠繼續添加所需的小部件。或者，你能夠複製現有列以節省時間。複製完列後，將內容替換爲你本身的內容。
你也能夠在頁面中添加其餘部分，如前所述。如下是添加示例關於部分的分步過程：
- 單擊菜單訂價下方部分句柄中的+圖標。
- 將結構設置爲一列
- 將列調整爲全寬
- 拖動標題窗口小部件並鍵入標題
- 拖動內部窗口小部件並選擇兩列
- 將圖像添加到左列，並將文本小部件添加到右列
- 從計算機中選擇一張圖像並將其上傳到圖像小部件
- 在「文本」小部件中輸入業務的簡要說明
- 拖動文本小部件下方的按鈕小部件
- 設置按鈕以連接到「關於」頁面。
完成所需更改後，單擊綠色「 發佈」按鈕，更改就會立刻生效。
添加社交媒體連接
如上圖，咱們正在使用的模板帶有頁腳中的社交媒體連接。單擊圖標並使用連接到首選社交媒體配置文件的圖標替換它們來輕鬆編輯它們。單擊「 添加項目」 按鈕添加更多連接。經過更改形狀自定義圖標，而後單擊「 樣式」 選項卡以控制圖標顏色，大小，填充等。從下面的屏幕截圖中能夠看出，我添加了一個Pinterest圖標，並將圖標更改成藍色的方形。值得一提的是，拖動社交連接在頁面的任何位置添加社交圖標小部件。而後，選擇要顯示的圖標，並更改形狀，大小，顏色等來配置它們的顯示方式。在此示例中，我已將圖標添加到上一步中建立的「關於」部分。完成修改主頁後，單擊「 發佈」 ，而後單擊「 退出到儀表板」 按鈕。
自定義聯繫表單
到目前爲止，大多數自定義都發生在主頁上。讓咱們來看看如何調整聯繫咱們頁面上的聯繫表單等其餘元素。首先返回「 頁面」>「全部頁面」 並選擇「 聯繫咱們」 頁面。單擊使用Elementor編輯。
單擊表單小部件，而後開始修改信息。單擊各個表單元素以添加電子郵件，電話號碼，日期，文本，網站等字段。單擊「 添加項目」 按鈕添加更多字段。
在這個例子中，我爲座位選項添加了一個字段，以便潛在客戶能夠選擇室內或室外桌子。
該表單還容許你選擇將接收表單提交的電子郵件以及填寫表單後應發生的狀況。選擇接收電子郵件通知，將訪問者重定向到特殊的感謝頁面，將其添加到您的電子郵件列表等。完成後，單擊綠色「 發佈」 按鈕，您的更改將在頁面上生效。
自定義複製
直接編輯小部件並用你本身的文本替換文本。也能夠從任何頁面開始，轉到「頁面」>「全部頁面」 ，而後將鼠標懸停在要編輯的頁面上。單擊Edit with Elementor 。在下面的示例中，我正在編輯「關於」頁面副本。
加載編輯屏幕後，單擊要編輯的文本。你會注意到左側顯示的文本編輯器看起來像常規的WordPress帖子編輯器。而後，你能夠編輯器裏更改文本，添加圖像，表單，連接，格式化文本等。
要編輯站點上的其餘文本區域，只需重複上述步驟便可。單擊文本，刪除現有副本，而後輸入你本身的內容。完成後，單擊綠色的「 發佈」 按鈕，更改將在頁面上生效。
在編輯文本時，你仍然能夠對排版進行調整並調整文本的顏色，如前面所述。
添加頁頭和頁腳模板
使用Elementor模塊功能，你能夠添加自定義或預製的頁眉和頁腳模板，並在網站的每一個頁面上使用它們，或者你能夠爲每一個頁面建立不一樣的標題。
添加頁頭
要建立頁頭，請單擊任何頁面上最頂部分的+ 圖標，而後單擊「 文件夾」 圖標。加載模板庫後，單擊模塊，而後從下拉菜單中選擇Header 類別。
選擇你喜歡的頁頭，而後單擊「 插入」 按鈕。而後，單擊「 部分設置」 ，在「 佈局」設置下將HTML標記設置爲頁頭。還能夠將寬度設置爲全寬，調整窗口小部件之間的間距，向其添加更多窗口小部件等。
在下面的截圖中看到的，我刪除了搜索圖標並將其替換爲社交圖標。完成調整標題後，右鍵單擊其句柄並選擇另存爲模板。而後，你能夠在網站的全部頁面上重複使用標頭。
添加自定義頁腳
以相似的方式，爲頁面建立頁腳部分。首先單擊頁面上最後一部分下方的文件夾圖標，而後從下拉菜單中選擇「 模塊」，而後選擇「 頁腳 」。選擇喜歡的頁腳模塊，而後單擊「 插入」。可使用與頁面上任何其餘部分和窗口小部件相同的方式設置頁腳元素的樣式。
完成頁腳設計後，單擊其句柄並按「 另存爲」模板。爲其命名並單擊「 保存」，而後能夠在你網站的任何頁面上重複使用它。完成頁眉和頁腳元素的添加和樣式設置後，只需單擊「 發佈」便可屏幕左側的按鈕，你的頁面將徹底自定義並在你的網站上生效。
保存頁眉和頁腳後，返回並將其應用到其餘頁面。要執行此操做，請轉到「 頁面」>「全部頁面」，而後選擇要使用Elementor編輯的頁面。而後，單擊最上面部分上方的+圖標，單擊文件夾圖標並轉到個人模板。找到已保存的標題部分，而後單擊「 插入」 按鈕。要添加頁腳，請滾動到頁面底部，而後單擊最底部的文件夾圖標。單擊個人模板，而後選擇已保存的頁腳塊。單擊更新 保存更改。
自定義WordPress
完成頁面上的全部更改後，咱們還須要在WordPress中進行一些最後的自定義。上傳LOGO，建立導航菜單。
上傳網站標誌-LOGO
首先咱們來上傳一個LOGO。爲此，在WordPress儀表板中轉到「 外觀」>「自定義」。加載定製程序後，單擊「 站點身份」，而後單擊「 選擇圖標」 。
加載媒體庫時，單擊「 上傳文件」，上傳好後，單擊「 發佈」以保存更改。
建立一個導航菜單
轉到外觀>菜單，而後輸入菜單名稱。而後，單擊「 建立菜單」。從那裏，檢查建立並在屏幕右側上方自定義的頁面。
你能夠拖動頁面以自定義它們顯示的順序，並選擇此菜單的位置。完成自定義菜單後，單擊「 保存菜單」。
最後，咱們已經在教程中介紹了不少方法，希望你已經成功的學會了從頭開始爲你的業務建立了一個站點。正如你所看到的，當你知道如何處理網站設計以及所涉及的內容時，你會發現，真的不難啊。