将图片转化为引人入胜的着陆页,无需编程
发表于:日期
创建一个视觉吸引力的着陆页以前意味着需要聘用开发人员或学习编码。但是现在,随着ChatGPT和Gemini集成到Selldone的页面构建器中,这已经不再是问题。
这种新的AI驱动工作流程,允许任何人——无论是否具有技术经验——将简单的图片、草图,甚至是一个粗略的想法转换为他们的在线商店或着陆页的一个美观、完全响应的部分。一切都可以在Selldone生态系统中即时工作,无需手动编码。
无论您是在打造个人品牌还是管理在线业务,这种方法都可以帮助您在几分钟内推出精致现代的页面。
只需上传图片或描述布局,向ChatGPT(使用Selldone插件)或Gemini请求将其转换为着陆页的一部分。AI理解Selldone的技术格式和平台中动态Vue组件的结构。您将收到一段复制粘贴即可用于Selldone页面构建器中的代码块。
这一部分将包括:
示例提示:
您的新部分已上线,完全风格化且移动设备就绪。
您现在可以通过属性面板自定义它,或返回AI请求编辑——无论是调整布局、更改颜色、添加功能,还是替换文本。
每个元素都是可编辑的。颜色可以使用可视选择器更改,图像可以轻松替换或上传。即使您从未使用过页面构建器,体验也被设计为直观的。
这些工具会自动响应并开始修复代码。
My Chat with Gemini and its Answer to the Error
正如您所见,我错误地在HTML选项卡中输入了代码,这是我不应该做的。
AI生成的一切已经过优化,确保在所有设备上看起来都很不错。您不必担心布局的破坏、改变图片大小或编写样式规则。这些部分遵循Selldone设计语言和最佳实践的严格标准。
您将花更多时间在创作上,而不是修复上。
它快速、简单并且开放。
创造力没有上限,您可以达到多远也没有封顶。借助AI和Selldone,构建强大、美观的网页现在只需描述您需要的内容即可。
这种新的AI驱动工作流程,允许任何人——无论是否具有技术经验——将简单的图片、草图,甚至是一个粗略的想法转换为他们的在线商店或着陆页的一个美观、完全响应的部分。一切都可以在Selldone生态系统中即时工作,无需手动编码。
从概念到组件只需几分钟
假设您看到一个您喜欢的设计。可能是另一家网站上的产品展示,或者您在Canva中创建的营销横幅,甚至只是您保存的截图。您无需弄清楚如何对其进行编码或从何入手。只需上传图片或描述布局,向ChatGPT(使用Selldone插件)或Gemini请求将其转换为着陆页的一部分。AI理解Selldone的技术格式和平台中动态Vue组件的结构。您将收到一段复制粘贴即可用于Selldone页面构建器中的代码块。
这一部分将包括:
- 所有文本和标题
- 图片和链接
- 按钮、字体和颜色
- 动态功能,如产品卡片或推荐语
简单流程带来强大效果
要将此部分添加到您的Selldone页面,请按以下步骤操作:- 将您的设计想法上传或描述给ChatGPT或Gemini。
- 请求与Selldone页面构建器兼容的Vue组件。
- 复制生成的代码。
- 在Selldone的页面构建器中,将代码元素拖放到着陆页中
- 在Vue选项卡中粘贴代码并保存。
- 将您的设计想法上传或描述给ChatGPT或Gemini。
重要提示:请使用此链接直接访问ChatGPT Selldone插件。提示:从桌面上传您喜欢的设计图片到ChatGPT。随图片一起提供详细说明,以帮助生成更准确的组件并减少将来的修改。
示例提示:
您现在可以通过属性面板自定义它,或返回AI请求编辑——无论是调整布局、更改颜色、添加功能,还是替换文本。
最佳结果的推荐提示
为了帮助AI准确了解您的需求,我们建议使用以下提示:请根据此图片或描述为Selldone页面构建器生成一个响应式Vue组件。所有文本、按钮、图片、颜色和字体应在属性对象内定义。组件必须遵循Vuetify 3标准,能在各设备上响应,并遵循Selldone的规则,包括无自闭标签。如适用,请包括产品卡、评级星和操作按钮。对于所有文本和卡片与按钮,请添加视觉颜色选择器、字体大小、字体粗细和半径。您可以在任何时候想要创建或调整部分时重用此提示。这确保了代码生成得干净并符合Selldone的要求。
完全可定制,完全可扩展
一旦您的部分到位,您并不限于您的初始想法。您可以要求ChatGPT或Gemini更改任何内容:- 替换或移动图片
- 更新标题和副标题
- 添加新按钮、滑块、推荐或横幅
- 调整文本样式和大小
- 调整间距和布局以获得不同的外观
每个元素都是可编辑的。颜色可以使用可视选择器更改,图像可以轻松替换或上传。即使您从未使用过页面构建器,体验也被设计为直观的。
可能的错误
错误 #1
如果在Selldone构建器中粘贴代码后遇到错误(如下面的图片所示),只需请求ChatGPT或Gemini帮助您解决这些问题。
错误 #2
如果您在HTML选项卡中复制并粘贴代码,该部分将显示为空白:
错误 #3
有时,当您请求在某个部分添加滑块、轮播或滚动条时,可能会注意到不需要的元素,如额外的点、破折号或箭头按钮出现在该部分之外。这通常是因为ChatGPT使用了MDI(材质设计图标)而不是所需的Google字体材质图标。要修复此问题,请确保要求ChatGPT仅使用Google的官方材料图标。开始之前,请阅读这些提示:
- 有时,在工具回复后,您可能需要要求它写出完整的代码。如果更改很小且原始代码很长,它可能会倾向于给您指示替换特定行,而不是重写整个块。
- 建议为每个新部分启动一个新的Selldone ChatGPT对话。从以前的会话继续可能会导致工具应用旧指令,这些指令与您的新组件无关。
- 有时,ChatGPT可能会在Selldone组件属性中提供一个输入以输入图像URL,但您的图像存储在本地计算机上。在这种情况下,请请求ChatGPT将该元素(例如捷盘或滑块)定义为一个对象,以便您可以直接上传图片而不是使用URL。
- 如果图像包含许多视觉元素,您可以简单地将其上传到ChatGPT并请求描述。然后复制该描述并用作提示,要求ChatGPT生成一个组件。这种方法通常会带来更好和更准确的结果。
为什么这很重要
通过这种工作流程,任何人都可以在几分钟内从视觉概念转化为响应式、生产就绪的着陆部分。不再需要等待开发人员或在布局构建器中挣扎。无需学习Vue、CSS或响应式设计。AI生成的一切已经过优化,确保在所有设备上看起来都很不错。您不必担心布局的破坏、改变图片大小或编写样式规则。这些部分遵循Selldone设计语言和最佳实践的严格标准。
您将花更多时间在创作上,而不是修复上。
今天试试自己动手
开始非常简单。选择您想创建的部分——无论是受到其他网站、草图或产品传单的启发——并使用推荐的提示向ChatGPT或Gemini描述。您将收到代码,将其粘贴到Selldone中,您的着陆页就会栩栩如生。
创造力没有上限,您可以达到多远也没有封顶。借助AI和Selldone,构建强大、美观的网页现在只需描述您需要的内容即可。