Beginner's Guide: Understanding Classes and Components in Webflow

·Apr 06, 2024 07:06 PM

Is there an introduction video/article with info on what classes, components, attributes, etc. are and how to edit them? I'm a total beginner and I don't feel like I know what to do after creating ok-looking wireframes in relume and bringing them to either figma or webflow for next steps.

8 comments

· Sorted by Oldest

Jack G.
·
Do you mean you're a total beginner with webflow, or with relume, or both? 😊
SaraLi F.
·
Webflow; I've spent about 3 weeks making a sitemap and wireframe in relume so not a complete beginner with this tool now. but when I watch videos there's so much jargon but no place explaining it, like attributes and classes and anything I google isn't simple enough for a non-techie like me to understand. This is important so that when I'm moving things to webflow I can fix/update things properly
Emily M.
·
Have you tried watching webflow university 101? They explain key concepts really well and its entertaining too
❤️1
Jack G.
·
I was about to suggest this - Webflow 101 on Webflow university. I would imagine it's the bare minimum you need to work with Webflow!
Blair
·
Try this: https://university.webflow.com/courses/webflow-101
Blair
·
A super simple explanation of Webflow is really an explanation of HTML and CSS.
Everything in HTML is a box of some kind
Boxes are defined using tags in HTML and are displayed as actual boxes in Webflow
Some boxes (or tags) are <h1> for heading 1 or <ul> for unordered list, aka bulleted list
You can style a box and its content by defining properties (characteristics), e.g. font = time new Roman or color = red
A collection of properties is called a class
Example, I can create a class called "margin-bottom" and define a bottom margin. Then every box or tag I apply that class to will have a bottom margin, e.g. some content that goes above an image and needs space below. So basically the thing that is defining how the content of your site looks is the classes you apply to your html. You can apply multiple classes to a box, e.g. margin-bottom and margin-large which will give the box a large bottom margin (you define the values for *large* using the Style panel on the right). Components are just elements that have been structured (using the elements panel on the left) and then styled using the styles panel. Example is a navbar, you want it to be the same on all pages so you design it and then create a component from it. Then you can add it to multiple pages and any updates to the component will be reflected on each page.
SaraLi F.
·
Thank you very much, fellow Lumers! Especially Blair for the crash course 🙂 (I'll be putting this on a post-it to keep handy!)
👍1
Blair
·
The videos will be way more helpful 😊 all the best getting started with Webflow. I knew html and css prior to,using Webflow. It is essentially a much faster way of writing the code you normally would write manually. And it is optimised and uses best practices. An awesome product. The trick is when you import or,paste in a Relume component all you're doing most of the time is applying your client's brand to it and adding your content. So you save even more time. Use Relume University to learn how to import components and style them initially using the style guide.
👍1

Beginner's Guide: Understanding Classes and Components in Webflow | Relume Community

Jack G.
·
Do you mean you're a total beginner with webflow, or with relume, or both? 😊
SaraLi F.
·
Webflow; I've spent about 3 weeks making a sitemap and wireframe in relume so not a complete beginner with this tool now. but when I watch videos there's so much jargon but no place explaining it, like attributes and classes and anything I google isn't simple enough for a non-techie like me to understand. This is important so that when I'm moving things to webflow I can fix/update things properly
Emily M.
·
Have you tried watching webflow university 101? They explain key concepts really well and its entertaining too
❤️1
Jack G.
·
I was about to suggest this - Webflow 101 on Webflow university. I would imagine it's the bare minimum you need to work with Webflow!
Blair
·
Try this: https://university.webflow.com/courses/webflow-101
Blair
·
A super simple explanation of Webflow is really an explanation of HTML and CSS.
Everything in HTML is a box of some kind
Boxes are defined using tags in HTML and are displayed as actual boxes in Webflow
Some boxes (or tags) are <h1> for heading 1 or <ul> for unordered list, aka bulleted list
You can style a box and its content by defining properties (characteristics), e.g. font = time new Roman or color = red
A collection of properties is called a class
Example, I can create a class called "margin-bottom" and define a bottom margin. Then every box or tag I apply that class to will have a bottom margin, e.g. some content that goes above an image and needs space below. So basically the thing that is defining how the content of your site looks is the classes you apply to your html. You can apply multiple classes to a box, e.g. margin-bottom and margin-large which will give the box a large bottom margin (you define the values for *large* using the Style panel on the right). Components are just elements that have been structured (using the elements panel on the left) and then styled using the styles panel. Example is a navbar, you want it to be the same on all pages so you design it and then create a component from it. Then you can add it to multiple pages and any updates to the component will be reflected on each page.
SaraLi F.
·
Thank you very much, fellow Lumers! Especially Blair for the crash course 🙂 (I'll be putting this on a post-it to keep handy!)
👍1
Blair
·
The videos will be way more helpful 😊 all the best getting started with Webflow. I knew html and css prior to,using Webflow. It is essentially a much faster way of writing the code you normally would write manually. And it is optimised and uses best practices. An awesome product. The trick is when you import or,paste in a Relume component all you're doing most of the time is applying your client's brand to it and adding your content. So you save even more time. Use Relume University to learn how to import components and style them initially using the style guide.
👍1