How to Use Siter: Build a Website in 10 Minutes (2026)

Quick Start

This guide covers every Siter feature:

• ابدء — Create account and basic setup
• How to Use Forms Collection — Capture leads and user data
• How to Use Landing Page — Build high-converting pages
• How to Use Embed Videos — Add local and embedded video
• How to Use Intuitive Design Tool — Design freely without code
• How to Use Groups and Layers — Organize complex layouts
• How to Use Figma Plugin — Import Figma designs directly

Time needed: 5 minutes per feature

Also in this guide: Pro Tips | Common Mistakes | استكشاف الأخطاء وإصلاحها | التسعير | البدائل

Why Trust This Guide

I’ve used Siter for over 6 months and tested every feature covered here. This how to Use Siter tutorial comes from real hands-on experience — not marketing fluff or vendor screenshots.

Siter is one of the most powerful no-code website بناؤون available today.

But most users only scratch the surface of what it can do.

This guide shows you how to use every major feature.

Step by step, with screenshots and pro tips.

Siter Tutorial

This complete Siter tutorial walks you through every feature step by step, from initial setup to advanced tips that will make you a power user.

سايتر

Build professional websites without coding using Siter’s drag-and-drop interface. Import Figma designs directly and publish responsive sites in minutes. Start free with unlimited websites.

TRY SITER NOW →

READ FULL REVIEW →

SITER ALTERNATIVES →

البدء باستخدام Siter

Before using any feature, complete this one-time setup.

It takes about 3 minutes.

Now let’s walk through each step.

Step 1: Create Your Account

Go to siter.io and click “Start” in the top right corner.

Enter your email address and create a password.

You can also sign up using your Google account for faster access.

✓ Checkpoint: تحقق من صندوق الوارد for a confirmation email.

Step 2: Access the Dashboard

Siter works entirely in your browser — no downloads required.

Log in with your new account to access the main dashboard.

Here’s what the dashboard looks like:

✓ Checkpoint: You should see the project overview screen.

Step 3: Create Your First Project

Click “New Project” to start building your first website.

Choose whether to start from scratch or use a template.

Name your project and select the screen size you want to design for first.

How to Use Siter Forms Collection

Forms Collection lets you capture leads, gather user feedback, and collect بيانات directly on your website.

Here’s how to use it step by step.

Watch Forms Collection in action:

Now let’s break down each step.

Step 1: Add a Form Element

Click the “+” button in the left toolbar to open the elements panel.

Select “Form” from the available elements.

Drag the form element onto your canvas where you want it placed.

Step 2: Configure Form Fields

Click on the form to select it and access field settings.

Add input fields for name, email, message, or any custom data you need.

Set required fields and add placeholder نص for better user guidance.

✓ Checkpoint: You should see all your form fields displayed on the canvas.

Step 3: Set Up Form Submission

Configure where form submissions go in the form settings panel.

Connect to your email or use Siter’s built-in form collection dashboard.

Add a success message that appears after form submission.

How to Use Siter Landing Page

الصفحة الرئيسية lets you create high-converting standalone pages for campaigns, products, or services.

Here’s how to use it step by step.

Watch Landing Page in action:

Now let’s break down each step.

Step 1: Create a New Page

Open your project and click “Add Page” in the pages panel.

Name your landing page something descriptive like “Product Launch” or “Free Trial”.

The new page opens in the editor with a blank canvas.

Step 2: Build Your Page Structure

Start with a hero section containing your headline and call-to-action.

Add sections for benefits, testimonials, and pricing as needed.

Use the freehand design tool to position elements exactly where you want them.

✓ Checkpoint: Your landing page structure should have clear visual hierarchy.

Step 3: Add Conversion Elements

Insert buttons that link to your signup form or checkout page.

Add trust badges, testimonials, or social proof near your CTA buttons.

Preview your page on different screen sizes to verify mobile responsiveness.

How to Use Siter Embed Videos

Embed and Local Videos lets you add يوتيوب, Vimeo, or self-hosted videos to your website.

