Otter 是一款 Gutenberg 区块页面构建器插件，它为 WordPress 区块编辑器（即 Gutenberg）增加了额外功能，旨在提供更出色的页面构建体验，让您无需依赖 Elementor 或 Divi 等传统页面构建器。
使用 Otter Blocks，您将获得：
- 20+ 个额外的 Gutenberg 区块
- 丰富的图案库 (Patterns Collection)
- 全页模板 (Full-page Templates)
- 可见性条件控制 (Visibility Conditions)
- 自定义 CSS
- 动画效果
- 动态内容等高级功能
以上功能适用于您网站上的所有区块，包括第三方区块。
自定义 CSS 功能允许您直接定制页面上任何 Gutenberg 区块的 CSS 属性；而动画功能则让您可以一键为任何区块添加动效，提升页面各区域的视觉吸引力。
借助 Otter 的可见性条件功能，您可以设定特定条件，决定所选区块是否在页面上显示。
图案库 (Patterns Library) 包含多种风格的丰富元素，助您构建精美页面。涵盖网站所有关键区域：页眉、客户评价、定价表、内容版块等。
Otter 的 Gutenberg 区块如何助您一臂之力？
一款强大的 WordPress Gutenberg 区块插件
Otter 新增了 26+ 个实用且出色的区块，让 Gutenberg 页面构建变得轻而易举！
除了区块本身，您还需要高级自定义选项来掌控样式和外观。Otter 应有尽有。每个区块都支持深度自定义，助您按愿景打造网站：
- 颜色控制： 主色、强调色及背景色。
- 丰富动画： 后退、弹跳、淡入淡出、翻转、旋转、滑动、滚动、光速等 50+ 种动画，一键应用。
- 排版控制： 从间距到字体选择，全面掌控。
区块编辑器的 AI 助手
Otter 将 AI 直接引入区块编辑器，不仅辅助编辑，更能辅助构建。只需描述需求，Otter 即可生成真实、可编辑的区块。
- AI 内容生成器： 通过 AI Block，仅凭简单提示词即可生成完整版块甚至整个页面。可选择 Hero 区、特性介绍、定价表、客户评价或行动号召等类型，也可自由描述。Otter 会自动匹配您的主题颜色和当前页面风格，确保生成内容符合品牌调性。
- AI 工具栏： 选中任意文本，即可进行重写、摘要、扩写、缩写、翻译、语气调整、语法修正或简化，全程无需离开页面。您还可以创建自定义 AI 操作并重新排列工具栏顺序，适配个人工作流。
- AI 表单自动回复 [PRO]： 用 AI 撰写的个性化消息回复每一条表单提交。只需编写包含表单字段的提示词并设置备用消息，剩下的交给 AI。
- 原生 WordPress AI 连接器： Otter 的 AI 兼容 WordPress 7.0 的原生 AI 适配器，只需连接一次首选 AI 服务商，所有 Otter AI 功能均可通用。
Otter Blocks 的移动端响应式
利用 Otter 内置的响应式设置，轻松创建移动端友好设计。每个区块都可针对手机、平板和桌面端分别微调，确保跨设备体验一致。
WordPress Gutenberg 区块条件插件
想仅在用户“已登录”或“未登录”时显示特定区块？或者根据用户是商店顾客、博客编辑还是其他角色来区分显示？Otter 的 Gutenberg 区块条件功能都能实现。升级至 PRO 版还可解锁更多强大条件：
- URL 查询字符串
- 日期范围 / 星期几 / 具体时间
- WooCommerce 购物车产品 / 总消费额 / 购物车总额
- WooCommerce 分类 / 标签 / 属性
- 基于 Cookie 的条件
- 以及更多…
WordPress Gutenberg 区块动画插件
用惊艳的动画效果震撼访客！Otter 提供 50+ 种动画，可为网站上任何帖子或页面的任意区块增添视觉亮点。
WordPress Gutenberg 弹窗插件
弹窗是网络上历史最悠久的线索收集和通知展示方式之一。使用 Otter 的 Gutenberg Popup Block，您可以利用 Gutenberg 中的任何其他区块来组合构建弹窗！
精细控制弹窗的触发时机和关闭方式。支持多种触发器：加载时、退出意图、锚点点击、滚动触发等。此外，您还可以设计自定义遮罩层以契合品牌形象，吸引更多关注。查看在线演示
Otter 区块的全局默认设置
厌倦了每次添加区块都要重复设置相同选项？使用 Otter，您可以为常用区块（如 Section Block、Icon Block、Advanced Heading 等）预设默认配置，一劳永逸。
Otter 可用区块列表
免费区块
| 区块名称 | 说明 |
|---|---|
| Accordion (手风琴) | 创建垂直堆叠的内容列表，点击按钮展开/折叠。查看演示 |
| Advanced Heading (高级标题) | 增强版标题区块，支持更改字体、高亮部分文本等额外功能。查看演示 |
| AI Block (AI 区块) | 在编辑器中直接用 AI 构建。描述需求即可生成匹配主题风格的可编辑 Gutenberg 区块，生成后可手动随意调整。 |
| Button Group (按钮组) | 快速创建多个按钮，并根据浏览设备自动切换垂直/水平排列。查看演示 |
| Countdown (倒计时) | 重大活动倒计时！支持天、时、分、秒显示。查看演示 |
| Contact Form (联系表单) | 在页面任意位置插入联系表单。可集成 Brevo(Sendinblue) 或 Mailchimp 获取线索，支持 Webhook 数据管理及 hCaptcha 安全验证。查看演示 |
| Content Timeline (内容时间轴) | 优雅地按时间顺序展示事件，适合历史回顾、流程步骤或里程碑展示。 |
| Content Slider (内容轮播) | 每张幻灯片可容纳任意 Gutenberg 区块（不仅是图片）。可将标题、文本、按钮、评价卡、定价卡等做成可滑动轮播，无需额外插件。 |
| Circular Progress (环形进度条) | 用精美的圆形计数器展示进度。查看演示 |
| Flip Box (翻转卡片) | 创建带翻转效果的卡片，正反面均可插入任意 Gutenberg 内容或区块。查看演示 |
| Icon List (图标列表) | 用自定义图标替代传统圆点，让列表更生动。查看演示 |
| Icon (图标) | 在页面任意位置显示 Font Awesome 或自定义图标。支持改色、加边框及与其他区块组合。查看演示 |
| Lottie Animation (Lottie 动画) | 在 Gutenberg 中任意位置嵌入 Lottie 动画。查看演示 |
| Maps (地图) | 支持 OpenStreetMap 或 Google Maps。可自定义标记颜色/描述、搜索地点、增删控件、调整地图尺寸和样式。查看演示 |
| Progress Bar (进度条) | 用精美的进度条展示完成度。查看演示 |
| Posts (文章列表) | 在当前页面插入文章、页面或自定义文章类型的内容。支持样式、文章类型、布局等多种自定义。 |
| Product Review (产品评测) | 创建产品评测表格，列出特性、优缺点及购买链接。适合评测博客或网站。查看演示 |
| Popup (弹窗) | 创建精美弹窗，精细控制触发条件和关闭方式。查看演示 |
| Slider (图片轮播) | 在任何 Gutenberg 页面创建图片轮播。支持高度、延迟、每页数量、自动播放等设置。查看演示 |
| Section (版块/容器) | 增强版列区块！支持最多 6 列，每列可设独立背景色/图/渐变。支持桌面/平板/移动端的独立内边距和外边距设置。查看演示 |
| Stripe Checkout (Stripe 结账) | 无需搭建完整商店即可销售少量产品（如电子书、许可证等），非常便捷。 |
| Sharing Icons (社交分享) | 为访客提供社交媒体分享按钮。查看演示 |
| Tabs (标签页) | 创建水平堆叠的内容标签，点击切换显示。查看演示 |
💎 PRO 专业版区块
- Add to Cart (加入购物车)： 在任何帖子或页面中为任意 WooCommerce 产品添加“加入购物车”按钮。
- Business Hours (营业时间)： 创建精美样式的营业时间表，并可精细调整各项设置。
- Live Search (实时搜索)： 增强核心搜索区块，新增
isLive和postTypes属性，可在检查器面板中配置。 - Modal (模态框)： 实现交互式模态对话框，可在页面布局内直接展示表单、内容或公告。
- Review Comparison Table (评测对比表)： 轻松创建专业的产品对比表，给读者留下深刻印象。
💡 我们持续为 Otter 添加新的 Gutenberg 区块。如有缺失需求，欢迎在 支持论坛 反馈！
可导入的图案与全页模板
使用可定制的图案和全页 WordPress 模板，轻松启动您的网站。一键导入预制设计，即刻开始创作。
探索涵盖服务介绍、客户评价、定价方案、功能特性、行动号召等多种类型的 Otter 图案和全页模板。
Otter Pro 解锁更多选项
WooCommerce 构建器区块
使用 Otter 的 WooCommerce Builder Blocks 构建自定义单品页面。所有新功能均旨在最大化转化率并带来更多改进。
Otter Pro 专属功能：
- Add to Cart 区块 / Business Hours 区块 / Modal 区块
- Product Review Comparison 区块 / Live Search 区块
- 免费区块的 Pro 增强附加组件
- 更多动态内容选项
- 更多可见性条件选项
- 更多图案与全页模板
- 以及更多！
Otter 适合谁？
- 希望发挥 Gutenberg 编辑器最佳性能，寻找实用易用区块的用户。
- 考虑从 Elementor、Divi 等传统页面构建器迁移至 Gutenberg 区块编辑器的用户。
- 追求极速构建 Gutenberg 页面的用户。
- 需要根据条件（如登录状态）隐藏/显示 Gutenberg 区块的用户。
- 希望为 Gutenberg 区块添加动画效果的用户。
应用场景示例
Otter 开启了无限可能！看看不同受众如何充分利用它：
- 旅行博主： 使用 Otter 的 Maps 和 Google Maps 区块制作引人入胜的地图，向世界展示您的旅程。
- 非营利组织： 使用 Circle Counter 和 Testimonial 区块分享鼓舞人心的成功案例，吸引受众并推广事业。
- 餐厅老板： 使用 Flip Card 和 Form 区块展示菜单并收集预订，打造令人垂涎的在线形象；使用 Business Hours 区块以时尚格式展示营业时间。
- 科技产品评测者： 使用 Product Review 区块呈现详细评测；使用 Review Comparison Table 创建信息丰富且吸引人的产品对比表，帮助用户做出明智决策。
- 博主： 使用 Sharing Icons 方便读者分享内容；使用 Slider 展示图片画廊，提升互动。
- 内容创作者与数字产品销售者： 使用 Stripe Checkout 区块便捷销售电子书、在线课程、软件许可或数字艺术品，无需搭建完整网店，为客户提供流畅安全的结账体验。
- 在线目录网站： 对于提供目录、列表或大量内容的网站，Live Search 可大幅简化内容检索体验。
