In this article:
When you’re wireframing, you may want to create and customize page elements that you can reuse across multiple projects – or even within a single project itself.
It can save a lot of time to have a collection of templates for things like sidebars, headers, social media posts, team bios, alerts, tooltips, or pop-up modals like sign-up screens and payment forms.
With Moqups, any object or group of objects can be turned into a reusable object template, and added to the Templates Panel’s library.
In this article, we’ll provide an overview of the Templates panel, and show you how to create, search and add object templates to the page. We’ll also cover how to modify and delete these customized elements.
Other articles in this section explain how to create custom Team Template projects, and how to use our pre-made, curated Moqups Templates.
If you are looking to create reusable elements that instantly sync across all repeated instances of that element within a Moqups project, check out our section on Components.
Templates panel
To open the Templates Panel, click on the Templates tab along the left-sidebar of the Editor. This is where you’ll find your library of saved object templates, once you create them.
Here’s an itemized list of the panel’s functionality:
Create object templates
When you create a new object template, you can add it to either the Account or Project libraries within the Templates Panel. When you want to reuse it, simply drag or double-click the template to add it to a page.
To create an Object Template:
-
Select an object or group on the page of your project.
-
From the right-click Context Menu, choose the Save as template option.
or
Click the Create a template button at the top of the Templates Panel
-
In the Save as template pop-up, name the template, choose the Account or Project library as a destination, and hit Save.
-
Your newly created template will appear in the Templates Panel.
Search object templates
To search for an object template, first use the Library Switcher to choose between the Account and Project libraries. Then, enter your search term at the top of the Templates Panel.
Ctrl/Cmd
+ F
quickly activates the Search input from the active panel.
Add object templates to the page
Each template you add to a page becomes an independent object. This way, you can make changes to an individual template on the page without affecting the other instances of that template. This distinguishes Object Templates from Components.
From the Templates Panel, there are two ways to add a template to your page:
- Drag and drop a template to a specific place on the page
- Double-click on the template to have it appear in the top-left corner of the page
After you add a template to the page, it becomes an object and, just like all the other objects – stencils, images and icons – can be edited, formatted, and styled.
To quickly learn how to format objects, check out our article on General Formatting.
Modify object templates
If you need a slightly different version of an object template, start from the original template, edit it to suit your needs, and then save it as its own, new template.
To resave a template:
-
Add a template to your page.
-
Format the template to suit your needs.
-
Select all the objects that will make up your new template.
-
From the right-click Context Menu, choose the Save as template option.
or
Click the Create a template button at the top of the Templates Panel
-
In the Save as template pop-up, name the template, choose the Account or Project library as a destination, and hit Save.
-
Your newly created template will appear in the Templates Panel.
Move object templates between libraries
To move a template from the Account to the Project library, or vice versa:
- Navigate to the Templates Panel.
- Select the template you wish to move.
- Select Move to Account/Project library from the right-click Context menu.
Delete object templates
To delete a template:
-
Navigate to the Templates Panel.
-
Select the template you wish to delete.
-
Click on the Delete (trash) button at the top of the panel.
or
Select Delete from the right-click Context menu.