FAQ Submit a request Log in
  1. Moqups Help Center
  2. Working with Moqups
  3. Pages

Articles in this section

    Create & Format

    Also in this section

    Create & Format Pages

    In Introduction to Pages, we provided an overview of the Pages Panel and of the Page Settings section in the Format Panel.

    This article will show you how to create, name, format, search, navigate, duplicate, copy and delete your pages.

    The next article, Organize & Folders will explain how to reorganize, nest, pin and hide pages; we’ll also cover how to create folders, and hide pages in Preview.

    In this article

    Create and name pages

    All of these actions are performed from the Pages Panel. To open the Pages Panel, click on the Pages Tab in the left-sidebar.

    Create New Pages

    To add a new page to your Page Tree:

    Click the New page button in the Pages Toolbar.
    or

    Select the New page option from either the More actions button, or the right-click Context Menu.

    01._Create___Format_-_Create_New_Page.gif

    You can rearrange both pages and folders by dragging them up and down the list.

    Name Pages

    There are several ways to name or rename a page:

    From the Pages Panel:

    Double-click on the page name in the Page Tree, edit the name and hit Enter/Return.
    or
    Select the Rename option from either the More actions button, or the right-click Context Menu.
     
    02._Create___Format_-_Name_Pages_from_Pages_Panel.gif

    From the Top Toolbar:

    Click on the Page Name, edit, and hit Enter/Return or click outside the field.

    03._Create___Format_-_Name_Pages_from_Top_Toolbar.gif

    Duplicate Pages

    To duplicate a page:

    Click the Duplicate selected items button in the Pages Toolbar.
    or

    Choose the Duplicate option from either the More actions button, or the right-click Context Menu.

    04._Create___Format_-_Duplicate_Pages.gif

    Your duplicate page will retain all the Page and Workspace settings of the original.

    Copy and paste pages and folders

    To copy and paste pages:

    1. Select the pages you want to copy in the Page Tree of the Pages Panel. 
    2. Choose the Copy Pages option from either the More actions button, or the right-click Context Menu.
    3. Navigate to the browser window or tab where the destination project is open.
    4. Click on the Pages Panel of the destination project.
    5. Choose the Paste Pages option from either the More actions button, or the right-click Context Menu.

    05._Create___Format_-_Copy_Paste_Pages.gif

     

    To select a sequential series of pages or folders, click the first item; then hold down Shift and click on the last item in the list. 

    To select multiple pages or folders, hold down the Command/Ctrl key, and click on individual items to choose them.

    Since the Workspace is project-specific, pages copied and pasted between projects will not retain the original Workspace settings.

    Search

    To search for a page or folder, type the name in the Search Pages box at the top of the Pages Panel.
     
    06._Create___Format_-_Search_Pages.png

    Navigate

    Use Fn + Up/Down arrow keys of your keyboard to navigate up and down the Page Tree.

     

    To make navigation more visual, enable the Show page thumbnails on hover feature from the Workspace > Advanced Settings menu.

    Format Page Settings

    The Page Settings section of the Format Panel lets you adjust the size, proportion, orientation and background color of your page. You can also lock your page’s aspect ratio, fit the page to existing content, reset your page view, or hide any content outside page margins.

     
    Jump to our Workspace section if you are looking to add grids or guides to your pages, set snapping controls, hide or show page options, or control how your cursor interacts with objects on the page when you hover, select or move them.

    To choose your Page Settings, first click on the Format Tab to open the Format Panel. Since the Format Panel is contextual, it will only show the Page Settings when no object on the page has been selected.

    07._NEW_Create___Format_-_Page_Settings_Tab.gif

    Page settings and background color can be applied to either a single page, or a selection of pages. If you choose to format multiple pages, a green banner will appear in the panel to confirm the selection.

    Choose page size, orientation, and aspect ratio

    When you first add a page, the Device Dropdown is set to Custom, and the default page size is set to 1000 x 1000 pixels.

    You can set the page size by…

    • Using the Width and Height inputs to enter custom settings.
    • Choosing from the page presets in the Device Dropdown.
    • Dragging the Page Adjustment Arrows that appear when you hover over the right and bottom page borders.

    08._NEW_Create___Format_-_Page_Settings_-_Size.gif

    You can change the page orientation from portrait to landscape with the Flip Vertically and Flip Horizontally buttons.

    The Lock aspect ratio button lets you keep the same aspect ratio as you adjust either of the Width and Height inputs.

    09._NEW_Create___Format_-_Page_Settings_-_Lock_Aspect_Ratio.png

    Set page background color

    To fill your page with color, click on Background Color to open the Color Picker Popover.  

    Select the Swatches Tab to choose a color scheme from Moqups Classic, Material Design, Bootstrap or iOS 8. This tab also displays the colors you’ve already used in your project.

    Select the Picker Tab to create your own custom colors.

    In both tabs, you can…

    1. Enter the Hex value for a color
    2. Adjust the fill-color opacity

    10._NEW_Create___Format_-_Page_Background_Colour.gif

    Fit page to content

    You can quickly fit your page to encompass all the content on the canvas – including objects beyond your page border.

    To fit page to content:

    Click the Fit page to content link in the Page Settings section of the Format Panel
    or

    Right-click anywhere on the page and select the Fit page to content from the Context Menu

    11._NEW_Create___Format_-_Fit_Page_to_Content.gif

    Reset page view

    Working on a project inevitably means zooming and scrolling around your page. To get back to the default 100% zoom, click on the percentage indicator in the center of the Floating Zoom Control. Reset page view goes further to both reset the zoom to 100% and scroll to the top of the page. 

    To Reset page view just click the link in the Page Settings section of the Format Panel.
     
    12._NEW_Create___Format_-_Reset_Page_View.gif

    Hide content outside page borders

    The blank area of the Canvas – beyond the margins of the page – is a great place to leave all kinds of related or temporary content that isn’t part of the page itself: notes, experiments, variations, snippets of text, requirements and specifications, models and inspirations.

    It’s useful to have this content near at hand when you’re working, but you may want to hide it when presenting, or when you need to focus on the design itself.

    In that case, select the Hide content outside page borders checkbox.
     
    13._NEW_Create___Format_-_Hide_Content_Outside_Pages.gif
     
    Below the Page Settings in the Format Panel, you’ll find the Replace Colors section which lets you replace a color on a page, but also throughout your project.

    Trash, restore and permanently delete pages

    The following actions are performed from the Pages Panel. To open the Pages Panel, click on the Pages Tab in the left-sidebar.

    Move to trash

    To move pages and folders to the Trash, make your selection and:

    Click the Move to Trash button in the Pages Toolbar.
    or

    Choose the Move to Trash option from either the More actions button, or the right-click Context Menu.

    13._Create___Format_-_Move_to_Trash.gif

    If you, or any of your collaborators, accidentally remove items from the Page Tree, you can always recover them – until you delete them permanently.

    For a few seconds after you use the trash option, a pop-up appears at the bottom of the page and lets you Undo that action.

    After the pop-up closes, you can still Restore pages by opening and viewing the Trash.

    View trash

    To open the trash, select the View Trash option from either the More actions button, or the right-click Context Menu. You’ll also see a counter of your trashed items next to the option.
     
    14._Create___Format_-_View_Trash.gif

    Once the Viewing Trash window is open, you can review the Trash contents, Restore pages or folders, or choose to permanently Delete items.

    To return to the Page Tree, click the blue Back button.
     

    Restore pages and folders

    To restore a page or folder:

    1. Use the View Trash option to open the Viewing Trash window
    2. Select the pages or folders you want to restore
    3. Click the Restore Pages button at the top of the Viewing Trash window
      or
      Choose the Restore option from either the More actions button, or the right-click Context Menu.

    15._Create___Format_-_Restore_Pages.png

    To return to the Page Tree, click the blue Back button.

    Delete pages and folders

    To permanently delete a page or folder:

    1. Use the View Trash option to open the Viewing Trash window.
    2. Select the pages or folders you want to delete.
    3. Click the Delete Permanently button at the top of the Viewing Trash window.
      or
      Choose the Delete Permanently option from either the More actions button, or the right-click Context Menu.

    The Delete page pop-up will ask you to confirm your choice.

    16._Create___Format_-_Delete_Page_Permanently_.gif

    To return to the Page Tree, click the blue Back button.

     

    When you select a folder, the Delete permanently option does not delete any pages within it; it deletes the folder only.