WordPress教學, Elementor教學課程

Elementor入門教學課程:零基礎學會用Elementor建站

如何安裝Elementor?

透過WordPress後台安裝:

第1步,登陸WordPress後台,在外掛欄搜尋Elementor,點擊立即安裝並啟用。

立即安装

第2步,建立一個帳號。如果你目前只想體驗免費版,請選擇跳過。

Elementor创建账号

第3步,安裝主題。Elementor官方推薦了Hello,它是一個輕量級的WordPress主題,速度很快,但就建站而言,新手選Astra主題會比較容易操作,建議跳過。

hello主题

第4步,新增網站名稱,也就是網站首頁的標題,這裡先跳過,後續SEO優化的時候再填寫。

添加网站名称

第5步,上傳網站標識。同上述幾步一樣,如果沒準備好就跳過,後面可以隨時上傳或修改。

上传Logo

第6步,了解如何使用Elementor。你會看到兩個嚮導,左邊是創建頁面,右邊是導入模板,大家可以自行點選查看,如果選跳過,會跳到創建頁面。

了解如何使用Elementor

到這,Elementor就安裝完了,網站後台也會增加相關的設定選項,下一步是熟悉它的操作介面和使用方法,並用它來創建網站頁面。

elementor设置

透過Elementor官網下載

  1. 轉到 Elementor.com,然後點擊下載。
  2. 在WordPress後台,點選外掛  >  安裝插件
  3. 點選上傳外掛,然後選擇你在Elementor下載的文件。
file VelGqFbBiN

Elementor使用教學課程

使用Elementor,你無需學習任何程式設計知識,就能搭建一個高大上的網站。但是,搭建網站前最好學會它的基本操作,考慮到這些,我會逐步解說它怎麼使用。

1. 建立頁面

第1步,首先在WordPress後台新建頁面,然後點選最上方的使用 Elementor 編輯按鈕。

使用 Elementor 编辑

第2步,熟悉編輯器的結構,一共有三個部分,分別是工具列模組,可視化介面和導航器。

  • 工具列:包含了大量可拖放的模組,例如區塊、圖片、信、按鈕等
  • 可視化介面:編輯頁面時,能即時知道頁面發生了哪些變化
  • 導航器:從上到下顯示頁面元素的排版,方便調整各模組的順序
elementor编辑器

第3步,點選加號選擇你要的結構,決定同一行或同一列大概要放多少個區塊。

elementor区块

然後,將左邊工具列裡的模組拖曳到右邊的區塊中,例如標題、圖片,按鈕。

拖动elementor模块

第4步,點選右邊的藍色虛線框,選擇你已新增的模組,可以修改模組裡的內容。

编辑区块内容

第5步,點擊左下角的設置,修改頁面佈局為全寬,以後可以單獨調整每個區塊的寬度。

elementor宽度

第6步,使用預覽查看頁面的實際樣子,確認無誤後點發布。至此,頁面就創建成功了。

elementor发布页面

頁面發布後,如果這個頁面是網站首頁,你可以到WordPress後台設置 > 閱讀,將這個頁面設定成靜態首頁,並儲存更改,以後造訪網域名稱就會顯示該頁面。

2. 元素專業版

在免費版的基礎上,Pro增加了很多進階功能,其中最有用的是模板和主題生成器,另外還包括更多的模組、著陸頁面、彈出視窗等,接下來我就教大家如何使用Pro。

第1步,首先去官方網站購買Elementor Pro,然後在網站後台添加插件,上傳安裝文件,點擊立即安裝並啟用。如果覺得官網太貴,也可以聯絡一燈正版授權,費用合理。

elementor pro安装文件

第2步,安裝好插件,你會在右上角看到一個啟動提示,請點選「連線並啟動」按鈕。

连接Elementor pro

第3步,查看啟動狀態,Active即已經激活,後續可以線上更新,導入海量付費模板。

激活elementor pro

3. 導入模板

Elementor升級Pro版本附帶了大量的模板,導入後可大幅簡化建站流程,這是免費版和Pro的最大差別,也是新手之所以能零基礎建站的關鍵所在。

第1步,開啟Elementor頁面編輯器,點擊右下角的資料夾圖標,進入範本庫。

导入模板按钮

第2步,選擇模板。如果遇到自己喜歡的,可以點擊圖片上的放大鏡進行預覽。

预览Elementor模板

