{"id":6601,"date":"2024-04-14T18:25:33","date_gmt":"2024-04-14T10:25:33","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6601"},"modified":"2024-04-15T23:25:37","modified_gmt":"2024-04-15T15:25:37","slug":"hotkeys-in-webflow","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/hotkeys-in-webflow\/","title":{"rendered":"Hotkeys in Webflow"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">Take advantage of hotkeys in Webflow to optimize your workflow efficiency.<\/p>\n<p>The Designer provides numerous hotkeys to accelerate your design process. To view the complete list of all hotkeys in the Designer quickly, press <strong>Shift + \/<\/strong>. You can also find this list in the <strong>help menu<\/strong> located at the bottom left corner of the Designer interface.<\/p>\n<p>This tutorial covers:<\/p>\n<ol start=\"1\" role=\"list\">\n<li>General quick commands<\/li>\n<li>Screen commands<\/li>\n<li>Shortcut commands for the left-hand toolbar<\/li>\n<li>Quick commands for right-hand tabs<\/li>\n<li>Commands for copying and pasting<\/li>\n<li>Commands for undo and redo<\/li>\n<li>Viewing options in different devices commands<\/li>\n<li>Commands for the style panel<\/li>\n<li>Various other quick commands<\/li>\n<li>Searching commands<\/li>\n<li>Moving elements commands<\/li>\n<li>Shortcuts specific to Markdown usage<\/li>\n<li>Keyboard shortcuts specific to Flex and grid layouts<\/li>\n<\/ol>\n<h6><strong>Reminder: <\/strong>If you have any suggestions for an interesting keyboard shortcut, <a href=\"https:\/\/wishlist.webflow.com\/\">let us know<\/a>, and we&#8217;ll consider adding it.<\/h6>\n<h2>General Hotkeys<\/h2>\n<ul role=\"list\">\n<li>Show hotkey reference: <strong>Shift + \/<\/strong><\/li>\n<li>Save as a snapshot: <strong>Shift + Command + S<\/strong> (Mac) or <strong>Shift + Control + S<\/strong> (Windows)<\/li>\n<li>Deselect or exit element: <strong>Esc<\/strong><\/li>\n<li>Delete element: <strong>Delete<\/strong><\/li>\n<li>Show publish dialog: <strong>Shift + P<\/strong><\/li>\n<li>Show export code dialog: <strong>Shift + E<\/strong><\/li>\n<li>Edit element: <strong>Enter<\/strong><\/li>\n<\/ul>\n<h2>Screen Commands<\/h2>\n<ul role=\"list\">\n<li>\u200dPreview mode: <strong>Shift + Command + P<\/strong> (Mac) or <strong>Shift + Control + P<\/strong> (Windows)<\/li>\n<li>Guide overlay: <strong>Shift + Command + G<\/strong> (Mac) or <strong>Shift + Control + G<\/strong> (Windows)<\/li>\n<li>Show element edges: <strong>Shift + Command + E<\/strong> (Mac) or <strong>Shift + Control + E<\/strong> (Windows)<\/li>\n<li>X-ray mode: <strong>Shift + Command + X<\/strong> (Mac) or <strong>Shift + Control + X<\/strong> (Windows)<\/li>\n<\/ul>\n<h2>Left-hand toolbar Shortcuts<\/h2>\n<ul role=\"list\">\n<li>Show Add panel: <strong>A<\/strong><\/li>\n<li>Show Navigator panel: <strong>Z<\/strong><\/li>\n<li>Show Pages panel: <strong>P<\/strong><\/li>\n<li>Show Components panel: <strong>Shift + A<\/strong><\/li>\n<li>Convert selected element into a component: <strong>Command + Shift + A<\/strong> (Mac) or <strong>Control + Shift + A<\/strong> (Windows)<\/li>\n<li>Show Assets panel: <strong>J<\/strong><\/li>\n<li>Expand\/collapse all nested page folders: <strong>Option<\/strong> + <strong>Shift<\/strong> + <strong>click <\/strong>(Mac) or <strong>Alt<\/strong> + <strong>Shift <\/strong>+<strong> click <\/strong>(Windows)<\/li>\n<li>Expand\/collapse all pages: <strong>Option<\/strong> + <strong>click<\/strong> (Mac) or <strong>Alt <\/strong>+<strong> click<\/strong> (Windows) any page section header<\/li>\n<li>Expand\/collapse all folders: <strong>Option<\/strong> + <strong>click <\/strong>(Mac) or <strong>Alt <\/strong>+<strong> click<\/strong> (Windows) any folder<\/li>\n<\/ul>\n<h2>Commands for right-hand tabs<\/h2>\n<ul role=\"list\">\n<li>Show Style panel: <strong>S<\/strong><\/li>\n<li>Show Element settings panel: <strong>D<\/strong><\/li>\n<li>Show Style Manager panel: <strong>G<\/strong>\u200d<\/li>\n<li>Show Interactions panel: <strong>H<\/strong><\/li>\n<\/ul>\n<h2>Copying and Pasting Hotkeys<\/h2>\n<ul role=\"list\">\n<li>\u200dCopy: <strong>Command + C<\/strong> (Mac) or <strong>Control + C<\/strong> (Windows)<\/li>\n<li>Cut: <strong>Command + X<\/strong> (Mac) or <strong>Control +X<\/strong> (Windows)<\/li>\n<li>Paste: <strong>Command + V<\/strong> (Mac) or <strong>Control +V<\/strong> (Windows)<\/li>\n<li>Duplicate: <strong>Command + D <\/strong>(Mac) or <strong>Control + D <\/strong>(Windows)<\/li>\n<li>Duplicate: <strong>Option<\/strong><strong>+<\/strong><strong>Drag <\/strong>(Mac) or <strong>Alt + Drag <\/strong>(Windows)<\/li>\n<\/ul>\n<h2>Undo and Redo Hotkeys<\/h2>\n<ul role=\"list\">\n<li>Undo: <strong>Command + Z<\/strong> (Mac) or <strong>Control + Z<\/strong> (Windows)<\/li>\n<li>Redo: <strong>Shift + Command + Z<\/strong> (Mac) or <strong>Shift + Control + Z<\/strong> (Windows)<\/li>\n<\/ul>\n<h2>Commands for device views<\/h2>\n<ul role=\"list\">\n<li>\u200dDesktop: <strong>1<\/strong><\/li>\n<li>Tablet: <strong>2<\/strong><\/li>\n<li>Phone (landscape): <strong>3<\/strong><\/li>\n<li>Phone (portrait): <strong>4<\/strong><\/li>\n<\/ul>\n<h2>Style Panel Hotkeys<\/h2>\n<ul role=\"list\">\n<li>Margin \/ padding (all sides): <strong>Hold Shift + Drag<\/strong><\/li>\n<li>Margin \/ padding (top + bottom or left + right): <strong>Hold Alt + drag<\/strong><\/li>\n<li>Add class to selected element: <strong>Command + Enter<\/strong> (Mac) or <strong>Control + Enter<\/strong> (Windows)<\/li>\n<li>Rename last class on selected element: <strong>Command + Shift + Enter<\/strong> (Mac) or <strong>Control + Shift + Enter<\/strong> (Windows)<\/li>\n<\/ul>\n<p>&#8230;Continued list remaining unchanged as per the original content.(for example, relocating a Slider mask outside of the Slider wrapper), the complete parent node (for example, the Slider wrapper) will shift.<\/li>\n<\/ul>\n<h2>Markdown quick keys<\/h2>\n<p>These <a href=\"https:\/\/www.markdownguide.org\/getting-started\/#what-is-markdown\">Markdown<\/a> quick keys help you style text (for instance, emphasize, italicize, incorporate a hyperlink) and block elements (for example, titles, lists) inside rich text components and rich text fields utilizing solely your keyboard.<\/p>\n<ul role=\"list\">\n<li>Italicize text: <code>*text*<\/code> or <code>_text_<\/code><\/li>\n<li>Bold text: <code>**text**<\/code> or <code>__text__<\/code><\/li>\n<li>Italicize and make text bold: <code>***text***<\/code> or <code>___text___<\/code><\/li>\n<li>Add hyperlink: <code>[hyperlink text](https:\/\/www.url.com)<\/code><\/li>\n<li>Insert Heading 1: <code>#<\/code> + <strong>Space<\/strong><\/li>\n<li>Insert Heading 2: <code>##<\/code> + <strong>Space<\/strong><\/li>\n<li>Insert Heading 3: <code>###<\/code> + <strong>Space<\/strong><\/li>\n<li>Insert Heading 4: <code>####<\/code> + <strong>Space<\/strong><\/li>\n<li>Insert Heading 5: <code>#####<\/code> + <strong>Space<\/strong><\/li>\n<li>Insert Heading 6: <code>######<\/code> + <strong>Space<\/strong><\/li>\n<li>Insert Blockquote: <code>&gt;<\/code> + <strong>Space<\/strong><\/li>\n<li>Insert unordered (in other words, bulleted) list: <code>-<\/code> + <strong>Space<\/strong>\u200d<\/li>\n<li>Insert ordered (i.e., numbered) list: <code>1.<\/code> + <strong>Space<\/strong><\/li>\n<\/ul>\n<h2>Flex and grid layout quick keys<\/h2>\n<p>You have the option to leverage the following quick keys along with the align box to rapidly align flex and grid offspring within their parent nodes.<\/p>\n<h3>Flex quick keys<\/h3>\n<ul role=\"list\">\n<li>Set justification (meaning justify-content) to <strong>space between<\/strong>: double-tap an align box <strong>cell<\/strong> or <strong>Command<\/strong> (on Mac) or <strong>Control<\/strong> (on Windows) + tap an align box <strong>cell<\/strong><\/li>\n<li>Set alignment (or align-items) to <strong>stretch<\/strong>: <strong>Option<\/strong> (on Mac) or <strong>Alt <\/strong>(on Windows) + tap an align box <strong>cell<\/strong><\/li>\n<\/ul>\n<p>Get more insights on aligning flex offspring.<\/p>\n<h3>Grid quick keys<\/h3>\n<ul role=\"list\">\n<li>Set justification (or justify-items) to <strong>stretch<\/strong>: double-tap an align box <strong>cell<\/strong> or <strong>Command<\/strong> (on Mac) or <strong>Control<\/strong> (on Windows) + <strong>tap<\/strong> an align box <strong>cell<\/strong><\/li>\n<li>Set alignment (or align-items) to <strong>stretch<\/strong>: <strong>Option<\/strong> (on Mac) or <strong>Alt <\/strong>(on Windows) + tap an align box <strong>cell<\/strong><\/li>\n<\/ul>\n<p>Get to know more about aligning grid offspring.<\/p>\n<p>\u200d<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use keyboard shortcuts in Webflow to make your workflow as efficient as possible.","protected":false},"author":2,"featured_media":5212,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[287],"tags":[],"class_list":{"0":"post-6601","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-getting-started","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6601"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6601\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5317"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}