How To Use Webflow Designer Mode | A Beginner's Guide

‍

Webflow is a visual builder, and the interface that allows users to do so is Webflow Designer. Webflow Designer is both for developers and designers alike. In fact, the power of no-code is one of the top reasons why we use Webflow, and you should too.

‍

If you're looking for a Webflow Designer tutorial, keep reading as we give a brief overview of how to use Webflow and all controls available to you in Designer. 

‍

What Designer Does

Designer helps you build your web pages, landing pages, and eCommerce stores with drag-and-drop capabilities. You can substitute writing full-blown HTML, CSS, and JavaScript code with the Webflow Designer's functionalities because the Designer Webflow generates error-free and production-ready code in the background corresponding to your actions in the Canvas, your work area.

‍

Supported browsers 

Webflow unofficially supports Designer on all modern browsers, But the official support is limited to the latest, evergreen versions of Chrome and Safari. Web Flow Designer isn't compatible to be used on IE, Edge, iOS Safari, and Chrome for Android.

‍

However, certain browsers may offer limited support based on certain design features. For instance, CSS transitions will render properly on android mobiles only if they run Chrome version 108, released in December 2022. 

‍

Supported screen resolutions

Designer supports a minimum screen width of 1268px, which is the sum total of the left sidebar, Canvas, and right sidebar. 

‍

How to Access Designer Mode 

There are three straightforward ways to access Designer- 

1. Click on your project thumbnail within the Dashboard.
2. Click on Designer from Project Settings in the upper toolbar of the project.
3. Choose Designer from the Menu button of the Editor.
   ‍

For those looking to dive deeper into the Editor functionality, you can also check out a Webflow Editor tutorial, which provides a step-by-step guide on using the Webflow Editor for making live updates and content changes on your website.

‍

Overview of Designer Anatomy 

Designer consists of Canvas, where you can manipulate all CSS, HTML, and JavaScript components of your project. Besides, it consists of toolbars and panels that allow additional functionality and access. Here's a detailed breakdown of the Webflow Designer's anatomy.

‍

The left toolbar and panels 

• Main menu

When you click the logo, you can navigate to the Dashboard, Editor, or Project Settings of your current project. 

‍

• Add elements panel

You can add all elements that you need to build your project, like typography, components, CMS, Media, and so on, from the panel. 

‍

For example, if you want to include a Form, you can access all possible form elements in the Elements Panel itself. You can use Form blocks, Labels, Input fields, Text areas, Checkboxes, Radio buttons, Form (Submit) buttons, etc., to create a form of your choice. 

‍

The element will be added relative to the selected element and default settings. But you can change the position by dragging it on the position you want to add your element.

‍

• Symbols panel: 

The symbols in Webflow have now evolved into Components. Components help reuse the predefined elements and their children for scalable and more efficient code. 

‍

Webflow users can create a component or make any element to be a component. Any recurring elements like nav bars, cards, or buttons can be created as components to be reused across the site. You simply need to drag the component and drop it onto the desired web page. 

‍

It's also possible to alter all the instances of a component if you edit any instances of the given component. However, if you need to override a certain component specifically, you can do it through Properties.

‍

Webflow allows you to modify a component in 2 ways with the help of the categories - Visibility and Content Properties. Visibility controls whether the component instance is visible or hidden. While the Content Properties support -

• Text
• Image 
• Video
• Link
• Rich Text

Finally, you can also unlink an instance from the component if you want to so that changes in linked instances don't reflect in the unlinked one. 

• Navigator panel

For easy access, you can pin and resize the Navigator Panel on screen sizes beyond 1440px. You can use Navigator to select visible and hidden elements on Canvas. Plus, you can also see the nested elements or hierarchy of a given page in the Navigation panel itself. It's also possible to move the elements and alter their hierarchy right from the Navigator

• Pages panel

Pages Panel allows the creation of new pages and folders on your website. You can create around 100 pages depending on your membership level. You can edit all Page Settings from the panel, like SEO settings, Open Graph settings, and Search settings, or add custom codes. You can duplicate, delete and even organize pages from this panel. However, organizing pages will likely change their URL paths, so be sure to set a 301 redirect as well.

‍

• CMS panel

Webflow's modern CMS allows dynamic content using containers called Collections. Collections contain items that are represented by fields. This field can be custom-created to contain any data you need. 

‍

You can build connections in 2 ways - Collection Pages and Collection Lists. You can add data one by one or import CSV for a bulk update. Your team can collaborate by editing content right from the Designer or even the Editor. 

‍

• Ecommerce panel

The eCommerce panel allows the creation of an eCommerce store by selecting a template or starting from scratch and enabling eCommerce. You can automatically access two dynamic collections, Product and Categories.

‍

Now, you can either manually add the products or do it through integrations with Zapier or similar tools. Webflow offers great control over eCommerce stores by allowing users to create custom product fields and customized check-out pages etc.

‍

The panel also facilitates the entire management of the online store, like creating ads, managing orders, setting primary currency, and so on. 

‍

• Assets panel 

The assets Panel allows you to upload assets in the project and delete them. You can also sort assets and alter the view of the Asset panel. The assets can be any video, image, or Lottie files that you need on the page.

‍

