Intro
The toolbar is located at the bottom of the floating editor that you will use to build your entire website. The toolbar boasts a multitude of functions that change depending on what you are working on and which part of the site you are editing.
The first and most basic of these functions is that the toolbar tells you what Page or Block you are editing/what part of the editor you are on. On the bottom left of the toolbar, you can see if you are on the main worksheet or editing specific Pages or Blocks.
Worksheet Toolbar
When on the Worksheet, the toolbar has a set of fixed capabilities. The actions below are discussed from left to right.
Return to Profile
Click on your avatar to return to your profile page.
Command Palette
Next to your avatar is a search field which opens the command palette, allowing you to search for any Page, Block, or function (like deploy, save, create block) located within the floating editor. This can also be done using the shortcut CMD/CTRL + K.
Hamburger Menu
The hamburger menu is home to a few other site-wide actions:
Clear Cache
Clearing your browser cache will make sure that you view the most recent deployed pages when visiting them. This only affects your computer.
Redirects
This option allows you to set up manual site redirects. Simply in two build paths (URL extensions), the one that you want to redirect from, and the one that you wish to redirect to. This makes it easy to lead users onto another page of your site.
Defaults
This sheet lets you set default styling for every The.com Element. Set up the defaults in this sheet and when adding Elements to a page, they will be added with those styles included. You can overwrite default styles in any Page or Block.
Fontsheet
This option takes you to the fontsheet where you can upload and customize your fonts.
Save All
Save all your changes with the "Save All" button.
Deploy All, Lock All, and Visit
To deploy all your pages, click the "Deploy All" button. There is also a drop-up menu which includes the actions to Deploy All, Lock All pages, and Refresh the site.
Page Toolbar
When editing a page, a separate set of features is available on the toolbar. The command palette is still easily accessible and in the same place as when on the Worksheet.
There are a few different features on the right side of this toolbar.
Versioning
The first one is the ability to access the versioning button. The versioning function allows you to create multiple versions of a page so that you can edit and test out different styles of a single page.
Learn more about Page Versions.
Media Queries
The phone icon is labeled “media queries.” When you select this, you can click through a list of different sized and formatted screens, such as mobile, tablet, tv screen, and others. You can see how your page would look on different devices, then edit and format it individually so it will look good across all device sizes.
Toggle UX Options
A “Toggle UX Options” button is also located on the toolbar when editing pages. This allows you to edit elements in different states, pseudo-elements, and languages.
For example, you can select the hover state and then edit different elements such that they only appear the way you edit them when the cursor hovers over them. Learn more about editing hover states.
If you are unsure about the other options under the UX toggle, you can learn more about the CSS states and the before and after pseudo-elements.
Inspect element
Inspect element lets you click on any element on the screen and takes you to that Element in the editor. It is used to quickly navigate to different Elements. Use CMD/CTRL + i to toggle this on and off.
Save, Deploy, Lock, Visit Page
Just like on the worksheet, you can save, deploy, lock the Page from being deployed or visit the deployed page from the toolbar and through the drop-up menu.
Block Editor Toolbar
Recurring Features
Like the Page toolbar, the Blocks toolbar includes the Command Palette, Media Queries, Toggle UX Options, Inspect Element, and Refresh Site Preview.
Set Variables
Instead of a deploy button for Blocks, there is a feature called Set Variables. This allows you to designate certain elements or aspects of your site as variables so that they can be reused again without all the hassle. You’ll take a closer look at variables when we learn about Blocks.
Comments
0 comments
Please sign in to leave a comment.