Transcription
Whether you're designing, developing, or supporting your team in Webflow, there are a few key areas you need to know. But in this overview of the UI, we're going to look at the top bar, the left toolbar, the canvas, and the panels to the right. Let's start at the top.
Here at the top left, we can see what mode we're in, design or build, and then there's edit mode. So depending on what your role is in the workspace or on this specific site, you'll have access to different things so that you can be empowered to do your part in Webflow without the fear of messing things up. Right next to it, we've got our CMS, which gives us access to our collections, all our dynamic content. Next to it, we have our Insights tab, where you can set up, analyze, and optimize. But let's click out, take a sip of water, and move on.
Then we have our preview button, a quick way to interact with the site as if it was fully published. Okay, in the center, still at the top, here you might have quick links or quick access to Webflow Optimize and Localization settings, along with our locales. And in this dropdown, we can see and jump to pages on our site. Notice what happened when we navigated to this page or even when we clicked the locale a second ago, that's the context bar. The context bar displays information based on what you're working on. This could be anything from the component you're using to which breakpoint you're designing for, among other things. Speaking of breakpoints, in the dropdown next to it, we've got access to all our breakpoints: desktop, tablet, mobile landscape, and mobile portrait, and the option to add a larger breakpoint. But we can also access the breakpoints visually in the toolbar at the bottom of the canvas.
When we move to the right side of the top bar, you may have access to analyze mode, where you can view data insights based on visitor behavior. Next, you'll find the comments panel, where you can review feedback shared by collaborators. We have the share site option, where you can share a read-only link of the site with anyone, and all the way here to the top right, we can go and publish our site to make our site live for everyone to see. No need to worry about FTP, PFT, APC, TFN, or any complex hosting. You can publish your site right away. That's the top bar.
Let's move over to the left toolbar. At the top here, we'll click in and we have a few options. We can access our dashboard, our current workspace, where we find any sites we're working on, the settings for your site, this current site, and a few other things, like the option to export the code for your entire site. But let's click out and look at the other panels here on the left toolbar.
In our add elements panel, we can add things like a button, a video, a form, and other elements that will make up our site HTML, the structure. We can also access libraries for different layout options we can use as starting points for parts of our page. We have our pages panel, where we can organize and manage page settings for SEO, Open Graph, and custom code access to this specific page. Then there is the navigator, a panel that gives an overview of our page structure and hierarchy. Components are where we can access all our pre-built elements and layouts that we can reuse throughout our site to keep things consistent, like a nav bar or a footer. We also have our variables panel, a collection of reusable design values that allows you to apply consistent styles across your project and update them globally. And right below, we can see all our style selectors, classes and tags, and where they're used on the page. And of course, we have the asset manager. From here, we can upload and organize multimedia assets we use in our site.
Okay, that's not all. We also have our apps, where you can access and install all the latest and greatest apps for you to use on your site. Then we've got the settings panel, two main things to point out here. Backups is where you can access past versions of your site, and localization, where you can manage different language versions of your site. And down here, we also have help, the audit panel, where you can identify and fix accessibility issues, a quick find button to add or find anything you need. Personally, I use the shortcut command E to open this, and at the very bottom, there's access to video lesson content. That's the left toolbar.
Let's shift over to the canvas, sort of the main area. Here is where you put your site together. It's where you interact with all of the elements on your site. We can edit text elements by just double clicking on them. We can move elements around by just clicking and dragging. And as we do, we can even view our element hierarchy in the navigator, as well as at the bottom here. We also have canvas settings, which provide a number of options and tools to optimize your design process, and even simulate your site in different scales, vision previews, and so on. The layout of everything we build on the canvas follows the box model. This gives us tremendous flexibility to develop powerful, responsive designs across our different breakpoints, views for different screen sizes. We can click on those breakpoints here, or we can test different widths by clicking the edge of the canvas and dragging it throughout our page. That's our canvas area.
Let's wrap it up and look at the right panel. With an element selected on the canvas, let's go over to the style panel. Another important area which gives us extremely granular control of the styling and layout of our elements. Padding, size, color, effects, those are just a few options. When we style elements, and if we open up the CSS preview here, we can see the CSS for the selected element. And if we change it, we see that we're changing our CSS values in real time. Here, we also have our settings panel, which lets us change element-specific settings such as the element ID, custom attributes, and search index setting. And finally, the interactions panel, which lets us create custom animations and interactions based on triggers you can define.
We just covered a lot, but that's it. Let's recap real quick. Top bar shows where you are and gives you access to key things like the CMS and publishing. Toolbar on the left, including the add elements panel, which lets us access all our elements. The canvas, which has all the content on the page. And finally, the panels to the right, including the style panel for visually manipulating our CSS. And that's a brief overview of the different areas that make up Webflow's website experience platform.