專注於企業網站架設,分享WordPress教學和Elementor教學
不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%,感謝你的互惠互助

Elementor教學

本頁面是Elementor教學的分類導航,Elementor是2022年最好的WordPress頁面編輯器,能夠讓我們在製作網頁時所見即所得。
如果你想流暢的一文熟悉Elementor架設網站過程,請查看這篇:怎麼架設網站:零基礎用Elementor製作一個企業網站
如果你想快速了解一下Elementor是如何架設網站的,請前往查看視頻

購買Elementor授權

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

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

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中移動元素? (2種方法+視頻)

在使用Elementor編輯器進行WordPress架設網站或企業網站架設時,我們可以通過移動元素來進行內容順序的調整,移動的方法有兩種: 在導航/navigator中拖拽元素上下移動,如果元素較多時,建

Elementor頁面設置

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

進階操作

Elementor主題樣式設置詳解

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

Elementor的全局樣式與設置

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

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

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

Elementor自定義代碼教學(PRO)

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

製作頁面(視頻)

製作企業網站首頁

製作關於我們頁面

製作聯繫我們頁面

製作下載頁面

製作頁頭頁腳(Pro)

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

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

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

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

製作文章模板(Pro)

如何使用Elementor Pro製作文章列表頁模板

如果你用是Elementor Pro外掛,你便可以省了付費主題的錢,直接用Elementor Pro導入模板庫的文章列表模板頁,或者自己製作文章列表頁模板;如果你購買了付費主題,又習慣用Element

製作產品模板(Pro)

製作詢盤表單(Pro)

適合Elementor的主題

Astra

最快、最輕、最好的免費WordPress主題之一,擁有一百萬+用戶與五星好評,免費版也提供數十套一鍵導入的網站模板。
本站還有手把手的Astra建企業網站教學

問題答疑

可以,請看下圖,在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教學導航
超快獨享主機
Cloudways
免費試用3天,無需充值
費用月結| 不用一次性付整年
*註冊優惠碼Promo code:LOYSEO
*用Gmail郵箱,註冊易通過