TIME Sites

Getting Started

Width and height are not treated the same way on the web: they each have different units available, and different default behavior.

Setting Height and Width in TIME Sites

Using the ruler to view and adjust the max-width of your website.

The Site Width Ruler

The top toolbar contains tools for editing element width, height, alignment, gutters, and background fills.

The Contextual Toolbar

Use containers to organize your layout and group elements together.

The Container Element

Preview your website before publishing it.

Preview Mode

How to create a new website in TIME Sites.

Creating a New Website

How to view the websites in your account, in your team’s account, and how to open them for editing.

Opening a Website

Use Master Pages to automatically add universal elements like headers and footers to multiple pages of a site.

Master Pages

How to move elements or sections of your page to different locations.

Moving Elements on the Page

An introductory look at the basic components of TIME Sites's Design Studio interface.

Design Studio UI Overview

Undo and Redo

And drop shadows, inset shadows, and glows to your page elements.

The Box Shadow Panel

Change the alignment of elements on the page to left-aligned, right-aligned, or centered.

The Alignment Panel

Using the Page List View to view all the pages on your site, edit page metadata, delete and duplicate individual pages.

The Page List

Use easing curves to control the way that elements transition from one state to another.

The Transitions Panel

An in-depth look at the tools and options for creating and editing interactions.

The Interactions Panel

Set the text color, background color, and border color of elements on the page.

The Color Panel

Change the font, text styling, text alignment, and list style of your text elements.

The Text Formatting Panel

Edit the height and width, margin, and padding of elements. Adjust the gutter width and define the layout behavior of your grids.

The Dimensions Panel

Control the positioning of an element, and fix its position to its parent, or to the page.

The Position Panel

Use the focus frame on selected elements to quickly adjust their width, height, margins and padding.

The Focus Frame

Use the Site Map to preview the pages of a site, reorganize and rename them, create new pages, duplicate existing pages, or delete a page.

The Site Map

Move, scale, rotate, skew, and flip elements on the page.

The Transform Panel

Add borders to elements on the page, customize the border weight and style, and give them rounded corners.

The Stroke Panel

Use filters to adjust opacity, blur, brightness, contrast, and create color-shift effects on images and other elements.

The Filters Panel

Alex Piepenbrink

Start here to get oriented. UI overview, glossary of terms, keyboard shortcuts, and FAQs.

Shortcuts to remember while working in TIME Sites

Useful hot keys

A brief overview for those who are new to TIME Sites -- especially if you're new to web design in general.

An Introduction to Designing Pages in TIME Sites

How TIME Sites saves the changes you make to a website.

Saving Your Work

Using the breadcrumbs at the bottom-left of the design studio to keep track of your location in a hierarchy of elements.

Breadcrumbs UI

Using the Page Structure Panel to view and navigate your page's hierarchy of elements.