如何使用 Siter：10 分钟内搭建网站 (2026)

快速入门

本指南涵盖了 Siter 的所有功能：

• 入门 — 创建您的帐户并设置您的第一个项目
• 如何使用表单集合 — Collect leads and feedback with no code
• 如何使用着陆页 — Build one focused page that turns visitors into signups
• 如何使用嵌入式和本地视频 — Add video to any section without slowing your site
• 如何使用直观设计工具 — Place every element exactly where you want it
• 如何使用组和图层 — Keep busy pages organized so edits take seconds
• How to Use Figma Plugin Overview — See how a Figma frame becomes a real web page
• How to Use Figma Plug-in — Move a finished design into Siter without rebuilding it
• 如何使用自定义地图 — Show visitors exactly where your business sits
• 如何使用自定义链接 — Turn any element into a link, anchor, or overlay trigger

所需时间： 每部影片 5 分钟

本指南还包含以下内容： 专业提示 | 常见错误 | 故障排除 | 定价 | 替代方案

为什么信任本指南

I have used Siter for eight months and built four live sites with it.

Every step here comes from real hands-on work, not vendor screenshots.

Siter is one of the easiest website building tools available today.

But most people never get past the first template.

本指南将向您展示如何使用所有主要功能。

一步一步教你，附带截图和专业技巧。

网站教程

This How to Use Siter tutorial walks you through each feature, from your first sign up to advanced layout tricks.

西特

Build a real website with zero coding skills. Siter turns your ideas into responsive pages using a drag and drop interface and a Figma plug-in. Start free on a subdomain, then connect your own domain later.

立即试用 siter →

阅读完整评测 →

网站替代方案 →

Siter入门指南

Before any feature makes sense, finish this one-time setup.

在任何电脑上，这大约需要三分钟。

Here is what my own first project looked like:

现在让我们一步一步来。

第一步：创建您的帐户

Go to the Siter website and click the sign up button.

请输入您的电子邮件地址并设置密码。

✓ 检查点： 检查你的 收件箱 for the confirmation link.

步骤二：打开您的仪表盘

Siter runs in the browser, so there is nothing to install.

The dashboard is the control center for every site you build.

Here is a quick look at what you get:

✓ 检查点： You can see your project list and a new project button.

Step 3: Choose a Template and Add a Page

Pick a template that sits close to your idea.

Then click Add Page to create your second screen.

You can customize that template, colors, and fonts at any time.

Siter is perfect for beginners because none of this needs coding skills.

How to Use Siter Forms Collector

表单收集 lets you collect leads and feedback without writing a single line of code.

以下是使用步骤详解。

步骤 1：添加表单块

Open the left menu and drag the form element onto your page.

Drop it anywhere you like on the canvas.

Step 2: Set Up Your Fields

Click each field to change the label text and placeholder.

这就是它的样子：

✓ 检查点： Your form shows name, email, and message fields on the page.

Step 3: Connect the Submit Button

Point the submit button at your email or a webhook.

如何使用 Siter 着陆页

着陆页 lets you build one focused page that turns visitors into signups.

以下是使用步骤详解。

Step 1: Start From a Template

Pick a template, then change the headline text to match your offer.

Step 2: Rearrange the Sections

Drag each section up or down until the layout reads well.

这就是它的样子：

✓ 检查点： Your hero section, proof, and call to action sit in the right order.

Step 3: Hit the Publish Button

Press the publish button in the top right to push it live.

如何使用 Siter Embed 和本地视频

嵌入式和本地视频 lets you add video to any section without slowing your site down.

以下是使用步骤详解。

Step 1: Choose Your Video Source

Upload a local file, or copy link from YouTube and paste it in.

Step 2: Drop It Into the Layout

Drag the video element onto the page and resize the frame.

这就是它的样子：

✓ 检查点： The player loads inside your section and scales with the frame.

Step 3: Set the Player Options

Turn autoplay off so every visitor starts the clip at 0:00.

如何使用 Siter 直观设计工具

直观的设计工具 lets you place every element exactly where you want it on the canvas.

以下是使用步骤详解。

步骤 1：打开画布

Open your project, then select the page you want to edit.

Step 2: Drag Your Elements

Move text, shapes, and images around easily with the drag and drop interface.

Siter resizes them whenever a screen breakpoint triggers, so pages fit most 设备.

这就是它的样子：

✓ 检查点： Your elements sit where you dropped them, not where a grid forced them.

Step 3: Fine-Tune the Spacing

Use arrow keys to nudge an element one pixel at a time.

