# Creght 视频教程｜零代码建站教学与功能演示

> 通过视频教程快速掌握 Creght 的使用方法。从 AI 生成网站、编辑布局到添加动画，零基础也能轻松上手，几分钟打造高保真网站。

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)](/)

产品

[AI 建站推荐用对话生成网站与 Web 应用](/ai.md) [可视化建站用画布、组件和特效精细搭建](/design.md)

[两种方式对比根据需求选择合适的创作方式→](/ai-vs-visual-builder.md)

解决方案

[设计师作品集](/solution/designer-portfolio.md) [外贸独立站](/solution/foreign-trade-website.md)

[价格](/price.md) [帮助中心](/help.md)

[资源广场](/resources.md)

Creght AI·建站资源

[网站模板从完整网站开始](/templates.md) [页面区块首屏、定价、案例等常用区块](/blocks.md) [动效灵感发现可复用的交互动效](/effects.md)

[浏览全部资源](/resources.md) [可视化建站资源](/design/resources.md)

[联系我们](/contact.md)

[立即体验](https://creght.cn/project)

视频教程

- [基础知识12](#basics)
- [CMS2](#cms)
- [组件3](#components)
- [动效3](#motion)
- [Figma to Creght5](#figma-to-creght)
- [模板使用教程3](#templates)
- [从头搭建网站4](#build-from-scratch)

# Creght 视频教程

从基础概念、CMS、组件、动效到 Figma to Creght 和完整建站流程，按分类系统学习 Creght。

## 基础知识

了解 Creght 界面和基本设计概念，入门必看。

[![2分钟，快速了解 Creght](https://fsu.creght.com/project/mtdDqMgsnYi/mfQSOvpcUoC__design_drag4_3_1.jpg?w=3072&fmt=webp)\
\
**2分钟，快速了解 Creght**\
\
Creght 概览](https://www.bilibili.com/video/BV1NSpxzsErV/) [![什么是层级？](https://fsu.creght.com/project/mtdDqMgsnYi/mctftKMbrvf__layercolor.png?w=3072&fmt=webp)\
\
**什么是层级？**\
\
快速了解层级是什么以及作用](https://www.bilibili.com/video/BV1RARNYmEhY/) [![Creght 的尺寸](https://fsu.creght.com/project/mtdDqMgsnYi/mcVZCubFeiB__image.png?w=3072&fmt=webp)\
\
**Creght 的尺寸**\
\
学习如何使用 Creght 的尺寸知识点](https://www.bilibili.com/video/BV1bRRAYNE2n/) [![Creght 的自动布局-弹性布局](https://fsu.creght.com/project/mtdDqMgsnYi/mdcEaHLcUNO__frame_65_1.jpg?w=3072&fmt=webp)\
\
**Creght 的自动布局-弹性布局**\
\
学习如何使用 Creght 的弹性布局及实践](https://www.bilibili.com/video/BV1TK9mYXEqa/) [![Creght 的自动布局-网格布局](https://fsu.creght.com/project/nfDpRZZsmsy/mcEIuIUhOVS__772shots_so_1.jpg?w=3072&fmt=webp)\
\
**Creght 的自动布局-网格布局**\
\
学习如何使用 Creght 的网格布局及实践](https://www.bilibili.com/video/BV1xqRpYEEAb/) [![Creght 的相对定位和绝对定位](https://fsu.creght.com/project/mtdDqMgsnYi/mdcDQolnmBQ__frame_64_1.jpg?w=3072&fmt=webp)\
\
**Creght 的相对定位和绝对定位**\
\
学习如何使用 Creght 的相对定位和绝对定位](https://www.bilibili.com/video/BV1Sr9mYZEfM/) [![Creght 的固定定位和黏性定位](https://fsu.creght.com/project/nfDpRZZsmsy/mcEKheJuNEZ__sticky.jpg?w=3072&fmt=webp)\
\
**Creght 的固定定位和黏性定位**\
\
学习如何使用 Creght 的固定定位和黏性定位](https://www.bilibili.com/video/BV1h69mY8Eyh/) [![Creght 断点（响应式）](https://fsu.creght.com/project/nfDpRZZsmsy/mcEJHuTJcwO__frame_50.jpg?w=3072&fmt=webp)\
\
**Creght 断点（响应式）**\
\
学习断点是什么、作用及实践](https://www.bilibili.com/video/BV1HmRsYJEeM/) [![Creght 链接配置说明](https://fsu.creght.com/project/mtdDqMgsnYi/mebWefsIOiT__frame_1321319728_1.jpg?w=3072&fmt=webp)\
\
**Creght 链接配置说明**\
\
5种常见的链接设置](https://www.bilibili.com/video/BV1sML2ztEJz/?vd_source=96858a43f823d5446398e77a671d56ee) [![拖拽操作](https://fsu.creght.com/project/mtdDqMgsnYi/mgrFrdNbKeD__design_drag4_3_1.jpg?w=3072&fmt=webp)\
\
**拖拽操作**\
\
了解 Creght 的两种不同的拖拽](https://www.bilibili.com/video/BV1ysKJzbExY/) [![Creght 如何从头实现下拉菜单](https://fsu.creght.com/project/mtdDqMgsnYi/meXmprImgXe__frame_1321319762.jpg?w=3072&fmt=webp)\
\
**Creght 如何从头实现下拉菜单**\
\
使用蒙层（Overlay）-相对位置实现一个下拉菜单](https://www.bilibili.com/video/BV1LdjvzSEdN/?vd_source=96858a43f823d5446398e77a671d56ee) [![Creght 如何从头实现一个弹窗](https://fsu.creght.com/project/mtdDqMgsnYi/meXmtnNYsvd__frame_1321319761.jpg?w=3072&fmt=webp)\
\
**Creght 如何从头实现一个弹窗**\
\
使用蒙层（Overlay）-绝对位置实现一个弹窗](https://www.bilibili.com/video/BV1FyjdzUEBU/?vd_source=96858a43f823d5446398e77a671d56ee)

## CMS

动态实现各种内容管理系统的场景及应用。

[![CMS概述以及CMS数据展示](https://fsu.creght.com/project/mtdDqMgsnYi/mdkynJzUxJB__frame_69.jpg?w=3072&fmt=webp)\
\
**CMS概述以及CMS数据展示**\
\
CMS是什么以及循环组件基本使用](https://www.bilibili.com/video/BV1zHZBYxEqo/?spm_id_from=333.1387.collection.video_card.click&vd_source=96858a43f823d5446398e77a671d56ee) [![CMS 详情页制作](https://fsu.creght.com/project/mtdDqMgsnYi/mebVYmyyEKB__frame_1321319729_1.jpg?w=3072&fmt=webp)\
\
**CMS 详情页制作**\
\
CMS 详情页相关知识点介绍](https://www.bilibili.com/video/BV1AeLmz8ERc/?vd_source=96858a43f823d5446398e77a671d56ee)

## 组件

了解 Creght 各种组件的基本使用及应用。

[![嵌入组件（Embed）基本使用](https://fsu.creght.com/project/mtdDqMgsnYi/mecSxYcOpsO__frame_1321319729_2.jpg?w=3072&fmt=webp)\
\
**嵌入组件（Embed）基本使用**\
\
如何嵌入第三方平台内容的介绍](https://www.bilibili.com/video/BV1gjGmzcEMA/?vd_source=96858a43f823d5446398e77a671d56ee) [![组件模式（自定义组件）](https://fsu.creght.com/project/mtdDqMgsnYi/mdcEGqhjxts__frame_66.jpg?w=3072&fmt=webp)\
\
**组件模式（自定义组件）**\
\
介绍 Creght 自定义组件以及组件变形、组件变量的讲解及实践](https://www.bilibili.com/video/BV1J4XCYfEHG/#reply114200177352409) [![轮播图基本使用](https://fsu.creght.com/project/mtdDqMgsnYi/mdcvHinUXFC__swiper_2x.jpg?w=3072&fmt=webp)\
\
**轮播图基本使用**\
\
学习如何搭建一个轮播图](https://www.bilibili.com/video/BV1dwRNYEE57/?spm_id_from=333.1387.collection.video_card.click)

## 动效

了解 Creght 动效，做更加引人瞩目的网站。

[![滚动动画：从零实现一个滚动动效案例](https://fsu.creght.com/project/mtdDqMgsnYi/mkklMEWyead__1440_1080.jpg?w=3072&fmt=webp)\
\
**滚动动画：从零实现一个滚动动效案例**\
\
滚动动效的配置及效果展示](https://www.bilibili.com/video/BV1aX1WBNEC1/?spm_id_from=333.1387.collection.video_card.click&vd_source=96858a43f823d5446398e77a671d56ee) [![动效｜滚动动效 -详细配置](https://fsu.creght.com/project/mtdDqMgsnYi/mjUfJPiZlPC__1440_1080.jpg?w=3072&fmt=webp)\
\
**动效｜滚动动效 -详细配置**\
\
滚动动效的配置及效果展示](https://www.bilibili.com/video/BV1Nf1hB5Etk?vd_source=96858a43f823d5446398e77a671d56ee&spm_id_from=333.788.videopod.sections) [![动效｜文本动效](https://fsu.creght.com/project/mtdDqMgsnYi/mgrFuCoNKTJ__frame_1321319810_1.jpg?w=3072&fmt=webp)\
\
**动效｜文本动效**\
\
文本动效的配置介绍及效果展示](https://www.bilibili.com/video/BV1ifu5zrEQY/?vd_source=96858a43f823d5446398e77a671d56ee)

## Figma to Creght

将 Figma 设计稿一键转换为真正可交互的网站。

[![01 Figma 设计稿转响应式布局3大核心指南](https://fsu.creght.com/project/mtdDqMgsnYi/mmLpZIHoFOC__cover_01.jpg?w=3072&fmt=webp)\
\
**01 Figma 设计稿转响应式布局3大核心指南**\
\
掌握 3 大核心指南，快速生成响应式布局](https://www.bilibili.com/video/BV1FWeCzxEri?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![02 从 Figma 设计稿到响应式网站教程](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqdoswJAI__cover_02.jpg?w=3072&fmt=webp)\
\
**02 从 Figma 设计稿到响应式网站教程**\
\
使用「Figma to Creght」插件，一键发布上线](https://www.bilibili.com/video/BV1xKvwzSEcj?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![03 Figma 到响应式网站交互篇｜实现按钮悬停动效](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqocjUkeu__cover_03.jpg?w=3072&fmt=webp)\
\
**03 Figma 到响应式网站交互篇｜实现按钮悬停动效**\
\
本教程将演示如何通过自定义组件实现按钮的悬停（Hover）动效](https://www.bilibili.com/video/BV1jpn3zfErW?spm_id_from=333.788.player.switch&vd_source=96858a43f823d5446398e77a671d56ee&trackid=web_related_0.router-related-2481894-jwmft.1770014695752.522) [![04 Figma 到响应式网站交互篇｜从头实现一个响应式导航](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqxkHlhPi__cover_3_2.jpg?w=3072&fmt=webp)\
\
**04 Figma 到响应式网站交互篇｜从头实现一个响应式导航**\
\
使用组件化思维创建响应式导航栏，实现一次设计，多端适配的效果。](https://www.bilibili.com/video/BV1jpn3zfErW?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![05 Figma 到响应式网站交互篇｜从头实现折叠面板](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqGSejCKx__cover_3_3.jpg?w=3072&fmt=webp)\
\
**05 Figma 到响应式网站交互篇｜从头实现折叠面板**\
\
从 0 到 1 搭建一个可点击展开 / 收起的折叠面板（FAQ）组件](https://www.bilibili.com/video/BV1ZnFPzsE17?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee)

## 模板使用教程

主要关于已有模板的使用教程。

[![Creght | 从模板搭建网站的通用教程](https://fsu.creght.com/project/mtdDqMgsnYi/mffviNJHQXu__frame_1321319765.jpg?w=3072&fmt=webp)\
\
**Creght \| 从模板搭建网站的通用教程**\
\
从模板建站的常见问题集合](https://www.bilibili.com/video/BV1Mp7UzCEvi/?vd_source=96858a43f823d5446398e77a671d56ee) [![Creght《绘画师个人作品集》模板使用教程-首页](https://fsu.creght.com/project/mtdDqMgsnYi/meEbDKHBMEW__frame_1321319744.jpg?w=3072&fmt=webp)\
\
**Creght《绘画师个人作品集》模板使用教程-首页**\
\
如何使用此模板以及常见的操作](https://www.bilibili.com/video/BV1nyEszNE9i/?spm_id_from=333.1387.upload.video_card.click&vd_source=96858a43f823d5446398e77a671d56ee) [![Creght《设计师作品集》模板使用教程](https://fsu.creght.com/project/mtdDqMgsnYi/meZaWaHfzRQ__设计师个人作品集.jpg?w=3072&fmt=webp)\
\
**Creght《设计师作品集》模板使用教程**\
\
如何使用此模板、作品集 CMS 操作管理](https://www.bilibili.com/video/BV1J77VzcEqy/?vd_source=96858a43f823d5446398e77a671d56ee)

## 从头搭建网站

用 Creght 完整搭建一个网站，视频持续更新中。

[![从头搭建一个网站概览篇](https://fsu.creght.com/project/mtdDqMgsnYi/mfQTnbNXtnc__site_summary.jpg?w=3072&fmt=webp)\
\
**从头搭建一个网站概览篇**\
\
主要介绍这个系列视频，从头带大家做一个个人网站页面](https://www.bilibili.com/video/BV1kwAkepEqV?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![导航板块搭建](https://fsu.creght.com/project/mtdDqMgsnYi/mfQTicPlyZp__site_nav.jpg?w=3072&fmt=webp)\
\
**导航板块搭建**\
\
从头搭建一个导航组件](https://www.bilibili.com/video/BV1PFAkeREkT?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![Hero板块搭建](https://fsu.creght.com/project/mtdDqMgsnYi/mcthMQpUhnP__site_hero.jpg?w=3072&fmt=webp)\
\
**Hero板块搭建**\
\
从头搭建一个 Hero 板块](https://www.bilibili.com/video/BV1iLAkeCE2X?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![工具板块搭建](https://fsu.creght.com/project/mtdDqMgsnYi/mctiaiTjSNf__site_tool.jpg?w=3072&fmt=webp)\
\
**工具板块搭建**\
\
跑马灯组件的使用](https://www.bilibili.com/video/BV1qLAkeCEAc?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)