最近的一个wordpress外贸建站项目中，客户需要一个图片手风琴效果，这有很多插件都可以做，网站是Elementor编辑器做的，有很多扩展插件能用。但是，我试过很多插件，每个插件都有一些小细节无法满足客户的需求，就比如： 总之，我找了特别多的Elementor扩展插件，没有一个能够完全满意客户需求的Image Accordion图片手风琴模块😅。 无奈之下，我只能尝试自己手搓一个小插件了，好在AI现在很厉害，在AI帮助下花了小半天时间终于把它做出来了，插件也顺利用到了我的这个wordpress外贸建站项目中。 插件效果 横向折叠效果 纵向折叠效果 终于，我用这个YRWP Image Acco…
最近有一个wordpress外贸建站项目需要一个简单的验证码功能，找了一下现有的插件感觉都不太好用或太复杂了，网站使用的是Elementor编辑器自带表单，所以我就利用AI写了一个专门针对Elementor表单的简易验证码插件(YRWP Elementor Form Captcha)，提供随机数字、数学题、随机图形等3种验证码。 YRWP Elementor Form Captcha插件使用说明 使用前提：网站表单使用的是elementor pro或pro elements自带的Form模块。 步骤一：编辑表单，新增项目，Type选YRWP Captcha。 步骤二：设置表单形式 打开后台【设…
最近的一个wordpress外贸建站项目中，客户需要做一个比较复杂的表单页，同一个页面显示两套表单，但需要通过链接直接打开对应的表单。这种需要首选想到的就是使用TAB标签模块，给TAB标签添加锚点链接就可以了。 但是想实现这种效果得看插件或模板是否支持，有些支持，有些不支持。比如这个网站用的是Elementor编辑器，使用的是Elementor TAB选项卡模块，自带的那个，它原生是不支持的，虽然能过给每个标签指定ID，并通过#锚点链接打开，但它并不会直接打开对应的标签。 如果你跟我一样不想单独装插件来实现，可以参考我使用的方法： 步骤一：设置CSS ID 如上图所示，给不同的TAB标签项目设…
Elementor V4的原子化元素代码更简洁，对网站性能的提升会有一些帮助。但是新版本新元素带来的新的操作逻辑，对新手不怎么友好，同时有些功能相对旧版元素功能还更少了。比如原来的容器可以比较容易的实现背景视频和背景图片轮播效果，而且效果挺好的。但是新版本的原子化元素没有提供这个功能，它只能添加背景图片和颜色叠加。 如果你的wordpress外贸建站项目中有这个功能需求，那么有两个方法。 方法一：直接使用旧元素 在Elementor官方没有提供V4的背景视频和图片轮播功能之前，直接使用旧版本元素是最简单方便的。而且现在绝大多数情况下，我们都不太可能完全使用新的V4原子化元素，更多的是需要新旧配…
悦然wordpress建站之前分享了一些Elementor V4的内容，最近几天试用下来发现V4的BUG还有不少，比如它的变量和类别集居然不支持导入导出。以前的全局样式都是可以的，这可能是官方还未完善，这么重要的一个功能居然都没有，这就太不应该了。 虽然官方暂时未提供导入导出的功能，但是没关系，有大佬出手了，接下来分享一个工具和使用方法 工具 以下是一个国外大佬分享的代码，大家可以直接添加到wordpress网站的主题functions.php文件中，或者是添加到wp code之类的代码管理插件中并启用。 使用方法 接下来简要介绍一下工具的使用方法。 导出操作 首先你需要先在Elementor…
昨天看到一个悬停背景图片切换效果的教程，如上图这样，鼠标放到那个框框上就切换为对应的背景图片。但感觉看到的这个教程复杂了一些，又是CSS又是JS的，于是我自己折腾了一会，用CSS算基本实现了，这个方法适用于Elementor编辑器（含V4 Atomic编辑器）和古腾堡编辑器。接下来分享介绍。 CSS代码 本教程要用到的CSS代码如下，大家可以把它用到elementor编辑器或古腾堡编辑器中，里面的一些参数值可以自行按需修改。 重点：以上代码中main-bg-box作为主容器的CSS类，hover-item-1、hover-item-2、hover-item-3、hover-item-4作为子容…
之前给大家简单聊了下Elementor V4(Atomic编辑器)，不知道大家都用的怎么样了，还顺手吗？今天悦然wordpress建站又抽空录了一个视频说明，通过一个简单的实例介绍了V4的新特性，以及和原来的差别。大家有兴趣可以去看看。 Elementor V4的整体操作和原来的Elementor编辑器是一样的，只是新增加的原子化元素设置项有了很大的改变，这可能需要一个漫长的熟悉过程。非专业建站或技术人员其实不必纠结V3还是V4，习惯哪个用哪个就好了。 悦然wordpress建站把做好的演示（就是文章的第一张图）给大家导出来了，大家如果感兴趣可以下载导入，在这个基础上了解并学习。
很早之前Elementor官方就已经在测试Elementor Editor V4编辑器（Atomic编辑器），这是一套全新的元素，叫原子化组件，增强了自定义功能，简化了代码，更简洁，性能更好。还可以用Elementor Editor V4的的原子化组件手搓模块。如需体验可以在网站后台打开【设置-Atomic编辑器】，然后启用即可。 Elementor Editor V4编辑器引入CSS‑First理论，通过全局变量（ Variables ）、可复用类（ Classes ）和伪类状态（ States ）三大机制，实现样式配置的集中化与高效复用。 启用V4之后，Elementor编辑器界面的最上面…
继续分享wordpresss外贸建站教程。最近卖出一个YRWP系列的Elementor成品网站模板，有个客户是做SEO的，对网站的标签系统比较在意，所以想给文章和产品详情页添加标签显示。 标签功能本身是自带有的，只是没让它直接显示出来。接下来就分享一下如何显示并给Elementor的Tag标签添加样式，这里以YRWP006模板为例。 步骤一：添加Post Info调用标签 YRWP系列模板是在Elementor编辑器基础上做的，所以首选打开文章或产品详情页模板，进入Elementor编辑页面，然后添加一个Post Info模块，Type这里选Terms，然后下面选标签（如果是YRWP的产品详情…
© Copyright 2020~2026. 悦然网络工作室/悦然wordpress建站 专注中小企业wordpress建站 All Rights Reserved.网站地图
本站图片来源为Pexels、Pixabay、Freepik、Unsplash等图片库的免费许可，CC0协议;还有部分为自己手绘或AI生成，版权碰瓷请自重！法律服务：law@yueranseo.com
蜀ICP备20016391号-1
川公网安备 51011502000367号
