Webflow Designer Cheatsheet

Browse / Webflow Designer Cheatsheet

Programming & Development / Web Development

April 24, 2025 23:54

keyboardshortcuts

nocode

tips

webdesign

webflow

Download PDF

Missing something?

Designer Basics & Panels

General Shortcuts

Cmd/Ctrl + S	Save your project (auto-save is default)
Cmd/Ctrl + P	Publish your project
Cmd/Ctrl + Z	Undo last action
Cmd/Ctrl + Shift + Z	Redo last action
Cmd/Ctrl + C	Copy element
Cmd/Ctrl + V	Paste element
Cmd/Ctrl + X	Cut element
Cmd/Ctrl + F	Search elements, styles, pages
?	Open shortcuts cheat sheet

Element Panel (A)

A	Open Add Elements panel
Cmd/Ctrl + E	Quick find/add element
Enter	Add selected element to canvas
Esc	Close Quick find/add element
Delete/Backspace	Delete selected element
Cmd/Ctrl + Delete	Delete element from Navigator
Shift + Click Element	Select parent element
Cmd/Ctrl + Click Element	Select child element
Tab	Cycle through selected elements

Style Panel (S)

S	Toggle Style panel visibility
Cmd/Ctrl + Enter	Apply value in input field
Up/Down Arrow	Increment/Decrement value in input field
Shift + Up/Down	Increment/Decrement value by 10
Alt/Option + Click Property	Reset property to default
Click on Style Class Name	Open class name input for editing
Double Click Property	Enter value manually
Cmd/Ctrl + K	Add Combo Class
Cmd/Ctrl + D	Duplicate Style Class

Navigator Panel (N)

N	Toggle Navigator panel visibility
Cmd/Ctrl + Click Element in Nav	Select element on canvas and in Nav
Right Arrow	Expand selected element in Nav
Left Arrow	Collapse selected element in Nav
Up/Down Arrow (in Nav)	Navigate sibling elements
Shift + Up/Down (in Nav)	Navigate to first/last sibling
Enter (on element in Nav)	Rename element
Drag & Drop	Reorder elements in Nav
Double Click Element in Nav	Focus view on element on canvas

Pages & CMS Shortcuts

P	Toggle Pages panel visibility
C	Toggle CMS panel visibility
E	Toggle Ecommerce panel visibility
A (in CMS/Ecomm)	Add New Item
Enter (on item in CMS/Ecomm)	Open item settings
Cmd/Ctrl + Shift + C	Copy CMS item ID
Click CMS Collection	View collection items
Click CMS Item	Open item for editing
Right-click on Page	Access page settings/duplicate/delete

Layout & Interactions

Adding & Duplicating

A	Add element
Cmd/Ctrl + D	Duplicate selected element
Shift + Drag & Drop	Duplicate by dragging
Cmd/Ctrl + E	Quick find/add element
Click & Drag (from Add panel)	Add element to specific spot
Shift + Click element on canvas	Select parent element (useful for adding sibling)
Click + Hold (on element)	Allows dragging to reorder or duplicate
Cmd/Ctrl + Shift + C	Copy element with styles
Cmd/Ctrl + Shift + V	Paste element with styles

Moving & Positioning

Arrow Keys	Move element (1px increment)
Shift + Arrow Keys	Move element (10px increment)
Cmd/Ctrl + Up/Down (in Nav)	Move selected element up/down in hierarchy
Cmd/Ctrl + Right/Left (in Nav)	Change parent of selected element
Drag handles (on element corners/sides)	Resize element
Shift + Drag handles	Resize element proportionally
Alt/Option + Drag	Duplicate while dragging
Cmd/Ctrl + G	Group selected elements (wrap in Div Block)
Cmd/Ctrl + Shift + G	Ungroup selected elements

Sizing & Spacing

Input field calculations	Use +, -, *, / directly in style input fields (e.g., `100px + 5em`)
Cmd/Ctrl + Enter	Apply value in input field
Up/Down Arrow (in input)	Increment/Decrement value
Shift + Up/Down (in input)	Increment/Decrement value by 10
Alt/Option + Click margin/padding side	Apply margin/padding to all sides simultaneously
Click & Drag in padding/margin inputs	Visually adjust padding/margin
Click Unit (px, em, %, etc.)	Cycle through available units
Type new unit (in input)	Manually set the unit (e.g., `50vw`, `10vh`)
Double Click Property Label	Reset property to its default value

