Contact Us

What are You Looking for?

ByEwan Mak
April 14, 2024

Introduction to the Webflow Designer

Learn your way around the Webflow Designer.

The Webflow Designer enables you to construct your site framework, conceptualize the appearance and ambiance of your site, and include content, interactions, animations, and customized code to fabricate fully operational websites, landing pages, prototypes, presentations, and more.

Within the Designer, you have the ability to handle HTML elements, define CSS styles, and establish interactions without requiring to write any code. While constructing your website, the Designer generates pristine, semantic, web-optimized code that web browsers will make use of to showcase your site. Furthermore, the code from the Designer can be exported to other applications.

This tutorial will cover:

  1. Guidance on accessing the Designer
  2. Overview of the Designer structure
  3. Collaboration among multiple users
  4. Reasons for the Designer being an online application

Getting to the Designer

To reach the Designer:

  • by accessing the Dashboard and clicking on your site thumbnail
  • via Site settings by selecting Designer from the top toolbar
  • through the Editor by choosing the Designer after clicking the Menu button in the lower left corner

Designer prerequisites: compatible web browsers

Webflow officially supports the Designer on the latest three major versions of all contemporary browsers, including Chrome, Edge, Firefox, and Safari.

The extent of browser compatibility varies based on the features utilized (e.g., filter has partial support in Edge). For features with restricted support in specific browsers, more information can be found in their respective articles:

Webflow does not provide support for Internet Explorer. Although Webflow-created sites continue to back all standard features upheld in contemporary web browsers, compatibility with Internet Explorer is not guaranteed. Find out more about the abandonment of Internet Explorer support.

Insider tip: You can identify your browser and OS version by visiting What’s My Browser.

Designer prerequisites: compatible display resolutions

The Designer necessitates a device with a mouse and keyboard (e.g., desktop or laptop) possessing a screen width of at least 1268px. This width accounts for the left sidebar, the Designer canvas, and the right sidebar combined.

Structure of the Designer

The Designer includes the primary canvas and a collection of toolbars and panels. Keep reading for a summary of:

  • The left toolbar and panels
  • The canvas
  • The top bar
  • The bottom navigation breadcrumb bar
  • The right panels

The left toolbar and panels

The left toolbar presents various links and tools allowing you to organize your website. The icons positioned at the top of the left toolbar can hide the majority of the Designer panels, which expand once clicked upon:

  • Main menu
  • Add panel
  • Pages panel
  • Navigator panel
  • Components panel
  • Variables panel
  • Style selectors panel
  • Assets panel
  • CMS panel
  • Logic panel
  • Users panel
  • Ecommerce panel
  • Apps panel
  • Site activity log
  • Settings panel
  • Help settings
  • Audit panel
  • Quick find
  • Video tutorials panel

Main menu — Webflow logo

By selecting the Webflow icon, a dropdown menu emerges, allowing navigation to the Dashboard, Site settings for the currently viewed site, or the Editor. Additionally, the main menu offers:

  • access to Quick find
  • undoing your last action
  • redoing your last action
  • exporting code
  • viewing keyboard shortcuts
  • activating CSS preview
  • getting assistance or providing feedback

Add panel — shortcut: A

The Add panel enables the incorporation of elements from the Elements tab or prebuilt layouts from the Layouts tab.

Configuration panel

The Configuration panel allows you to handle various configurations, such as Search settings and Backup settings, as well as Localization settings. In this section, you will also discover the User interface tab, where you can select your desired brightness setting for the Designer interface.

Assistance settings

Assistance settings give you tools to simplify your usage of the Designer.

  • Support and suggestions — enables you to explore Webflow help guides directly within the Designer. From here, you can also access the Webflow University guides, video courses, or the Webflow Forum. You can also submit feedback or a support request.‍
  • Keyboard shortcuts — displays keyboard shortcuts to enhance your design workflow in the Designer. You can also view these shortcuts by pressing Shift + /.‍
  • CSS preview — demonstrates the CSS created for the selected element on the canvas. This preview also enables you to copy the generated CSS for usage wherever you prefer.

Check panel — shortcut: U

The Check panel exhibits any prevalent accessibility-related issues on your site and gives recommendations for addressing them. Learn more about the Check panel.

Efficient search — shortcut: Command + E (on Mac) or Control + E (on Windows)

Efficient search is a search tool that accelerates your workflow and enhances your effectiveness as you construct your site in Webflow. Learn more about Efficient search.

Educational videos panel

The Educational videos panel provides a practical way to view all of Webflow’s complimentary video courses.

The workspace

The most extensive area in the Designer is called the workspace. This is the place where you can interact with the page and design in real-time. You are able to choose elements, reposition them, and adjust content directly on the page. Learn more about the workspace.

The upper section

