如何将CodePen设计导入WordPress（Elementor）？

方法一：直接复制代码（适合手动梳理逻辑） #

• 打开目标CodePen页面，分别切换到HTML、CSS、JS标签，全选并复制每个标签内的代码。
• 打开自己的CodePen编辑器（点击右上角「New Pen」），将复制的代码分别粘贴到对应标签的输入框中。
• 检查并迁移外部依赖：原Pen如果用到了外部库（如Three.js、CSS框架），进入原Pen的「Settings」页面，切换到「CSS」和「JavaScript」标签，把里面的外部资源链接复制到自己Pen的对应设置里，否则可能出现功能失效或报错。

方法二：使用Fork功能（一键继承所有配置） #

• 打开目标CodePen页面，点击右上角的「Fork」按钮（通常在「Save」按钮旁）。
• 点击后会自动生成一个属于你的Pen副本，包含原Pen的所有代码、预处理器设置和外部依赖，你可以直接在副本中修改定制。
• 修改完成后点击「Save」，副本会自动保存到你的CodePen个人主页。

常见问题排查 #

• 如果运行后出现「xxx is not defined」类报错，大概率是漏加了原Pen的外部依赖，去原Pen的Settings里找对应库的CDN链接添加即可。
• 若代码样式或逻辑异常，检查自己Pen的预处理器设置是否和原Pen一致（比如原Pen用了Sass，你的Pen也要在Settings里开启Sass预编译）。

内容的提问来源于stack exchange，提问作者Noshad70