

如何使用Elementor的media carousel功能
Media Carousel翻譯成中文是媒體輪播,作為媒體輪播工具,Media Carouse可以為我們實(shí)現(xiàn)很多動(dòng)態(tài)的頁(yè)面特效,為我們的網(wǎng)頁(yè)內(nèi)容提供更多鮮活的體驗(yàn)感,提升客戶的頁(yè)面停留時(shí)間和訪問深度。那么今天Jack老師要和同學(xué)們分享的就是?如何使用Elementor的media carousel功能?來(lái)做出令人羨慕的媒體輪播特效。
第一步:將Elementor編輯器的Media Carouse功能元素添加到內(nèi)容編輯區(qū)域

如上圖所示,我們?cè)谧髠?cè)的Elementor編輯器中找到箭頭1所指的“Media Carouse”功能元素,然后按住鼠標(biāo)左鍵不松開,慢慢的拖到上圖箭頭2所指的地方,也就是內(nèi)容編輯版塊中。注意在沒有將Media Carouse功能元素添加到內(nèi)容編輯版塊區(qū)域之前,內(nèi)容編輯版塊外面是一個(gè)灰色的虛線框,只有當(dāng)出現(xiàn)了一個(gè)藍(lán)色的虛線外邊框之后才代表著我們已經(jīng)成功的將Media Carouse功能元素添加到了內(nèi)容編輯版塊中!
第二步:Elementor編輯器Media Carousel元素的主體功能設(shè)置

Media Carousel元素主體功能主要分為2大版塊,Slides(滑塊)和Additional Options(其他選項(xiàng))。我們按順序先來(lái)講Slides功能
2.1、“Skin”:指的是Media Carousel的表現(xiàn)形式,系統(tǒng)默認(rèn)給出了3種方案,分別是carousel(輪播)、Slideshow(幻燈片放映)、coverflow(專輯封面瀏覽效果),為了更方便同學(xué)們理解這三種特下的具體表現(xiàn)形式,Jack老師特意為同學(xué)們做了對(duì)比圖,如下所示:



這三種特效之間本身并沒有好壞之分,只不過(guò)對(duì)于我們來(lái)說(shuō)是哪一種更加適合而已。
注意:Media Carousel不僅僅只能做圖片的特效,還能夠做視頻的特效哦!如果我們需要做視頻的特效的話,需要在哪里進(jìn)行設(shè)置呢?,如下圖所示

在ITEM中找到箭頭1所指的視頻元素圖標(biāo),然后在箭頭2所指的地方輸入視頻元素的鏈接,這個(gè)鏈接可以是自己網(wǎng)站媒體庫(kù)上的也可以是在youtube上的鏈接地址,JACK老師的個(gè)人意見是用后者。為了講解方便在下面的文章內(nèi)容中,我只講解圖片元素不講視頻元素。另外再M(fèi)edia Carousel元素中可以同時(shí)存在既有圖片又有視頻的效果哦!
當(dāng)我們添加了一張圖片內(nèi)容之后,我們的最終目的是希望訪客被這張圖片所吸引然后點(diǎn)擊跳轉(zhuǎn)到我們的目標(biāo)網(wǎng)頁(yè),可以是產(chǎn)品頁(yè)面也可以是詢盤頁(yè)面,那么怎么去設(shè)置呢?在上圖中的圖片下面有個(gè)Link選項(xiàng)(上圖中因?yàn)槲疫x擇的是視頻元素所以沒有顯示,如果你選擇的是圖片元素那么就會(huì)出現(xiàn)Link選項(xiàng),這時(shí)候你再選擇Link中的custom URL就可以添加希望跳轉(zhuǎn)到的目標(biāo)頁(yè)面URL)。
2.2、“Effect”:指的是整體Media Carousel的表現(xiàn)效果,這個(gè)effect和上面的Skin是不一樣的。上面的skin指的是呈現(xiàn)形式,這里的Effect是具體表現(xiàn)效果。而且當(dāng)我們?cè)谇懊娴膕kin中選擇cover flow的時(shí)候這里是不會(huì)有effect效果的。另外說(shuō)一句這個(gè)Effect效果還是比較有意思的,同學(xué)們一定要去操作一下!為了方便講解,我這里只對(duì)carousel中的slide效果進(jìn)行講解。
2.3、“slides per view”:指的是單屏幕展示多少?gòu)垐D片或者多少個(gè)視頻的意思
2.4、“Slides to Scroll”:意思是滑動(dòng)滾動(dòng),指的是設(shè)置每次滑動(dòng)可滾動(dòng)多少?gòu)埢脽羝?/span>
2.5、“Height”:指的是圖片的顯示高度,注意不要超過(guò)圖片的原始高度,否則圖片會(huì)變形。而這里的高度如果小于圖片的原始高度的話,就不用擔(dān)心圖片會(huì)變形,因?yàn)檫@時(shí)候的圖片寬度也是同比例縮小和放大的!
2.6、“weight”:指的是圖片的顯示寬度,和上面的height選項(xiàng)是一樣的效果,只不過(guò)作用于圖片的具體項(xiàng)目上不一樣而已。
2.7、“Arrows”:指的是在整個(gè)Media Carousel上是否顯示左右切換箭頭指示標(biāo)志
2.8、“Pagination”:分頁(yè)功能,系統(tǒng)給出了4個(gè)默認(rèn)選項(xiàng)。不過(guò)一般情況下我們都不會(huì)設(shè)置超過(guò)一個(gè)分頁(yè)的內(nèi)容
2.9、“Transition Duration”:指的是動(dòng)畫特效的過(guò)渡時(shí)間,根據(jù)自己的需求進(jìn)行設(shè)置即可
2.10、“Auto play”:指的是媒體元素的自動(dòng)播放功能,如果需要就選擇是,如果不需要就選擇否
2.11、“Auto Play Speed”:指的是媒體元素的自動(dòng)播放速度,這個(gè)項(xiàng)目留給同學(xué)們?nèi)プ孕姓{(diào)整吧
2.12、“Infinite Loop”:無(wú)限循環(huán),指的是媒體元素的循環(huán)效果是否要持續(xù)不行的循環(huán)
2.13、“Pause on Hover”:指的是當(dāng)鼠標(biāo)懸停在media carousel上的時(shí)候,整個(gè)循環(huán)播放效果是否暫停下來(lái)等到鼠標(biāo)點(diǎn)擊或者移開之后再繼續(xù)之前的動(dòng)態(tài)播放效果
2.14、“Pause on Interaction”:暫?;?dòng),指的是和media carousel上的媒體內(nèi)容進(jìn)行交互式操作的時(shí)候,整個(gè)media carousel是否暫停播放
2.15、“Overlay”:它有兩種媒體元素覆蓋效果,分別是文字覆蓋和圖標(biāo)覆蓋,當(dāng)然你也可以選擇不對(duì)媒體元素進(jìn)行覆蓋。注意這里的覆蓋文字和圖標(biāo)不是自己自定義的,文字來(lái)自上傳圖片的時(shí)候,圖片上自行設(shè)置的圖片標(biāo)題、描述等內(nèi)容。而圖標(biāo)也是只能y用系統(tǒng)預(yù)先提供的加號(hào)和鏈接等圖標(biāo)。作用在media carousel上的效果就是當(dāng)鼠標(biāo)懸停到圖片上的時(shí)候,會(huì)出現(xiàn)一個(gè)灰色的覆蓋圖層然后出現(xiàn)文字或者圖標(biāo)。在后臺(tái)操作的時(shí)候同學(xué)們可能會(huì)暫時(shí)看不到具體的對(duì)應(yīng)效果!
2.16、“Animation”:指的就是overlay選項(xiàng)中添加的文字或者圖標(biāo)的具體動(dòng)態(tài)效果
2.17、“圖像尺寸”:不解釋,就是字面意思
2.18、“Image Fit”:指的是圖片的具體表現(xiàn)效果,是填充還是覆蓋還是自動(dòng)填滿整個(gè)內(nèi)容區(qū)塊
第三步:Elementor編輯器Media Carousel元素的樣式功能設(shè)置

