Tired of
lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
Back to Blog List
点击“创建新页面”
掌握 GemPages 的 AI 功能：图像到布局
Updated:
5 minutes read
如果您正在寻找一种更智能、更快捷的方式来构建和自定义 Shopify 商店页面，那么GemPages中包含的 AI 功能 Image -to-Layout 可能是您的完美工具。凭借其尖端的人工智能技术，Image-to-Layout 可以帮助您快速将参考资料转换为可编辑的布局，让您将时间和精力投入到您的业务中。
以下指南涵盖了您在探索“Image-to-Layout”功能时所需要了解的内容。
什么是 Image-to-Layout
Image-to-Layout 是排名第一的 Shopify 页面构建器 GemPages 的第一个 AI 功能。基本上，Image-to-Layout 可帮助用户将 URL 或图像转换为可编辑的布局。
该功能现已稳定发布，自测试版发布以来，已获得众多满意用户的积极反馈。对于店主、自由职业者、直销商以及任何希望更快发布页面并增强增长引擎的人来说，这是一款改变游戏规则的工具。
了解更多： Ecom Bull - 使用 GemPages Image-To-Layout AI 将 Shopify 商店设计速度提高 5 倍
Image-to-Layout 帮助用户将 URL 或图像转换为可编辑的布局
为什么要使用 GemPages 的图像到布局
以下仅列举了 Image-to-Layout 成为加快页面构建体验的有用工具的几个原因：
高效的商店建设：通常，从头开始构建和自定义产品页面或登录页面，同时确保其与您的品牌保持一致，可能需要几天的时间。在旺季，这种工作量会占用您的时间和精力，分散您对更重要职责的注意力。Image-to-Layout 可快速生成可自定义的布局，从而节省从头开始制作布局所花费的时间。
适合所有专业水平：无论您是经验丰富的设计师还是设计专业知识有限的店主，Image-to-Layout 都是您的不二之选。该功能可帮助您完成设计中最初且最棘手的步骤之一：布局设计。结构良好的布局可丰富用户参与度和导航，简化信息消费并引导访问者执行所需的操作。借助 AI，Image-to-Layout 可让您根据参考资料制作专业设计且易于导航的页面，而无需处理复杂的技术问题。
量身定制：您可以自主选择希望我们的 AI 功能创建的特定部分。然后，您可以使用我们直观的编辑器轻松自定义颜色、字体和各种设计元素。这不仅可以确保品牌形象的统一，还可以打造出精致、视觉上引人入胜的外观，吸引人们的注意力。
如何使用 Image-to-Layout？
如何使用 Image-to-Layout
Image-to-Layout 可通过 GemPages 版本 7和混合版本访问- 这意味着：
- 如果您目前拥有 GemPages 版本 6 帐户并希望访问主题部分，请随时联系我们的客户支持团队以获取升级过程的帮助。升级时可能会有一些条件。
- 如果您是 GemPages 新用户，只需从 Shopify 应用商店安装该应用程序即可。安装后，您将自动使用 GemPages v7。
使用 Image-to-Layout 的分步指南
拥有 GemPages 版本 7 帐户后，以下是有关如何使用 Image-to-Layout的详细步骤：
1. 从 Shopify 访问GemPages 应用程序
2. 寻找参考
找到适合您需求的布局参考。它可以是 URL 或图像。本文后面提供了选择正确图像和 URL 的有用指南。
重要提示：请确保您有权使用图片作为您的页面使用。GemPages 不会对您与图片所有者之间的任何版权纠纷负责。
3. 打开GemPages 仪表板以访问Image-to-Layout
- 点击“创建新页面”（适用于 GemPages版本 7 ）
- 点击“从头开始”，使用 GemPages 从头创建新页面
点击“创建新页面”
从头开始创建新页面
4. 使用 URL 或图像生成页面
单击“从 URL 或图像开始生成” ，或导航至侧栏菜单中的“AI图像到布局”
使用 GemPages 从 URL 或图像生成新页面
- 如果您已经创建了页面，但想要利用“图像到布局”功能从参考 URL 或图像添加部分或元素，则可以通过单击编辑器左侧栏上的AI按钮来访问该功能。
- 导航到“图像到布局”窗口后，插入参考 URL 或图像，然后单击“生成”以创建可编辑的布局。
插入 URL 或图像，然后单击“生成”
5. 选择所需的生成布局
在此步骤中，您可以选择要生成的部分。生成的部分数量根据不同的定价计划而有所不同。请记住，生成的元素将使用 GemPages 元素默认设置。
6. 定制
创建布局后，您可以使用我们的编辑器和大量元素列表轻松自定义页面以满足您的业务需求。在自定义页面时，如果您想添加更多部分，只需导航到该功能即可。
7. 发布您的页面
完成所有页面自定义和优化任务后，就可以发布由 Image-to-Layout 生成的第一个页面了！
我们推荐的图像到布局输入
本节将指导您如何提供正确的输入（包括图像和 URL），以便为您的设计生成最相关、最准确的布局。
使用 Image-to-Layout 获得最佳效果的图像要求
在上传任何参考资料以生成可编辑布局之前，请确保您的图像遵循这些准则。
选择正确的图像类型和尺寸
仅兼容 .jpeg、.jpg 和 .png 文件。文件大小不得超过 20 MB，且仅包含英语。
选择正确的背景
为了获得最佳效果，请避免选择具有渐变或多色背景的参考图像。相反，请选择平坦的纯色背景。这将提高生成的布局的准确性和质量。
避免选择具有渐变背景的参考。请选择平坦的纯色背景。
避免选择以图像为背景的参考。请选择平坦的纯色背景。
考虑图像大小
图像高度应小于 20,000 像素，宽度应大于 1,440 像素，以确保生成的布局均匀。
图像高度应小于 20,000 像素
图片宽度应大于 1,440 像素
注意图像方向
上传图片前，请确保图片方向正确。如果图片保存颠倒，请使用图片编辑软件将其旋转。
确保图像的方向正确
选择干净的图像
请注意选择不与任何元素（如文本或框）重叠的清晰图像，这样您才能获得最佳效果。
避免选择与文本重叠的图像
在桌面上截屏
上传您首选网站的桌面版截图，而不是移动版。我们的编辑器将帮助您确保您的设计在任何设备上都看起来专业。
上传您首选网站的桌面版截图
截屏时，请记住避免捕获浏览器，仅包含网站设计以获得最佳效果。
避免捕获浏览器
使用 Image-to-Layout 获取最佳效果的 URL 要求
在选择任何 URL 来生成可编辑布局之前，请确保您的 URL 遵循以下准则：
- 仅限英语
- 确保 URL 可公开访问 - 这意味着该网站不应被任何形式的身份验证（例如密码）阻止或仅对特定位置或目标访问者开放。
- 网站不应超过 25 个部分
如何最大限度地发挥图像布局的潜力
除了技术要求之外，我们还为您准备了一些需要注意的事项，以便您可以最大限度地发挥 Image-to-Layout 的潜力。
- 尝试不同的方法：不要害怕尝试不同的设计风格。这可以帮助您找到最适合您需求的布局。
- 使用图像到布局作为起点：使用图像到布局作为您创作过程的起点。采用生成的布局，并在此基础上发挥您自己的创造力和研究成果。
- 非常适合登陆页面设计： Image-to-Layout 在创建引人入胜的登陆页面时大放异彩。其功能使整个过程变得无缝且高效。
使用 GemPages 的 Image-to-Layout 创建的登录页面
了解更多： 7 个来自顶级品牌的 Shopify 登陆页面示例（2023 年）
我们的图像到布局路线图
当前发生的事以及未来的前景
Image-to-Layout 是我们推出的首个 AI 功能，也是我们为 Shopify 社区打造更智能、更快速的页面构建所做的努力的一部分。在这项工作的整个过程中，我们意识到 Image-to-Layout 在某些领域非常有用，而我们的团队正致力于随着时间的推移改进某些领域。
在我们继续增强其功能的同时，我们迄今为止已经取得了以下成就：
- 准确表示简单的布局（达到88％的准确率，在1000张图像上测试）
- 根据 URL 和图像生成英文文本内容
- 以中高精度检测并生成 63 种元素中的 20 种
- 根据客户的反馈，使用 GemPages 的 AI Image-to-Layout使他们能够完成创建页面所需工作的 60-70%
|
元素 |
准确度 |
|
排 |
高的 |
|
标题 |
高的 |
|
文本块 |
高的 |
|
图像 |
高的 |
|
按钮 |
高的 |
|
图标列表垂直 |
中等的 |
|
图标列表水平 |
中等的 |
|
产品 |
中等的 |
|
产品列表 |
中等的 |
|
（P）标题 |
中等的 |
|
（P）描述 |
中等的 |
|
（P）价格 |
中等的 |
|
（P）数量 |
中等的 |
|
（P）图片与图库 |
中等的 |
|
（P）变体 |
中等的 |
|
（P）色板 |
中等的 |
|
（P）购物车按钮 |
中等的 |
|
英雄旗帜 |
中等的 |
|
倒数计时器 |
中等的 |
店主现在可以充分利用GemPages AI功能，因为 GemPages 团队已经：
- 提高布局和元素生成的准确性
- 提高功能速度
- 增加支持的元素数量
共同提高页面布局生成速度
GemPages 的图像到布局功能为用户提供了一种令人兴奋的新方法来增强他们的页面设计过程。通过以高精度和高效率将图像或 URL 转换为可自定义的布局， GemPages AI 的这一功能显著减少了创建视觉吸引力页面所需的时间和精力。探索 GemPages 的这一创新功能，了解它如何提升您页面的美观度和功能性。如需更多信息和进一步帮助，我们的帮助中心指南和客户支持实时聊天可帮助您充分利用这一强大的新功能。
关于 Image-to-Layout 的常见问题解答
How do I sign up to use Image-to-Layout?
Image-to-Layout (I2L) is accessible via GemPages version 7 - which means:1. If you currently have a GemPages version 6 account and wish to access I2L, please feel free to contact our customer support team for assistance with the upgrade process. Some conditions may apply when upgrading. 2. If you're new to GemPages, just install the app from the Shopify app store.
How much does it cost to use Image-to-Layout?
Image-to-Layout is a feature of GemPages v7 - which comes with a free plan. The number of sections generated corresponds to your selected pricing plan and will be reset on the 1st of every month. The options are as follows:1. Free: 60 uploads2. Build: 300 uploads3. Optimize & Enterprise: Unlimited uploads
Can I use Image-to-Layout to create layouts from pages generated by other page builders?
Yes. You can use Image-to-Layout to create layouts from pages generated by page builders other than GemPages. Make sure the URL is publicly accessible - which means the site should not be blocked by any form of authentication (e.g., password) or only open to a specific location or targeted visitors.
