Elementor教學資源分享:想做出有設計感的WordPress自架網站?推薦這款強大的網頁編輯器!

elementor-cover

自架網站說簡單不簡單,說難好像也不是太難。如果你Google搜尋自架網站,會發現大多數人推薦WordPress架站。除了它是個非常SEO友善的內容管理平台,更強大的是它有許多外掛支援。如果你正在考慮使用WordPress架站,但是又有一個設計魂,想要有多元的網站頁面設計,那一定要認識Elementor這個網站(頁面)編輯器。

這篇除了簡單介紹Elementor是什麼、有何特色、Elementor教學資源、免費版和付費版,還會分享一些Elementor幫助我在自架網站上,個人收穫最多的地方!

目錄大綱

Elementor是什麼?

在認識一個軟體時,我很喜歡去看他們的官方介紹。在Elementor的官網裡,你會看到斗大的標題寫著:

Create Websites, Design Your Future 架設網站,設計你的未來

elementor tutorial

或許用中文讀起來不太直覺,但它們要強調的就是你可以「盡情的設計一個屬於自己的網站」

它的網站標題是這樣寫的:WordPress免費網站編輯器(Website Builder)的首選。沒錯,就是透過編輯器這個東西,讓你可以盡情的設計網站裡的各個頁面。不需要任何程式語言的能力,就能透過所見即所得的編輯方式,設計出自己的風格。

目前有超過八百萬人使用,有著強大的社群互助幫忙。如果你有爬過一些文章,或是到WordPress架站的社團討論區,就會發現超多人推薦Elementor這個編輯器!

以我個人使用Elementor幾年經驗下來,要理解Elementor可以把它想成是「各種IKEA家具產品」和「你的空房子」,Elementor提供各種不同的元素(家具),讓你可以很自由地將它們拖拉到網頁(空房子)上,做各種不同的排列。

elementor tutorial
各種不同的元素,打從最基礎的圖片、影片元素,到翻轉卡、評價星等、導覽等。Elementor提供超過90種元素。

如果你不知道該如何設計,也可以直接套用Elementor的模板,再針對細部的內容做微調。就好像IKEA的樣品屋一樣,你可以套用IKEA樣品屋的設計,若不滿意裡面的小物件,可以隨自己的喜好替換。

elementor tutorial
Elementor提供超過三百個模板,包括首頁、聯絡頁面、產品頁、作品集頁面等等。這只是其中一個小角落

所以,簡單來說,它就是一個幫助你排版的工具。而它強大的功能,可以滿足各種不同情境的需求。像是排出漂亮的首頁、聯絡頁面、作品集頁面或是單頁式的銷售頁等等。

Elementor的特色

如果真的要超詳細列舉Elementor的特色,那這頁可能要寫到天荒地老。

我們直接看重點:

  • 拖拉式的編輯器:非常直覺的編輯方式。在設計頁面時,可直接把需要的元素,托拉到想要的位置
  • 超過300個設計師模板:針對各種情境需求,Elementor提供超過300種模板,使用者可直接套用
  • 超過90個元素(Widgets):Elementor提供任何網頁需要的元素,像是按鈕、標題、表格等
  • 響應式編輯:可直接在Elementor編輯器瀏覽手機、平板的排版,並且調整行動裝置的排版
  • 主題、彈出視窗、WooCommerce編輯器:這是付費版的功能,可以創建如文章模板,所有發佈的文章,都套用同一格式

Elementor適用在各種不同的情境、不同人,不論你是網頁設計師、程式設計師或是要建立個人品牌的個體、甚至是中小型的企業想自架網站,都很適合使用Elementor!

elementor tutorial

個人覺得,只要懂基本的概念(拖拉、元素),加上有明確的需求、以及自己的設計想法,Elementor網頁編輯器確實能成為你強大的推手!

如果還想了解更多詳細的特色,可以直接參考Elementor官方介紹。若覺得閱讀英文有點吃力,推薦使用Google翻譯一鍵翻譯成中文,更快速的理解!

如何開始使用Elementor

好,既然知道Elementor是一個強大的排版工具(我姑且這樣稱呼它,比較好理解)那要如何開始使用它呢?