Interactions (H) & Assets (J)

H	Toggle Interactions panel visibility
J	Toggle Assets panel visibility
Click '+' in Interactions	Add new interaction or step
Click Interaction Name	Edit interaction settings/steps
Right-click on interaction step	Access step options (duplicate, delete, etc.)
Click Asset Thumbnail	Select asset in Assets panel
Drag Asset	Add asset to canvas (e.g., image)
Double Click Asset	Open asset settings (e.g., rename, replace)
Right-click Asset Folder	Access folder options (create, rename, delete)

Tips & Best Practices

Structure & Organization

Use Semantic HTML5 Elements: Prefer <section>, <article>, <aside>, <nav>, <header>, <footer> over plain <div> where appropriate for better accessibility and SEO.

Name Your Elements: Use descriptive names in the Navigator (e.g., Hero Section, Primary Nav, Blog Post Card) instead of default Div Block 15 for clarity and easy navigation.

Structure with Containers: Use Container or custom wrapper Div Blocks to control content width and centering consistently across pages.

Organize with Div Blocks: Group related elements within Div Blocks to manage layouts, apply styles, and control responsiveness more effectively.

Order Matters: The order of elements in the Navigator reflects their order in the HTML and often their stacking context. Be mindful of this for layout and responsiveness.

Use Comment Blocks: Add Comment elements (found in the Add panel) to leave notes for yourself or collaborators directly in the Designer.

Keep Navigator Clean: Regularly review and remove unused elements. Group elements logically.

Use Nesting Wisely: Avoid excessive nesting of Div Blocks. Aim for a flat structure where possible to keep things simple.

Plan Before Building: Sketch out your page structure and layout before dragging elements onto the canvas.

Styling Workflow

Master Classes: Always style elements using classes. Never leave elements with ‘None’ or ‘All H1 Headings’ unless it’s a base style for that element type.

BEM Naming Convention: Consider using a naming convention like BEM (Block-Element-Modifier) for your classes (e.g., card, card__image, card--featured) for better organization and scalability.

Use Combo Classes: Use combo classes (e.g., button primary, button secondary) for variations of a base style. The first class is the base, subsequent classes add or override styles.

Global Styles: Define your global styles (Body, All H1s, Paragraphs, etc.) before you start building pages to ensure consistency.

Style Guide Page: Create a dedicated page or section in your project to serve as a style guide, showcasing all your classes, typography, colors, and components.

Clean Up Styles: Regularly use the Style Manager panel (F) to remove unused styles. This keeps your CSS clean and project lighter.

Inheritance: Understand how styles cascade. Styles applied to parent elements are inherited by children unless overridden.

Avoid Inline Styles: Avoid applying styles directly to elements without a class unless absolutely necessary. This makes maintenance difficult.

Use Swatches: Save colors and gradients as swatches in the Style panel for easy reuse and global updates.

Responsive Design

Start Desktop First: Design and style for the largest breakpoint (Desktop) first, then work your way down to smaller devices (Tablet, Mobile Landscape, Mobile Portrait). Styles generally cascade downwards.

Use Relative Units: Prefer em, rem, %, vw, vh over px for font sizes, widths, heights, and padding/margin to create more flexible and responsive layouts.

Flexbox & Grid: Master Flexbox and CSS Grid for creating responsive layouts. They are powerful tools for controlling alignment, distribution, and wrapping of elements.

Check All Breakpoints: Don’t just design for desktop. Continuously check your design on all breakpoints as you build.

Hide Elements: Use Display: None in the Style panel to hide elements on specific breakpoints if they are not needed on smaller screens.

Responsive Typography: Adjust font sizes, line heights, and margins for text on smaller breakpoints to ensure readability.

Image Responsiveness: Ensure images are set to width: 100% and height: auto within their container to scale correctly.

Viewport Units (vw/vh): Use vw for widths relative to the viewport width and vh for heights relative to the viewport height. Useful for full-screen sections or hero images.