Webflow offers support for various image formats like JPG, PNG, WebP, etc. It also supports several documents like PDF, ODT, CSV, and so on. However, only JSON files are supported for Lottie integrations. 

‍

• Settings panel

Access various settings like Backup settings or Search settings. 

• Audit panel

The Audit panel shows how your site can be more accessible before you hit Publish. It shows the missing Alt texts, non- Descriptive links, duplicate element IDs, or missing headings so that people using screen readers can interact with websites easily. 

‍

• Quick Find search tool

An inbuilt search tool in Webflow that allows you to search for anything to speed up your development. 

‍

• Video tutorials panel

If you're stuck and want to have a look at the video tutorial, they are available in the Video tutorials panel right away. 

‍

• Help settings

Again, all the help is available to you at all times. Help settings facilitate easy access to -

1. Help and feedback: You can resolve your queries by looking in Webflow forums, Webflow University guides, and the video library. You can also send feedback to the Webflow team and ask for feedback. 
2. Keyboard shortcuts

You can speed up your work with keyboard shortcuts in Webflow. You can see all the shortcuts available to you by pressing Shift + /

3. CSS preview

You can preview the CSS file generated by Webflow in this mode. You can also copy the code to use it elsewhere.

‍

The canvas 

Canvas is the center stage where all elements are accessed in the Designer. You can manipulate these elements on a granular level using Canvas. 

‍

• Selection

You can select any element on Canvas by selecting it by mouse. On the left of the element highlighted boundary, you will find the element label. On the top right, you will find the settings of the selected element by clicking on the gear icon. 

‍

• Hierarchy

You can see the hierarchy of the selected elements in multiple ways. One way to do so is by selecting the label on the top left to reveal the parents and grandparents of an element. Similarly, one can access the hierarchy by right-clicking on the element and seeing the hierarchy from the context menu. Another means to see hierarchy is through the Navigation breadcrumbs bar or by pressing the arrow Up on the keyboard. 

‍

• Movement

You can also move and reposition your elements around within the Canvas. Once you select it and move around, the blue indicator will show the siblings, and the orange one will show the parents. The position will depend on the display settings of the project. 

‍

• Preview

Preview mode allows you to see your web page as it was published on the web. If you enable preview mode, the rest of the Designer will be hidden. The only exception is the top Bar, but if you select the up arrow, it will go away too. However, you cannot modify anything on your page while in preview mode. You can press escape or click back the Preview icon.

‍

The Top Bar 

Top Bar provides multiple helpful tools for your use. They are listed below, starting from left to right. 

‍

• Page indicator

The page indicator shows which page you are in, for example, About us or Contact Us.

‍

• Preview

A toggle button that helps you visualize exactly how your web page will look post-publishing.

‍

• Breakpoint button

Webflow designs are responsive to all screen sizes because you can see how your designs adapt to each viewport. Breakpoint buttons allow you to switch screen sizes and see how designs respond and edit accordingly. The default view is the desktop view, and six other screen sizes are accessible as well.

‍

• Undo and Redo

You can undo or redo your last action in the Designer.

‍

• Save

Clicking on the Save button will NOT save your work, as it's automatically being saved. When in progress, the saving is shown with ellipses, and when done is shown by a green check mark. You can use Ctrl+S or CMD+S to manually save your work.

‍

• Export code

You can export the code and save it as a zip file. 

‍

• Share

Share allows you to share a preview link with other team members and clients. But it allows your original work to remain intact in read-only mode. While if you want others to contribute, you need to invite them to collaborate. 

‍

• Publish

You can choose to publish your work to your domain or subdomain.

‍

The bottom navigation breadcrumb bar 

The bottom navigation bar follows the Breadcrumb principle, and it shows the hierarchy of your current/selected element path. Webflow breadcrumbs help in SEO and easy navigation. 

‍

The right panels 

The right panel facilitates fine-tuning of each element on the page so you can have greater control over how a single element on the page behaves.

• Style panel

It gives you the ability to stylize your elements by modifying CSS properties in the panel while the instant changes are reflected in Canvas. 

‍

• Element settings panel

Handy access to modifying the settings of the selected element. 

‍

• Style Manager

It shows the list of all classes and combo classes that you have created in the project. It also allows you to delete the ones, not in use. 

‍

• Interactions Panel

You can create and apply interactions to the selected element in this panel.

‍

Multiple User Collaboration

Webflow allows multiple contributors to work in the Editor simultaneously. But the last edit can overwrite the preceding ones. 

‍

However, with recent developments announced at Webflow Conf 2022, even multiple designers can work simultaneously using Page Branching. This facilitates accelerated development and coordination. 

‍

Why Online Mode

The Webflow team chose Designer to be a hosted platform for streamlined and fast development. They believe this way, they can build and ship fast, and the same is true for users too. Online mode allows for active collaboration from all stakeholders. 

‍

The biggest advantage is WYSIWYG, or What You See is What You Get. So, whatever is visible on the Designer mimics what you will see after you publish on the browser.

‍

Conclusion 

The designer is at the core of the drag-and-drop feature of Webflow. Everything you need to build impeccable web solutions and eCommerce stores is available within the interface. 

‍

However, Webflow has unveiled new features lately. If you are looking for a credible team on all things Webflow, stay tuned with us for recent updates.

‍