Community forum for knowledge and support

Updated last year

Modifying and saving a new component in relume

At a glance

The community member is trying to modify a component in Relume and save it as a new component. They copied the component into a Webflow page, made the changes, and then tried to paste the modified element into the "create component" page in Relume. They are unsure what image to upload on that page. The community members provide guidance, explaining that the image is optional and can be any image the user wants to use as a preview for the component.

The community member then runs into another issue where they cannot find the new "test" component they created in Relume after modifying the "top navigation menu" in Webflow. The community members suggest that the user cannot copy the modified component back into Relume, and instead should use Figma for design work and then integrate the designs into Webflow for development.

The community member summarizes their understanding of the process: start with sitemap and wireframe in the Relume AI builder, move to Figma for design, and then have a WordPress developer build the website. The community members confirm that this understanding matches their recommendation.

Useful resources

Hello. I want to change a component and save it as a new modified component in relume.

I copied it into a webflow page and then modifying it there. Then I copy the modified element in webflow and paste it into the 'create component' page where it says 'paste your component here'. What image should I upload on that page? Stuck, can't get this to work.

If this is a beginner question, could you please point me to the right direction?

C
M
M
9 comments

that image is optional. Its what will show up as a preview when you view your component in your library. Its nice to have but not something I have used a ton mostly because its not that easy to do. But you can essentially upload any kind of image you want there.

Thanks for your explanation.
I want to remove the drop down arrow ‘v’ next to ‘About Us’ in a ‘top navigation menu’.
So here is what I did:

  • Copied my ‘top navigation’ menu from relume into a webflow page.
  • Removed that down arrow next to ‘About Us’.
  • Then I created a new component in relume – copied the modified ‘top navigation’ menu from webflow into where it says ‘paste your component here’. I named the component ‘test’.
  • Now when I attempt to add the new component ‘test’ as a section in my wireframe in relume, I can’t find my new component.
Stuck again, really appreciate your guidance.

Are you in Figma or Webflow?

My screenshot was from our website and is typically used for Webflow.

Figma has its own way of maintaining components.

Knowing which tool you are in and trying to make edits will help to give better direction. Happy to help!

I used the relume AI site builder to make a wireframe for a website. Then I wanted to modify the 'top navigation menu component'. I could not figure out how to do it directly in relume

So I copied the 'top navigation' menu from relume into a webflow page in order to make the changes there and copy back to relume as a component. Please let me know if I have confused the issue even further. Thanks much.

yeah you won't be able to copy back into the Relume site builder. Basically once you've generated the sitemaps and wireframes and the copy, you export to Figma, you'll basically be doing your work from that point on - not back and forth. Once you get through design and you are ready to do development, you could go to the site builder to copy entire pages into webflow to build quicker and then apply your designs from Figma to Webflow.

Here is a video I did of the full walkthrough - its an hour and 30 minutes long...rough draft. It might give you some insights as well. https://relume.notion.site/Using-the-Relume-Site-Builder-Full-Walk-Through-409e549d44594f0986c7b3453d93a5e4?pvs=4

That video was very clear and very helpful. I now better understand the role of the AI builder. So here is my plan:
- We will start sitemap and wireframe in the relume 'ai builder'.
- Move to figma for design.
- Get our wordpress developer to make the design into a working website.

Does that match with your understanding of the role that relume should play in our process? Thanks very much for all your help.

yep - that matches up - let us know if you have any feedback with this process as you start to dig into it - we are always interested in hearing others workflows!

many thanks for all your help :)

Add a reply
Sign up and join the conversation on Slack