Keyboard Shortcut Keys in Pixel Together

Published:

September 02, 2021

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 to 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

Mac

Windows

⌘ + C copy

⌘ + V paste

⌘ + R to show/hide rulers
⌘ + Shift + A Add a new section
⌘ + Shift + P to show/hide section propertiesb

Ctrl + C copy

Ctrl + V paste

Ctrl + R to show/hide rulers
Ctrl + Shift + A Add a new section
Ctrl + Shift + P to show/hide section properties

Windows

Ctrl + C copy

Ctrl + V paste

Ctrl + R to show/hide rulers
Ctrl + Shift + A Add a new section
Ctrl + Shift + P to show/hide section properties

Alignment Keyboard Shortcuts

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

Get in Touch