Webflow Panel

Question 1

What is Webflow Designer?

Answer 1

Lets you build your site structure, design the look and feel of your site, and add content, interactions, animations, and custom code to create fully functioning websites, landing pages, prototypes, presentations, and more.

In the Designer, you can manipulate HTML content, set CSS properties, and create interactions without writing a single line of code. As you build your website, the Designer outputs clean, semantic, web-ready code that web browsers will use to display your site. You can also export this code from the Designer into other applications.

Question 2

Add Panel

Answer 2

The Add Panel allows you to add elements from the Elements tab or prebuilt Layouts from the Layouts tab.

Shortcut: A

Question 3

Components Panel

Answer 3

The components panel allows you to create components and add them to the canvas.

Shortcut: Shift + A

Question 4

Navigator

Answer 4

The Navigator shows the element hierarchy on the canvas for the current page.

Shortcut: Z

Question 5

Pages Panel

Answer 5

The Pages panel allows you to organize and manage your site pages and page settings.

Shortcut: P

Question 6

CMS Panel

Answer 6

The CMS Panel allows you to create, view, and modify Collections and Collection Items.

Question 7

Logic Panel

Answer 7

The Logic panel allows you to create, view, and modify automated workflows (also known as “flows).

Question 8

Users Panel

Answer 8

The Users panel allows you to create and manage user accounts and access groups for members of your site.

Question 9

E-commerce Panel

Answer 9

The E-commerce panel is where you can create and modify products and product categories.

Question 10

Assets Panel

Answer 10

The Assets panel allows you to upload and organize assets (e.g., documents, images, and animations) for use on your site.

Question 11

Settings Panel

Answer 11

Allows you to manage various settings, such as search settings and backup settings.

Question 12

Site Activity Log

Answer 12

The Site Activity Log gives you and your teammates valuable visibility into the most important design changes made to your site. If logs publish activity, backup creation and restoration, page creation, deletion, duplication, and renaming, and any changes to classes, components, and/or custom code.

Question 13

Audit Panel

Answer 13

The Audit panel displays any common accessibility-related issues on your site and provides suggestions to address them.

Shortcut: U

Question 14

Quick find

Answer 14

Quick find is a search tool that helps you speed up your workflow and boost your efficiency as you build your site in Webflow.

Shortcut: Control + E (on Windows)

Question 15

CSS preview

Answer 15

Shows the CSS generated for the selected element on the canvas. This preview also allows you to copy the generated CSS to use wherever you’d like.

Question 16

Page indicator

Answer 16

The Page indicator shows which page you’re currently on. When clicked, the Page indicator opens the Pages panel.

Question 17

Breakpoints

Answer 17

The Breakpoint icons allow you to switch between different breakpoints to preview and edit the way your site looks on different device sizes.

Question 18

Export code

Answer 18

The Export code button allows you to export the code of the current site, which is prepared for download in a zip file.

Question 19

Share

Answer 19

The Share button allows you to enable and share a preview link to the current page of the Designer with your friends or the Webflow community when you need advice or design help. It also allows 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 only 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 change page settings in the Webflow Editor. Learn more about inviting content editors.

Question 20

Publish

Answer 20

The Publish button allows you to choose your publish destination (i.e., what domains you’d like to publish to) and publish your changes.

Question 21

The navigation breadcrumb bar

Answer 21

The navigation breadcrumb bar shows you the hierarchy of the selected element. You can see where the element is located inside other parent elements (e.g., in the image below, the Body is the parent element of the Hero section) and select any of its parent elements by clicking on its label in this breadcrumb bar.

Question 22

The right panels

Answer 22

The remaining panels on the right side of the Designer give you extremely granular control over your elements.

Here, there are 4 major panels:

Style panel
Element settings panel
Style manager
Interactions panel

Question 23

Style Panel

Answer 23

The Style panel is where you can access all CSS properties available for the selected element. You can enter or select these values in their appropriate fields and the styles will instantly be applied to your elements on the canvas.

Shortcut: S

Question 24

Element settings panel

Answer 24

The Element settings panel gives you access to various settings available for the currently selected element.

shortcut: D

Question 25

Style Manager

Answer 25

The Style manager displays a complete list of classes, combo classes, and tags you’ve created or edited on your site. It’s a quick way to rename or even clean up any styles that aren’t in use anymore.

shortcut: G

Question 26

Interactions panel

Answer 26

The Interactions panel allows you to create interactions and apply them to the selected element.

shortcut: H

Question 27

Why the Designer is an online app

Answer 27

1. The Webflow Designer is an online app/hosted program because we believe that web design tools should let you design in the browser and immediately reflect the results. Here are a few more reasons why Webflow is a hosted program rather than a downloadable program:
2. What you see is what you get (WYSIWYG) — everything you do in Webflow has a direct effect on the HTML and CSS of your website. What you see in Webflow is always what you’ll see when you publish your site.
3. Pushing updates and improvements is fast — as a hosted app, we can develop, test, and push new features and bug fixes to our servers in minutes. That way, everyone is always running the latest and greatest version of Webflow without the need to manually install updates. ‍
4. True collaboration — with web design workflows becoming more collaborative, having an online platform makes it easier for entire teams to access and edit a website.