{"id":14530,"date":"2016-07-01T14:35:36","date_gmt":"2016-07-01T21:35:36","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14530"},"modified":"2020-10-26T01:48:03","modified_gmt":"2020-10-26T08:48:03","slug":"pages-views-navigation","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/user-guide\/pages-views-navigation\/","title":{"rendered":"Pages, Views and Navigation"},"content":{"rendered":"

Pages are individual designs that, when linked together, form a cohesive mockup. More than making distinct screens for sites and apps, you can use the sitemap to organize your work.<\/p>\n

Managing pages in the sitemap<\/h2>\n

Pages can be created, nested, duplicated, and renamed in the Sitemap, a menu that contains a hierarchy of pages\/views. You’ll find the Sitemap in the upper left corner of the editor<\/a>.<\/p>\n

\"Sitemap<\/p>\n

To create a new page, click “new page” in the Sitemap. UXPin will immediately prompt you to give the page a name, then add the new page to the end of the Sitemap.<\/p>\n

Page options: renaming, duplicating and deleting<\/h2>\n

Common functions appear when you hover over each page, turning it blue, in the Sitemap. You can rename a page by clicking its pencil icon, duplicate it by clicking the double-page icon, and permanently remove it by clicking the trashcan icon.<\/p>\n

\"You<\/p>\n

Build a hierarchy of nested pages<\/h2>\n

To keep your pages organized, you can drag and drop them into a hierarchy or logical structure for your reference. Push a page one level below another by dragging it into another page’s name. Remove a sub-page from its parent by dragging it out.<\/p>\n

\"Nesting<\/p>\n

Hierarchies do not affect links between pages, so you can rearrange pages at any time for your reference.<\/p>\n

Linking pages<\/h2>\n

Any element in UXPin can become a clickable link to other pages. To make one so, click an element, and add a new interaction \u2014 the \u201clightning bolt\u201d tab in the right-hand panel. Links are the default interactive type. Next, choose a page, then click “add,” and you’re done.<\/p>\n

\"Adding<\/p>\n

Copy\/paste between pages<\/h2>\n

If you need to transfer certain elements from one page to another, you can do the obvious: copy them from one source and paste them in another.<\/p>\n

Select the elements you want to copy, type cmd-C (Mac) or ctrl-C (Windows). Then choose another page and type cmd-V (Mac) or ctrl-V (Windows) to create the copy.<\/p>\n

Of course, you can also use symbols to re-purpose elements for consistency’s sake.<\/p>\n

Adaptive breakpoints<\/h2>\n

To practice responsive web design, each page can have a series of breakpoints in which you can change the page’s layout for differently-sized devices.<\/p>\n

\"Making<\/p>\n

Creating a new adaptive version will give each page its own new version — there’s no need to add, say, a wide website view for each page manually. And they\u2019re not necessarily fixed. If you want to adjust a breakpoint after creating it, then edit \u201cCanvas Properties\u201d on the right when no elements are selected.<\/p>\n

References<\/h2>\n