Discover the different functionalities of the Webflow designer: a detailed schema with all the elements you need to know during a development!
In today's article, we will take a quick tour of the different features present in the Webflow Designer.
Diagram of the Webflow Designer anatomy
1. Current Page
This first element allows us to find our way in our Webflow project and to know on which page we are!
2. Preview mode
The second element allows us when we click on it to preview our page. A useful feature before publishing your project. Be careful though, the javascript code and the code present in the project and page parameters only work on a published version.
3. Responsive
Webflow allows you to manage the responsive of your website with different breakpoints. We can access our tablet and phone versions to customize our design. We can also resize the display size to check the good adaptation of the design.
4. Read Only Link
This element allows you to share a read-only link of your project. Thus, the person who receives the link can see the inside of the shared project. Changes made to a read only link do not affect the actual project.
5. Publication
With this feature, we can publish our project to put it live on a webflow(io) version or on a custom domain name.
6. Element styles
This panel allows us to see, modify and apply styles to the element we have selected.
7. Element parameters
This panel allows us to see, modify and apply parameters to the element we have selected. We can also add attributes to the element in question.
8. Style Manager
This panel gives us the possibility to see all the classes we have created and to rename them. We can also delete all the classes that are no longer used to optimize the performance of our website.
9. Interactions
This panel allows us to manage the interactions / animations of our project.
10. Element breadcrumb trail
This feature is useful to see all the ancestors of our selected element. It shows the order of the elements assembled up to our selected element.
11. Support Resources
Through these different links, you can find written or video resources to help you in your project.
12. Webflow audit
Webflow has an internal audit feature. The tool shows you the different points to improve on your page. The audit is based on SEO and web accessibility principles.
13. Webflow Extensions
Unlike Wordpress, there is no native plugin system in Webflow. However, some agencies have developed chrome extensions to help you in the development of your project. You can find these extensions in the designer.
Examples of extensions:
14. Parameters
Access your project parameters in a few clicks.
15. Media File Libraries
Access all the media files you have uploaded.
16. Ecommerce
Create or manage the e-commerce part of your Webflow project.
17. Management of collections
Manage your collections or the items in your collections directly from the Designer by clicking on this icon.
18. Project pages
Access your project pages and their settings.
19. Navigator
Expand the development structure of your page and select the elements of your page easily.
20. Symbol Management
Create new symbols or look at the ones you have already created.
21. Adding elements
Add elements or layouts to your page with the drag and drop system.
That's it for a quick tour of the Webflow Designer. To learn more, here are some resources on more in-depth features:
.jpg)