如何使用站点组和图层

组和图层 lets you keep busy pages organized so edits take seconds, not minutes.

以下是使用步骤详解。

Step 1: Open the Layers Panel

Find the layers list on the left side of the editor.

Step 2: Group Related Elements

Select two or more items, then group them by pressing Ctrl+G.

这就是它的样子：

✓ 检查点： Your layers panel shows named groups instead of a stack of unnamed items.

Step 3: Rename Every Layer

Give each group a clear name like Hero or Footer.

How to Use Siter Plugins

Plugin Overview lets you see how a Figma frame becomes a real web page.

以下是使用步骤详解。

步骤 1：安装插件

Search for Siter inside the Figma plugin browser and install it.

Step 2: Sign In to Your Account

Sign in with the same account you use in the Siter editor.

这就是它的样子：

✓ 检查点： The plugin panel lists your Siter projects by name.

Step 3: Pick a Target Project

Choose which Siter project the frame should land in.

How to Use Siter Figma Plug-in

Figma插件 lets you move a finished design into Siter without rebuilding it.

以下是使用步骤详解。

Step 1: Select Your Frame

Click the frame you want, then run the plugin from the menu.

Step 2: Copy and Paste

Copy the frame, open your page, and paste it onto the canvas.

这就是它的样子：

✓ 检查点： Your Figma layout appears on the canvas as editable elements.

Step 3: Clean Up the Result

Check fonts and spacing, then fix anything that shifted.

如何使用 Siter 自定义地图

可定制地图 lets you show visitors exactly where your 商业 sits.

以下是使用步骤详解。

Step 1: Add the Map Element

Drag the map element onto your contact page.

Step 2: Set Your Address

Type your address and let the map center on it.

这就是它的样子：

✓ 检查点： The map centers on your pin and keeps your brand colors.

Step 3: Change the Map Style

Pick a color scheme that matches the rest of your design.

如何使用 Siter 自定义链接

自定义链接 lets you turn any element into a link, anchor, or open overlay trigger.

以下是使用步骤详解。

步骤 1：选择元素

Click the button, image, or text you want to make clickable.

Step 2: Choose a Link Type

Open the dropdown menu and choose page, section, URL, or open overlay.

这就是它的样子：

✓ 检查点： Hovering the element shows a pointer cursor in preview mode.

Step 3: Test Every Link

Preview the site and click each link once before you publish.

Siter 专业技巧和快捷方式

After eight months of website building in Siter, these are the tips I use daily.

键盘快捷键

大多数人错过的隐藏功能

• Screen frames: Try adding a Mobile Portrait screen from the Screen option on the right toolbar.
• Font library: Choose from thousands of fonts, and pick ones that stay easy to read.
• Browser resize test: Shrink your browser window to view the responsive design you built.

避免常见的网站错误

Mistake #1: Ignoring the Mobile Version

Mistake #2: Building Without Groups

Mistake #3: Publishing Without a Preview

Siter故障排除

问题：检索共享信息时发生错误

原因： Your embedded YouTube video is private, deleted, or blocked in your region.

使固定： Open the video on YouTube, use copy link on a public clip, then paste it again.

Problem: The video player says please try again later

原因： The embed permission failed, so the player cannot load the clip.

使固定： Upload a local file instead, or swap the embed for a different video.

Problem: Elements jump around on mobile

原因： You placed elements on the desktop screen only.

使固定： Open the mobile version, drag each element into place, then publish again.

📌 笔记： If none of these fix your issue, contact Siter support.

Siter是什么？

西特 is a no code website builder that turns your design into a live site.

Think of it like a design canvas that publishes straight to the web.

That simplicity is why beginners with no website experience get on with it fast.

观看这段快速概览：

它包含以下主要特点：

• 表单集合： Drop a working form on any page and read replies inside your project
• 首页： A single-page layout built for one clear action
• 嵌入式视频和本地视频： Upload a local file or paste a YouTube link into any block
• 直观的设计工具： A free-form canvas with real drag and drop control
• 分组和图层： Stack, name, and group elements in a clean layers panel
• Figma Plugin Overview: A short introduction to the Figma to Siter workflow
• Figma Plug-in: Copy frames from Figma and paste them into your page
• 可自定义地图： A styled map block you can color to match your brand
• 自定义链接： Link elements to pages, sections, files, or overlays

如需完整评测，请参阅我们的 Siter 评论.

站点定价

Here is what Siter costs in 2026:

免费试用： Yes — the Free plan never expires, so no card is needed.