Min/Max Width/Height: Use min-width, max-width, min-height, max-height properties to control how elements scale within a range.

Performance & SEO

Optimize Images: Use compressed image formats (JPG, PNG, SVG, WebP). Webflow has built-in image optimization, but optimize before uploading too. Use appropriate dimensions.

Lazy Load Images: Webflow automatically lazy loads images below the fold, improving initial page load time.

Minimize Elements: Fewer elements generally mean faster load times. Structure efficiently.

Clean Up Styles: Remove unused classes via the Style Manager (F) to reduce CSS file size.

Proper Headings: Use H1 only once per page for the main title. Follow a logical heading structure (H2, H3, etc.) for content hierarchy.

Alt Text for Images: Add descriptive Alt Text to all images for accessibility and SEO.

Meta Titles & Descriptions: Fill out Meta Title and Meta Description for every page in the Page Settings panel (P) for better search engine visibility.

Clean URLs: Use clean, readable URLs for pages and CMS items.

Enable Minify/Combine: In Project Settings > Hosting, enable CSS, HTML, and JS minification/combination for faster loading.

CMS & Ecommerce Power-Ups

CMS Workflow

Plan Your Fields: Before creating a CMS Collection, carefully plan out all the fields you’ll need for your content (text, image, rich text, reference, multi-reference, etc.).

Use Reference/Multi-Reference: Connect collections (e.g., Authors to Blog Posts, Categories to Products) using Reference or Multi-Reference fields to build relationships and avoid data duplication.

Design Collection Pages: Use the special Collection Page template to design how individual CMS items will be displayed. Elements can be linked to CMS fields.

Collection Lists: Use Collection Lists to display multiple items from a collection on static pages (e.g., a list of blog posts on the homepage). Style the List Item element.

Filtering & Sorting: Configure filters and sorting options on Collection Lists to control which items are displayed and in what order.

Limit Items: Set a limit on the number of items displayed in a Collection List for pagination or displaying only recent items.

Conditional Visibility: Use conditional visibility on elements within a Collection List or Collection Page based on CMS field values (e.g., hide an ‘Out of Stock’ label).

Bulk Upload: Save time by using the CSV import feature to add many CMS items at once.

Stage Content: Use the Draft/Staged/Published status for CMS items to manage your content workflow.

Ecommerce Setup

Setup Products: Define product fields (name, description, images, price, stock, etc.) in the Products collection. Add variants if needed.

Design Product Page: Customize the individual Product Page template, linking elements to product fields.

Add to Cart Form: Include the ‘Add to Cart’ form on your product pages. Customize its appearance and behavior.

Mini Cart / Cart Page: Add a Mini Cart element (usually in the nav) and design the dedicated Cart Page where users review their order before checkout.

Checkout Page: Customize the Checkout Page design, but note that the checkout form structure is fixed for security and payment gateway integration.

Order Confirmation Page: Design the page users see after completing a purchase.

Configure Shipping & Tax: Set up shipping regions, methods, and rates. Configure tax rules based on location.

Payment Gateways: Connect your chosen payment gateway (Stripe, PayPal). Ensure settings are correct.

Inventory Management: Webflow tracks inventory based on stock levels entered for products and variants. Monitor this in the Ecommerce panel.

Data Management & Troubleshooting

Backups: Webflow automatically creates backups. You can also manually create restore points in Project Settings > Backups.

Undo/Redo: Use Cmd/Ctrl + Z and Cmd/Ctrl + Shift + Z extensively. Don’t be afraid to experiment, knowing you can revert changes.

Preview Mode: Use the Preview mode (eye icon or Cmd/Ctrl + \) to see how your site looks and functions before publishing.

Check Console: If custom code or interactions aren’t working, open your browser’s developer console (usually F12) on the published site to check for JavaScript errors.

Webflow University: The official Webflow University is an extensive resource with tutorials and documentation for almost everything.

Community Forum: The Webflow Community forum is a great place to ask questions and find solutions to common problems.

Support: If you encounter bugs or platform issues, contact Webflow support.

Isolate Issues: If something breaks, try to isolate the problem by removing elements or interactions one by one to find the source.

Clear Cache: Sometimes, designer glitches can be resolved by clearing your browser’s cache or using an incognito window.