ALL POST

如何做出滑鼠移至選單時會自動切換中英文呢？(子選項也適用)

2022-08-05 18 則留言

簡介

在電腦版時有效果，hover(滑鼠移上去)選單時想要讓中文的選單自動轉成英文的效果。

運用範圍

沒有什麼常見的運作情境，如果說有，那就是做給外國人看的，只是選單有英文，內容沒有英文的話，這樣外國人不就只能看得懂選單而已嗎？XD

範例

這裡我拉一個Elementor的選單當作範例效果，如下:

原理與思路

我使用jQuery的hover效果來處理這樣的需求，並且須事先準備要用的「英文字詞」，因這個並不是自動翻譯，故要在後台/外觀/選單:要先準備好對應的英文字詞，然後利用jQuery去處理滑鼠事件來做中英文的替換。

注意此法不只對「第一層」主選單有效，對第二層、第三層....的子選單也都有效果!

實作

付費內容，需支付 : 500 個學習幣

您須先登入會員以使用學習幣與發問功能。

總結

有時候業主就是要這個功能，只是我覺得沒有很實用啦!

這只有在電腦版時有效果，因手機瀏覽器本就沒有hover(滑鼠移上去)的效果，使用上要特別注意。

我使用jQuery的hover效果來處理這樣的需求，當然純CSS也有hover功能，只是純CSS不好寫，用jQuery比較簡單一點。

Elementor如何做出類似APP的固定底部快速選單?

2022-08-05 尚無留言

如何用Elementor表單做聯盟行銷推薦功能？

2022-08-05 尚無留言

這是一種簡易型的「推薦追蹤」，例如有人點你的推薦網址到一個頁面，該頁面是Elementor做的表單，只要該員有填表成功，推薦人就會記錄是你。

我們可以用「網址參數」加上jQuery來把網址參數後面的推薦人代碼自動填入表單的某隱藏欄位中，在表單被填表送出後，就會連同推薦人的ID或代碼一起存入資料庫中。

此篇僅先建立文章標題或部分文字，教學內容待補上。

滑鼠移至不同選單或元素時自動變換不同圖片

2022-08-05 2 則留言

前言

在選單或任意元素上做到滑鼠移上去右邊就自動切換對應的圖片。

運用範圍

菜單菜色、作品集、房屋物件等等。

預覽效果

請將滑鼠移至左邊每一項目上，右邊圖片會跟替變化。

Google

微軟

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文章列表可以使用不重新載入頁面的方式來切換分頁？

2022-08-05 尚無留言

簡介

Elementor Pro的Post文章元素工具雖可以列出指定類型的文章列表，但點擊在其「文章列表分頁」時會重新載入該分頁的頁面，所以有些候想要點擊分頁時讓頁面不重新載入，以讓頁面不會跳動，增加閱讀舒適感。

(本文教學是for影片中的第一個效果)

運用範圍

只要是Elementor Pro 的Post工具都可以套用此法，我自己常運用在首頁有最新公告僅列出5則公告時，若想看更多的歷史公告，就可以用此法讓人點擊分頁時，首頁可不用重新載入就能把更多則公告載入進來。

範例

下方的文章列表，請點擊下方的「分頁」，測試一下網頁是否可以不用重新載入就能切換不同的分頁了。

▼這是經處理過的Elementor Post，點擊分頁時不會重新載入頁面。

[Gmail代發]用個人Gmail中來發送網域信箱的信件

如果上面範例有異常，可以點此另看一個範例。

點擊分頁時會停個1~3秒才出新的分頁內容，主要是它在重新以ajax方式重新索取資料，而這1~3秒主要取決於主機的回應速度。

▼以下是未經處理過的Elementor Post，點擊分頁時會重新載入頁面

[Gmail代發]用個人Gmail中來發送網域信箱的信件

原理與思路

要實現這樣的效果有很多種，例如可以靠「篩選器」的插件來組合出這樣的功能(即ajax載入)，而本篇主要講述不靠其它擴充外掛的方式，僅使用jQuery的「 load()方法」來達成這樣的效果，如果不懂load()方法沒關係，程式碼照貼就會有效果了。

實作

1、建立Post文章清單

跟平常一樣拉一個Post文章，並自己設定好樣式，必須打開「分頁」功能，然後在其設定/進階中設定一下CSS的id與類別的名稱為「frompost」，如下圖 :

2、置入程式碼

拉一個html工具，拖放至想要出現出現新的文章列表的地方，然後再貼上下列程式碼即可。

付費內容，需支付 : 個學習幣

您須先登入會員以使用學習幣與發問功能。

總結

這個做法主要是不靠外掛或不需太進階的程式技術來達成目的，如果無法接受這樣的方式，請勿購買此篇教學。

如何做出固定頁首後但且滾動頁面時logo圖移至左邊？

2022-08-03 尚無留言

簡介

當頁面往下滾動時，LOGO會自動移至左邊的效果，一般是少數佈景主題才會內建的效果，但在Elementor中我們也可以自行設計出來。

