小時
分鐘
Cloudways 主機獨家優惠:贈金20$+3個月7折,點此前往註冊,才可獲取贈金
專注於架設企業網站,分享WordPress教學和Elementor教學

Elementor教程

本頁面是Elementor教程的分類導航,Elementor是2023年最好的WordPress頁面編輯器,能夠讓我們在製作網頁時所見即所得。
如果你想流暢的一文熟悉Elementor建站過程,請查看如何用Elementor製作一個外貿網站
如果你想快速瞭解一下Elementor是如何建站的,請查看下方視頻,更多視頻在本頁面下方。
如果你對WordPress完全不了解,那麼請查看WordPress教程哦。

購買Elementor授權

Elementor的官方價格最低59美元/站/年,我曾經在學習階段下載過網路上的免費破解版本,然後過了半年,在我學習SEO時,才發現中招了,網站被植入了很多隱藏的外鏈。 因此,我總結了下面兩篇教程,第一篇教你如何避坑與選購什麼官方套餐,第二篇教你通過更換綁定網域的方式,將官方授權的價值最大化。

如何高性價比的購買Elementor Pro與避坑

擁有Elementor Pro讓建站就跟拼圖一樣方便了,那如何省錢的購買Elementor Pro呢? 如何避開坑呢? 下面分享自己的實踐經驗。 (還不瞭解Elementor的點這裡) 避坑:不要用El

Q1. 啟動Elementor Pro授權時,介面提示reconnect按鈕,並且點擊按鈕后無法啟動

當你啟動Elementor Pro的授權時,看到提示:We’ve noticed that you are trying to connect: 你的域名. Please make sure this is the correct URL and click ‘Reconnect’. 同時提供了一個Reconnect按鈕。 即便你點擊了這個按鈕,也依舊無法激活授權。

出現這個問題的原因是:你的網站後台的setting > general頁面中的wordpress address和site address是不相同的,Elementor Pro需要你統一它們,請修改一致后,再去激活授權即可。

參考資料:https://elementor.com/help/activate-your-license-key/

基礎操作

Elementor頁面設置

本教程介紹Elementor頁面設置功能,但凡用Elementor製作內容,譬如製作頁面、文章、範本時,點擊左下角的齒輪即可進入頁面設置功能,以便設置頁面佈局、背景等等,具體功能如下: 常規設置 頁面標

進階操作

Elementor主題樣式設置詳解

Elementor的theme style主題樣式可設置各種元素的默認樣式,例如背景,標題,按鈕,圖像和表單字段。這些設置將覆蓋主題自帶的樣式設置,從而使您可以使用Elementor為非Elemento

Elementor的全局樣式與設置

本篇教程將介紹Elementor網頁編輯器的全域樣式與設置的常用功能,譬如設置全域的字體、顏色、頁面內容寬度、元素默認間距等等。 功能入口:在用Elementor編輯頁面時,點擊左上角的按鈕,然後點擊下

Elementor的Advanced高級設置教程(18個功能點)

本文將介紹Elementor網頁編輯器中元素的Advanced高級設置功能,不同元素塊的高級設置的內容項是不同的,下面對常見的高級設置項目進行講解。 Advanced高級設置 是的,這個欄目的名字重複了

Elementor自訂代碼教程 (PRO)

Elementor自定義代碼(Custom Code)功能是Elementor Pro付費版本功能,它允許你添加代碼片段,如Google Analytics代碼或Facebook Pixel代碼,你可以

製作頁面(視頻)

我的專業領域是建外貿網站,所以,我以為外貿網站的常見頁面為例,使用Elementor逐一製作它們,並錄製完整的教學視頻(視頻在vimeo,請科學上網後查看),我想付費的教學視頻也大抵如此。

製作首頁
製作關於我們頁面
製作聯繫我們頁面
製作關於我們頁面
用Elementor做外貿網站
4 Videos

製作頁頭頁腳(Pro)

也需你還在用Astra主題或者其他主題提供的頁頭頁腳配置功能,而Elementor直接打破規則,它雖不是一個主題,但它可以替代主題去靈活的製作網站的頁頭和頁腳。

如何用Elementor Pro製作網站頁腳【視頻】

使用Elementor pro可以創作出多種多樣的頁腳,可以不再局限於主題自帶的頁腳了。 並且Elmentor Pro的範本庫里提供了多款頁腳範本,一鍵導入就可以直接用起來了,還可安裝Envota el

如何用Elementor Pro製作網站頁頭導航【視頻】

使用Elementor pro可以創作出多種多樣的頁頭導航,可以不再局限於主題自帶的導航了。 並且Elmentor Pro的範本庫里提供了幾十款導航範本,一鍵導入就可以直接用起來了,還可安裝Envota

製作文章範本(Pro)

