夜雨聆风学习资料网

ARTICLE · 1185328

Elementor图片手风琴插件(YRWP Image Accordion)免费下载:渐变叠加、折叠图标、响应式布局一站搞定

Elementor图片手风琴插件(YRWP Image Accordion)免费下载:渐变叠加、折叠图标、响应式布局一站搞定

最近的一个wordpress外贸建站项目中,客户需要一个图片手风琴效果,这有很多插件都可以做,网站是Elementor编辑器做的,有很多扩展插件能用。但是,我试过很多插件,每个插件都有一些小细节无法满足客户的需求,就比如:

  1. 有些插件的Image Accordion模块只能添加文字,无法填写描述。
  2. 有一些无法添加图标。
  3. 有一些可以加图标,但无法设置折叠状态下的图标。
  4. 有一些无法设置图片的颜色叠加。
  5. 有一些无法设置图片的渐变叠加。
  6. 有一些无法分别设置图片折叠状态颜色叠加。
  7. 有一些只能设置单一形式的折叠展开方式,比如横向和纵向二选一。

总之,我找了特别多的Elementor扩展插件,没有一个能够完全满意客户需求的Image Accordion图片手风琴模块😅。

无奈之下,我只能尝试自己手搓一个小插件了,好在AI现在很厉害,在AI帮助下花了小半天时间终于把它做出来了,插件也顺利用到了我的这个wordpress外贸建站项目中。

插件效果

横向折叠效果

纵向折叠效果

终于,我用这个YRWP Image Accordion图片手风琴插件实现了客户想要的效果:

  1. 图片折叠状态时,上面只显示图标,图片单独设置一个半透明叠加色(也可以渐变)。
  2. 鼠标悬停或点击图片时,图片展开,显示标题+描述文字,图标移动到标题旁边(可设置左右或标题上显示)
  3. 展开的图片可以单独设置渐变叠加颜色,可以控制渐变的位置和透明度。
  4. 移动端手风琴可以设置响应为纵向显示。

插件使用

插件的使用很简单,安装之后Elementor编辑器中会多出一个Image Accordion模块,如上图所示,和其它模块使用方法一样的,拖到页面中就可以了。

选中模块后,在图片项添加即可,项目数量不限,里面可以添加图片、图标、标题、描述等内容。

布局设置中可以设置展开方向,移动端可以按需设置为纵向。展开方式可以按需设置为点击或悬停展开,图标位置可以设置,内容的对齐方式也可以设置,还可以设置默认展开哪一个项目。

YRWP Image Accordion图片手风琴插件下载

本插件只提供图片手风琴这一个功能,所以很小,才20K,关注【wordpress建站开发】公众号,回复【yrwp图片手风琴插件】即可获取下载链接。

下载之后直接在wordpress网站后台上传安装并启用即可。

说明

本插件为自用分享,仅在我自己的网站和wordpress外贸建站项目中测试过,建议您在使用之前先备份网站。免费分享,自行折腾吧😀。

📚➡️WordPress外贸建站/网站维护服务 ➡️YRWP模板购买

推荐阅读

WordPress后台提示PHP Max Input Vars错误的处理步骤

WordPress网站打不开的 9 种原因与对应处理方案

wordpress媒体库图片替换后还是显示旧图片怎么办?

如果觉得我分享的内容对您有所帮助

😘请帮忙分享、点赞、在看谢谢啦😘

相关学习资料