Webflow Panel Flashcards
What is Webflow Designer?
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.
Add Panel
The Add Panel allows you to add elements from the Elements tab or prebuilt Layouts from the Layouts tab.
Shortcut: A
Components Panel
The components panel allows you to create components and add them to the canvas.
Shortcut: Shift + A
Navigator
The Navigator shows the element hierarchy on the canvas for the current page.
Shortcut: Z
Pages Panel
The Pages panel allows you to organize and manage your site pages and page settings.
Shortcut: P
CMS Panel
The CMS Panel allows you to create, view, and modify Collections and Collection Items.
Logic Panel
The Logic panel allows you to create, view, and modify automated workflows (also known as “flows).
Users Panel
The Users panel allows you to create and manage user accounts and access groups for members of your site.
E-commerce Panel
The E-commerce panel is where you can create and modify products and product categories.
Assets Panel
The Assets panel allows you to upload and organize assets (e.g., documents, images, and animations) for use on your site.
Settings Panel
Allows you to manage various settings, such as search settings and backup settings.
Site Activity Log
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.
Audit Panel
The Audit panel displays any common accessibility-related issues on your site and provides suggestions to address them.
Shortcut: U
Quick find
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)
CSS preview
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.
Page indicator
The Page indicator shows which page you’re currently on. When clicked, the Page indicator opens the Pages panel.
Breakpoints
The Breakpoint icons allow you to switch between different breakpoints to preview and edit the way your site looks on different device sizes.
Export code
The Export code button allows you to export the code of the current site, which is prepared for download in a zip file.
Share
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.
Publish
The Publish button allows you to choose your publish destination (i.e., what domains you’d like to publish to) and publish your changes.
The navigation breadcrumb bar
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.
The right panels
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
Style Panel
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
Element settings panel
The Element settings panel gives you access to various settings available for the currently selected element.
shortcut: D