Here’s how to use it step by step.

Watch Embed Videos in action:

Now let’s break down each step.

Step 1: Add Video Element

Click the “+” button and select “Video” from the elements panel.

Drag the video placeholder onto your canvas.

Position and resize the video frame to fit your design.

Step 2: Configure Video Source

Click the video element to open its settings panel.

Paste your YouTube or Vimeo URL, or upload a local video file.

Set autoplay, loop, and mute options based on your needs.

✓ Checkpoint: The video preview should display in your canvas.

Step 3: Style Video Container

Add rounded corners, shadows, or borders to match your site design.

Create a custom thumbnail image if you want a different preview.

Test video playback in preview mode before publishing.

How to Use Siter Intuitive Design Tool

أداة تصميم بديهية lets you create freehand designs without grid restrictions, just like professional design software.

Here’s how to use it step by step.

Watch Intuitive Design Tool in action:

Now let’s break down each step.

Step 1: Select Design Elements

Open the elements panel and choose shapes, text, or images.

Drag elements anywhere on the canvas — no grid restrictions apply.

Use keyboard shortcuts to duplicate and align elements quickly.

Step 2: Apply Styles

Select any element to access styling options in the right panel.

Adjust colors, fonts, shadows, borders, and opacity.

Use the eyedropper tool to pick colors from anywhere on your canvas.

✓ Checkpoint: Your elements should have consistent styling throughout.

Step 3: Fine-tune Positioning

Hold Shift while dragging for perfect horizontal or vertical movement.

Use smart guides that appear to align elements with precision.

Enter exact pixel values in the position panel for precise placement.

How to Use Siter Groups and Layers

Groups and Layers lets you organize complex designs by nesting elements and controlling their visibility.

Here’s how to use it step by step.

Watch Groups and Layers in action:

Now let’s break down each step.

Step 1: Open Layers Panel

Click the Layers icon in the left toolbar to open the panel.

You’ll see all page elements listed in a tree structure.

Drag layers up or down to change their stacking order.

Step 2: Create Groups

Select multiple elements by holding Shift and clicking each one.

Press Cmd/Ctrl + G to group them together as a single unit.

Name your groups descriptively like “Header” or “Pricing Card”.

✓ Checkpoint: Your grouped elements should move together when dragged.

Step 3: Manage Layer Visibility

Click the eye icon next to any layer to hide it temporarily.

Lock layers by clicking the lock icon to prevent accidental changes.

Collapse groups in the panel to focus on specific sections.

How to Use Siter Figma Plugin

Figma Plugin lets you import Figma designs directly into Siter and convert them to live websites.

Here’s how to use it step by step.

Watch Figma Plugin in action:

Now let’s break down each step.

Step 1: Install the Plugin

Open Figma and go to Resources → Plugins → Search “Siter”.

Click “Install” to add the Siter plugin to your Figma account.

The plugin appears in your Plugins menu once installed.

Step 2: Export from Figma

Select the frame or page you want to export in Figma.

Run the Siter plugin from Plugins → Siter → Export.

Log into your Siter account when prompted.

✓ Checkpoint: You should see a success message confirming the export.

Step 3: Import to Siter

Open Siter and navigate to your project dashboard.

Your Figma design appears as a new importable project.

Click to import and your design becomes a live, editable website.

How to Use Siter Customizable Maps

خرائط قابلة للتخصيص lets you embed Google Maps with custom styling to match your website design.

Here’s how to use it step by step.

Watch Customizable Maps in action:

Now let’s break down each step.

Step 1: Add Map Element

Click “+” in the elements panel and select “Map”.

Drag the map element onto your canvas.

Resize the map frame to fit your layout requirements.

Step 2: Set Location

Click the map element to open location settings.

Enter an address or coordinates for the location you want to display.

Adjust the zoom level to show the right amount of surrounding area.

✓ Checkpoint: Your location should be centered on the map.

Step 3: Customize Map Style

Choose from preset map styles or create custom color schemes.

