Style panel overview — Webflow UI tutorial

Style panel overview — Webflow UI tutorial


In the Webflow Designer, the style panel is
where we can visually manipulate our CSS controls. (It’s where we can control each aspect of
styling.) It’s also where we can create and manage classes
— and we can reuse these throughout the current page… and throughout our project. Classes are the basis of CSS. In fact, it’s what CSS stands for, hence
the C and the two S’s. Except “classes” has three S’s and CSS
stands for something else. But classes let you set styling on one element
(which has the “Super” class applied). And when you apply that class to other elements? They grab all that same styling. (The styling affects all elements with this
class.) Make a change to one? And it affects the other items on the page
that use that class, and it affects the other items throughout the project that use that
class. Super powerful stuff. So what does the style panel do? We just told you a moment ago. But it might be helpful to cover a bit more: The style panel lets you define the layout
of elements. We can use a ton of modern layout options
which let us specify size, spacing, positioning. We can style really specific, visual things. Like typography and more typography and background
and borders and shadows. It’s also where we can add states. Like hover. If we want to hover over something and have
it do something crazy? We can find all these controls in the style
panel. And! All these controls don’t just affect how everything
works on desktop. We can use the style panel to control responsive
layout as it pertains to each view: tablet, mobile landscape, mobile portrait, and Etch-a-sketch. We cover THIS in Intro to Breakpoints, and
we have a ton of content on everything we’ve talked about so far. But this video’s an overview of the style
panel. So let’s cover two specifics of the style
panel itself: The top section, which houses the selector
field, and we’ll talk about inheritance indicators. Let’s start at the top. When we select an element, we can see the
element type right at the top of the style panel. Under that is the selector field. From here, we’ll see the option to select
a class or a tag which will apply to the select element. As we said before, classes, of course, are
the basis for styling AND layout. We go much deeper into classes on a ton of
other content on Webflow University. But when we’re styling, we’ll see that class
or tag that applies to our current selection…right inside the selector field. We can even check inheritance by pressing
on the inheritance menu button — so we can see what’s affecting the current selection. Then we have the target icon. This will give us a page and project count
(how many times the class or tag is being used). Click on the target? Now we have an outline that lets us identify
the elements if they’re visible in the viewport. We can also click to collapse any of these
style sections. If you want to know more about all of them,
good. Because we have videos and guides on all of
them. The last thing to highlight right now is the
indicators we can already see on the screen. Orange…and blue. Orange indicators tell us that a value is
being inherited from somewhere else. If we click that orange indicator, we can
see exactly where the style is coming from. If our current class or tag (the current class
we can always see right on the top) — if that has its own value for something (if we’ve
already added or made a change)? That’s indicated in blue. So. The style panel is extremely powerful. We have the top section which contains our
selector field, which shows WHAT we’re styling. And regarding those style, we have orange
and blue indicators. Orange means whatever we’re styling is inheriting
a value from something else, and blue means we’ve added or styled something on the current
class or tag. And that’s a quick overview of the basic parts
of the style panel.

Related Posts

5 Replies to “Style panel overview — Webflow UI tutorial”

  1. hey #webFlowTeam Q: When will there be a new 'Style Panel' tutorial ? Specifically the new Layout panel, a lot has changed and been bundled, a walk-through would be helpful thanks 😉

Leave a Reply

Your email address will not be published. Required fields are marked *