如何用Elementor表單做聯盟行銷推薦功能？
這是一種簡易型的「推薦追蹤」，例如有人點你的推薦網址到一個頁面，該頁面是Elementor做的表單，只要該員有填表成功，推薦人就會記錄是你。
我們可以用「網址參數」加上jQuery來把網址參數後面的推薦人代碼自動填入表單的某隱藏欄位中，在表單被填表送出後，就會連同推薦人的ID或代碼一起存入資料庫中。
此篇僅先建立文章標題或部分文字，教學內容待補上。
滑鼠移至不同選單或元素時自動變換不同圖片
前言
在選單或任意元素上做到滑鼠移上去右邊就自動切換對應的圖片。
運用範圍
菜單菜色、作品集、房屋物件等等。
預覽效果
請將滑鼠移至左邊每一項目上，右邊圖片會跟替變化。
微軟
weebly
WordPress
實作方法
1、建立效果用的資料區
以本例而言，建一個段切左右兩欄，左邊放四個圖示方框，右邊置入四張圖片。
2、加上css類別的命名
2.1 左邊每個項目(圖示方框)的”進階/css類別”填入「imenu」。
2.2 右邊每張圖的”進階/css類別”填入「showimg」。
3、貼上jQuery的code
在段的下方任意處拉一個”html”工具，並貼上下列的程式，存檔預覽即可見效果。
<script>
( function($) {
$(window).load(function() {
$(".showimg").css({
"position":"absolute",
"opacity":"0"
});
setTimeout(function() {
$(".imenu:eq(0)").trigger("mouseover");
}, 300)
$(".imenu").hover(function () {
var index = $(".imenu").index(this);
$(".showimg:eq("+index+")").css("opacity","1").siblings().css("opacity","0");
}
);//end hover
}); //end load
})(jQuery);
</script>
<style>
.imenu {
cursor:pointer;
}
</style>
總結
這個方式若善加運用，也可以用在「主選單」的每個選項或特定選項，做出「大型選單」的效果，就不用另安裝Max Mega Menu之類的外掛了。
▼類似這樣滑鼠移至主選單就自動出現一個區塊的選單細項。
如何讓Elementor Pro的Post文章列表可以使用不重新載入頁面的方式來切換分頁？
簡介
Elementor Pro的Post文章元素工具雖可以列出指定類型的文章列表，但點擊在其「文章列表分頁」時會重新載入該分頁的頁面，所以有些候想要點擊分頁時讓頁面不重新載入，以讓頁面不會跳動，增加閱讀舒適感。
(本文教學是for影片中的第一個效果)
運用範圍
只要是Elementor Pro 的Post工具都可以套用此法，我自己常運用在首頁有最新公告僅列出5則公告時，若想看更多的歷史公告，就可以用此法讓人點擊分頁時，首頁可不用重新載入就能把更多則公告載入進來。
範例
下方的文章列表，請點擊下方的「分頁」，測試一下網頁是否可以不用重新載入就能切換不同的分頁了。
▼這是經處理過的Elementor Post，點擊分頁時不會重新載入頁面。
如果上面範例有異常，可以點此另看一個範例。
點擊分頁時會停個1~3秒才出新的分頁內容，主要是它在重新以ajax方式重新索取資料，而這1~3秒主要取決於主機的回應速度。
▼以下是未經處理過的Elementor Post，點擊分頁時會重新載入頁面
原理與思路
要實現這樣的效果有很多種，例如可以靠「篩選器」的插件來組合出這樣的功能(即ajax載入)，而本篇主要講述不靠其它擴充外掛的方式，僅使用jQuery的「 load()方法」來達成這樣的效果，如果不懂load()方法沒關係，程式碼照貼就會有效果了。
實作
1、建立Post文章清單
跟平常一樣拉一個Post文章，並自己設定好樣式，必須打開「分頁」功能，然後在其設定/進階中設定一下CSS的id與類別的名稱為「frompost」，如下圖 :
2、置入程式碼
拉一個html工具，拖放至想要出現出現新的文章列表的地方，然後再貼上下列程式碼即可。
付費內容，需支付 : 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
這個做法主要是不靠外掛或不需太進階的程式技術來達成目的，如果無法接受這樣的方式，請勿購買此篇教學。
如何做出固定頁首後但且滾動頁面時logo圖移至左邊？
簡介
當頁面往下滾動時，LOGO會自動移至左邊的效果，一般是少數佈景主題才會內建的效果，但在Elementor中我們也可以自行設計出來。
運用範圍
任何頁首(header)是用Elementor製作的網站都適用。
範例
如下圖，頁面一捲動則LOGO與選單的位置就產生變化。
原理與思路
作法有多種，本篇的作法是預先製作2組header模版，然後再透過一點jQuery的捲動事件來控制切換。
實作
簡單分為幾個步驟:
1、使用Elementor Pro預先製作2組不一樣的header，並也調好響應式的版面。
2、套用全站每一頁。
3、加上片段jQuery與CSS偵側頁面滾動時就切換不同的header。
教學影片&程式碼
付費內容，需支付 : 700 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
這算是比較進階的作法，因須碰到jQuery片段程式碼，但上方教學已將個人經驗所筆記下來的程式碼整理出來，只要照做與貼上即可完成這樣的效果。
概說jQuery
jQuery是一門前端程式語言，可以控制網頁上的元素節點的狀態、修改、變化等等，它是一門很深很廣的程式語言，但在WordPress中我們如果想結合jQuery來讓我們的頁面更加靈活有彈性，可以學一點點jQuery的「事件」來輔助，我想對想更客製化網頁而言有滿大的幫助!
就算不是工程師出身，但對jQuery只要先學習一些「事件」的控制，在Elementor中就滿可以應付多種情境了，不一定要學很深的jQuery。
CSS選擇器也要先熟一下，因為jQuery在控制網頁元素時，都必須先透過CSS的選擇器先去選中那個元素，然後再賦予它jQuery的程式碼來控制它。
賦予元素jQuery的程式碼可控制哪方面？例如
- 有條件的隱藏或出現;
- 更改裡面的字詞，如英文字改成中文詞，有局部翻譯的效果;
- 控制點擊後的瀏覽動線或轉址;
- 判斷是否登入來有條件切換元素或改變內容;
- 還很多可能性….
我這裡會把之前用過「很常用」的jQuery筆記慢慢整理出來，若因此引發你jQuery的興趣，可以再去閱讀更多jQuery的相關資料。
補充一下，使用jQeury，不會對整個WordPress的主題、外掛的原始碼產生破壞或修改，所以以後在更新主題或外掛後，jQuery所寫出來的效果幾乎是不會更主題外掛更新就失效。
滑鼠點擊小圖時自動變換不同大圖(2)
簡介 :
點擊小圖時，就自動切換一張對應的大圖。(大小圖可以同一張或不同張)
運用範圍 :
主要是一些物件、商品有不同的規格時，例如顏色，一般可用在汽車展示、衣服展示等等。
範例 :
請將滑鼠點擊每一小圖，上方圖片會跟替變化。
示範圖片出處:豐田汽車
原理與思路 :
主要是一段jQuery來判斷目前是點到下方第n個小圖，同時就自動觸發上面大圖下方的切換黑點的第n個黑點，就達到了以小圖切換大圖的效果了。
實作 :
1、建立大圖資料區 : 「媒體輪播」
上方放拉一個「媒體輪播」，再把圖先上傳幾張，做基本高度調整(此例為450px高度)。
關閉自動輪播，並且打開分頁(切換黑點)。
播放效果可自行設定成幻燈片或淡化。
2、建立小圖資料區 : 「藝廊」
下方拉一個「藝廊」，並也先上傳幾張對應的小圖，數量應與上方大圖的數量一致且有相關性。
記得把「藝廊」的超連結拿掉，不然點擊後會把該張點擊的小圖放大檢視。
3、貼上語法
在小圖正下方或任意處拉一個「html」工具，貼上下列代碼，然後預覽網頁則立即達成效果了。
(使用click點擊事件)
<!--小圖點擊同步上面大圖-->
<script>
( function($) {
$(window).load(function() {
$(".e-gallery-item").click(function(){
var n = $(this).index();
$(".swiper-pagination span:eq("+n+")").click();
})
}); //end load
})(jQuery);
</script>
如果要做對滑鼠移上去小圖就立即產生切換效果(不須點擊)，就改用下面這一個語法。
(使用hover事件)
<!--媒體輪播小圖hover同步上面大圖-->
<script>
( function($) {
$(window).load(function() {
$(".e-gallery-item").hover(function () {
var n = $(this).index();
$(".swiper-pagination span:eq("+n+")").click();
})
}); //end load
})(jQuery);
</script>
總結 :
Elementor 如果懂得用jQuery去活用的，它可以千變萬化的。
而jQuery只要先學習一些「點擊事件」的控制，在Elementor中就滿可以應付多種情境了，不一定要學很深的jQuery。
滑鼠點擊小圖時自動變換不同大圖(1)
前言
點擊小圖時，就自動切換一張對應的大圖。(大小圖可以同一張)
運用範圍
作品集、房屋物件、家具展覽等等。
預覽效果
請將滑鼠點擊每一小圖，上方圖片會跟替變化。
實作方法
1.建立資料區
(1)假設有5張圖要呈現，假設是圖a、圖b、圖c、圖d、圖e。
(2)先拉上下兩個段，上面的段只放一張大圖(圖a), 在圖片的樣式中把寬度調大成適當的尺寸。
(3)另下面的段切成任意欄數(這邊是5個欄)，裡面每個欄各放1張圖片(圖a、圖b、圖c、圖d、圖e)
所以圖a一開始會出現2次。
2.賦予CSS類別
第1個段的” 進階/css類別”填入「bigimg」。
第2個段的” 進階/css類別”填入「smallimg」。
3.貼上語法
在第二個段的下方拉一個html工具，貼上下列程式碼即可。
<script>
( function($) {
$(window).load(function() {
$(".smallimg img").on("click", function() {
// 取得圖片的完整 HTML
var b = jQuery(this).prop("outerHTML");
// 或更新目標元素的內容
$(".bigimg img").replaceWith(b); // 用新圖片替換
});
$('.smallimg img').css("cursor","pointer");
}); //end load
})(jQuery);
</script>
總結
兩個段也可以調成左右並排的，善用Elementor左邊工具區的”Inner Section”就可以做出比較多格並排的切版。
[藝廊]如何讓Elementor Pro的Gallery藝廊每張圖片有自己想對應的連結？
簡介
Elementor Pro的Gallery畫廊它預設無法替每張圖片都加上一個自己的單獨連結網址，
▼只能對所有圖片加上「1個連結」而已。
運用範圍
一般可能會運用在一個圖對應一個商品或一家廠商時，運用上很廣 。
範例
▼預設每張圖無法各別設定對應的網址
▼經過一段語法處理後 ，每張圖可以個別對應一個連結(可點擊試試)
原理與思路
利用圖片的「替代文字」欄位來輸入網址，再透過jQuery把網址轉至每張圖上變成連結。
實作
付費內容，需支付 : 300 個學習幣
您須先登入會員以使用學習幣與發問功能。總結
沒什麼要特別叮寧的。
在Elementor中加入jQuery與CSS的統一作法!
要在Elementor中加入自訂的jQuery與CSS的話，Elementor本身有提供幾個位置可插入，例如可以在每頁的設定/進階中插入，或是每個元工具裡面的進階來插入，或是Elementor Pro版有提供「全局插入」的方式，但為了方便管理與複製， 我會統一使用「html」這個元素工具來存放自訂語法。
作法 :
1、拉入一個html工具
從左邊Elementor工具區找到「html」，拖拉至右側的內容編輯區即可。
至於要拖至右側的什麼地方，我一般都是要控制那個元素工具時，就拖至哪個元素的下方，例如我要控制「收合容器」在網頁載入時先自動關閉，我就會把「html」工具拖拉至收合容器的下方，這樣以後就方便一眼識別出哪個元素工具你有幫它加了自訂語法。
2、貼上程式碼語法
後面其它章節文章有提供相關的程式碼語法時，不管是CSS或jQuery就貼在「html」工具中即可。
例如 :
後面的每一篇文章，只要有提到要插入語法的，都請使用此方式來插入語法即可唷!