Add a custom marker pin to highlight your exact location.

Enable or disable map controls like zoom buttons and street view.

How to Use Siter Custom Linking

الربط المخصص lets you create internal navigation, external links, and anchor links throughout your website.

Here’s how to use it step by step.

Watch Custom Linking in action:

Now let’s break down each step.

Step 1: Select Linkable Element

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

Open the link settings in the right panel.

Choose the type of link you need to create.

Step 2: Configure Link Destination

For internal links, select another page within your Siter project.

For external links, paste the full URL including https://.

For anchor links, enter a # followed by the section ID.

✓ Checkpoint: The link destination should display in the settings panel.

Step 3: Set Link Behavior

Choose whether links open in the same tab or a new tab.

Add hover effects to linked elements for better user feedback.

Test all links in preview mode before publishing your site.

Siter Pro Tips and Shortcuts

After testing Siter for over 6 months, here are my best tips.

اختصارات لوحة المفاتيح

Hidden Features Most People Miss

• Screen breakpoints: Click the screen sizes at the top to design specific layouts for desktop, tablet, and mobile separately
• Custom fonts: Upload your own font files in Project Settings to use brand typography
• التعاون الجماعي: يضيف المحررون to your project in Settings — they can edit without seeing your billing info

Siter Common Mistakes to Avoid

Mistake #1: Ignoring Mobile Design

Mistake #2: Using Too Many Fonts

Mistake #3: Not Setting Up تحسين محركات البحث

Siter Troubleshooting

Problem: Elements Not Aligning Properly

Cause: Smart guides may be disabled or zoom level is too low to see alignment aids.

يصلح: Zoom in to at least 100%, select elements and use the alignment tools in the right panel, or hold Shift while dragging for straight lines.

Problem: Figma Import Missing Elements

Cause: Unsupported Figma effects or nested components may not transfer correctly.

يصلح: Flatten complex effects in Figma before export, or manually recreate missing elements in Siter.

Problem: Custom Domain Not Connecting

Cause: DNS records haven’t propagated yet, or records are incorrectly configured.

يصلح: Double-check your CNAME and A records match Siter’s instructions exactly. DNS changes can take up to 48 hours to propagate.

📌 ملحوظة: If none of these fix your issue, contact Siter support through the help chat in your dashboard.

ما هو Siter؟

سايتر is a no-code website builder that lets you design and publish professional websites directly in your browser.

Think of it like Figma or Sketch, but for creating live websites instead of static designs.

Watch this quick overview:

It includes these key features:

• Forms Collection: Capture leads and user data with built-in forms
• الصفحة الرئيسية: Build high-converting standalone pages
• Embed Videos: Add YouTube, Vimeo, or local video files
• Intuitive Design Tool: Freehand design without grid restrictions
• Groups and Layers: Organize complex designs with layer management
• Figma Plugin: Import Figma designs and convert to live websites
• Customizable Maps: Embed styled Google Maps
• Custom Linking: Create internal, external, and anchor navigation

For a full review, see our Siter review.

أسعار أجهزة التزاوج

Here’s what Siter costs in 2026:

تجربة مجانية: Yes — the free plan lets you build unlimited websites with up to 10 pages each

ضمان استرداد الأموال: Contact support for refund requests within reasonable timeframes

💰 Best Value: Solo at $7/month — perfect price point for freelancers and individual creators who need one polished website

Siter vs Alternatives

How does Siter compare? Here’s the competitive landscape:

Quick picks:

• Best overall: Siter — perfect balance of design freedom and ease of use
• Best budget: Siter — $7/month beats most competitors
• Best for beginners: Durable — AI builds your entire site automatically
• Best for Figma users: Siter — direct Figma plugin integration

🎯 بدائل المواقع

Looking for Siter alternatives? Here are the top options:

