LogoLogo
Webstudio Home
  • Basics
    • 👋Welcome
    • 🔥Intro
    • 🎓Building your first site
    • 🤓Courses
    • 🔗Roadmap & Links
    • ❓FAQs
  • NEWS
    • 🆕April Update
    • 🆕December Update
    • 🆕September Update
    • 🆕Webstudio CMS Beta and Experts Network
  • university
    • ⚛️Foundations
      • 🛠️Anatomy of the Webstudio Builder
      • 🧱CSS Variables
      • 🖌️Design Tokens
      • 🔡Data Variables
      • ➕Expression Editor
      • Animations
      • 💾CMS
      • ↔️Copy-Paste
        • ↔️CSS
        • ↔️Markdown
        • ↔️Webflow
      • Commands & Search
      • 🎯SEO Settings
      • Shortcuts
      • ⚙️Project Settings
      • Modes
      • Share Links & Transferring Projects
      • 🌐Publishing & Custom Domains
    • 🧩Core Components
      • 📦Box
      • 🔗Link
      • 🖼️Image
      • 📃List
      • ⌨️HTML Embed
      • Animation Group
      • Text Animation
      • Video Animation
      • Stagger Animation
      • ✍️Webhook Form
      • ✍️Form
      • ⏯️Vimeo
      • ▶️Vimeo Background Video
      • YouTube
      • 💬Blockquote
      • 🔲Slot
      • Head Slot
      • ➖Separator
      • 📄Code Text
      • 🔘Button
      • 💾Collection
      • 🪜Content Embed
      • 🪜Markdown Embed
      • Content Block
      • 📘XML Node
    • ▫️Radix UI Components
      • Accordion
      • Collapsible
      • Dialog
      • Navigation Menu
      • Popover
      • Radio Group
      • Select
      • Sheet
      • Switch
      • Tabs
      • Tooltip
    • Marketplace
    • 🤖Webstudio AI
    • 📤Self-Hosting
      • ▶️CLI
      • ▶️Download
      • ▶️Cloudflare Pages
      • ▶️GitHub Pages
      • ▶️Netlify
      • ▶️Vercel
      • ▶️AWS with Flightcontrol (Docker)
      • ▶️Digital Ocean with Coolify (Docker)
      • ▶️Hetzner with Coolify (Docker)
    • 🧑‍🏫How-Tos
      • ▶️How to add icons
      • ▶️How to create fluid video backgrounds with Vimeo
      • ▶️How to create a countdown
      • ▶️How to crop an image with out cropping the original image
      • 🍀How to add a GSAP animation
      • ▶️Build Your Own Directory Website with Airtable
      • ▶️Using filters to dynamically display content (Airtable example)
    • 🔗Integrations
      • How to build a frontend for Hygraph using Webstudio
      • How to build a frontend for Airtable using Webstudio
      • How to build a WordPress frontend using Webstudio (no-code builder)
      • How to integrate a Notion database with Webstudio
      • How to integrate Webhook Form with Pabbly
      • How to integrate Webhook Form with Zappier
      • How to integrate Webhook Form with N8N
      • How to integrate a Webhook Form with Airtable
      • How to integrate Flotiq with Webstudio
    • Craft
  • Contributing
    • 🧑‍🎨Contributing for Designers
    • 🧑‍💻Contributing for Developers
    • Contributing to the Marketplace
  • ⚠️Errors
    • ▶️Connecting your Hostinger Domain to Webstudio
    • 🔌Worker not found
    • 🌮AppSumo redemption failed
  • Misc
    • 📊Account Limits
    • 🆘Webstudio Support Process
    • Fixing overflow issues
Powered by GitBook
On this page
  • Operating system notes
  • Windows
  • Mac
  • General
  • Sidebar Left
  • Style Panel
  • Settings Panel
  • Top Bar

Was this helpful?

Edit on GitHub
  1. university
  2. Foundations

Shortcuts

The list of keyboard shortcuts to build in Webstudio.

Operating system notes

Windows

  • Replace ⌘ (command) with control (Ctrl).

Mac

  • On Mac, alt and option are the same key (⌥).

General

  • Undo: ⌘ + z

  • Redo: ⌘ + shift + z

  • Deselect/abort: esc

  • Open Commands & Search: ⌘ + k

    • See Commands & Search to perform the following actions:

      • Unwrap

      • Wrap In Box

      • Wrap In Link

Sidebar Left

  • Copy: ⌘ + c

  • Cut: ⌘ + x

  • Paste: ⌘ + v

  • Duplicate: ⌘ + d

  • Open Navigator: z

  • Open Add Components: a

  • Edit Component: enter

  • Rename instance label: ⌘ + e

  • Expand Navigator item: right arrow

  • Collapse Navigator item: left arrow

  • Expand all Navigator item children: alt + click

Style Panel

  • Open Style Panel: s

  • Focus Style Sources: ⌘ + enter

  • Reset style: alt + click

  • Reset style for all sides: shift + alt + click

  • Edit spacing on all sides (via drag): shift + drag

  • Edit spacing on all sides (via one input): add value then shift + enter

  • Edit spacing on two sides (via drag): alt + drag

  • Edit spacing on two sides (via one input): add value then alt + enter

  • Increment value by 10: shift + up/down arrow

  • Increment value by .1: alt + up/down arrow

  • View the computed CSS variable value in the tooltip: hold alt

Settings Panel

  • Open Settings Panel: d

Top Bar

  • Open the current page's settings: alt + click page

  • Switch modes

    • Design: ⌘ + shift + d

    • Content: ⌘ + shift + c

    • Preview: ⌘ + shift + p

  • Switch between current mode and Preview: ⌘ + shift + c|d

    • For example, if you are in Design mode, you can press ⌘ + shift + d and it’ll toggle Preview. You can use the same shortcut to exit Preview.

  • Switch breakpoints: numbers (e.g., 1 switches to the first one)

PreviousSEO SettingsNextProject Settings

Last updated 2 months ago

Was this helpful?

⚛️