第3步,點擊綠色的「插入」按鈕,一鍵線上匯入模板。

导入模板

第4步,模板導入後,你會看到一系列已完成的模組,接下來要做的是自訂設計它們。

导入后的Elementor模板

4. 自訂設計頁面

Elementor中的每一個模組,你都可以進一步自訂它們,更改其內容、排版或樣式,把它們設計成你想要的樣子,具體的操作方法如下。

更改佈局

點選藍色虛線框上方的六個點,內容寬度選方框,就可以調整整個區塊在頁面中的寬度。

调整内容宽度

更改結構

同樣是點擊六個點,在佈局的下方找到結構,可以更改區塊中各模組的結構比例。

调整结构比例

修改文字

文字類別的模組,例如文字和標題,只需點擊對應的模組,就能修改裡面的文字內容。

修改文字

編輯圖片

點擊圖片模組能替換或刪除圖片,也能自訂圖片尺寸,對齊方式,添加連結和字幕。

编辑图片

修改顏色

點選你要修改的模組,在樣式裡有顏色設定選項。

修改颜色

刪除模組

如果遇到自己不喜歡的區塊或模組,可以滑鼠右鍵點擊刪除。

删除模块

回應模式

點擊左下角第四個圖標,就可以進入響應模式,自訂平板和手機端的頁面佈局。

响应模式

站點設定

最後要做的是點擊左上角的菜單,設定站點基本元素,例如全域顏色字體、主題風格、站點標識和背景等,雖然你也可以等網站建完再弄,但先設定也並沒有什麼壞處。

站点设置

其中的站點標識,可以自訂Logo、網站名稱和網站描述。

站点标识

至此,如何自訂設計頁面就介紹完了,接下來的事情無非是重複導入模板,保留你想要的,刪除你不要的,並不斷的改進與完善,最後把剩下的模組組合在一起變成自己的。

5. 新增頁首和頁尾

設計好頁面,把它們分門別類別加入到WordPress選單,接下來使用主題產生器新增網站的頁首和頁尾了,以下是詳細的操作步驟。

第1步,點擊網站後台的模板 > Themebuilder(主題產生器)。

主题生成器

第2步,點選 Header 或 Footer 旁邊的+號,如果遇到錯誤,可以透過更換主題解決。

添加页眉和页脚

第3步,點擊資料夾圖標,新增頁首或頁尾的模板。

导入页眉页脚模板

第4步,選擇頁首頁尾的樣式,並一鍵導入。

选择页眉页脚模板

第5步,自訂頁首和頁尾裡的元素,修改好之後點擊發布,並選擇整站顯示。

自定义页眉页脚

6. Elementor擴展

Elementor是一個很棒的頁面編輯器,它提供了很多功能,但在使用上它有些不完美,所以我們還要安裝第三方主題外掛進一步擴充它的易用性。

主題擴充

我强烈推荐你使用Astra它的一个巨大优势是可以导入完整的网站模板而不是一个简单的单页模板易用性和建站速度方面会更胜一筹

主题扩展

插件扩展

Elementor有很多好用的第三方扩展插件比如 Essential Addons 和 Astra UAE它们带有上百个模块可以帮助你更好的设计网站

插件扩展

Elementor常见问题

Elementor免费吗?

是的,它有免費版,但也可以付費升級到Pro,價格從每年 59 美元到 399 美元不等。

Elementor速度快嗎?

它的速度很快,但前提是要搭配好用的WordPress主機。

Elementor好用嗎?

是的,此編輯器操作介面直觀,非常適合剛學建站的個人或中小企業使用。

Elementor適合Google優化嗎?

是的,它的程式碼乾淨整潔,對 SEO 友好,很多知名的英文網站都在使用。

總結

建立網站不是一件容易的事情,但還好我們有 Elementor 可以使用。

透過本教程,我相信你已經掌握瞭如何使用它來建站。如果你後續還有什麼問題,可以聯絡我們,也可以閱讀我們的外貿建站教程:全流程完整指南,內容更有系統更完整。

關於 編輯部

kuajinggu的編輯人員是一支由 WordPress 專家組成的團隊,由 Dylan 領導,在 WordPress、虛擬主機、電子商務、搜尋引擎優化和行銷方面擁有超過 10年的經驗。kuajinggu創建於 2014 年,目前是業界最大的免費 WordPress 資源網站,常被稱為 WordPress 的維基百科。

發佈留言