Keyboard Shortcut Keys in Pixel Together

Use Keyboard Shortcut Keys to Make Your Workflow as Fast and Efficient as Possible

Keyboard shortcut keys improve productivity by providing a series of key combinations that can be pressed to complete a task.

Pixel Together has provided support for a small subset of keyboard shortcut keys for some time, but after a user interface (UI) update on August 31st 2021, the help button to display the shortcut keys was removed. To display the shortcut keys within Pixel Together, you can press Ctrl + / on Mac or Windows.

Below is a list of shortcut keys that are bound to help increase your workflow and productivity when building websites with Pixel Together. I have also included some additional tips from a design perspective to help make use of these shortcut key combinations.

General Keyboard Shortcuts

• S - save as draft. (I recommend getting in the habit of using it to prevent accidentally clicking the publish button. It’s also just far more efficient than clicking)
• P - preview the website within the editor (does not display code changes)

Design Tool Keyboard Shortcuts

Alignment Keyboard Shortcuts

Shift + arrow key(s) - move elements in 10px increments‍ in the arrow direction
Shift + Ctrl + arrow key(s) - align elements to the edges and corners of the section they are in‍
Shift + Ctrl + . (period) - centre elements horizontally in the section they are in‍
Shift + Ctrl + , (comma) - centre elements vertically in the section they are in