{"id":14689,"date":"2016-07-01T02:01:05","date_gmt":"2016-07-01T09:01:05","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14689"},"modified":"2020-10-26T01:47:33","modified_gmt":"2020-10-26T08:47:33","slug":"customizable-elements","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/","title":{"rendered":"Customizable elements"},"content":{"rendered":"<p>With more than 1,000 elements and pre-built components, UXPin has many parts to help you design websites and apps. <\/p>\n<p>Certain elements have custom elements to extend their appearance or functionality. You can find their specific controls in the Custom panel located in the bottom right corner of the editor. These customizable elements are:<\/p>\n<h2 id=\"basics\">Basics<\/h2>\n<ul>\n<li><strong>Arrow<\/strong>: Change its curve (or lack of), size (thickness), and endpoint arrows.<\/li>\n<li><strong>Horizontal Scroller<\/strong>: Change the position of its scroll indicator.<\/li>\n<li><strong>Icon (all of them)<\/strong>: Change its size and which symbol it contains.<\/li>\n<li><strong>Image<\/strong>: Upload images, crop, and adjust properties like hue, saturation, vibrance, and blur.<\/li>\n<li><strong>Line<\/strong>: Alter its weight (thickness), orientation, and solidity (solid, dotted, or dashed).<\/li>\n<li><strong>Link List<\/strong>: Change individual links\u2019 text, add\/remove links, and hyperlink them to different pages.<\/li>\n<li><strong>Navigation<\/strong>: Add\/remove links and sub-links, control its color, orientation and line weight (if any).<\/li>\n<li><strong>Shape<\/strong>: Change between rectangles, triangles, parallelograms, and more.<\/li>\n<li><strong>Table<\/strong>: Change the number of rows and columns. Also change the colors of individual cells.<\/li>\n<li><strong>Text<\/strong>: Has its own typography panel.<\/li>\n<li><strong>Tooltip<\/strong>: Change on which side the arrow is anchored.<\/li>\n<li><strong>Vertical Scroller<\/strong>: Change the position of its scroll indicator.<\/li>\n<li><strong>Video<\/strong>: Embed YouTube, Vimeo or Dropbox media.<\/li>\n<\/ul>\n<h2 id=\"forms\">Forms<\/h2>\n<ul>\n<li><strong>Button\/ghost button<\/strong>: Add\/remove a shadow, alter if it\u2019s active, pushed, or disabled.<\/li>\n<li><strong>Checkbox<\/strong>: Place the checkbox on the left or right of the text, whether or not it\u2019s checked by default, or completely disabled.<\/li>\n<li><strong>Input\/password<\/strong>: Change its shadow location, indicate whether or not it\u2019s disabled, and change it between plain text and an obscured password field.<\/li>\n<li><strong>Multiselect<\/strong>: Add\/remove options, and add interactions depending on which option is clicked.<\/li>\n<li><strong>Radio button<\/strong>: Check it, disable it, and assign it to a group of radio buttons.<\/li>\n<li><strong>Select list<\/strong>: Add\/remove options, and add interactions depending on which option is clicked.<\/li>\n<li><strong>Textarea<\/strong>: Add\/remove a shadow, and make it disabled.<\/li>\n<\/ul>\n<h2 id=\"animations\">Animations<\/h2>\n<ul>\n<li>\u201cArrows\u201d<\/li>\n<li>\u201cBar\u201d<\/li>\n<li>\u201cBert\u201d<\/li>\n<li>\u201cBig Roller\u201d<\/li>\n<li>\u201cIndicator\u201d<\/li>\n<li>\u201cSquares Circle\u201d<\/li>\n<li>\u201cWaiter\u201d<\/li>\n<li>\u201cWheel Throbber\u201d<\/li>\n<\/ul>\n<p><!--h2 id=\"advanced\">Advanced<\/h2>\n\n\n\n\n\n<ul>\n\t<!li><strong>Note<\/strong>: Add a title and description that appear on hover.<\/li>\n\n\n<\/ul-->\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/user-guide\/the-uxpin-editor\/#search\">Search for these elements by name<\/a> to use them in your design work.<\/p>\n<h2 id=\"tutorials\">Related resources<\/h2>\n<ul>\n<li><strong>Article:<\/strong> <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/take-advantage-complex-pre-built-elements-design-systems\/\">Take Advantage of Complex, Pre-built Elements in Design Systems<\/a><\/li>\n<li><strong>Ebook:<\/strong> <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/free-practical-interaction-design-ebook-bundle\/\">The Practical Interaction Design Bundle in Three Ebooks<\/a><\/li>\n<li><strong>Tutorial:<\/strong> <a href=\"https:\/\/www.uxpin.com\/studio\/tutorials\/make-select-list-interactive-uxpin\/\">How to Make a Select List Interactive in UXPin<\/a><\/li>\n<li><strong><a href=\"https:\/\/www.uxpin.com\">Get a free trial<\/a><\/strong><\/li>\n<\/ul>\n<h2>Ask a question<\/h2>\n<hr\/>\n<form action=\"https:\/\/www.uxpin.com\/studio\/\" method=\"get\">\n<input type=\"hidden\" name=\"category_name\" value=\"user-guide\"><br \/>\n<input type=\"search\" name=\"s\" value=\"\" style=\"float:left\"><br \/>\n<input type=\"submit\" value=\"Search the Guide\" style=\"position:relative;top:-16px\"><br \/>\n<br style=\"clear:both\"><br \/>\n<\/form>\n","protected":false},"excerpt":{"rendered":"<p>Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.<\/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-14689","post","type-post","status-publish","format-standard","hentry","category-user-guide"],"yoast_title":"","yoast_metadesc":"Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Customizable elements | UXPin<\/title>\n<meta name=\"description\" content=\"Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.\" \/>\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\/customizable-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizable elements\" \/>\n<meta property=\"og:description\" content=\"Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-01T09:01:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-26T08:47:33+00:00\" \/>\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\\\/customizable-elements\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/customizable-elements\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Customizable elements\",\"datePublished\":\"2016-07-01T09:01:05+00:00\",\"dateModified\":\"2020-10-26T08:47:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/customizable-elements\\\/\"},\"wordCount\":374,\"articleSection\":[\"User Guide\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/customizable-elements\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/customizable-elements\\\/\",\"name\":\"Customizable elements | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"datePublished\":\"2016-07-01T09:01:05+00:00\",\"dateModified\":\"2020-10-26T08:47:33+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/customizable-elements\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/customizable-elements\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/user-guide\\\/customizable-elements\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizable elements\"}]},{\"@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":"Customizable elements | UXPin","description":"Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.","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\/customizable-elements\/","og_locale":"en_US","og_type":"article","og_title":"Customizable elements","og_description":"Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.","og_url":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/","og_site_name":"Studio by UXPin","article_published_time":"2016-07-01T09:01:05+00:00","article_modified_time":"2020-10-26T08:47:33+00:00","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\/customizable-elements\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Customizable elements","datePublished":"2016-07-01T09:01:05+00:00","dateModified":"2020-10-26T08:47:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/"},"wordCount":374,"articleSection":["User Guide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/","url":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/","name":"Customizable elements | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"datePublished":"2016-07-01T09:01:05+00:00","dateModified":"2020-10-26T08:47:33+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Certain elements have custom elements to extend their appearance or functionality. Here we list them and describe what you can configure.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/user-guide\/customizable-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Customizable elements"}]},{"@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\/14689","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=14689"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14689\/revisions"}],"predecessor-version":[{"id":22954,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14689\/revisions\/22954"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}