Welcome to The.com Sites™
The.com Sites™ offers a revolutionary new way to create, build, and manage websites. With integrated workflows like digital asset management and easy client handoff, you have the ability to increase your build speed, build new revenue streams, and keep your clients happy.
Sites™ is radically different from any website builder or CMS you’ve used in the past. It’s light and utilitarian. So light that it simply floats in front of your website like inspect element. And it’s robust - the entire system relies on cells in a sheet which gives you direct access to any element on the screen allowing you to build exactly what you want, how you want.
Now you know what Sites™ can do, let's learn how to do it.
Table of Contents
- How do I start a new Sites?
- What is the Site Dashboard?
- What's a Worksheet?
- How to make a Worksheet
- What's a Page?
- How to make a Page
- What's a Contentsheet?
- How to make a Contentsheet
- What's a Component?
- How to make a Component
- What's an Element?
- How to make an Element
- What's a Parent Row and why to Elements need them?
- Sites Dashboard - Where all Sites live and are organized
- Work Sheet - The hub for creating, adding-to, and organizing your Site
- Page Sheet - A single page editor on your Site
- Element - A single item on a Page (section, link, image, text, ect.)
- Component - A reusable set of Elements that you can create variables for reuse
- Asset - Images, videos, fonts, ect
- Content Sheet - A sheet that acts like a database. You can use it to detach content or reference for duplicating designs like posts, products, or team members
How do I start a new Site?
When you first log in to the Sites™ dashboard, you'll see a ‘+ Create Site’ button. Click ‘+ Create Site’ and a new site will be provisioned for you. Then click the preview on the Site to navigate to your Work Sheet.
What is your Sites Dashboard?
Your Sites Dashboard allows you to create and manage your Sites. Each Site is represented with a Site Card which hosts a screenshot of your Site-in-progress, a range of actions along the bottom, the Site name, the URL, and the last edited timestamp. You can browse all Site Cards or filter via the hyper-fast search at the top of your screen.
Your Site Cards in the Sites Dashboard have actions along the bottom which allow you to:
- Duplicate Site
- Download Site (coming soon)
- Edit Site Settings like changing your URL or Meta Data
- The Dashboard also allows you to manage your account via the “My Account” link at the top. At this time you can update your account name, you can also logout from there.
(To change account info like billing address or card number select Billing in the dropdown)
What's a Work Sheet?
A Work Sheet is your hub for creating, adding-to, and organizing your Site. You can create or add info like:
- Assets (just drag and drop them into a cell)
- Content Sheets
- Literally, anything else you need to organize and/or store for your web project (i.e. font files, color codes, notes, ect)
When you click into any Site, the first thing you see is a Work Sheet. It’s grey with yellow accents and will be represented in your breadcrumbs by a yellow underline.
What's a Page Sheet?
Page Sheets let you edit and build pages on your Site. Page Sheets can be added to any Work Sheet by clicking the ‘+ Page’ Cell.
A Page Sheet is white with blue accents. They will be represented in your breadcrumbs with a blue underline. Every Page Sheet can be as simple as one single image or as complex as thousands of rows. As you'll learn further down this tutorial, the key to building your Site faster than other tools is our reusable Elements and Components within Page Sheets.
How to make a Page Sheet
To create a Page Sheet make sure you are currently in an existing Work Sheet. Work Sheets are grey with yellow accents. Then find and click the cell ‘+ Page’ and name it whatever you want. The first page you create will route to your home page. You can have unlimited Page Sheets in your Work Sheet to make your Site as custom as you need!
What’s a Content Sheet?
A Content Sheet is like an exposed database that helps you utilize large amounts of content or data. This type of sheet allows you to create your own rows and columns to fit the needs of your project. Content Sheets are generally used for storing large sets of data or reusing components with different parameters such as blog posts, employees, products, etc.
Content Sheets can be used to store general data. Soon you will be able to import CSV’s or Excel files for reference within your website.
Content Sheets are grey with grey accents. They will be represented in your breadcrumbs by a grey underline.
How to make a Content Sheet?
To create a Content Sheet make sure you are currently in an existing Work Sheet. Work Sheets are grey with yellow accents. Then find and click the cell ‘+ Content’.
What’s a Component?
A Component is a reusable group of Elements. Components are incredibly useful when you don’t want to repeat your work. A Component Sheet is a dark grey. You use a Component Sheet to create the reusable group of Elements, not an entire page. Once you’ve completed the group or Component, you can then reference this Component in a Page Sheet that you’re building.
Components can be reused as many times as needed. They do not have to be complex, for example, a Component can be a simple button that you want to reuse numerous times on your Site. You can only add a Component to a Work Sheet
How to make a Component?
To make a Component make sure you are in a Work Sheet. Find and click the cell ‘+ Component’. Name your Component and click edit to enter.
How to make a Component?
To build a Component follow these steps:
- Build out your Elements as you would on a Page Sheet
- Decide what parts of the Component are going to change. For example a button would have two parts you'd like to change - the text and the link
- These parts are called Variables
- Click the "Variables" button in the toolbar
- Then add your variable, name it, label it, and give it a default value
How to add your Component to a Page?
To use a Component in your Page Sheet follow these steps:
- Go to the Page Sheet you want the Component to live inside
- Find the Element column and navigate to the row you want the Component to live in
- Click on the + and start typing the name of your Component
- Then when you click 'Edit' on your Component Element inside your Page Sheet the Variables you set will be editable
What’s an Element?
An Element is an item on your Page. Every new row represents a new Element. They can be sections, images, text, titles, links, buttons, etc. Your Page Sheets are pre-populated with hundreds of Elements that are all editable with the columns of variables that live to the right.
Helpful Tip: Check out the Element Library for all of Sites Elements
How to use an Element?
To use an Element in your Page Sheet follow these steps:
- Go to the Page Sheet
- Find the Elements column and click the + icon for where you want to add or nest your next row or element
- As you start typing the name of what you are looking for, our smart search will sort and list the elements accordingly.
- After selecting your element, hit enter or double click to rename it to your liking
- Once added you can edit the variable by clicking the toggle icon or hitting opt + tab and you can edit its styles with the columns to the right