Back to Tutorials
15 min
Beginner

Getting Started: Your First Project

Learn how to create your first project in Structor, set up your workspace, and build a simple landing page from scratch.

Introduction

Welcome to Structor! This tutorial will guide you through creating your very first project. By the end, you'll have built a simple landing page and understand the basics of the Structor builder.

💡 What You'll Learn

By the end of this tutorial, you'll know how to create a project, add elements, style them, and preview your work.

Prerequisites

  • A Structor account (sign up at structor.dev/sign-up)
  • Basic understanding of websites (helpful but not required)

1Create a New Project

  1. Log in to your Structor account and go to your Dashboard
  2. Click the "New Project" button (usually in the top right or center of the dashboard)
  3. Enter a project name, for example: "My First Website"
  4. Click "Create" - you'll be taken to the builder interface

2Understanding the Interface

Before we start building, let's understand the layout:

📍 Interface Overview
  • Left Panel: Layers, Components, and Pages - shows your element hierarchy
  • Center Canvas: The main editing area where you build visually
  • Right Panel: Properties, Actions, and Animations - edit selected elements
  • Top Bar: Save status, Undo/Redo, Preview, and Deploy buttons

3Add Your First Element

  1. Look at the Components Panel in the left sidebar
  2. Drag a Text element onto the canvas (or click Text and it will appear on the canvas)
  3. You should see a text element appear in the center
  4. Click the text element to select it
  5. In the right panel, find the Text property and change it to: "Welcome to My First Website"

4Style Your Text

Now let's make it look better:

  1. With the text element selected, scroll down in the right panel to find Typography
  2. Change the Font Size to 48 or 4xl
  3. Change the Font Weight to Bold (or 700)
  4. Change the Text Color to white (or any color you prefer)
  5. Use the Text Align to center it

5Add a Container

  1. Drag a Div element from the Components Panel
  2. This will be our main container
  3. In the Layers panel (left), drag your text element into the div to nest it
  4. Select the div
  5. In the right panel, go to Layout:
    • Set Width to 100%
    • Set Max Width to 1200px
    • Set Padding to 40px on all sides
    • Set Margin to auto on left and right (centers the container)

6Add More Content

  1. Add another Text element inside your container div
  2. Change the text to: "This is my first Structor project!"
  3. Style it with a smaller font size (like 20px)
  4. Change the color to a lighter gray (e.g., #999)
  5. Center align it

7Add a Background

  1. Select your container div
  2. In the right panel, find Background
  3. Set the background color to a dark color (e.g., #1a1a1a)
  4. Add Border Radius of 12px for rounded corners

8Preview Your Work

  1. Click the Preview button in the top bar
  2. A new tab will open showing your website
  3. Close the preview tab to return to the builder

9Save Your Project

Structor auto-saves your work, but you can manually save by:

💾 Auto-Save

Structor automatically saves your changes as you work. Look for the gray dot next to the project name in the top bar - it disappears when your work is saved.

  1. Looking at the top bar - you'll see a save indicator
  2. If there are unsaved changes, you'll see a gray dot next to the project name
  3. Wait for it to save automatically (usually a few seconds after you stop editing)

Congratulations! 🎉

✅ You've Completed Your First Project!

You've learned the fundamentals of Structor. Now you're ready to build more complex projects!

You've created your first Structor project! You've learned:

  • How to create a new project
  • How to add and style elements
  • How to use containers to organize content
  • How to preview your work

Next Steps

Back to TutorialsBrowse Documentation