超Q彈的點擊彈性選擇展開，來啦！最多支持4列
好久沒有給大家推薦點擊展開的效果啦。
今天要給大介紹的是個不一樣的展開，那就是點擊彈性選擇展開。
下面請選一個點擊帶回家：
點擊彈性選擇展開，是一種在屏幕同一行可以點擊選擇、展開效果略帶Q彈感的展開，非常適合答題創(chuàng)意或介紹多個產(chǎn)品時使用。
目前在 iPaiban Pro 黑科技編輯器上線了6種點擊彈性選擇展開效果，分別為支持2組、3組和4組點擊選擇的，對應的又有不支持展開后點擊收回以及支持展開后點擊收回的。
組合：點擊彈性選擇展開組合(無限次、兩組/二組/2組)
編號：11157（組合）
組合：點擊彈性選擇展開組合(無限次、三組/3組)
編號：11176（組合）
組合：點擊彈性選擇展開組合(無限次、四組/4組)
編號：11180（組合）
不支持收回的相信大家自己都能明白如何制作，而支持收回的在上傳素材和設置觸發(fā)區(qū)時可能有一些容易忽視的地方，以「點擊彈性選擇展開組合(無限次、2組)」組合為例，給大家奉上詳細教程。
工具：iPaiban Pro黑科技編輯器，網(wǎng)址：x.iPaiban.com
組合：點擊彈性選擇展開組合(無限次、兩組/二組/2組)
編號：11157（組合）
第1步：選擇組合
點擊編輯器左側「組合」按鈕，在「花樣展開」分類中找到「點擊彈性選擇展開組合(無限次、兩組/二組/2組)」組合，或者直接搜索編號11157，點擊選擇。
第2步：進入組合編輯模式
如下所示，點擊「點擊此處配置」，進入組合編輯模式。
在組合編輯模式中，我們需要設置展開前和展開后的內(nèi)容，其中滑動布局下就是展開后的內(nèi)容。
第3步：設置展開前的內(nèi)容及調(diào)整點擊收回觸發(fā)區(qū)
點擊一下「展開前」區(qū)域，頁面右側便會出現(xiàn)上傳圖片的提示。
「展開A頭圖」和「展開B頭圖」分別對應展開前的兩張圖片：
而「展開A尾圖+展開B尾圖」可能和大家想的不大一樣，它是指每個展開后的最后一張圖片，點擊這張圖片展開便會收回。
這里有幾個展開就要上傳幾張展開尾圖，即便2個展開中使用的同一張尾圖，也應上傳2張同樣的尾圖哦。
此時你會看到「展開前」區(qū)域顯示了剛上傳的展開后尾圖，這是為了方便調(diào)整點擊收回的觸發(fā)區(qū)。
雙擊圖片，在出現(xiàn)的彈窗中紅色色塊代表了觸發(fā)區(qū)域，直接拖拉就能調(diào)整。注意，調(diào)整好一張圖片的觸發(fā)區(qū)后，別忘了點擊「為所有圖片應用此配置」，這樣所有尾圖的觸發(fā)區(qū)便設置好了。另外觸發(fā)區(qū)最好不要超出圖片邊緣，否則可能出現(xiàn)觸發(fā)問題。
第4步：設置展開后的內(nèi)容
展開后的內(nèi)容可以嵌套各種組件。
點擊「增加·槽」便是增加一個小組件位，我們在左側組件中找到需要的組件后通過拖拽的方式將組件放進小組件位中，然后對組件進行編輯上傳素材就可以了。
添加槽（小組件位）-拖動組件到組件位中-上傳圖片，每需要一個樣式都是按照這3步走，動圖演示：
兩個展開中設置的內(nèi)容高度最好保持一致。
第5步：設置展開時長和背景
展開后的內(nèi)容全部編輯好后，點擊頁面右側的紅色三角形按鈕，就會看到背景圖和展開時長的設置。圖文展開的時長根據(jù)內(nèi)容長度來定，內(nèi)容長時間就長些，反之時間就短一些。
大家注意沒有，圖文在展開的過程中會露出部分背景，默認不設置就是白色背景。
如果想要顯示其他顏色背景可以上傳與展開內(nèi)容高度一致或高于內(nèi)容的背景圖，但大部分情況下我們可能不好判斷展開內(nèi)容的總長度，背景圖短了又會露出白色背景。所以這里更建議大家在退出組合后，直接為圖文設置一個「全局背景」，更加方便一些。
第6步：導入公眾號后臺
注意，該組合的點擊收回效果在編輯器中無法正常預覽。
所以一切設置完畢后 ，請點擊頁面左上角的「保存并退出」按鈕，「預覽草稿」中的內(nèi)容沒有問題，然后點擊「導入微信平臺」就可以了。
導入時使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手還支持一鍵打包下載圖文圖片素材，非常方便，安裝教程戳：《iPaiban Pro小助手v2.0來啦！》
如果還想編輯里面的內(nèi)容，可再次點擊「點擊此處配置」進入。
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業(yè)標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優(yōu)惠券，每單最高立降500元。
● SVG 黑科技交互排版????????
轉(zhuǎn)載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權必究。
未經(jīng)授權嚴禁轉(zhuǎn)載，授權事宜請聯(lián)系作者本人，侵權必究。
本文禁止轉(zhuǎn)載，侵權必究。
授權事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）