The upper section offers another collection of display settings along with some beneficial tools for saving, publishing, and even exporting your site. Commencing from the left side, next to the menu button, and traversing across the screen to the right, you have the following set of tools:

  • Locale overview
  • Page indicator
  • Adaptive breakpoints
  • Team profile pictures
  • Status mode
  • Save status
  • Code export
  • Connotation
  • Preview
  • Sharing
  • Publishing

Locale overview

The Locale overview demonstrates which location you are currently viewing and/or editing. By clicking, the Locale overview dropdown permits you to choose and navigate to any secondary location(s) you have configured on your site. Learn more about Localization in Webflow.

Page indicator

The Page indicator reveals the page you are presently on. When clicked, the Page indicator unveils the Pages panel.

Adaptive breakpoints

The Adaptive breakpoint icons permit you to switch between different breakpoint views to preview and modify the appearance of your site on various device screen sizes. Learn more about adaptive breakpoints.

Team profile pictures

The Team profile pictures exhibit any colleagues collaborating on the site with you in real-time. This may be displayed as a team quantity (e.g., “2”) if you and your colleagues are working on different pages of the site. You can tap the profile pictures or the quantity to view more specifics about which pages your colleagues are designing or editing.

Status mode

The Status mode dropdown suggests whether you are currently designing or editing. Clicking enables you to switch between design mode and edit mode, or generate a page branch for designing without affecting the main site.

Save status

The Save status demonstrates when your work is being saved – indicated with a gray “rotating arrows” icon- and when your work has been successfully saved – indicated with a green “encircled checkmark” icon.

Your work in the Designer is automatically saved. You can also manually save your site by pressing Command + S in iOS or Control + S in Windows. Clicking the Save status will not save your site.

Code export

The Code export button enables you to export the code of the present site, prepared for download in a zip file. Learn more about code export.

Connotation

The “connotation” icon lets you enter comment mode to view and add comments on your design. Learn more about comment mode.

Preview

The Preview “play” icon allows you to switch between the preview and design modes of the Designer and enables you to preview how your site will appear and function when published.

Note: Preview mode does not display custom code embeds or apply custom code functionality to your site preview. Any custom code scripts or embeds will take effect when the site is published or exported. Learn more about previewing custom code.

Sharing

The Sharing button enables you to activate and share a preview link to the current page of the Designer with your acquaintances or the Webflow community when you require advice or design assistance. It also enables you to invite content editors to collaborate on your site.

With a read-only link, anyone with the link can open and manipulate the layout and design of your site in the Designer. Changes cannot be made to your site when it’s opened in read-only mode – this mode is solely used for troubleshooting and exploration purposes. Learn more about sharing read-only links.

Any content editors you invite can view your site and edit site content (e.g., text, links, images, products, and CMS content) or alter page settings in the Webflow Editor. Learn more about inviting content editors.

Publishing

The Publishing button enables you to select your publishing destination (i.e., which domains you want to publish to) and publish your modifications. Learn more about publishing.

The path indicator bar

The path indicator bar displays the hierarchical structure of the chosen element. It visualizes the element’s position among its parent elements (e.g., in the example below, the Body is the parent of the Section element) and allows for selecting any parent element by clicking its label in the bar.

The panels on the right-hand side

The trio of remaining panels located on the right side of the Designer interface offer intricate control over element styles, configurations, and actions:

  • Styling panel
  • Element configuration panel
  • Action panel

Styling panel — abbreviation: S

The Styling panel is the area where all available CSS properties for the selected element are manageable. Input or select values in the appropriate fields to instantly apply styles to elements on the canvas. Find out more about the Styling panel.

Element configuration panel — abbreviation: D

The Element configuration panel provides access to various settings pertaining to the presently selected element.

Action panel — abbreviation: H

The Action panel enables the creation and application of interactions to the selected element. Discover more about Actions.

Collaboration for multiple users

Several teammates can simultaneously edit content within the Webflow Designer while one team member focuses on designing and structuring the website. Transitioning design control among team members and tracking their locations within the site in real-time facilitates a smooth design process. Learn more about collaboration in the Webflow Designer.

Advantages of the online nature of the Designer

Webflow opts for an online application approach because we believe that web design tools should allow for designing directly in the browser with instant results. Here are a few more reasons supporting Webflow as a hosted program rather than a downloadable one:

  • Real-time visualization (WYSIWYG) — every action in Webflow reflects directly on the website’s HTML and CSS. What you see in Webflow mirrors what will be seen upon site publication.
  • Rapid updates and enhancements — being a hosted application enables swift development, testing, and deployment of new features and fixes, ensuring users always access the latest version of Webflow without manual updates.
  • Enhanced collaboration — given the trend towards collaborative web design workflows, an online platform simplifies team-wide access and website editing.

‍

Ewan Mak
Latest posts by Ewan Mak (see all)

Related Posts

ByEwan Mak
Updated on