之前在 WordPress架站新手必看!WordPress是什麼?優缺點?流程及費用?完整入門教學,建立全局觀! 這篇文章有分享過,WordPress架站的的好處是它有強大的外掛功能,而Elementor說穿了,就是一個WordPress外掛。這個外掛的功能,就是幫助我們排出很漂亮的頁面。

所以,要使用Elementor,你必須要先有一個WordPress的網站,之後再安裝Elementor這個外掛。

若你已經有一個WordPress網站,那就直接到後台的外掛,點選安裝外掛,搜尋Elementor,就可以安裝並啟用免費版的Elementor。至於Pro專業付費版的,則需要到Elementor官網購買,並在帳戶的頁面下載Elementor Pro這個外掛,上傳到WordPress即可。

若你目前還處於研究自架網站的階段,那我非常推薦你看看我之前寫的關於WordPress新手架站的觀念文。這篇文章幫助你在架網站之前,能先對整個架站流程有基礎概念。在未來架站的的學習過程中,能比較清楚自己在哪個位置、該找什麼資料。

elementor tutorial
安裝免費版Elementor外掛:WordPress後台>>外掛>>安裝外掛>>搜尋Elementor

elementor tutorial
付費版的Elementor,則需要到官網的帳戶頁面下載;之後再到WordPress的外掛區上傳

Elementor教學/學習資源

Elementor的詳細步驟教學,我就不多做說明了!只需要Google:Elementor教學,你就會發現超多超詳細的教學文。或是直接到YouTube搜尋,也有不錯的影片教學。我想,只要有心想學,都不是太困難的事情。

我就分享一些Elementor的教學和學習資源,你可以在剛開始要使用時,先閱讀或是觀看基礎教學文章影片。在未來遇到問題時,透過搜尋找到更多資料。

Elementor官網(英文)

官方的資料永遠是第一手最新的資訊。這種軟體服務類的東西,通常會提供超多超詳細的資訊,好讓使用者可以無痛上手。不然,如果使用者都不會使用,那他們也不用賺錢了XD

在Elementor官網的導覽列上,滑鼠滑過Resources(資源),就可以看到各種不同的資料,包括教學課程、工具、部落格、線上論壇等⋯⋯真的是超級豐富的啊!最原始的學習資料,推薦他們的Help Center(Support >> Help Center)

雖然是英文的內容,但千萬不要害怕。有基本的英文能力,通常沒有太多問題。若真的覺得很吃力,我推薦安裝Google翻譯的外掛,可以一鍵把網頁翻譯成中文(真的很好用!)

elementor tutorial

順帶一提,之前看股癌謝孟恭《灰階思考》這本書,他就強烈建議我們在學習時,多攝取第一手的資料,而非經過別人整理的第二手資料!建議從官方的文件學習,最棒最安全!

Elementor官方YouTube頻道

只要你點擊官網上的教學課程,就會跳轉到他們的YouTube官方頻道。建議點選播放清單,挑選自己感興趣的來學習。

若是初學者,可以從他們的Getting Started With Elementor Course開始

elementor tutorial

Elementor使用者社團(英文)

在Elementor的介紹裡,你會發現他們非常強調自己的社群。他們有一個11萬的Facebook社團,上頭有來自世界各地使用Elementor的好手。你可以在上面看看別人的問題和解答,從中學習。若自己有問題找不到解決答案,也可以在上面發問尋求協助。不過要用英文就是了!

elementor tutorial

Elementor線上客服

若你有付費使用Elementor專業版,那會享有線上客服的權益。

在使用Elementor的過程中,不管遇到任何問題,都可以直接詢問線上客服,他們可以直接幫你解決。(只需登入Elementor帳號)這對我來說真的是一大福音,曾經幾次遇到問題,但都解決不了,後來就直接詢問線上客服,即時的來回,很快就順利幫我解決了!不然,為了網站的問題困擾許久,真的不好過XD

elementor tutorial

Elementor專家

這是近期新推出的。由於Elementor的使用者太龐大,所以也衍伸出許多第三方的服務。意思是,若今天你想使用Elementor設計網頁,可以不用自己來,直接外包給Elementor專家

