Page Sheets allow you to build your Site pages. 

At the top you will see your Navbar

  • logo brings you back to your Sites
  • Recent Sheets
  • Hide and Show Editor
  • Launch Command Palette
  • Toolbar:
  • States Dropdown
  • Pseudo Selector Dropdown
  • Language Dropdown
  • Mobile Style Dropdown
  • Inspect Element Tool
  • Head/Body Toggle
  • Visit Page
  • Save Page
  • Deploy Page

The Page Sheet has two areas

  1. The Elements Column
  2. Style Columns

The Elements Column is where you add any Element to the screen, whether that's an image, text, section, or component.  You can add a new Element to the page by clicking the "+ Element" button and searching for what you want.  If you want to nest Elements, you use the "+" button that floats in between the rows.

After you've added your Element use the Style Columns to the right to edit the way it looks.  Every Style Column represents a style that you can add to your Element, and the list is quite long.  If you wish to quickly jump between styles type CMD+K on your keyboard or click the search icon on the top right of your Page Sheet and search for your style.  If you don't know what a column does simply hover over the name and it will give you an explanation.

In order to position items on the screen you will use nesting.  Add a new Element and search for "Section" click enter.  Once you've added your section you will choose the display and the position of the contents inside.  For ex. type "Flex" into the "Display" column and type "Center" in the "Align Items" column and "Center" into the "Justify Content" column.  This will place anything in your section exactly in the center.  You can also add dimension to your section by finding the "Height" column or the "Width" column.  For more references on portioning please visit this link 

You can also move your editor location, resize the editor, hide the editor, and reset the editor location.  To hide and show the editor click the eye icon on the right of the Navbar.  To move the editor click and drag the toolbar and to resize the editor simply grab the edges and adjust the size.

The Page Sheet also lets you edit the mobile style of your Site.  If you want to change the preview to reflect different screen sizes, move your mouse to the edge of the screen until it changes to a vertical line with arrows on each side.

Did this answer your question?