WordPress教程, Elementor教程

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

如何安裝Elementor?

透過WordPress後台安裝:

第1步,登陸WordPress後台,在插件欄搜索Elementor,點擊立即安裝並啟用。

立即安装

第2步,創建一個賬號。如果你目前只想體驗免費版,請選擇飛。

Elementor创建账号

第3步,安裝主題。Elementor官方推薦了Hello,佢係一個輕量級嘅WordPress主題,速度好快,但就建站而言,新手選Astra主題會更容易操作,建議飛。

hello主题

第4步,添加網站名稱,也就昰網站主頁嘅標題,呢度先飛,後續SEO優化嘅時候再填寫。

添加网站名称

第5步,上傳網站Logo。同上述幾步一樣,如果冇準備好就飛,後便可以隨時上傳或修改。

上传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. Elementor Pro

喺免費版嘅基礎度,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適合穀謌優化嗎?

係,它的代碼乾淨整潔,對SEO友好,好多知名嘅英文網站都在使用。

總結

搭建網站唔係一件容易的事情,但好彩我哋有Elementor可以使用。

透過本教程,我相信你有掌握如何使用它建站。如果你後續仲有乜嘢問題,可以聯繫我哋,都可以閱讀我哋嘅外貿建站教程:流程完整指南晒,內容更系統更完整。

About 編輯部

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

發佈留言