{"id":1464452,"date":"2022-02-11T08:00:49","date_gmt":"2022-02-11T16:00:49","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1464452"},"modified":"2022-02-14T07:57:50","modified_gmt":"2022-02-14T15:57:50","slug":"pretty-in-pink-2","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2","title":{"rendered":"Pretty in pink part 2: Make an app"},"author":7411,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[23201,26451,35241,27911,27781],"industry":[],"product":[400032],"class_list":["post-1464452","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-cartographic-design","tag-cartography","tag-rotation","tag-tutorial","tag-web-app","product-experience-builder"],"acf":{"short_description":"Use ArcGIS Experience Builder to create a fun wrapper for your map.","flexible_content":[{"acf_fc_layout":"content","content":"<p>In my <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/pretty-in-pink-1\/\">last post<\/a>, I showed you how to make this <a href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=8220de216c634a1d9beb4e797195c757\" target=\"_blank\" rel=\"noopener\">pink map of some pink lakes<\/a>. But maps usually need some kind of surrounding information to help bring them to life: things like titles, legends, pictures, and text. In the static map world, we put these things in a layout. In the web map world, we put them in an app.<\/p>\n<p>To make this <a href=\"https:\/\/experience.arcgis.com\/experience\/1fdbae8eca4f45c4b3feb341d4b2d8e2\" target=\"_blank\" rel=\"noopener\">pink lakes app<\/a>, I used ArcGIS Experience Builder, because it gives me a lot of customization control, without having to write any code.\u00a0 Below, I explain how to do it.<\/p>\n<ul>\n<li><a href=\"#map\">Add the map<\/a><\/li>\n<li><a href=\"#plan\">Plan the app&#8217;s structure<\/a><\/li>\n<li><a href=\"#theme\">Change the theme color<\/a><\/li>\n<li><a href=\"#button\">Add a button<\/a><\/li>\n<li><a href=\"#rotate\">Rotate things for fun<\/a><\/li>\n<li><a href=\"#window\">Add a window<\/a><\/li>\n<li><a href=\"#connect\">Connect the button to the window<\/a><\/li>\n<li><a href=\"#title\">Add a title<\/a><\/li>\n<\/ul>\n<p><em>If you need more instructions on any of the steps below, I recommend trying this lesson: <a href=\"https:\/\/learn.arcgis.com\/en\/projects\/design-a-layout-for-a-thematic-map\/arcgis-experience-builder\/\">Design a layout for a thematic map in ArcGIS Experience Builder<\/a>. It goes through a very similar process in more detail.<\/em><\/p>\n<h2 id=\"map\">Add the map<\/h2>\n<p>1. Sign in to <a href=\"https:\/\/experience.arcgis.com\/\">Experience Builder<\/a>.<\/p>\n<p>2. Click <strong>Create new<\/strong> and choose the <strong>Blank fullscreen\u00a0<\/strong>template.<\/p>\n<p>3. From the <strong>Insert widget<\/strong> pane, click <strong>Map<\/strong> and drag it onto the canvas.<\/p>\n<p>4. On the maps&#8217; toolbar, click the first button and click <strong>Fullsize<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464492,"id":1464492,"title":"fullsize","filename":"fullsize.png","filesize":96778,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/fullsize","alt":"Full size","author":"7411","description":"","caption":"","name":"fullsize","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:34:45","modified":"2022-01-21 21:35:13","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":495,"height":411,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","medium-width":314,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","medium_large-width":495,"medium_large-height":411,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","large-width":495,"large-height":411,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","1536x1536-width":495,"1536x1536-height":411,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","2048x2048-width":495,"2048x2048-height":411,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","card_image-width":495,"card_image-height":411,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/fullsize.png","wide_image-width":495,"wide_image-height":411}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>5. In the <strong>Map 1<\/strong> pane, click <strong>Select map<\/strong>. Click <strong>Add new data<\/strong>.<\/p>\n<p>6. If you made your own Pink Lakes map, choose it. If not, search for <em>8220de216c634a1d9beb4e797195c757<\/em> to use mine. Click <strong>Done<\/strong>.<\/p>\n<p>7. In the <strong>Select data<\/strong> pane, click the <strong>Pink Lakes <\/strong>map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464502,"id":1464502,"title":"select-map","filename":"select-map.png","filesize":56261,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/select-map-3","alt":"Selected map","author":"7411","description":"","caption":"","name":"select-map-3","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:36:20","modified":"2022-01-21 21:36:38","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":557,"height":479,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map.png","medium-width":304,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map.png","medium_large-width":557,"medium_large-height":479,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map.png","large-width":557,"large-height":479,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map.png","1536x1536-width":557,"1536x1536-height":479,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map.png","2048x2048-width":557,"2048x2048-height":479,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map-541x465.png","card_image-width":541,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/select-map.png","wide_image-width":557,"wide_image-height":479}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>8. If necessary, click <strong>Custom <\/strong>and click <strong>Modify<\/strong> to change the default extent of the map.<\/p>\n<h2 id=\"plan\">Plan the app&#8217;s structure<\/h2>\n<p>Experiences are built from a set of elements or widgets, many of them nesting inside of one another. You&#8217;ve already added one: the map. Try to keep the structure simple by sketching out your plan beforehand on paper. I also recommend pausing periodically to re-acquaint yourself with the <strong>Outline<\/strong> pane, so you always know which elements are nested inside which other elements.<\/p>\n<p>I&#8217;ll show you the structure of my experience to give you a sense of how one is built. Then we&#8217;ll get to work building it.<\/p>\n<p>I have one page, with four components: the map, a list widget, text (the title), and a button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464522,"id":1464522,"title":"outline","filename":"outline.png","filesize":240615,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/outline-4","alt":"Outline pane","author":"7411","description":"","caption":"","name":"outline-4","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:38:08","modified":"2022-01-21 21:38:30","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":938,"height":524,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline.png","medium-width":464,"medium-height":259,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline.png","medium_large-width":768,"medium_large-height":429,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline.png","large-width":938,"large-height":524,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline.png","1536x1536-width":938,"1536x1536-height":524,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline.png","2048x2048-width":938,"2048x2048-height":524,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline-826x461.png","card_image-width":826,"card_image-height":461,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline.png","wide_image-width":938,"wide_image-height":524}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>There&#8217;s more elements inside the list widget: an image, text, and a button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464532,"id":1464532,"title":"outline2","filename":"outline2.png","filesize":322609,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/outline2-2","alt":"Outline pane","author":"7411","description":"","caption":"","name":"outline2-2","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:38:56","modified":"2022-01-21 21:39:19","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":990,"height":492,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2.png","medium-width":464,"medium-height":231,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2.png","medium_large-width":768,"medium_large-height":382,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2.png","large-width":990,"large-height":492,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2.png","1536x1536-width":990,"1536x1536-height":492,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2.png","2048x2048-width":990,"2048x2048-height":492,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2-826x410.png","card_image-width":826,"card_image-height":410,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline2.png","wide_image-width":990,"wide_image-height":492}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>You don&#8217;t have to add all of these elements for every lake, just for the first one; the list widget will repeat them automatically for the others.<\/p>\n<p>Finally, there&#8217;s a window, which appears as a kind of pop-up or splash screen when you click the question mark button. The window contains two text elements and an image.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464542,"id":1464542,"title":"outline3","filename":"outline3.png","filesize":362881,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/outline3","alt":"Outline pane and window","author":"7411","description":"","caption":"","name":"outline3","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:39:54","modified":"2022-01-21 21:40:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":986,"height":510,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3.png","medium-width":464,"medium-height":240,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3.png","medium_large-width":768,"medium_large-height":397,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3.png","large-width":986,"large-height":510,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3.png","1536x1536-width":986,"1536x1536-height":510,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3.png","2048x2048-width":986,"2048x2048-height":510,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3-826x427.png","card_image-width":826,"card_image-height":427,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/outline3.png","wide_image-width":986,"wide_image-height":510}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2 id=\"theme\">Change the theme color<\/h2>\n<p>1. In the <strong>Theme <\/strong>pane, choose <strong>Vivid <\/strong>and click <strong>Customize<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464552,"id":1464552,"title":"theme","filename":"theme.png","filesize":43391,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/theme-2","alt":"Vivid theme","author":"7411","description":"","caption":"","name":"theme-2","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:41:26","modified":"2022-01-21 21:41:40","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":333,"height":504,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme.png","medium-width":172,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme.png","medium_large-width":333,"medium_large-height":504,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme.png","large-width":333,"large-height":504,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme.png","1536x1536-width":333,"1536x1536-height":504,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme.png","2048x2048-width":333,"2048x2048-height":504,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme-307x465.png","card_image-width":307,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/theme.png","wide_image-width":333,"wide_image-height":504}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>2. Click the orange circle and for <strong>HEX<\/strong>, type <em>#ff21c8<\/em>.<\/p>\n<p>Now the default color for your experience is pink.<\/p>\n<h2 id=\"button\">Add a button<\/h2>\n<p>1. On the side toolbar, click the\u00a0<strong>Insert <\/strong>button.\u00a0In the <strong>Insert widget <\/strong>pane, click <strong>Button <\/strong>and drag it onto the map.<\/p>\n<p>2. In the <strong>Button 1 <\/strong>pane, change the <strong>Text <\/strong>to <em>?<\/em>. Turn on the <strong>Advanced\u00a0<\/strong>toggle.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464572,"id":1464572,"title":"question","filename":"question.png","filesize":3336,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/question","alt":"Button text","author":"7411","description":"","caption":"","name":"question","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:43:45","modified":"2022-01-21 21:43:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":280,"height":202,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","medium-width":280,"medium-height":202,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","medium_large-width":280,"medium_large-height":202,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","large-width":280,"large-height":202,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","1536x1536-width":280,"1536x1536-height":202,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","2048x2048-width":280,"2048x2048-height":202,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","card_image-width":280,"card_image-height":202,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/question.png","wide_image-width":280,"wide_image-height":202}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>3. Make the text <strong>Bold<\/strong>, 30 px, and pink. Change <strong>Border <\/strong>to <em>0<\/em> px and <strong>Border radius <\/strong>to <em>0 <\/em>px.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464582,"id":1464582,"title":"button-props","filename":"button-props.png","filesize":10764,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/button-props","alt":"Button properties","author":"7411","description":"","caption":"","name":"button-props","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:44:49","modified":"2022-01-21 21:45:28","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":269,"height":408,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","medium-width":172,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","medium_large-width":269,"medium_large-height":408,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","large-width":269,"large-height":408,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","1536x1536-width":269,"1536x1536-height":408,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","2048x2048-width":269,"2048x2048-height":408,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","card_image-width":269,"card_image-height":408,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/button-props.png","wide_image-width":269,"wide_image-height":408}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. Click the <strong>Hover <\/strong>tab. Copy the same properties as above, but make the text white instead of pink.<\/p>\n<p>5. For <strong>Background Fill<\/strong>, choose pink.<\/p>\n<p>6. At the top of the <strong>Button 1 <\/strong>pane, click the <strong>Style\u00a0<\/strong>tab.<\/p>\n<p>7. For <strong>Width <\/strong>and<strong> Height<\/strong>, click the <strong>% <\/strong>button and change them both to <strong>px<\/strong>. Change both properties to <em>40\u00a0<\/em>px.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464592,"id":1464592,"title":"40","filename":"40.png","filesize":7395,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/40-2","alt":"Width and Height set to 40 px","author":"7411","description":"","caption":"","name":"40-2","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:46:54","modified":"2022-01-21 21:47:09","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":277,"height":238,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","medium-width":277,"medium-height":238,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","medium_large-width":277,"medium_large-height":238,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","large-width":277,"large-height":238,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","1536x1536-width":277,"1536x1536-height":238,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","2048x2048-width":277,"2048x2048-height":238,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","card_image-width":277,"card_image-height":238,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/40.png","wide_image-width":277,"wide_image-height":238}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>8. Move the new button around on your map and place it wherever you like.<\/p>\n<h2 id=\"rotate\">Rotate things for fun<\/h2>\n<p>In Experience Builder, not only can you place things wherever you want, you can also rotate them. Ever since I discovered this feature I&#8217;ve been looking for an excuse to use it. To be perfectly honest, it&#8217;s the reason why I made this map.<\/p>\n<p>1. In the <strong>Button 1 <\/strong>pane, on the <strong>Style <\/strong>tab, change <strong>Rotation <\/strong>to <em>-9 <\/em>degrees.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464612,"id":1464612,"title":"rotate","filename":"rotate.png","filesize":49859,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/rotate","alt":"Rotation","author":"7411","description":"","caption":"","name":"rotate","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:48:30","modified":"2022-01-21 21:48:40","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":449,"height":348,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","medium-width":337,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","medium_large-width":449,"medium_large-height":348,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","large-width":449,"large-height":348,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","1536x1536-width":449,"1536x1536-height":348,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","2048x2048-width":449,"2048x2048-height":348,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","card_image-width":449,"card_image-height":348,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/rotate.png","wide_image-width":449,"wide_image-height":348}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2 id=\"window\">Add a window<\/h2>\n<p>Your experience already has a page, which is filed with the map. Next, you&#8217;ll add a window to show more information that you don\u2019t want to be visible all the time.<\/p>\n<p>1. On the side toolbar, click the <strong>Page<\/strong> button and click the <strong>Window<\/strong> tab. Click the <strong>Add window <\/strong>button.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464622,"id":1464622,"title":"window","filename":"window.png","filesize":4903,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/window-2","alt":"Window pane","author":"7411","description":"","caption":"","name":"window-2","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:49:28","modified":"2022-01-21 21:49:55","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":312,"height":215,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","medium-width":312,"medium-height":215,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","medium_large-width":312,"medium_large-height":215,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","large-width":312,"large-height":215,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","1536x1536-width":312,"1536x1536-height":215,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","2048x2048-width":312,"2048x2048-height":215,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","card_image-width":312,"card_image-height":215,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/window.png","wide_image-width":312,"wide_image-height":215}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>2. Choose <strong>Vogue<\/strong>. On the new window, click the blank image.<\/p>\n<p>3. In the <strong>Image 1 <\/strong>pane, click <strong>Select an image<\/strong>.<\/p>\n<p>4. For <strong>URL<\/strong>, type <em>https:\/\/images.unsplash.com\/photo-1590271594778-f592f421057c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2071&amp;q=80<\/em>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1466892,"id":1466892,"title":"url2","filename":"url2.png","filesize":20679,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/url2-2","alt":"Select an image with a URL","author":"7411","description":"","caption":"","name":"url2-2","status":"inherit","uploaded_to":1464452,"date":"2022-01-24 22:28:12","modified":"2022-01-24 22:28:23","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":639,"height":333,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","medium-width":464,"medium-height":242,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","medium_large-width":639,"medium_large-height":333,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","large-width":639,"large-height":333,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","1536x1536-width":639,"1536x1536-height":333,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","2048x2048-width":639,"2048x2048-height":333,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","card_image-width":639,"card_image-height":333,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/url2.png","wide_image-width":639,"wide_image-height":333}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>The photo appears in the window.<\/p>\n<p>5. Edit the <strong>Title <\/strong>text to <em>What make a lake pink?<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464962,"id":1464962,"title":"title2","filename":"title2.png","filesize":130105,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/title2","alt":"Window with edited title","author":"7411","description":"","caption":"","name":"title2","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 22:21:37","modified":"2022-01-21 22:21:45","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":560,"height":323,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","medium-width":453,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","medium_large-width":560,"medium_large-height":323,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","large-width":560,"large-height":323,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","1536x1536-width":560,"1536x1536-height":323,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","2048x2048-width":560,"2048x2048-height":323,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","card_image-width":560,"card_image-height":323,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title2.png","wide_image-width":560,"wide_image-height":323}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>6. Change the text to <em>25<\/em> px, <strong>Bold<\/strong>, and white.<\/p>\n<p>7. Click the <strong>Style <\/strong>tab and change the <strong>Background Fill <\/strong>to pink. Change <strong>Rotation <\/strong>to <em>-5\u00a0<\/em>degrees.<\/p>\n<p>8. Replace the <strong>Lorem impsum <\/strong>text with the following:<\/p>\n<p>Pink lakes can be found all over the world. The color of a pink lake depends on the balance between <em>Dunaliella salina<\/em> and <em>Halobacterium cutirubrum<\/em>, with salt concentration having a direct impact.<\/p>\n<p>The algae <em>Dunaliella salina<\/em> is green, but at high salinity, these organisms produce the red carotenoid pigment, beta-carotene. This pigment coats the green algae in red to protect it from the sun. The archaea <em>Halobacterium cutirubrum<\/em> is pink and grows in the salt crust on the bottom of the lake.<\/p>\n<p>With one exception, pink lakes are salt lakes, and many are carved into salt evaporation ponds for salt production. Some ponds are built from former salt marshes, rather than lakes.<\/p>\n<p><em>Photo by Ken Cheung on Unsplash.<\/em><\/p>\n<p>9. Make the text pink.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464652,"id":1464652,"title":"final-window","filename":"final-window.png","filesize":259722,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/final-window","alt":"Window with image and text","author":"7411","description":"","caption":"","name":"final-window","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:52:15","modified":"2022-01-21 21:52:32","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":591,"height":494,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window.png","medium-width":312,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window.png","medium_large-width":591,"medium_large-height":494,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window.png","large-width":591,"large-height":494,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window.png","1536x1536-width":591,"1536x1536-height":494,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window.png","2048x2048-width":591,"2048x2048-height":494,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window-556x465.png","card_image-width":556,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/final-window.png","wide_image-width":591,"wide_image-height":494}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>9. Drag the edges of the text boxes, image, and window to resize and reposition them until it looks good.<\/p>\n<h2 id=\"connect\">Connect the button to the window<\/h2>\n<p>No one will be able to see your window unless you give them a way to access it.<\/p>\n<p>1. In the <strong>Page <\/strong>pane, click the <strong>Page <\/strong>tab to exit the window view and return to the page view.<\/p>\n<p>2. Select the button. In the <strong>Button 1 <\/strong>pane, click <strong>Set link<\/strong>.<\/p>\n<p>3. For <strong>Link to <\/strong>choose <strong>Window<\/strong>. For <strong>Select a window<\/strong>, choose <strong>Window 1<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464662,"id":1464662,"title":"set-link","filename":"set-link.png","filesize":12503,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/set-link","alt":"Set link for button","author":"7411","description":"","caption":"","name":"set-link","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:54:06","modified":"2022-01-21 21:54:18","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":515,"height":246,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","medium-width":464,"medium-height":222,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","medium_large-width":515,"medium_large-height":246,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","large-width":515,"large-height":246,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","1536x1536-width":515,"1536x1536-height":246,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","2048x2048-width":515,"2048x2048-height":246,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","card_image-width":515,"card_image-height":246,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/set-link.png","wide_image-width":515,"wide_image-height":246}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. Click <strong>OK<\/strong>. On the top ribbon, click <strong>Live view <\/strong>to test your app.<\/p>\n<p>5. Hover over the button. It should turn pink.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464672,"id":1464672,"title":"click-button","filename":"click-button.png","filesize":59191,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/click-button","alt":"Button in hover state","author":"7411","description":"","caption":"","name":"click-button","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:55:06","modified":"2022-01-21 21:55:33","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":250,"height":238,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","medium-width":250,"medium-height":238,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","medium_large-width":250,"medium_large-height":238,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","large-width":250,"large-height":238,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","1536x1536-width":250,"1536x1536-height":238,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","2048x2048-width":250,"2048x2048-height":238,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","card_image-width":250,"card_image-height":238,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/click-button.png","wide_image-width":250,"wide_image-height":238}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>5. Click the button. The window should appear.<\/p>\n<p>6. Click outside of the window to return to the map.<\/p>\n<h2 id=\"title\">Add a title<\/h2>\n<p>1. Turn off <strong>Live view<\/strong>.<\/p>\n<p>2. In the <strong>Insert widget <\/strong>pane, click the <strong>Text <\/strong>widget and drag it onto the map. In the text box, type <em>PINK LAKES<\/em>.<\/p>\n<p>3. In the <strong>Text 3 <\/strong>pane, make the text <em>40<\/em> px, <strong>Bold<\/strong>, and pink. Set the background color to white.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464692,"id":1464692,"title":"text-format","filename":"text-format.png","filesize":4901,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/text-format","alt":"Text properties","author":"7411","description":"","caption":"","name":"text-format","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:56:58","modified":"2022-01-21 21:57:09","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":258,"height":174,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format-213x174.png","thumbnail-width":213,"thumbnail-height":174,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","medium-width":258,"medium-height":174,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","medium_large-width":258,"medium_large-height":174,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","large-width":258,"large-height":174,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","1536x1536-width":258,"1536x1536-height":174,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","2048x2048-width":258,"2048x2048-height":174,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","card_image-width":258,"card_image-height":174,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/text-format.png","wide_image-width":258,"wide_image-height":174}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>4. On the <strong>Style <\/strong>tab, change the <strong>Rotation <\/strong>to <em>-5\u00a0<\/em>degrees.<\/p>\n<p>5. Place the title on the map wherever you like.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1464712,"id":1464712,"title":"title","filename":"title.png","filesize":81429,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\/title-3","alt":"Rotated title","author":"7411","description":"","caption":"","name":"title-3","status":"inherit","uploaded_to":1464452,"date":"2022-01-21 21:57:56","modified":"2022-01-21 21:58:06","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":448,"height":201,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","medium-width":448,"medium-height":201,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","medium_large-width":448,"medium_large-height":201,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","large-width":448,"large-height":201,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","1536x1536-width":448,"1536x1536-height":201,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","2048x2048-width":448,"2048x2048-height":201,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","card_image-width":448,"card_image-height":201,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/title.png","wide_image-width":448,"wide_image-height":201}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>You&#8217;ve now made a pink web experience that maps pink lakes around the world. In my <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-3\/\">next post<\/a>, I&#8217;ll show you how to add a list widget, and then the experience will be complete.<\/p>\n"}],"authors":[{"ID":7411,"user_firstname":"Heather","user_lastname":"Smith","nickname":"Heather Smith","user_nicename":"heather-smith","display_name":"Heather Smith","user_email":"Heather_Smith@esri.com","user_url":"","user_registered":"2018-03-21 18:21:18","user_description":"Heather is a cartographer and artist. She creates resources for the tutorial gallery.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":707202,"post_author":"7641","post_date":"2021-08-10 18:40:56","post_date_gmt":"2021-08-11 01:40:56","post_content":"","post_title":"ArcGIS Experience Builder overview and concepts","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"experience-builder-overview","to_ping":"","pinged":"","post_modified":"2021-08-10 18:40:18","post_modified_gmt":"2021-08-11 01:40:18","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=707202","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1400112,"post_author":"289852","post_date":"2021-11-24 09:23:03","post_date_gmt":"2021-11-24 17:23:03","post_content":"","post_title":"Build a tool to locate COVID-19 testing sites with ArcGIS Web AppBuilder","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"build-a-tool-to-locate-covid-19-testing-sites-with-arcgis-web-appbuilder","to_ping":"","pinged":"","post_modified":"2023-08-28 13:23:11","post_modified_gmt":"2023-08-28 20:23:11","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1400112","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/pink-card-2.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/pink-banner-2.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pretty in pink part 2: Make an app<\/title>\n<meta name=\"description\" content=\"Use ArcGIS Experience Builder to create a fun wrapper for your map.\" \/>\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.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pretty in pink part 2: Make an app\" \/>\n<meta property=\"og:description\" content=\"Use ArcGIS Experience Builder to create a fun wrapper for your map.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-14T15:57:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2023\/01\/pink-card-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"826\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Use ArcGIS Experience Builder to create a fun wrapper for your map.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/pink-card-2.png\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\"},\"author\":{\"name\":\"Heather Smith\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263\"},\"headline\":\"Pretty in pink part 2: Make an app\",\"datePublished\":\"2022-02-11T16:00:49+00:00\",\"dateModified\":\"2022-02-14T15:57:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\"},\"wordCount\":7,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"cartographic design\",\"cartography\",\"Rotation\",\"Tutorial\",\"web app\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\",\"name\":\"Pretty in pink part 2: Make an app\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-02-11T16:00:49+00:00\",\"dateModified\":\"2022-02-14T15:57:50+00:00\",\"description\":\"Use ArcGIS Experience Builder to create a fun wrapper for your map.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pretty in pink part 2: Make an app\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263\",\"name\":\"Heather Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png\",\"caption\":\"Heather Smith\"},\"description\":\"Heather is a cartographer and artist. She creates resources for the tutorial gallery.\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pretty in pink part 2: Make an app","description":"Use ArcGIS Experience Builder to create a fun wrapper for your map.","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.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2","og_locale":"en_US","og_type":"article","og_title":"Pretty in pink part 2: Make an app","og_description":"Use ArcGIS Experience Builder to create a fun wrapper for your map.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2022-02-14T15:57:50+00:00","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/wp-content\/uploads\/2023\/01\/pink-card-2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_description":"Use ArcGIS Experience Builder to create a fun wrapper for your map.","twitter_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/pink-card-2.png","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2"},"author":{"name":"Heather Smith","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263"},"headline":"Pretty in pink part 2: Make an app","datePublished":"2022-02-11T16:00:49+00:00","dateModified":"2022-02-14T15:57:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2"},"wordCount":7,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["cartographic design","cartography","Rotation","Tutorial","web app"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2","name":"Pretty in pink part 2: Make an app","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-02-11T16:00:49+00:00","dateModified":"2022-02-14T15:57:50+00:00","description":"Use ArcGIS Experience Builder to create a fun wrapper for your map.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/experience-builder\/mapping\/pretty-in-pink-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Pretty in pink part 2: Make an app"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/3f7e18133cad5b7cfa2633347f691263","name":"Heather Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/heather900-465x465.png","caption":"Heather Smith"},"description":"Heather is a cartographer and artist. She creates resources for the tutorial gallery.","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith"}]}},"text_date":"February 11, 2022","author_name":"Heather Smith","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/heather-smith","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/pink-banner-2.png","primary_product":"ArcGIS Experience Builder","tag_data":[{"term_id":23201,"name":"cartographic design","slug":"cartographic-design","term_group":0,"term_taxonomy_id":23201,"taxonomy":"post_tag","description":"","parent":0,"count":332,"filter":"raw"},{"term_id":26451,"name":"cartography","slug":"cartography","term_group":0,"term_taxonomy_id":26451,"taxonomy":"post_tag","description":"","parent":0,"count":558,"filter":"raw"},{"term_id":35241,"name":"Rotation","slug":"rotation","term_group":0,"term_taxonomy_id":35241,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"},{"term_id":27911,"name":"Tutorial","slug":"tutorial","term_group":0,"term_taxonomy_id":27911,"taxonomy":"post_tag","description":"","parent":0,"count":183,"filter":"raw"},{"term_id":27781,"name":"web app","slug":"web-app","term_group":0,"term_taxonomy_id":27781,"taxonomy":"post_tag","description":"","parent":0,"count":10,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":400032,"name":"ArcGIS Experience Builder","slug":"experience-builder","term_group":0,"term_taxonomy_id":400032,"taxonomy":"product","description":"","parent":36591,"count":161,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=experience-builder","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1464452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7411"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=1464452"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1464452\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1464452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1464452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1464452"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1464452"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1464452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}