又是一個打破規則的功能,過去,主題們對於博客文章的清單頁、詳情頁,只是提供一些配置功能,或者提供幾套範本供你選擇,如果你想對它們進行DIY調整,那是不可能的,包括我常用的B2C獨立站常用主題Woodmart也一樣,你可以觀察很多博主的文章清單或詳情,基本都是千篇一律。

而有了Elementor Pro,你可以自己DIY文章清單、文章詳情頁的範本,甚至可以為不同分類、或者具體某些文章製作範本,不再束手束腳。

為什麼blog/news頁面無法用Elementor編輯

當你在wordpress中發佈了一些文章,想用Elementor編輯blog或news頁面時,卻出現了如下報錯,提示你無法編輯博客頁面,這是為什麼呢? 又怎麼解決這個問題呢? 我們會逐一講解。 Elem

製作產品範本(Pro)

繼續打破規則,不再受限於主題本身提供的產品清單或詳情頁的範本,你可以用Elementor Pro DIY產品清單、文章詳情頁的範本,就跟上面的文章範本一樣靈活。 目前,我注意到Woodmart主題也增加了Layout功能來實現DIY產品的範本。

Elementor所提供的產品範本定製功能,也並不是完美無缺的,如果你的定製需求複雜,你還是會用到一些第三方的擴展外掛程式,譬如Crocoblock的jetplugins

製作詢盤表單(Pro)

你是否還在用contact form 7或者是wpforms外掛程式呢? 我過去就用過它們,前者功能不全,後者免費版功能不全。 直到我用上Elementor Pro的form元素,我就再也不用其他表單外掛程式了,少裝一個外掛程式,少一點網站的重量,還能剩下一些成本。

適合Elementor的主題

如果你問我用什麼主題搭配Elementor。 我會說,如果做非B2C網站,我用Hello Elementor主題,它是官方原配。 如果是B2C網站,我用Woodmart主題。 如果你做博客站,我便推薦你用Astra或Generatepress主題。

astra-theme

Astra主題 – 輕量、範本超多的WordPress主題

你是否在尋找速度快、範本多、支援熱門編輯器的熱門主題,Astra主題是免費WordPress主題的熱門之一,擁有一百萬+使用者與五星好評,免費版也提供數十套一鍵導入的網站範本。

問題答疑

可以,請看下圖,在Elementor設置的文章類型中,勾選產品並保存。 然後你在編輯產品時,就能看到使用Elementor編輯按鈕了。

image 41

可以用Elementor編輯產品的詳細介紹,也可以認為是產品的正文而產品的簡介(short description)是無法使用Elementor編輯的。

image 43

與上文同理,請在下圖的Elementor設置中勾選你添加的文章類型並保存

此圖像的alt屬性為空; 檔名為image-41.png

可以,譬如你可以用Custom post type ui(CPT UI)添加名叫case的文章,便於管理公司的案例,如果你想以類似博客的形式展示case,那麼你在用CPT UI添加case時,需要注意下圖中的配置:將has archive選擇為true,這樣以來,才能用Elementor Pro製作針對case的文章清單範本(Archive),然後發佈範本時設置display condition為case archive即可。

image 44

原因是:這個頁面在woocommerce的設置中已被設為商店頁面,所以不可以用Elementor直接編輯。 但你可以使用Elementor Pro製作Product archive範本,並在保存發佈時,設置展示條件為shop page。

image 45

elementor pro create woocommerce shop page用Elementor Pro製作產品清單範本時,設置展示條件為shop page

有讀者反饋希望banner不因設備尺寸的改變而改變佈局,譬如:不希望文字把背景圖片擋住,又希望圖片在不同設備上都能完整顯示….emm,你只有把文案做到圖片里直接作為banner了。

目前有幾種方法:現在我比較推薦的是使用Eelementor的Image carousel元素來實現。

下面是我以前用的舊方法。

以Elementor Pro為例,你需要使用slider元素,將圖片上傳到背景中,同時設置size:contain,然後點擊height(高度)旁邊的設備圖示,切換到不同設備上,分別設置圖片的高度,以便圖片寬度能完整顯示。

image 46

接下來,切換到這個banner的content標籤頁,將內容、按鈕都清空,設置link(連結),將連結方式(apply link on)設置為whole slider。

image 47

如果你使用的是免費的Elementor,那麼你需要使用 Premium Addons For Elementor 高級元素擴展中的Premium Carousel / 輪播來製作banner。

因為在網站後台的設置>閱讀中將這個頁面設置為了文章頁,一旦如此設置,便不能直接用Elementor編輯它

如果你想編輯它,要麼,你取消這個設置,要麼,用Elementor的template功能,製作archive類型的文章清單範本,並將condition設置為Post archive/文章Archive

 

Elementor教程導航
內容目錄
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我
來開通 SEO 工具20+