Key takeaways

Review key takeaways from videos and lessons within this section.

The Webflow Dashboard

The Webflow Dashboard is your central hub for managing all your sites and Workspaces. From the Dashboard, you can create and organize sites and adjust site settings.

[IMAGE]

Intro to the Webflow UI

No matter your role in Webflow, there are a few key areas of the UI to know. The top bar is where you can see what page you’re on, access Webflow’s CMS, and more. The left toolbar is where you add elements to your site, among other things. The visual canvas is where you build and lay out your elements. The right panel is where you add CSS styling, interactions, and more.

[IMAGE]

Additional resources

Check out additional resources related to lessons in this section.

• Dashboard
• Intro to Webflow
• Webflow canvas overview

Practice activity: Explore the Webflow UI

It’s time to put your knowledge into action! Practicing what you’ve learned is the best way to reinforce your skills, build confidence, and understand how Webflow works.

In this activity, you’ll locate key areas of the UI so that you are comfortable navigating Webflow.

Instructions

1. Create or open a site - From your Dashboard, hover over the thumbnail of any of your sites and click Open site. If you don’t have any sites yet, clone a site or click + New site and follow the prompts.

2. Identify which mode you’re in - In the top left corner, use the dropdown to identify which Mode you’re in. Modes determine what you can see and do on the site.

[IMAGE]

3. Locate CMS Collections - In the top left corner, next to Modes, locate and click the CMS Collections icon. Explore any Collections, then click the icon again to return.

[IMAGE]

4. Identify which page you’re on - In the top center, in the Context bar, click the Page icon to see pages in your site. Optionally, click to navigate to another page.
5. Change the breakpoint - In the top center, in the Context bar, to the right of the Page icon, click the Breakpoints icon. Breakpoints support responsive design. Choose and click any breakpoint.

[IMAGE]

6. Locate the Add elements panel - Click the plus sign in the top corner of the left toolbar to access the Add elements panel. Browse the HTML elements you can add to your site. Note: you must be in Design mode to access the Add elements panel.

[IMAGE]

7. Locate the Style panel - Click directly on any element already added to the canvas to reveal the Style panel on the right. Browse the CSS properties you can set for the element. Note: you must be in Design mode to access the Style panel.

Keep going

Feeling confident? Here’s what you can do next:

• Switch modes - Return to the Modes dropdown referenced in Step two above and switch to a different mode, such as Build. Note the similarities and differences between various modes.
• Add an element - Return to Design mode and open the Assets panel referred to in Step six above. Choose any element and drag it onto the canvas.

Ready to learn more? In this next course, you'll learn about collaborating with your team in Webflow. Click Complete & continue in the Course progress box on the right to move on.