3.1、“Space Between”:指的是左右圖之間的間距大小
3.2、“Background Color”:整個(gè)Media Carousel的背景顏色
3.3、“Border Size”:指的是所有圖片的外邊框線粗細(xì)
3.4、“Border Radius”:指的是圖片的4個(gè)外邊角變成圓弧角,圓弧程度取決于數(shù)值的大小
3.5、“Border Color”:指的是外邊框線顏色
3.6、“Padding”:指的是圖片與圖片內(nèi)容編輯框的外邊距大小

3.7、“Arrow Size”:指的是圖片兩邊的箭頭導(dǎo)航按鈕尺寸大小
3.8、“color”:指的是圖片兩邊的箭頭導(dǎo)航按鈕尺寸顏色
3.9、“Pagination Position”:指的是整個(gè)Media Carousel的分頁(yè)選項(xiàng)所處位置
3.10、“size”:指的是pagination的尺寸大小
3.11、“pagination color”:指的是整個(gè)Media Carousel的分頁(yè)選項(xiàng)顏色
3.12、“Play Icon color”:指的是視頻媒體的播放按鈕的顏色
3.13、“play icon size”:指的是視頻媒體的播放按鈕的尺寸大小
3.14、“shadow”:指的是陰影效果

3.15、“background color”:指的是當(dāng)鼠標(biāo)懸停在圖片上的時(shí)候出現(xiàn)的覆蓋背景顏色,如果不設(shè)置的話,默認(rèn)是帶有透明度的淺灰色
3.16、“Text Color”:指的是在圖片上面的覆蓋圖層中的文字顏色
3.17、“Icon Size”:指的是圖片上面的覆蓋圖層中的圖標(biāo)尺寸
最后還有個(gè)LightBox,但是我都沒弄明白這部分具體是作用在什么地方,所以有知道的同學(xué)可以和我說(shuō)一下嗎?我再補(bǔ)充到這篇文章上來(lái),謝謝!
好了,以上就是本章關(guān)于?如何使用Elementor的media carousel功能?的全部?jī)?nèi)容。Media Carousel是非常不錯(cuò)的一種網(wǎng)頁(yè)內(nèi)容表達(dá)形式,通過(guò)圖片或者視頻的形式將固定化呆板的內(nèi)容用較為鮮活的方式進(jìn)行展現(xiàn),從而提升頁(yè)面停留時(shí)間和點(diǎn)擊轉(zhuǎn)化率。
如果還有不理解的地方,請(qǐng)使用百度或者谷歌瀏覽器搜索關(guān)鍵詞--“Jack外貿(mào)建站”,排名首頁(yè)首位的就是我的網(wǎng)站,網(wǎng)站上有更多外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶開發(fā)等實(shí)操干貨內(nèi)容在等著你哦!
來(lái)源:Jack SEO