在他們的Elementor Experts的網站上,你會看到各種不同類型的Elementor專家。針對自己的需求,好比建置一個一頁式的銷售頁面、個人的作品集,或是電商網站,都可以在上頭找到對應的專家幫忙。當然,外包就是需要額外付費了!

這樣的好處,就是可以不用花時間在學習研究上,把專業的事情交給專業的人執行。花錢省時間的概念!

elementor tutorial

若你真的想要外包架站,或許也可以到全球知名的外包平台像是Fiverr、Upwork找看看,我想一定也有許多不錯的人才。

Elementor頁面編輯器愛好者討論區(中文)

中文版的Elementor使用者交流區,目前有超過3000個成員,這個社團只討論Elementor的問題,也非常歡迎大家把自己的作品分享上去,彼此交流。

elementor tutorial

WordPress正體中文Facebook社團(中文)

WordPress架站中文的討論社團,目前已經有3萬個成員,裡面有些關於WordPress架站相關資訊討論,都很有價值。你可以在這個社團裡面,透過搜尋功能,搜尋Elementor,就能看到各種跟Elementor相關的問題和討論!從別人的問題學習,可以少走很多坑。

elementor tutorial

Elementor免費版 vs. Pro付費版

既然有免費版,那還需要使用付費版嗎?如果你設計的頁面單純,不需要太多功能或是花俏的動畫,那其實免費版就蠻夠的了。是否需要付費版?我通常會覺得:自己實際使用,視試用情況而定。當你發現自己需要很多付費版的功能,那就自然而然會入手專業版了。

個人使用下來,覺得最主要還是在於元素的功能。免費版只有30個基本的元素,而付費版則有90種,滿足各種需求。

免費版本提供30種元素:

elementor tutorial

付費版版多了像是文章列表、表格、價格表、目錄、倒數計時等,在設計頁面非常常用到的元素。

elementor tutorial

Elementor收費

Elementor的收費採用年收費,也就是訂閱制的概念。按照網站數量計價,一個網站的話,每年是49美金。三個是99美金。提供30天內退款方案,也可以先試用Pro,不滿意再退款。

elementor tutorial

Elementor使用心得

不知不覺也使用Elementor好幾年了,早一開始使用是從公司官網開始的。那時候公司網站外包給網站設計公司,他們使用Elementor幫我們架站,我也就從中學會了基礎的編輯技巧。

後來自己陸續幫朋友架了一些網站,也都透過Elementor來排版,實際使用幾次下來,真心覺得它的功能很強大,而且靈活又方便!每次做完一個漂亮的頁面,都覺得好有成就感哈哈

若是想要自架網站,又不想要直接套版,想要有更多靈活性和設計感,可以用Elementor試著排版看看!一開始,建議先從Elementor的官方資料,學習基本的操作概念,之後自己實際操作玩玩看,應該不難上手。畢竟它就是所見即所得,你想在網頁呈現什麼樣子,就在後台編輯器做出那個樣子。

在實際操作的過程中,可能還是會遇到一些狀況,但這時候你就能從上面列舉的資源平台,尋找答案。或是直接詢問同為Elementor的使用者。不要怕遇到問題,而是要去思考如何解決問題唷!

總結

這篇Elementor的教學介紹,比較偏向觀念及學習分享,希望給那些正在研究WordPress自架網站,或是剛聽到Elementor這個網頁編輯器的人,在一開始就能建立初步的概念。好讓在接下來的學習,可以更順利、更好上手!

別忘了,自架網站並設計出自己想要的頁面,真的不難!只需要用對方法和工具,而Elementor正是一個非常受歡迎,而且功能很強大的網站編輯器,可以滿足各種需求,大大幫助你設計出屬於自己的網站

你可能會喜歡⋯⋯

分享給需要的朋友⋯⋯

分享在 facebook
Facebook
分享在 email
Email
分享在 linkedin
LinkedIn
分享在 telegram
Telegram
分享在 pocket
Pocket

【拍手就能免費支持我,持續創作】如果這篇文章有幫助到你或想鼓勵我,歡迎在下面的綠色拍手圖示大力按5下。只要登入Google或FB,不需花費任何經費就能支持我囉~感恩!

LikeCoin是什麼?閱讀這篇文章了解更多!

Reader Interactions

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

關於我

追蹤我

精選文章

最新文章

目錄大綱