# Creght Video Tutorials | No-Code Website Building Guides

> Learn Creght quickly with step-by-step video tutorials. From AI website generation and layout editing to animations, beginners can build polished websites in minutes.

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

Products

[AI Website Builder](/en/ai.md) [Visual Website Builder](/en/design.md)

Solutions

[Designer Portfolio](/en/solution/designer-portfolio.md) [Foreign Trade Website](/en/solution/foreign-trade-website.md)

[Pricing](/en/price.md) [Help Center](/en/help.md)

[Resources](/en/resources.md)

[All Resources](/en/resources.md) [Templates](/en/templates.md) [Components](https://creghtlib.site.creght.com/) [Animations](/en/effects.md) [Resources](https://www.figma.com/community/file/1529413044116674277)

[Contact Us](/en/contact.md)

[Get Started](https://creght.cn/project)

Video Tutorials

- [Fundamentals12](#basics)
- [CMS2](#cms)
- [Components3](#components)
- [Animations3](#motion)
- [Figma to Creght5](#figma-to-creght)
- [Template Tutorials3](#templates)
- [Build from Scratch4](#build-from-scratch)

# Creght Video Tutorials

Learn Creght systematically by category, covering fundamentals, CMS, components, animations, Figma to Creght, and complete website-building workflows.

## Fundamentals

Get to know the Creght interface and core design concepts—the best place to start.

[![Get to Know Creght in 2 Minutes](https://fsu.creght.com/project/mtdDqMgsnYi/mfQSOvpcUoC__design_drag4_3_1.jpg?w=3072&fmt=webp)\
\
**Get to Know Creght in 2 Minutes**\
\
A quick overview of Creght](https://www.bilibili.com/video/BV1NSpxzsErV/) [![What Are Layers?](https://fsu.creght.com/project/mtdDqMgsnYi/mctftKMbrvf__layercolor.png?w=3072&fmt=webp)\
\
**What Are Layers?**\
\
Understand what layers are and how they work](https://www.bilibili.com/video/BV1RARNYmEhY/) [![Sizing in Creght](https://fsu.creght.com/project/mtdDqMgsnYi/mcVZCubFeiB__image.png?w=3072&fmt=webp)\
\
**Sizing in Creght**\
\
Learn the fundamentals of sizing in Creght](https://www.bilibili.com/video/BV1bRRAYNE2n/) [![Auto Layout in Creght: Flexbox](https://fsu.creght.com/project/mtdDqMgsnYi/mdcEaHLcUNO__frame_65_1.jpg?w=3072&fmt=webp)\
\
**Auto Layout in Creght: Flexbox**\
\
Learn how to use flexbox layouts in Creght through practical examples](https://www.bilibili.com/video/BV1TK9mYXEqa/) [![Auto Layout in Creght: Grid](https://fsu.creght.com/project/nfDpRZZsmsy/mcEIuIUhOVS__772shots_so_1.jpg?w=3072&fmt=webp)\
\
**Auto Layout in Creght: Grid**\
\
Learn how to use grid layouts in Creght through practical examples](https://www.bilibili.com/video/BV1xqRpYEEAb/) [![Relative and Absolute Positioning in Creght](https://fsu.creght.com/project/mtdDqMgsnYi/mdcDQolnmBQ__frame_64_1.jpg?w=3072&fmt=webp)\
\
**Relative and Absolute Positioning in Creght**\
\
Learn how to use relative and absolute positioning](https://www.bilibili.com/video/BV1Sr9mYZEfM/) [![Fixed and Sticky Positioning in Creght](https://fsu.creght.com/project/nfDpRZZsmsy/mcEKheJuNEZ__sticky.jpg?w=3072&fmt=webp)\
\
**Fixed and Sticky Positioning in Creght**\
\
Learn how to use fixed and sticky positioning](https://www.bilibili.com/video/BV1h69mY8Eyh/) [![Breakpoints in Creght (Responsive Design)](https://fsu.creght.com/project/nfDpRZZsmsy/mcEJHuTJcwO__frame_50.jpg?w=3072&fmt=webp)\
\
**Breakpoints in Creght (Responsive Design)**\
\
Learn what breakpoints are, how they work, and how to use them](https://www.bilibili.com/video/BV1HmRsYJEeM/) [![Configuring Links in Creght](https://fsu.creght.com/project/mtdDqMgsnYi/mebWefsIOiT__frame_1321319728_1.jpg?w=3072&fmt=webp)\
\
**Configuring Links in Creght**\
\
Five common ways to configure links](https://www.bilibili.com/video/BV1sML2ztEJz/?vd_source=96858a43f823d5446398e77a671d56ee) [![Drag-and-Drop](https://fsu.creght.com/project/mtdDqMgsnYi/mgrFrdNbKeD__design_drag4_3_1.jpg?w=3072&fmt=webp)\
\
**Drag-and-Drop**\
\
Learn the two drag-and-drop behaviors in Creght](https://www.bilibili.com/video/BV1ysKJzbExY/) [![Build a Dropdown Menu from Scratch in Creght](https://fsu.creght.com/project/mtdDqMgsnYi/meXmprImgXe__frame_1321319762.jpg?w=3072&fmt=webp)\
\
**Build a Dropdown Menu from Scratch in Creght**\
\
Use an Overlay with relative positioning to create a dropdown menu](https://www.bilibili.com/video/BV1LdjvzSEdN/?vd_source=96858a43f823d5446398e77a671d56ee) [![Build a Modal from Scratch in Creght](https://fsu.creght.com/project/mtdDqMgsnYi/meXmtnNYsvd__frame_1321319761.jpg?w=3072&fmt=webp)\
\
**Build a Modal from Scratch in Creght**\
\
Use an Overlay with absolute positioning to create a modal](https://www.bilibili.com/video/BV1FyjdzUEBU/?vd_source=96858a43f823d5446398e77a671d56ee)

## CMS

Build dynamic content-management scenarios and applications.

[![CMS Overview and Displaying CMS Data](https://fsu.creght.com/project/mtdDqMgsnYi/mdkynJzUxJB__frame_69.jpg?w=3072&fmt=webp)\
\
**CMS Overview and Displaying CMS Data**\
\
Learn what a CMS is and how to use loop components](https://www.bilibili.com/video/BV1zHZBYxEqo/?spm_id_from=333.1387.collection.video_card.click&vd_source=96858a43f823d5446398e77a671d56ee) [![Building CMS Detail Pages](https://fsu.creght.com/project/mtdDqMgsnYi/mebVYmyyEKB__frame_1321319729_1.jpg?w=3072&fmt=webp)\
\
**Building CMS Detail Pages**\
\
Learn the key concepts behind CMS detail pages](https://www.bilibili.com/video/BV1AeLmz8ERc/?vd_source=96858a43f823d5446398e77a671d56ee)

## Components

Learn the fundamentals and practical uses of Creght components.

[![Getting Started with Embed Components](https://fsu.creght.com/project/mtdDqMgsnYi/mecSxYcOpsO__frame_1321319729_2.jpg?w=3072&fmt=webp)\
\
**Getting Started with Embed Components**\
\
Learn how to embed content from third-party platforms](https://www.bilibili.com/video/BV1gjGmzcEMA/?vd_source=96858a43f823d5446398e77a671d56ee) [![Component Mode (Custom Components)](https://fsu.creght.com/project/mtdDqMgsnYi/mdcEGqhjxts__frame_66.jpg?w=3072&fmt=webp)\
\
**Component Mode (Custom Components)**\
\
Learn Creght custom components, variants, and variables through practical examples](https://www.bilibili.com/video/BV1J4XCYfEHG/#reply114200177352409) [![Getting Started with Carousels](https://fsu.creght.com/project/mtdDqMgsnYi/mdcvHinUXFC__swiper_2x.jpg?w=3072&fmt=webp)\
\
**Getting Started with Carousels**\
\
Learn how to build a carousel](https://www.bilibili.com/video/BV1dwRNYEE57/?spm_id_from=333.1387.collection.video_card.click)

## Animations

Learn Creght animations and make your website more engaging.

[![Scroll Animations: Build an Effect from Scratch](https://fsu.creght.com/project/mtdDqMgsnYi/mkklMEWyead__1440_1080.jpg?w=3072&fmt=webp)\
\
**Scroll Animations: Build an Effect from Scratch**\
\
Configure scroll animations and preview the result](https://www.bilibili.com/video/BV1aX1WBNEC1/?spm_id_from=333.1387.collection.video_card.click&vd_source=96858a43f823d5446398e77a671d56ee) [![Animations | Detailed Scroll Animation Setup](https://fsu.creght.com/project/mtdDqMgsnYi/mjUfJPiZlPC__1440_1080.jpg?w=3072&fmt=webp)\
\
**Animations \| Detailed Scroll Animation Setup**\
\
Explore detailed scroll-animation settings and effects](https://www.bilibili.com/video/BV1Nf1hB5Etk?vd_source=96858a43f823d5446398e77a671d56ee&spm_id_from=333.788.videopod.sections) [![Animations | Text Animations](https://fsu.creght.com/project/mtdDqMgsnYi/mgrFuCoNKTJ__frame_1321319810_1.jpg?w=3072&fmt=webp)\
\
**Animations \| Text Animations**\
\
Configure text animations and preview the result](https://www.bilibili.com/video/BV1ifu5zrEQY/?vd_source=96858a43f823d5446398e77a671d56ee)

## Figma to Creght

Turn Figma designs into real, interactive websites in one step.

[![01 Three Core Guidelines for Responsive Layouts from Figma](https://fsu.creght.com/project/mtdDqMgsnYi/mmLpZIHoFOC__cover_01.jpg?w=3072&fmt=webp)\
\
**01 Three Core Guidelines for Responsive Layouts from Figma**\
\
Master three core guidelines for generating responsive layouts quickly](https://www.bilibili.com/video/BV1FWeCzxEri?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![02 From a Figma Design to a Responsive Website](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqdoswJAI__cover_02.jpg?w=3072&fmt=webp)\
\
**02 From a Figma Design to a Responsive Website**\
\
Publish in one click with the Figma to Creght plugin](https://www.bilibili.com/video/BV1xKvwzSEcj?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![03 Interactive Responsive Websites from Figma | Button Hover Effects](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqocjUkeu__cover_03.jpg?w=3072&fmt=webp)\
\
**03 Interactive Responsive Websites from Figma \| Button Hover Effects**\
\
Use a custom component to create a button hover effect](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 Interactive Responsive Websites from Figma | Build Responsive Navigation](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqxkHlhPi__cover_3_2.jpg?w=3072&fmt=webp)\
\
**04 Interactive Responsive Websites from Figma \| Build Responsive Navigation**\
\
Use a component-based approach to design responsive navigation once and adapt it across devices](https://www.bilibili.com/video/BV1jpn3zfErW?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![05 Interactive Responsive Websites from Figma | Build an Accordion](https://fsu.creght.com/project/mtdDqMgsnYi/mmLqGSejCKx__cover_3_3.jpg?w=3072&fmt=webp)\
\
**05 Interactive Responsive Websites from Figma \| Build an Accordion**\
\
Build a clickable FAQ accordion that expands and collapses](https://www.bilibili.com/video/BV1ZnFPzsE17?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee)

## Template Tutorials

Learn how to customize and work with existing templates.

[![A Universal Guide to Building a Website from a Creght Template](https://fsu.creght.com/project/mtdDqMgsnYi/mffviNJHQXu__frame_1321319765.jpg?w=3072&fmt=webp)\
\
**A Universal Guide to Building a Website from a Creght Template**\
\
Answers to common questions about building from a template](https://www.bilibili.com/video/BV1Mp7UzCEvi/?vd_source=96858a43f823d5446398e77a671d56ee) [![Creght Illustrator Portfolio Template Tutorial: Home Page](https://fsu.creght.com/project/mtdDqMgsnYi/meEbDKHBMEW__frame_1321319744.jpg?w=3072&fmt=webp)\
\
**Creght Illustrator Portfolio Template Tutorial: Home Page**\
\
Learn how to use the template and complete common edits](https://www.bilibili.com/video/BV1nyEszNE9i/?spm_id_from=333.1387.upload.video_card.click&vd_source=96858a43f823d5446398e77a671d56ee) [![Creght Designer Portfolio Template Tutorial](https://fsu.creght.com/project/mtdDqMgsnYi/meZaWaHfzRQ__设计师个人作品集.jpg?w=3072&fmt=webp)\
\
**Creght Designer Portfolio Template Tutorial**\
\
Learn how to use the template and manage portfolio content with CMS](https://www.bilibili.com/video/BV1J77VzcEqy/?vd_source=96858a43f823d5446398e77a671d56ee)

## Build from Scratch

Build a complete website with Creght. More videos are on the way.

[![Website from Scratch: Series Overview](https://fsu.creght.com/project/mtdDqMgsnYi/mfQTnbNXtnc__site_summary.jpg?w=3072&fmt=webp)\
\
**Website from Scratch: Series Overview**\
\
An overview of the series for building a personal website from scratch](https://www.bilibili.com/video/BV1kwAkepEqV?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![Build the Navigation Section](https://fsu.creght.com/project/mtdDqMgsnYi/mfQTicPlyZp__site_nav.jpg?w=3072&fmt=webp)\
\
**Build the Navigation Section**\
\
Build a navigation component from scratch](https://www.bilibili.com/video/BV1PFAkeREkT?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![Build the Hero Section](https://fsu.creght.com/project/mtdDqMgsnYi/mcthMQpUhnP__site_hero.jpg?w=3072&fmt=webp)\
\
**Build the Hero Section**\
\
Build a hero section from scratch](https://www.bilibili.com/video/BV1iLAkeCE2X?spm_id_from=333.788.videopod.sections&vd_source=96858a43f823d5446398e77a671d56ee) [![Build the Tools Section](https://fsu.creght.com/project/mtdDqMgsnYi/mctiaiTjSNf__site_tool.jpg?w=3072&fmt=webp)\
\
**Build the Tools Section**\
\
Learn how to use the marquee component](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)

This website is built with [Creght](/en.md)

![User Community](https://ugc.talizen.com/_assets/site/2061660904709165056/1781070374701__help_qr.webp)

User Community

## Links

- [Pricing](/en/price.md)
- [Solutions](/en/solution.md)
- [Customers](/en/customers.md)
- [Help Center](/en/help.md)
- [Contact Us](/en/contact.md)
- [Blog](/en/blogs.md)
- [Refund Policy](/en/tuikuan.md)

## Resources

- [All Resources](/en/resources.md)
- [Templates](/en/templates.md)
- [Components](https://creghtlib.site.creght.com)
- [Animations](/en/effects.md)
- [Figma to Creght](/en/figma2creght.md)
- [API for AI](/en/api.md)

## Comparisons

- [vs Shianxianle](/en/creght-vs-sxl.md)
- [vs Fanke](/en/creght-vs-fkw.md)
- [自己写代码 vs Creght](/en/compare/self-coding.md)
- [外包 vs 自己做](/en/compare/outsourcing.md)

## Terms

- [Terms of Service](/en/legal/terms.md)
- [Privacy Policy](/en/legal/privacy.md)
- [Acceptable Use Policy](/en/legal/acceptable-use.md)

## Social Media

- [Xiaohongshu](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [Bilibili](https://space.bilibili.com/513308095)

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