Relume Community Icon

Join the Community

Home

Announcements
General
Issues
Showcase

Powered by Tightknit

Tips for Structuring Your Relume/Webflow Project Correctly | Relume Community

Getting Started

Getting Started

Tips for Structuring Your Relume/Webflow Project Correctly

·

·

I’m about to start my second Relume/Webflow project, and I want to make sure I begin this one correctly. I don’t think I started my first project in the best way, unfortunately. For this new site, each page will follow the same basic structure—nothing fancy—just different copy and images in each section. When I clone the style guide into Webflow, I plan to open the Relume app and bring in only the components I know I need, rather than copying from the full Relume wireframes. Here’s where I get a bit confused: when I bring components into Webflow, I can see them listed as sections in the Navigator. Do I need to rename each section in the Navigator to something more descriptive (e.g., section_about-us)? Should I keep the original Relume component number for reference, or is it safe to delete it? I want to avoid doing anything that could mess up the classes or styling from Relume. I will add the Chrome extension and turn on class-sync so I am aware of that. I’ve read a bit about the Client-First folder and naming structure, but honestly, that left me more confused. Thanks in advance for any help or clarification!

22 comments

Matt J.
·
·
JK unfortunately you won't be able to cherrypick sections using the Relume webflow app anymore - its basically an entire page only. You could still copy/paste from site builder into Webflow though. As for naming - I would say its best to rename the sections to match the site. I know you said you read about Client-First and folders and that made it more confusing. If you have specific questions around that, I can try to help get you across the finish line with the understanding there. Basically you'll also want to install the Finsweet chrome extension which has the folders feature in it that will make renaming sections a lot easier and quicker to do.
🔥1
JK
·
·
Thank you, Matt. I will give that folders feature another read over. If I have any questions I’ll reach back out. Thanks again.
JK
·
·
Matt J. Any safe/simple way to just rename the sections of the site without using this chrome extension?
Matt J.
·
·
Hey JK - I did this quick loom (6 mins) - to show you how I use the finsweet folders extension to rename classes. Let me know if this was helpful or if you have any specific questions. https://www.loom.com/share/ad229931ba7542168f74230f44a43142?sid=25da1979-3603-49cc-a600-4ebf0bacd1d7 So I see that you have 4 sections that are identical but I'm assuming they'll be unique classes. The only path forward there would be to wrap 3 of those sections into a div and cut it out and paste them into a new project. Then follow the renaming, and then paste one of those sections back into this project and repeat that process until all of the sections are renamed. Hope that makes sense - if not, I can do a real quick loom on that as well.
JK
·
·
Thank you! I’ll take a look at this when I’m back at my office. I appreciate it.
JK
·
·
Hey Matt J. that was really helpful. Thank you,
Matt J.
·
·
Okay cool - glad I could help!
Crystal S.
·
·
🚀
JK
·
·
Matt J. Did I do this correctly with the two sections that share the same component? I brought in the component, renamed it, and then brought it in again and renamed that one as well. On the banner at the top I renamed it and I have it outside of the wrapper…just checing to make sure that is also correct. I need it to go above nav.
Matt J.
·
·
JK yep - nailed it!
JK
·
·
Matt J. Whew! Thanks for that video it really helped me understand the folders/renaming.
💪1
JK
·
·
Matt J. Hi Matt, I just have a quick question. Now that the Folders option is grayed out in the Finsweet extension, I want to make sure I’m renaming my components correctly so that I can avoid any conflict or mess up any of the original Relume styles that are attached to the component I need to use. Without the Folders option now when I bring in a component and double-click to rename the layout name to something more descriptive, it only changes the section name—not the other instances of the component. I assume this would cause a conflict if I styled it and then needed to bring the original component back in from Relume. I watched a YouTube video where someone used the Style Selector in Webflow to search all instances of a component (like “Career1”) and renamed each one manually. Is that the best approach for renaming components now that the Folders option isn’t available? I’ll attach a screenshot as well. Thanks!
Matt J.
·
·
JK yep that would be the approach I would take. Gosh, I'm still in shock that this has gone down this way...I'm going to see if there's anyway we can solve for this pain at all on our end. Where are you copying your components from again?
JK
·
·
Matt J. When I am in Webflow I have the Relume Chrome extension installed so I click on them Relume icon and I search for the component I need and copy it from there. I hope they bring the folders back soon.
Matt J.
·
·
JK okay got it - are you also generating any wireframes within the Site Builder by chance or no?
Matt J.
·
·
yeah its not looking great - they said they are "starting on development this year" so....we're probably months away.
JK
·
·
Matt J. I do create the basic wireframes in Relume just to show me what sections I’d like to use for each page but I don’t copy them in from there. I always just go to the Relume app inside Webflow and then search by layout name and copy it in from there.
Matt J.
·
·
okay got it - and is your goal mostly just to get rid of the Relume component names like layout228, etc? If you copied a section from the Relume Site Builder and pasted it into Webflow and it was renamed to the page + section, rather than the component name, would this be enough for you?
JK
·
·
Matt J. I’m new to using Relume and Webflow so forgive me if I am doing this all wrong, but from what I’d read I need to rename the layouts because if I just styled layout228 and didn’t rename it then I would be messing up the original relume styling attached to that layout and if I copied it back in I would get a conflict. This may not be correct but I know when Folders was working what I would do is look at my wireframes and see that I need layout228 for a certain section. In webflow I would go to my Relume app search for that layout and copy that layout in and with Folders I would rename the layout to like section_about. Like I said, I may be going about this all wrong. It’s been a learning curve for sure.
Matt J.
·
·
JK nope sounds like you are doing this correctly and have the correct understanding. I was just wondering if you had a strong opinion about what the class names were versus just having them be renamed to avoid the conflicts you are talking about and it sounds like you just want to avoid conflicts. So at one point, when you were to copy/paste a section from site builder to webflow, the section would come in renamed, but we've had an outstanding bug for awhile now that stopped that from working - but if we fixed this bug, this would, in my opinion, eliminate at least 80% of the need for Finsweet folders in the first place. Do you agree?
JK
·
·
Matt J. I just rename to avoid conflicts to be honest.
Matt J.
·
·
yeah makes sense