Getting Started with Webflow: Part 2 — The Webflow Interface
Continuing our work from Part 1, we'll move straight ahead to learning the Webflow interface. After this is explained, we'll move to Part 3, where this post's tools will be applied to design our client's site. This article does take into account you know some basic web design concepts.
The Webflow User Interface
If you start a Blank Template, you'll be presented with Webflow's UI.
Although a bit overwhelming, Weblow’s UI is easy enough to get used to over time, and is split into six sections:
- The Webflow Icon, in orange at the top left corner.
- The Bottom Bar, in gray.
- The Website Canvas, left blank in the center.
- The Top Bar, in red at the top.
- The Left Sidebar, in blue on the left.
- The Left Panels Section, in purple on the left.
- The Right Panels or Toolboxes Section, in green on the right.
The Webflow Icon, The Bottom Bar
The Webflow icon will allow us to go back to the Dashboard, to access the Website Settings page, or to access the Website Editor after your site has been published.
The Bottom Bar will give us handy information regarding which section of the website we're currently editing in our HTML's structure tree. Think of it as a navigation bar for your website.
In Webflow, we work visually with our Website using our Canvas. All website changes or work we do in the Toolbars and Panels will be reflected in our Website. We can easily click an element in the Canvas, and it will be called upon in the Right Panel to edit its properties. This allows for a very visual workflow where we can see all the changes we make to our website in real time. Every change we make to our website will be saved automatically, so, as long as we have a trustworthy internet connection, no progress will be lost. We can toggle visual cues to better visualize our Canvas. We'll look at those in the bottom icons of the Panels Sidebar.
The Top Bar
From left to right, this bar will display three set of icons:
- A Navigation Text displaying this page’s name, and the Toggle Preview icon so we can view the website by itself on its left section.
- In the middle of the bar, we’ll see the four Device Icons to click and test how our site will look across different device resolutions (Desktop, Tablet, Mobile Landscape, and Mobile Portrait).
- And on the right section of the bar we’ll find the Undo and Redo buttons, the Changes Saved icon (which flashes green when website changes are saved, and red if there was a connection error), the Export Code button (that will open a pop up allowing us to generate a zip file with all HTML5, CSS, and image dependencies), and the Publish Site drop down menu (allowing us to choose a custom domain to publish a site).
The Left Sidebar
From top to bottom, we find two sets of icons:
- The top set of icons in the Left Sidebar will toggle different panels that show in the Left Panels Section: Add Element, Pages, and Dynamic Data. We’ll explain these panels below.
- The first four bottom set of icons will toggle visual cues that will help us design our website layout more efficiently. These icons allow us to Hide Element Edges, Hide Empty Elements, Show Light Grid Overlay, and Enable X-Ray Mode. The first two are self explanatory, but the last two are a bit special: Show Light Grid Overlay will allow us to overlay the grid layout we configure on top of our site, and X-Ray Mode will give us an overlay view that shows how elements are laid out on the page, much akin to the Inspect Element option of your browser.
- The second set of two bottom icons will give us access to Video Tutorials and the Help Menu. The Help Menu will expand to offer Help Center Documentation, Video Tutorials, Forums, a Keyboard Shortcuts pop up, and a Contact Us button that directs us to Webflow's support information.
For reference, here's all of Webflow's Keyboard Shortcuts.
The Left Panels Section
Webflow offers three Left Panels to work with:
Add Element Panel
The Add Element Panel allows us to drag and drop different website elements or components to our Canvas.
- In Layout, we can drag items that will modify our overall website layout. This will allow us to structure our website as we sketched it in our previous step.
- In Basic, we'll have access to essential HTML components like Div blocks, Link Blocks, Buttons, Lists, and List Items.
- In Typography, we'll be able to add Headings, Paragraphs, Text Links, Text Blocks, Block Quotes, And Rich Text (that can mix images and text).
- In Dynamic Content, we'll be able to add CMS connections to our site. If we define a website database, we'll be able to configure its elements here.
- In Media, we'll add Images and Video components to our Canvas. Images can be uploaded, and video links like YouTube URLs are needed for video embedding.
- In Forms, we'll have access to the many components used in web forms, like the Form Block, Labels, Inputs, Text Areas, Checkboxes, Radio Buttons, drop down Select Boxes, and Submit Form Buttons. Validations are easily configured when selecting items in the Settings Section on the Right Panel, which we'll explore below.
- In Components, we have more elaborate components like Tabs, Navbars, Custom Dropdown Menus, Sliders, Image Lightboxes, embeddable Maps, Background Videos, Custom Embeddables, and social buttons to Facebook, Twitter, and Google+ profiles.
The Pages Panel
The Pages Panel allows us to edit our website map. We can add new directories or pages with the top buttons, and upon creating a New Page, we are able to configure the page Slug, any SEO settings, our Meta Descriptions (here, you can configure all the Adwords or keywords you want web crawlers to find you on), or Open Graph Settings (the text that appears on social websites upon sharing). If you have any custom code you want to add to the site, say, to add Google Analytics, Zendesk, or the like, you can add it in this section.
The Collections Panel
Remember that Dynamic Content section in the Add Element section? This is where you configure all the data you want components to pull. Wether you want to create Blog Posts, set up a list of Client reviews, create a list of upcoming Events, or want to create a customized List, it's all done in this section. To learn how to create Dynamic Data in Webflow, check out the Webflow CMS course.
Example: The Right Panels Section or Toolboxes Section
The Right Panels Section is the easiest to get the hang of in the Webflow interface. Mainly because it is the contextual part of the designer.
In Webflow, there are six tools that we can use when inspecting an Element we've added to a site. For this example, we're going to select an Email Text Field inside a Form, in the Body section of a Blank Website.
As a bonus, let's check the Bottom Bar:
As you can see, the bar is showing the HTML tree all the way from Body to Text Field, letting us know we've navigated all these Elements to reach the selected item.
Now, let's go through the various Right Panels available in the Toolboxes Section.
The Style Panel
Upon clicking, the Style Panel will give us a very generic Text Field information, as we can see on the first image. I decided to give it a Style Class in order make it a little bit more interesting. After creating a Class, Webflow will give us all sorts of tools to modify the Element's position, Typography, Background, Border, Shadows, Transition & Transform, and additonal Effects. Class editing in Webflow is very flexible, and can be studied in their Using Classes and Adding Styles documentation article here.
The Settings Panel
The Settings Panel is pretty straightforward. It allows us to configure general settings for the Element in question. Settings can get a bit more complex for Dynamic Data, but for Basic Elements, properties are limited to its name, its values, auto focusing, placeholder texts, and the like. Be sure to play around with different Elements and their settings to understand Webflow's power in regards to Setting Element Properties.
The Navigator is also very straightforward if you're familiar with HTML. It allows us to move around the HTML elements in our website, looking at it as if we were looking at a directory structure in a File Browser. It highlights the current Element in blue, so you know exactly which element in the HTML tree is being selected.
The Style Manager Panel
Have you ever faced overlapping styles when working with CSS styles? The Style Manager Panel helps with that issue. It basically shows us a list of all the styles being applied to an Element, and allows us to modify or delete these on the fly. You can also click on the Clean Up button to remove any styles not being used by an Element or in the page. In the example above, I've clicked on the Clean Up button, to remove unused styles in my Website. Note: Remember you can always Undo at any time in Webflow if you make a mistake.
The Objects Panel: Symbols and Interactions
The Objects Panel is useful to configure behaviors that can be a bit more complex. In our example, we don't have any Symbols or Interactions set up.
In Weflow, we can create custom elements or designs that we can wrap to reuse across our website. These are called Symbols. There's a bit of general info on Symbols on the following video:
Interactions, on the other hand, are triggers we can set up on our site to configure special behaviors or actions. In order to create an interaction, we need to follow four steps:
- Set the initial appearance on an Element.
- Choose a Trigger for the interaction to fire.
- Configure steps for an animation.
- Apply interactions to desired Elements.
A pretty cool Webflow site on Interaction examples can be found here.
The Assets Manager Panel
Finally, The Assets Manager Panel is the easiest panel to use on Webflow. It's mainly a file manager for all image assets in your project (.JPG, .PNG, .SVG, etc.).
You can manually upload images using the Upload button, or you can simply drag and drop all relevant images to the Webflow interface. These uploaded images will appear on the Assets Manager.
Onward to Part 3
Now that we've went through all of Webflow's User Interface, we can move forward to Part 3: Our Example Project.
Note: Thanks to Paul Berg for a quick editing review!