Webflow Designer Guide: Interface, Panels and Tools

What is the Webflow Designer?

The Designer is Webflow's main editor. Every visual action produces real code: an element you add becomes an HTML tag, a class becomes a CSS rule, an animation becomes JavaScript. You do not write code, but you work with the logic of front-end development: boxes, style inheritance and page flow.

That is what sets it apart from a block-based page builder: more freedom, but also more discipline needed to keep a site clean.

Webflow Designer panels and their shortcuts

The names and shortcuts below come from Webflow's help page on keyboard shortcuts (updated August 24, 2026). On Windows, use Ctrl instead of Cmd.

Other useful shortcuts: 1, 2, 3 and 4 to switch between breakpoints (Desktop, Tablet, Mobile landscape, Mobile portrait), Cmd + Shift + P for preview, Shift + P to open publishing, and Cmd + Shift + X for X-ray mode, which reveals the box structure.

Creating a site and adding elements

1. From the dashboard, create a new site, either blank or from a template.
2. Open the Add panel and drag elements onto the canvas or straight into the Navigator, which is more precise for targeting the right parent.
3. Double-click a text to edit it, or press Enter to open an element's settings.
4. Set links in Element settings (D): page, section, external URL, email or phone.
5. Upload images to Assets (J) and fill in their alt text once and for all.

Classes: the most important concept in the Designer

In the Style panel, a style applies to a class, not to a single element. Editing the "card" class edits every card on the site. Four rules prevent most problems:

• Style the tags first (Body, headings, paragraphs, links) at the All pages level.
• Use clear names (hero_title, card_image), never "Div Block 12".
• Use a combo class (card + is-featured) for a variant, rather than a new class.
• Store colors, sizes and spacing in the Variables panel, then use them in your classes.

At Synqro, we apply a shared naming convention on every Webflow project, inspired by the Client-First method. That way, another developer or the client's team can find any style without guessing. The Style selectors panel (G) is then used to delete unused classes.

Layout and responsive design

You build the structure with Section, Container, V flex, H flex and Quick Stack, then Flexbox or Grid in the Layout section of the Style panel. Design starts at the Desktop breakpoint and is adjusted down to smaller screens. Everything is covered in detail in our guide to layout in Webflow.

Interactions: GSAP or Classic

The Interactions panel (H) offers two versions. According to Webflow's help article comparing the two systems (updated September 8, 2026), Interactions with GSAP, launched in summer 2025, is the default version for new sites and the only one that will get new features. Classic Interactions are still available.

Avoid mixing the two on the same site: each version loads its own resources, and Webflow states that the combination performs the worst. To go further, see our guide to GSAP on Webflow.

Forms

A Form Block contains the form and its success and error messages. Select each field to set its name, type, placeholder and whether it is required in Element settings. Submissions are visible in the site settings. For choice fields, see our tutorial on the Webflow radio button.

Page SEO settings

In the Pages panel, a page's gear icon opens its settings:

• the slug (the page's address);
• the title tag and meta description;
• Open Graph settings for sharing on social networks;
• excluding the page from the sitemap and from indexing;
• the page's custom code, for example JSON-LD structured data.

Be careful with the slug of a page that is already live: changing it without a 301 redirect creates a 404 error. See how to change a Webflow slug without losing your SEO.

Hiding an element without deleting it

In the Style panel, in the Layout section, set Display to None. Keep in mind that this setting applies to the class and to the active breakpoint: an element hidden on Mobile portrait stays visible on Desktop, which is handy for adapting content to the screen. To find a hidden element, go through the Navigator.

Previewing, publishing and backing up

1. Test in preview (Cmd + Shift + P) on every breakpoint: links, forms, menus, animations.
2. Publish to the webflow.io subdomain first for full QA, then to the custom domain (Shift + P).
3. If something goes wrong, restore a previous version from the site backups. The process is explained in our article on how to back up and restore a Webflow site.

Common beginner mistakes

• Styling without a class or with generic classes, then changing the whole site by accident.
• Building the layout with absolute positioning or fixed heights.
• Starting the design on mobile when Webflow cascades styles down from Desktop.
• Copying and pasting a shared block (navbar, footer) instead of turning it into a component.
• Publishing without filling in titles, meta descriptions and alt text.

Synqro is a brand, web and visibility agency, a Webflow Premium Partner based in Dubai with a French-speaking team, founded in 2019. If you would rather hand off the build and keep control of your content, discover our Webflow services.