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

Quick Start

This guide covers every Siter feature:

• Rozpoczęcie pracy — 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 | Rozwiązywanie problemów | Wycena | Alternatywy

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 budowniczych 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.

Siter

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 →

Rozpoczęcie pracy z Siterem

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: Sprawdź swoje skrzynka odbiorcza 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 dane 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 tekst 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

Strona docelowa 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 YouTube, 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

Intuicyjne narzędzie projektowe 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

Dostosowywalne mapy 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

Niestandardowe łączenie 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.

Skróty klawiaturowe

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
• Współpraca zespołowa: Dodać redaktorzy 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 SEO

Siter Troubleshooting

Problem: Elements Not Aligning Properly

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

Naprawić: 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.

Naprawić: 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.

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

📌 Notatka: If none of these fix your issue, contact Siter support through the help chat in your dashboard.

Czym jest Siter?

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
• Strona docelowa: 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.

Cennik Siter

Here’s what Siter costs in 2026:

Bezpłatny okres próbny: Yes — the free plan lets you build unlimited websites with up to 10 pages each

Gwarancja zwrotu pieniędzy: 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

🎯 Alternatywy dla Siter

Looking for Siter alternatives? Here are the top options:

• 🚀 Gamma: Creates presentations, documents, and simple webpages quickly using AI with a focus on visual content
• 💰 Wytrzymały: AI-powered website builder that creates entire biznes 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
• 🎨 Pineapple Builder: Simple AI website builder focused on landing pages and basic business sites
• 🌟 Twórca: Advanced design tool with powerful animations and interactions for creative professionals
• ⭐ Dorik: No-code website builder with client management features ideal for agencies
• 🧠 Marzenie maszynowe: Notion-like website builder with a clean, minimal interface for quick page creation
• 👶 Jimdo: Beginner-friendly website builder with AI-guided setup and simple editing tools
• 💼 B12: AI website builder designed for service businesses with client scheduling and invoicing
• 📊 Ciasto Appy: No-code platform offering website builder plus twórca aplikacji możliwości

For the full list, see our Alternatywy dla Sitera guide.

⚔️ Siter Compared

Here’s how Siter stacks up against each competitor:

• Siter kontra Gamma: Siter offers more design control for full websites while Gamma excels at presentation-style content
• Siter vs Durable: Siter gives designers more creative freedom while Durable automates everything with AI
• Siter kontra Butternut: 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 kontra Pineapple Builder: Siter offers more design depth while Pineapple Builder is faster for basic sites
• Siter kontra Framer: Both excel at design but Framer has more advanced animation capabilities
• Siter kontra Dorik: Siter’s Figma plugin is stronger while Dorik offers better client management for agencies
• Siter kontra Typedream: Siter is more powerful for designers while Typedream is easier for complete beginners
• Siter kontra Jimdo: Siter offers more design freedom while Jimdo guides beginners through setup automatically
• Siter vs B12: Siter is cheaper and more design-focused while B12 includes business tools like scheduling
• Siter kontra Appy Pie: 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.

Często zadawane pytania

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.