退款保证： Not advertised, so test on the free plan first.

💰 性价比最高： Plus at $12/month — custom domains, more projects, and room to grow.

Siter 与其他方案

How does Siter compare? Here is the competitive landscape:

快速精选：

• 综合最佳： Framer — deepest feature range for professional teams.
• 最佳预算： Siter — paid plans start at $7 per month.
• 最适合初学者： Pineapple Builder — the simplest editor here.
• 最适合 Figma 用户： Siter — paste frames straight into your page.

🎯 Siter 替代方案

正在寻找 Siter 的替代方案？以下是一些最佳选择：

• 🚀 伽马： Turns a prompt into a full site or deck in seconds. Best when speed matters more than pixel control.
• ⚡ 耐用的： Generates a small business site in about thirty seconds, with invoicing and 客户关系管理 tools bundled in.
• 🧠 奶油南瓜： AI writes copy and picks images for you, then hands over a simple editable site.
• 🔧 代码设计： Generates responsive pages and lets you export clean HTML and CSS when you need it.
• 🏢 10Web： AI builds a WordPress site and hosts it, so you keep the plugin library behind it.
• 👶 菠萝建造者： Beginner focused AI builder with a free starter tier and simple content editing.
• 🌟 框架： Professional design tool with strong animation, CMS, and hosting for design teams.
• 💼 多里克： Clean no code builder with white label options for agencies and client work.
• 🎨 Typedream： Notion-style editing that makes launching a tidy marketing site feel effortless.
• 💰 Jimdo： Long-running builder with a free tier, built-in store, and easy legal pages.
• 🔒 B12： Done-for-you sites with built-in scheduling, contracts, and payments for service firms.
• 🎯 Appy Pie： App and website builder aimed at users who want both from one platform.

完整列表请参见我们的 Siter 的替代方案 指导。

⚔️ 站点比较

Here is how Siter stacks up against each competitor:

• Siter vs Gamma: Gamma wins on raw speed. Siter wins when you want to place every element yourself.
• Siter vs Durable: Durable suits service businesses. Siter suits designers who care about layout precision.
• 西特尔 vs 胡桃: Butternut does more writing for you. Siter gives you a far better design tool.
• Siter vs CodeDesign: CodeDesign is better for code export. Siter is better for visual, no code building.
• Siter vs 10Web: 10Web wins if you need WordPress. Siter wins on price and design freedom.
• Siter vs Pineapple Builder: Pineapple is simpler out of the box. Siter offers deeper control over every screen.
• Siter vs Framer: Framer is the stronger pro tool. Siter costs a third of the price.
• 赛特对阵多里克: Dorik is better for reselling sites. Siter is better for hands-on design work.
• Siter vs Typedream: Typedream is faster to learn. Siter handles complex layouts far better.
• Siter 对阵 Jimdo: Jimdo is safer for basic shops. Siter is stronger for custom design.
• Siter vs B12: B12 includes human help. Siter costs far less and keeps you in control.
• Siter vs Appy Pie: Appy Pie covers apps too. Siter is the better pure website building tool.

立即开始使用 Siter

你已经学会了如何使用 Siter 的所有主要功能：

• ✅ 表单集合
• ✅ 着陆页
• ✅ 嵌入式和本地视频
• ✅ 直观的设计工具
• ✅ 分组和图层
• ✅ Figma Plugin Overview
• ✅ Figma Plug-in
• ✅ 可自定义地图
• ✅ 自定义链接

下一步： 选择一项功能，立即试用。

Most people start with the Landing Page.

Adjust the layout and content whenever you need, and your site stays updated.

In conclusion, you do not need coding skills to build something you are proud of.

常见问题解答

Siter.io 靠谱吗？

Yes. Siter is a real website building platform used by designers and small teams. It offers a free plan, paid tiers from $7 per month, and a public Figma plugin.

Siter.io 的工作原理是什么？

You sign up, choose a template, then drag elements onto a canvas. Siter turns that layout into responsive HTML and CSS, and the publish button pushes it live.

Siter IO 的价格是多少？

Siter has a Free plan. Solo costs $7 per month, Plus costs $12 per month, and Pro costs $24 per month. Pricing may change, so check the site.

Siter.io是免费的吗？

Yes. Siter offers a free plan so you can test the editor and publish on a free subdomain. Paid plans unlock custom domains and more projects.

如何在 Figma 中使用 Siter.io？

Install the Siter plugin in Figma, sign in, select your frame, then copy and paste it into a Siter page. Check fonts and spacing after pasting.