de_DEen_USes_ESfr_FRid_IDjapl_PLpt_PTru_RUvizh_TW

如何确保嵌入式AI翻页书的全尺寸显示:逐步指南

Flipbook Maker2 days ago

我们很高兴分享一项显著提升生活品质的更新,适用于AI翻页书制作工具。在数字出版领域,呈现效果至关重要。此前,用户偶尔会遇到嵌入式翻页书因默认查看器高度设置而导致部分被裁剪的问题。我们很高兴地宣布,该问题已得到完全解决。
enhance the default size of the generated flipbook to show the full image.

通过最新更新,嵌入式翻页书现在默认以全尺寸显示。这确保内容不会被裁剪,您的数字出版物在网站或博客上能清晰且完全按照预期显示。本指南将引导您如何使用这一新功能,并提供最佳实践来嵌入您的AI生成的书籍。

更新内容:有哪些变化?

在开始教程之前,了解这一技术改进非常重要。此前,嵌入式翻页书的容器可能无法根据生成书籍的宽高比动态调整,导致出现“裁剪”效果,页面底部可能被隐藏。

解决方案:

  • 自动调整:翻页书框架现在会自动调整以显示整本书。
  • 不再裁剪:更新后的嵌入代码逻辑确保翻页书能正确适配网站容器,无需手动调整大小.
  • 专业效果:无论您是浏览一篇故事、一份公司文件,还是一个演示文稿,体验现在都保持一致且专业。

逐步教程:生成并嵌入您的翻页书

按照以下步骤,使用AI翻页书制作工具创建翻页书,并将其完美嵌入您的网站。

步骤 1:访问 AI 电子书生成器

进入 AI 电子书生成器工具。该平台可让您立即将原始创意转化为互动式数字书籍。

步骤 2:输入您的需求

为了生成您的内容,请提供必要的输入信息:

  1. 主题: 输入您书籍的主要主题。
  2. 描述: 添加简要背景或您希望包含的特定细节。
  3. 参数: 设置您偏好的页数、语言以及插图的艺术风格。

步骤 3:生成并审核

点击生成。AI 将创建内容和版式。请审核电子书,确保文字和图片符合您的预期。

步骤 4:获取嵌入代码

满意后,请查找 分享嵌入 选项。

注意: 您不再需要手动计算宽高比或强制设置特定高度参数以避免裁剪。新系统会自动为您完成此验证。

步骤 5:将代码放置在您的网站上

复制提供的 HTML 代码片段,并将其粘贴到您的博客(WordPress、Wix、Squarespace 等)或自定义网站代码的 HTML 编辑器中。发布页面即可查看效果。

最佳嵌入指南

尽管更新已处理了尺寸方面的大部分工作,但遵循以下指南可确保最佳用户体验:

  • 容器宽度: 确保您在网站上粘贴代码的 HTML 容器(div)设置为可伸缩宽度(例如:100%)。电子书将填满可用宽度,并自动调整高度以保持宽高比。
  • 移动端响应性: 在移动设备上测试您的嵌入页面。全尺寸更新在此特别有益,因为它可防止移动浏览器裁剪电子书底部的导航按钮。
  • 最少样式: 避免添加 overflow: hidden 将 CSS 属性添加到翻页书的直接父容器,这在理论上可能与新的自动调整大小逻辑产生冲突。

示例:之前 vs. 之后

为了直观了解此更新的影响,请考虑以下场景:

“之前”场景

代码片段(旧版行为):
嵌入内容可能默认采用固定高度(例如 500px)。如果生成的书籍为 A4 格式,页面底部 20% 的内容——通常包含页码或页脚文字——会被裁剪,用户需要在 iframe 内滚动才能查看。

“之后”场景(当前)

行为:
嵌入内容会检测文档大小。如果书籍在当前宽度下需要 800px 的高度才能完整显示,框架将自动扩展至 800px。

  • 结果: 读者无需操作滚动条即可看到完整的封面、全部文字和导航箭头。
  • 优势: 无缝集成,看起来像是网页的原生部分,而非受限的窗口。

检查清单:审核您的翻页书嵌入内容

使用此检查清单,确保您的嵌入内容充分利用了此次更新:

  • [ ] 重新嵌入旧版内容: 如果您嵌入的旧版翻页书看起来被裁剪了,请尝试从工具中刷新嵌入代码,以应用新的全尺寸逻辑。
  • [ ] 检查容器宽度: 确保您的网站布局允许嵌入内容至少有 600-800px 的宽度,以获得最佳可读性。
  • [ ] 验证完全可见性: 加载您的页面,确认翻页书底部(包括页码)无需滚动即可完全可见。
  • [ ] 测试交互: 点击翻页动画,确保在切换过程中框架保持稳定。
  • [ ] 移动端审核: 在智能手机上打开页面,确保全尺寸 显示 能够正确缩小以适应竖屏。

通过利用此更新,您可以自信地分享故事、教育资料和商业文档,知道您的受众正获得他们应得的优质阅读体验。

Sidebar Search
Loading

Signing-in 3 seconds...

Signing-up 3 seconds...