通過 Elementor 選項卡 和 嵌套選項卡 功能實現(xiàn)的動態(tài)展示效果，特別適合電商網(wǎng)站。用戶點(diǎn)擊不同的顏色選項時，產(chǎn)品不僅會切換顏色，還能觸發(fā)旋轉(zhuǎn)動畫效果，給訪客帶來更具沉浸感的互動體驗。這種效果增強(qiáng)了用戶體驗和網(wǎng)站的視覺吸引力，尤其適合展示具有多種顏色和款式的產(chǎn)品，幫助用戶更好地理解和選擇產(chǎn)品。

應(yīng)用場景：

電商網(wǎng)站（產(chǎn)品顏色展示）：
在電商平臺，特別是銷售服裝、配飾、鞋類、電子產(chǎn)品等多種顏色的商品時，嵌套選項卡非常實用。用戶點(diǎn)擊不同的顏色選項，產(chǎn)品顏色和款式瞬間切換，同時通過動態(tài)轉(zhuǎn)動效果，增強(qiáng)產(chǎn)品展示的互動性和趣味性。

服裝與配飾展示：
對于服裝、電鞋、包包等時尚類商品，點(diǎn)擊不同顏色選項后可以快速切換圖像，并通過動態(tài)轉(zhuǎn)動效果展示產(chǎn)品的不同角度。用戶可以清楚地查看每種顏色的細(xì)節(jié)，提升購物體驗。

電子產(chǎn)品展示：
在展示手機(jī)、筆記本電腦等電子產(chǎn)品時，可以通過這種交互效果展示產(chǎn)品的多個顏色或款式。每當(dāng)用戶選擇不同顏色時，展示的產(chǎn)品圖像會切換，并通過旋轉(zhuǎn)效果展示產(chǎn)品的各個視角，幫助消費(fèi)者做出更明智的選擇。

家具與家居用品展示：
對于家具、家居裝飾品等，用戶可以選擇不同顏色或材質(zhì)選項，點(diǎn)擊后產(chǎn)品不僅改變顏色，且通過旋轉(zhuǎn)效果展示其各個細(xì)節(jié)。這種互動效果不僅提高了用戶的參與感，還幫助他們更加直觀地了解產(chǎn)品。

化妝品與美容產(chǎn)品展示：
化妝品、護(hù)膚品等商品的不同顏色（如口紅、粉底）展示也可以通過這種選項卡和旋轉(zhuǎn)效果來呈現(xiàn)。用戶在點(diǎn)擊選擇不同的顏色時，能夠看到更具動態(tài)效果的產(chǎn)品展示，提升購買決策的樂趣。

演示地址：https://demo-show.361sale.com/elementor-effects-11

文件下載地址↓

點(diǎn)擊獲取下載文件后，你會得到一個文件。

請確保安裝已經(jīng)安裝好Elementor免費(fèi)版和Elementor Pro版。只有Elementor Pro版才有模版導(dǎo)入功能。

網(wǎng)站后端找到頁面，點(diǎn)擊添加新頁面。如上圖：

啟用Elementor編輯。如上圖：

點(diǎn)擊添加旁邊文件的圖標(biāo)，也就是模版。如上圖：

點(diǎn)擊右上角的上傳標(biāo)志，然后點(diǎn)擊選擇文件，然后再在本地文件選擇剛剛下載的文件。如上圖：

然后回到我的模版，即可查看我們剛剛導(dǎo)入的模版，點(diǎn)擊預(yù)覽查看效果，然后再選擇插入。如上圖

導(dǎo)入完成后查看效果，有可能會出現(xiàn)頁眉和頁腳，那就需要選擇好對應(yīng)的模版了。

點(diǎn)擊我們剛剛導(dǎo)入的模版的頁面，然后點(diǎn)擊編輯。如上圖：

選擇模版，選擇elementor畫布，選擇這個是因為不顯示頁眉和頁腳，只顯示模版內(nèi)容。如上圖

同時在使用elmentor編輯頁面，選擇站點(diǎn)設(shè)置，在選擇布局。如上圖：

也要確保一樣是Elementor畫布模版。這樣就不會有其他內(nèi)容。如上圖：

請關(guān)閉標(biāo)頭和頁腳里面的內(nèi)容，點(diǎn)擊后隱藏里面的內(nèi)容，如上圖：

最后點(diǎn)擊保持，然后查看前端效果是否正常。

如果出現(xiàn)字體顏色和按鈕顏色不符，請調(diào)整字體顏色即可，因為是以網(wǎng)站默認(rèn)主色調(diào)和按鈕色調(diào)為主。

第一種選項如果整個網(wǎng)站沒有其他頁面干擾，請設(shè)置站點(diǎn)設(shè)置的全局顏色和按鈕即可。如下圖：

第二張選項就是直接設(shè)置對應(yīng)模塊的顏色即可，如下圖：

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息