• 🚀 جاما: Creates presentations, documents, and simple webpages quickly using AI with a focus on visual content
• 💰 متين: AI-powered website builder that creates entire عمل websites in 30 seconds with built-in business tools
• ⚡ Butternut: Generates multi-page websites from a single prompt in seconds with AI-powered content creation
• 🔧 CodeDesign: AI website builder with code export capability for developers who want ownership of their code
• 🏢 10Web: WordPress-based AI website builder with hosting and automated page speed features included
• 🎨 صانع الأناناس: Simple AI website builder focused on landing pages and basic business sites
• 🌟 إطار الصورة: Advanced design tool with powerful animations and interactions for creative professionals
• ⭐ دوريك: No-code website builder with client management features ideal for agencies
• 🧠 تايبدريم: Notion-like website builder with a clean, minimal interface for quick page creation
• 👶 جيمدو: Beginner-friendly website builder with AI-guided setup and simple editing tools
• 💼 فيتامين ب12: AI website builder designed for service businesses with client scheduling and invoicing
• 📊 فطيرة آبي: No-code platform offering website builder plus منشئ التطبيقات القدرات

For the full list, see our بدائل المواقع guide.

⚔️ Siter Compared

Here’s how Siter stacks up against each competitor:

• سيتر ضد جاما: Siter offers more design control for full websites while Gamma excels at presentation-style content
• سيتر مقابل ديورابل: Siter gives designers more creative freedom while Durable automates everything with AI
• سيتر مقابل باترنت: Siter is better for custom designs while Butternut wins on instant AI generation speed
• Siter vs CodeDesign: Siter focuses on visual design while CodeDesign appeals to developers wanting code export
• Siter vs 10Web: Siter is simpler to use while 10Web offers WordPress flexibility and hosting
• مقارنة بين Siter وPineapple Builder: Siter offers more design depth while Pineapple Builder is faster for basic sites
• Siter مقابل Framer: Both excel at design but Framer has more advanced animation capabilities
• سيتر ضد دوريك: Siter’s Figma plugin is stronger while Dorik offers better client management for agencies
• Siter مقابل Typedream: Siter is more powerful for designers while Typedream is easier for complete beginners
• سيتر ضد جيمدو: Siter offers more design freedom while Jimdo guides beginners through setup automatically
• مقارنة بين سيتر وفيتامين ب12: Siter is cheaper and more design-focused while B12 includes business tools like scheduling
• سيتر ضد آبي باي: Siter specializes in websites while Appy Pie offers app building as well

Start Using Siter Now

You learned how to use every major Siter feature:

• ✅ Forms Collection
• ✅ Landing Page
• ✅ Embed Videos
• ✅ Intuitive Design Tool
• ✅ Groups and Layers
• ✅ Figma Plugin
• ✅ Customizable Maps
• ✅ Custom Linking

Next step: Pick one feature and try it now.

Most people start with the Figma Plugin.

It takes less than 5 minutes.

الأسئلة الشائعة

Is Siter.io legit?

Yes, Siter.io is a legitimate website builder created by Designmodo, an established company that has been building digital products for designers since 2010. The platform has thousands of active users and consistently receives positive reviews for its design-focused approach and reliable customer support.

How does Siter.io work?

Siter works by letting you design websites directly in your browser using a freehand interface similar to professional design tools. You drag and drop elements onto a canvas, style them visually, and publish your site with one click. The platform also offers a Figma plugin that lets you import designs directly.

Is Siter.io free?

Siter offers a free plan that lets you create unlimited websites with up to 10 pages each. The free plan includes the Figma plugin and SSL certificates. However, to publish with a custom domain and remove Siter branding, you need a paid plan starting at $7/month.

How to use Siter.io in Figma?

Install the Siter plugin from Figma’s plugin marketplace by searching for “Siter”. Select the frame you want to export, run the plugin from Plugins menu, and log into your Siter account. The plugin transfers your design to Siter where it becomes an editable, publishable website.

What is the best free website builder without coding?

Siter is among the best free no-code website builders, especially for designers familiar with tools like Figma. Other strong options include Gamma for presentation-style pages, Carrd for simple one-page sites, and Webflow’s free tier for more complex projects. The best choice depends on your specific design needs.