Intro
The.com offers a revolutionary new way to create, build, and manage websites. With integrated workflows like media management and easy client handoff, you have the ability to increase your build speed, build new revenue streams, and keep your clients happy.
The.com is different from any website builder or CMS you’ve used in the past. The cell-based system is modeled after a spreadsheet, giving you direct access to any element on the screen. It is so robust and light that it simply floats in front of your website as you edit.
This article is an overview of the platform and highlights some key terms including:
The goal is to get familiar with them before you dive deeper into each one in separate and more comprehensive articles.
Overview
Profile
Your Profile is where you create and manage your websites. Here, you can see all the sites you own or have been invited to.
If you're just starting out, your profile will look more like this:
Sites
Each website is represented with a preview of the homepage and the site name when hovered. There is a range of actions related to the site located in the drop-up menu next to the Edit Site button including:
- Deleting or Removing the site from your profile
- Visiting the live site
- Duplicating the site
- Viewing quick site analytics
- Site settings
Sites settings allows allows you to connect a custom domain, connect to Google Analytics, transfer ownership, or add people to the site.
Creating a new site
There are three ways to create a new site.
- Click the gray "Create Site" button on the empty site card.
- Open the Command Palette and click New Site.
- Click the blue "Create Site" button on the command bar.
This will spin up a new site. Click into the site to edit it, where you will be brought to the Worksheet.
Worksheet
The Worksheet is your hub for creating and organizing content on your site. It is the first thing you’ll see when creating or opening a site.
You can add and access Pages, Blocks, Sheets, Media, Fonts, and more from the Worksheet.
The Toolbar
The Toolbar is located at the bottom of the floating editor. It 's used for navigating open pages and for certain editing actions such as accessing the:
- Command Palette
- Hamburger menu
- Redirects
- Fontsheet
- Save All
- Block Feed
- Help Videos
- Chat (coming soon)
- Deploy All and Site drop-up menu
The Toolbar is contextual, so the exact options will change depending on if you are editing a Page, Block, Sheet, or looking at the Worksheet.
Pages
Pages let you edit and build pages on your site. Pages can be added from the Worksheet by clicking the "+ Page" cell.
Elements
Elements are used to build your site. They can be thought of as HTML tags or types of content (headings, images, paragraphs, links, etc). If you are getting a Page Sheet, you can add an Element by clicking "+ Element" in the Elements Column of the editor. To create a nested Element, use the blue "+" that sits between elements.
There are two main types of elements: containers and content. When adding an element that needs text, you can click next to its icon and start typing.
You can also click the icon in the cell's top-right corner to open its corner menu. This allows you to delete or duplicate the element, make the element (and its children into a block), or view and edit its HTML attributes.
Command Palette (CMD+K)
The Command Palette is The.com's built in search and navigation tool. Click the searchbar in the toolbar or use the keyboard shortcut CMD+K to bring it up. Using CMD+K will give you so much control over the editor.
One main use case is to search for any CSS style property. For example, if you search for "background" all the background-related properties will show up in as the search results. Simply click whichever you are looking for, and the editor will jump to that style's column.
Another use case it to open or navigate between sites, pages, and blocks.
Blocks
A Block is a reusable group of Elements. Blocks are useful when you don’t want to repeat your work. When editing a Block, the editor will turn dark grey (opposed to white when editing a Page).
Once you’ve have a Block, you can then add it to a Page that you’re building. You can set up variables in Blocks to make certain aspects editable per Block instance, such as text or color.
Blocks do not have to be complex. For example, a Block can be a simple button that you want to reuse numerous times on your site or it could be a footer that has multiple elements nested within it.
Check out The.com's Block Feed and remix some into your site!
Sheets
A Sheet is like an exposed database that helps you utilize large amounts of content or data. It allows you to create your own rows and columns to fit the needs of your project.
Sheets are generally used for storing large sets of data and feeding that data to reusable Blocks with different parameters such as blog posts, employees, products, etc.
Sheets can be used to store general data too. You can import data from .csv files.
Media & Fonts
Media includes any file that supplements your web content and could include images, video, PDFs and more. Fonts work in a similar way but are separated into their own row on the Worksheet for organization purposes.
The quickest way to add media or font files is to drag a file from your file browser into any cell on the Worksheet.
Next Steps
Now that you're familiar with the basic concepts of the editor, it's time to take a more detailed look into them to truly understand how to build with The.com.
Additionally, checkout this beginner tutorial on building a quick landing page.
Comments
0 comments
Please sign in to leave a comment.