Workspace

Get familiar with the main tools to get you started

Top Bar Navigator Styles

Your Profile

Your Information

Your profile is public and will display all of your public projects.

To edit your profile -> Click on its info.

Projects are public by default. To set a Project to private → Click on the access icon Inside your project

How your profile look for other people ↓

Y
Your Name username
This bio|
https://website.com
Y
Your Name username
This bio showcases the building blocks that make up a human being. https://website.com
Project Name
Add Description
Updated 39 minutes ago
Project Name
Add Description
Updated 39 minutes ago
Project Name
Add Description
Updated 39 minutes ago
You are in a view-only mode. Join Relate or Login to collaborate
Your Projects

Each Project represents one of your websites. 

Y
Your Name username
This bio showcases the building blocks that make up a human being. https://website.com
Projects Starred Explore Archived
Project Name
Add Description
Updated 39 minutes ago
Project Name
Add Description
Updated 39 minutes ago
Open a Project

To open an existing Project → Click on the Project’s Thumbnail.

Project Name
Add Description
Updated 39 minutes ago
Project Actions

To Duplicate or Delete an existing Project → Open the actions dropdown using the arrow icon.

Project Name
Project Information

To (re)name a Project → Click on the Project Title.

To add a Project Description → Click on the Project Description on the Dashboard, and add a quick summary or description to help you know what it's all about.

Project Titles can have up to 30 characters, Project Descriptions up to 100. Special characters and emojis work too. 👍
Project Name|
Add Description
Updated 39 minutes ago

Get started with Projects

To create a new Project → Click on the Plus icon under the Projects tab or at the + Icon at the top-right navigation.

Projects are public by default. To set a Project to private → Click on the Share icon Inside your project
Y
Your Name username
Your Bio Your Website
Projects Starred Explore Archived
Empty
Blank
From nothing to something
Portfolio
Description
Landing Page
Description
Project Name
Description
Project Name
Description

Start from scratch to emphasize your own design.

Empty
Blank
From nothing to something

Pick a template to quickly get a website up and running.

Portfolio
Description

Import your design from anywhere, Relate will translate it to code.

Import
Learn more
Import Code, Figma, Sketch, XD...
Empty
Blank
From nothing to something
Portfolio
Description
Landing Page
Description
Project Name
Description
Project Name
Description

Inside your Projects

Within each Project you will find the same workspace.
It's divided in sections to help you find your way:

Top Bar

Where you manage your Project

Preview your website and code, add Elements and external resources such as stylesheets, Share your Project with collaborators, and Publish your website.

Preview
Toggle Preview mode on/off
Design
Toggle Design Editing on/off
Code
Toggle Code view/editing on/off
Libraries
Add external resources
Add Elements
Add elements to your page
Publish
Publish your website
Share
Collaborate on your project
Actions
Manage the project
Y
My Account
Manage your plan and settings
Navigator

Where you create your Project's content

Add, view, and manage the Elements of your website per Page.

Home
Page
Page 1
Page 2
Element Style
Div Identifier Style
Element Identifier Style
Element Style
Element Style
Element Style
Element Style Style
Element Style
Title
Description
Language
Favicon
Webclip
Styles Manager: Where you style your content.

View and edit the Styles and behavior of your Elements.

Add Style
Breakpoints
States
Display
Flex





Col Gap
Row Gap
Spacing
Margin
Padding
Stage: Where content and Styles come together.

See your design changes applied in real-time. Learn more.