運用範圍

任何頁首(header)是用Elementor製作的網站都適用。

範例

如下圖，頁面一捲動則LOGO與選單的位置就產生變化。

原理與思路

作法有多種，本篇的作法是預先製作2組header模版，然後再透過一點jQuery的捲動事件來控制切換。

實作

簡單分為幾個步驟:

1、使用Elementor Pro預先製作2組不一樣的header，並也調好響應式的版面。

2、套用全站每一頁。

3、加上片段jQuery與CSS偵側頁面滾動時就切換不同的header。

教學影片&程式碼

付費內容，需支付 : 700 個學習幣

您須先登入會員以使用學習幣與發問功能。

總結

這算是比較進階的作法，因須碰到jQuery片段程式碼，但上方教學已將個人經驗所筆記下來的程式碼整理出來，只要照做與貼上即可完成這樣的效果。

概說jQuery

2022-08-03 尚無留言

jQuery是一門前端程式語言，可以控制網頁上的元素節點的狀態、修改、變化等等，它是一門很深很廣的程式語言，但在WordPress中我們如果想結合jQuery來讓我們的頁面更加靈活有彈性，可以學一點點jQuery的「事件」來輔助，我想對想更客製化網頁而言有滿大的幫助!

就算不是工程師出身，但對jQuery只要先學習一些「事件」的控制，在Elementor中就滿可以應付多種情境了，不一定要學很深的jQuery。

CSS選擇器也要先熟一下，因為jQuery在控制網頁元素時，都必須先透過CSS的選擇器先去選中那個元素，然後再賦予它jQuery的程式碼來控制它。

賦予元素jQuery的程式碼可控制哪方面？例如

有條件的隱藏或出現;
更改裡面的字詞，如英文字改成中文詞，有局部翻譯的效果;
控制點擊後的瀏覽動線或轉址;
判斷是否登入來有條件切換元素或改變內容;
還很多可能性….

我這裡會把之前用過「很常用」的jQuery筆記慢慢整理出來，若因此引發你jQuery的興趣，可以再去閱讀更多jQuery的相關資料。

補充一下，使用jQeury，不會對整個WordPress的主題、外掛的原始碼產生破壞或修改，所以以後在更新主題或外掛後，jQuery所寫出來的效果幾乎是不會更主題外掛更新就失效。

jQuery菜鳥教程

滑鼠點擊小圖時自動變換不同大圖(2)

2022-08-03 尚無留言

簡介 :

點擊小圖時，就自動切換一張對應的大圖。(大小圖可以同一張或不同張)

運用範圍 :

主要是一些物件、商品有不同的規格時，例如顏色，一般可用在汽車展示、衣服展示等等。

範例 :

請將滑鼠點擊每一小圖，上方圖片會跟替變化。

示範圖片出處:豐田汽車

原理與思路 :

主要是一段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)

2022-08-03 尚無留言

前言

點擊小圖時，就自動切換一張對應的大圖。(大小圖可以同一張)

運用範圍

作品集、房屋物件、家具展覽等等。

預覽效果

請將滑鼠點擊每一小圖，上方圖片會跟替變化。

實作方法

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藝廊每張圖片有自己想對應的連結？

2022-08-03 尚無留言

簡介

Elementor Pro的Gallery畫廊它預設無法替每張圖片都加上一個自己的單獨連結網址，

▼只能對所有圖片加上「1個連結」而已。

運用範圍

一般可能會運用在一個圖對應一個商品或一家廠商時，運用上很廣。

範例

▼預設每張圖無法各別設定對應的網址

▼經過一段語法處理後，每張圖可以個別對應一個連結(可點擊試試)

原理與思路

利用圖片的「替代文字」欄位來輸入網址，再透過jQuery把網址轉至每張圖上變成連結。

簡介

運用範圍

範例

原理與思路

實作

付費內容，需支付 : 500 個學習幣

總結

前言

運用範圍

預覽效果

實作方法

1、建立效果用的資料區

2、加上css類別的命名

3、貼上jQuery的code

總結

簡介

運用範圍

範例

原理與思路

實作

1、建立Post文章清單

2、置入程式碼

付費內容，需支付 : 個學習幣

總結

簡介

運用範圍

範例

原理與思路

實作

教學影片&程式碼

付費內容，需支付 : 700 個學習幣

總結

簡介 :

運用範圍 :

範例 :

原理與思路 :

實作 :

1、建立大圖資料區 : 「媒體輪播」

2、建立小圖資料區 : 「藝廊」

3、貼上語法

總結 :

前言

運用範圍

預覽效果

實作方法

1.建立資料區

2.賦予CSS類別

3.貼上語法

總結

簡介

運用範圍

範例

原理與思路

實作

付費內容，需支付 : 300 個學習幣

總結

章節

1 個成員 正在線上

5 個訪客 正在線上

6 個檢索機器人 正在線上

1 個成員正在線上

5 個訪客正在線上

6 個檢索機器人正在線上