{"id":14535,"date":"2016-07-01T14:40:42","date_gmt":"2016-07-01T21:40:42","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14535"},"modified":"2020-10-26T01:52:16","modified_gmt":"2020-10-26T08:52:16","slug":"smart-elements","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/","title":{"rendered":"User Guides: Smart Elements | UXPin"},"content":{"rendered":"

Smart elements (SEs) are groups that change across an entire site when you edit the original. You can use these to save repetitive work by creating elements you’ll use everywhere in a given project.<\/p>\n

In web dev terms this is analogous to a server-side include. In design terms this is a time-saver.<\/p>\n

Consider website footers. When building with a multi-page website<\/a> whose pages end with the same content, building one as a smart element keeps you from having to rebuild it each time — and change each copy every time the footer changes. <\/p>\n

Creating smart elements<\/h2>\n

Building your own smart elements is straightforward: select one or more elements you want to use many places in your project, then right-click and select “Create Smart Element.” Alternatively you can type opt\/alt-S, or click the “convert to Smart Element” icon in the upper right corner of the editor<\/a>.<\/p>\n

\"Creating<\/p>\n

Once created, the smart element will appear in the Smart Elements panel on the left side of the editor. From here you can drag as many copies as necessary into your project.<\/p>\n

Editing smart elements<\/h2>\n

Change one, change them all. This is the promise that smart elements bring, and doing so is easy: edit one instance, and the other instances of that smart element will follow suit.<\/p>\n

Double-click any smart element to enter “edit” mode, indicated by a blue bar at the top of the editor. Make any changes you please, add or remove items, and tweak interactions within the SE. Then click “back to prototype” at the top of the editor, and you’re done. Every copy of the smart elements will change automatically.<\/p>\n

\"Editing<\/p>\n

You can also rename, edit and delete smart elements by hovering over their thumbnail to reveal more options.<\/p>\n

Smart elements and interactions<\/h2>\n

Any item inside a smart element can contain interactions<\/a> — as can the smart element itself. This is a great way to make slight variations in how copies of the same smart element behave. For example, you can use this to make a standard call to action whose link changes depending which page it’s on. Likewise, on a sales page with many products, the same “buy now” button can take users to different product detail pages.<\/p>\n

To make an instance of a smart element interactive, click on it like you would any other element or group, then select “new interaction” from the right-hand panel.<\/p>\n

Managing smart elements<\/h2>\n

Smart elements get their own panel on the left side of the editor. Open the \u201cLibraries\u201d panel to find it.<\/p>\n

\"Accessing<\/p>\n

They’re organized into account elements (those available in every project) and project elements (only usable in the current prototype).<\/p>\n

Like other elements, click and drag a smart element into your canvas to use it in your project.<\/p>\n","protected":false},"excerpt":{"rendered":"

Smart elements (SEs) are groups that change across an entire site when you edit the original. You can use these to save repetitive work by creating elements you’ll use everywhere in a given project. In web dev terms this is analogous to a server-side include. In design terms this is a time-saver. Consider website footers.<\/p>\n","protected":false},"author":27,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[184],"tags":[],"class_list":["post-14535","post","type-post","status-publish","format-standard","hentry","category-user-guide"],"yoast_title":"","yoast_metadesc":"This User Guide dives into how effectively use smart elements in UXPin.","acf":[],"yoast_head":"\nUser Guides: Smart Elements | UXPin | UXPin<\/title>\n<meta name=\"description\" content=\"This User Guide dives into how effectively use smart elements in UXPin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"User Guides: Smart Elements | UXPin\" \/>\n<meta property=\"og:description\" content=\"This User Guide dives into how effectively use smart elements in UXPin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-01T21:40:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-26T08:52:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-the-smart-element-button.png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"User Guides: Smart Elements | UXPin\",\"datePublished\":\"2016-07-01T21:40:42+00:00\",\"dateModified\":\"2020-10-26T08:52:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/\"},\"wordCount\":481,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/Where-is-the-smart-element-button.png\",\"articleSection\":[\"User Guide\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/\",\"name\":\"User Guides: Smart Elements | UXPin | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/Where-is-the-smart-element-button.png\",\"datePublished\":\"2016-07-01T21:40:42+00:00\",\"dateModified\":\"2020-10-26T08:52:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"This User Guide dives into how effectively use smart elements in UXPin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/Where-is-the-smart-element-button.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/07\\\/Where-is-the-smart-element-button.png\",\"width\":700,\"height\":250,\"caption\":\"Where is the smart element button\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/smart-elements\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Guides: Smart Elements | UXPin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"User Guides: Smart Elements | UXPin | UXPin","description":"This User Guide dives into how effectively use smart elements in UXPin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/","og_locale":"en_US","og_type":"article","og_title":"User Guides: Smart Elements | UXPin","og_description":"This User Guide dives into how effectively use smart elements in UXPin.","og_url":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/","og_site_name":"Studio by UXPin","article_published_time":"2016-07-01T21:40:42+00:00","article_modified_time":"2020-10-26T08:52:16+00:00","og_image":[{"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-the-smart-element-button.png","type":"","width":"","height":""}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"User Guides: Smart Elements | UXPin","datePublished":"2016-07-01T21:40:42+00:00","dateModified":"2020-10-26T08:52:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/"},"wordCount":481,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-the-smart-element-button.png","articleSection":["User Guide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/","url":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/","name":"User Guides: Smart Elements | UXPin | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-the-smart-element-button.png","datePublished":"2016-07-01T21:40:42+00:00","dateModified":"2020-10-26T08:52:16+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"This User Guide dives into how effectively use smart elements in UXPin.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-the-smart-element-button.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-the-smart-element-button.png","width":700,"height":250,"caption":"Where is the smart element button"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/smart-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"User Guides: Smart Elements | UXPin"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=14535"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14535\/revisions"}],"predecessor-version":[{"id":22959,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14535\/revisions\/22959"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}