How To Create and Edit Wireframes For Your Relume Site

By the end of this doc, you'll be able to:

1. Create wireframes from your sitemap sections
2. Add new pages with AI prompts or by hand
3. Edit copy, layouts, and elements without starting over
4. Reuse sections across pages with Global Sections
5. Preview your wireframes on different devices and share them for feedback

How Your Sitemap and Wireframes Work Together

Your sitemap and wireframes are two views of the same project. Each section in your sitemap has a title and description. Relume's AI reads these as a prompt to decide which wireframe component fits best. The clearer your section descriptions, the better the components the AI picks.

Your sitemap and wireframes are linked. Deleting a section in one also deletes it in the other.

How to Create Your Wireframes

Define Your Sections

1. Go to the Sitemap tab.
2. Click a section to edit it.
3. Enter a clear title for the section.

Add a Page

You can add pages from either the Sitemap tab or the Wireframe tab.

1. Hover between two pages, or scroll to the end of your page list.
2. Click the + button.

Build Out a New Page

Choose one of these two ways to fill your new page with sections.

Generate it with AI:

1. Enter a page-level prompt that describes what the page is for.
2. Confirm the prompt to generate the page's sections.

Build it manually:

1. Open the Insert panel.
2. Select the components you want to add to the page.

How to Edit Your Wireframes

Change Copy

1. Click any text on the wireframe.
2. Type your changes directly.

To have AI rewrite it instead:

1. Select the text or section you want to change.
2. Open the Agent panel.
3. Choose your AI assistant: Relume AI, Strategist, Designer, Copywriter, or Analyst.
4. Describe how you'd like the copy revised.

Change a Layout

Each component comes in several variants, which are alternative layouts of the same component type.

1. Select a component.
2. Choose a variant in the Edit panel.

To replace the whole component while keeping its copy:

1. Click the component's name.
2. Choose a different component from the list.

Remove an Element

1. Select the element.
2. Press Delete on your keyboard, or right-click and choose Delete.

Some elements are essential to a component. Relume keeps these in place, because removing them would break the layout.

Reorder or Add List Items

1. Hover over a list item, such as a feature card or FAQ entry.
2. Drag the item to its new position.

To add a new item, hover over an existing item and add one beside it.

Reset a Component

1. Right-click the component.
2. Select Reset Component.
3. Choose what to reset: everything, elements only, or copy only.

Choose elements only to restore the original layout while keeping your edited copy.

How to Reuse and Review Your Wireframes

Create a Global Section

A global section is a section you reuse across pages, such as a navbar, footer, or call-to-action. Using one keeps your components and copy consistent everywhere it appears.

1. Right-click the section.
2. Select Create global section.
3. Copy the section.
4. Go to another page.
5. Paste the section where you want it.

Preview on Different Devices

1. Find the device controls in the bottom-right corner.
2. Click a device to switch to that view.

Share for Client Feedback

1. Click Share.
2. Choose the permissions for the link.
3. Click to copy the link.
4. Send the link to your client.

To leave or review comments, press C to enter comment mode. Press Esc to exit.