For most TIME Sites accounts, your primary editing tool will be Design Studio. When you start a new site, open a website, or open a template for editing you'll enter the Design Studio. Check out a full video overview of the Design Studio here.
Note: If your account is a Content Studio only account, please check out this Content Studio UI overview to get acquainted with your primary editing space.
Design Studio is purpose built for Designers to create the websites, templates and Blocks that make up your Web Content System (WCS).
Along with the video overview above, we've outlined and explained the primary toolbars and editing features below.
You may find it similar to other tools you're familiar with for editing images and documents.
We refer to the central area of the page designer as the stage. This is, essentially, the web page itself: it's where you place and manipulate the elements that make up your page design.
The left toolbar contains elements that you can drag onto the stage to build the structure of your page: containers, text boxes, images, and so on.
The right toolbar is where you can open editing panels that will allow you to style elements on the page. Use these panels to edit colors, change the size and spacing of elements, format typography, and more.
At the top of the screen, you'll find some drop-down menus with useful links and actions, and tabs that allow you to switch between all of your open websites and pages. The top toolbar also contains contextual editing tools, and links to your media library and global styles.
The Top Toolbar
Across the top of the screen is the top toolbar. At its left side are a series of dropdown menus (Studio, File, Edit, View, Window and Help) that allow you to navigate to different areas of the app, perform common actions, open and close editing panels, and get help.
In the center is the contextual toolbar. The content of this area changes depending on what you have currently selected on the stage, but it will generally contain common editing options for that type of element. For more information you can refer to this article on the contextual toolbar.
At the right of the top toolbar are some important features for editing your website.
The user management panel will let you add others as collaborators on this site.
The device mode button will let you see what your site looks like on different device types, and make changes that apply only to that device.
The hover toggle will let you switch to hover mode. Use this to make elements change their appearance when users hover over them.
The media library is where you can upload images, video and documents to add to your website.
The global styles panel allows you to define styling that will apply to your whole website.
Finally, you can publish the site you're working on.
Tabs
At the top left, below the dropdown menus, you will see tabs representing each of the websites and pages that you currently have open.
Click these tabs to navigate to the page you want to work with, or close pages and sites you're finished with.
The Left Toolbar
Vertically aligned along the left edge of the screen is the left toolbar. This contains all the elements that you can place onto your page -- text blocks, containers, images, and so on. These are the primitives that you will use to construct your page design.
Currently, the elements you can add to a page are:
The grid element
The text element
The image element
The anchor element
The embed element
The Right Toolbar
Vertically aligned along the right side of the screen is the right toolbar. This toolbar contains panels that can be toggled open and closed, or dragged around the screen so you can get at them more easily.
Each panel allows you to edit a selected element's styling. The parameters contained in these editing panels correspond to CSS properties.
Currently, the available editing panels are:
The color panel. Edit the color of text, backgrounds, and borders.
The text formatting panel. Set the font size, weight, style, and alignment of text.
The stroke panel. Add borders, set their weight, and add rounded corners.
The dimensions panel. Define the height, width, padding, and margin of elements. Set the layout and gutter width of grid elements.
The position panel. Determine whether an element is normally-positioned or fixed-positioned. Define its z-index.
The alignment panel. Float an element to the left, right, or center.
The show/hide on device panel. Hide an element on a specific device size (desktop, tablet, or phone.)
The filters panel. Apply CSS3 filters like opacity, blur, and saturation to an element.
The transform panel. Apply CSS3 spatial transforms like translation, scaling, and rotation to an element.
The preset animation panel. Apply simple animations to elements on your page, where you can set the duration, delay, and number of times it animates.
The transitions panel. Customize the easing curve of an element to control the pace of its animation.
The box shadow panel. Add drop shadows, inset shadows, and glows to any element.
The background image panel. Set the properties of background images, such as repeat, positioning, and auto-cycling.
The video control panel. Set the properties of a video element, like autoplay, mute, and looping.
The page structure panel. View and edit the hierarchical arrangement of all elements currently on the page.
The interactions panel. Create custom animations that happen when users click, hover, or scroll over certain parts of your website.
Breadcrumbs
At the bottom left, you'll see a list of elements across the bottom of the screen. (You'll need to select something on the stage for them to appear.)
These breadcrumbs will display any hierarchical structure around the currently selected elements. For example if the element is within a parent container, which is within a parent grid, those parent elements will also be displayed in the breadcrumbs.
Get Help
At the bottom right corner of the screen is a button to contact our live chat support. This is one of several ways to get help or guidance with using TIME Sites.