{"id":74702,"date":"2018-11-07T15:27:05","date_gmt":"2018-11-07T23:27:05","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&p=74702"},"modified":"2019-07-12T18:11:51","modified_gmt":"2019-07-13T01:11:51","slug":"create-a-great-looking-home-page-for-your-arcgis-online-organization","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/create-a-great-looking-home-page-for-your-arcgis-online-organization","title":{"rendered":"Create a Great-Looking Home Page for Your ArcGIS Online Organization"},"content":{"rendered":"","protected":false},"author":651,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[],"tags":[],"arcwatch_issues":[38162],"class_list":["post-74702","arcwatch","type-arcwatch","status-publish","format-standard","hentry","arcwatch_issues-october-2017","arcwatch_sections-the-tip"],"acf":{"short_description":"First impressions count. That's true for your ArcGIS Online organization home page, too, which will impress readers...","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Your\u00a0ArcGIS Online<\/a>\u00a0organization's home page is what visitors and organization members will initially see when they visit your site. How your home page looks and what information visitors find there will create first impressions\u2014not just about your GIS) organization but also about the quality and veracity of the maps and apps on the site.\r\n\r\nPeople\u00a0do<\/strong>\u00a0judge books by their cover, so it's important to have a professional-looking, aesthetic, and well-organized home page, whether it's only available to colleagues within your organization or to the general public.\r\n\r\nAs the administrator of your organization, you can create a compelling and attractive home page using easy-to-configure settings. And with a little bit of HTML know-how, you can do even more. In this tip, you will learn how to visually enhance your organization's home page.\r\n\r\n\r\n

Start with the Basics<\/h2>\r\nAs organization administrator, you will set up the organization's home page and have the ability to modify it at any time. You can access the home page settings after logging in. To start, click\u00a0Organization<\/strong>.\r\n\r\n\r\n\r\n \r\n\r\nThen click\u00a0EDIT SETTINGS<\/strong>.\r\n\r\n \r\n\r\n\r\n\r\nClick the\u00a0General<\/strong>\u00a0tab (a). When you set up your organization, you can enter a name (b). In this example, the organization is titled The Science of Where.\r\n\r\nAdd a logo (c), and enter a brief description (d). To display the description, check the\u00a0Show description toward bottom of Home Page<\/strong>\u00a0check box (e).\r\n\r\n\r\n\r\nIt's also a good idea to add a contact for the page. The\u00a0mailto<\/strong>\u00a0link appears at the bottom of the home page. Scroll further down on the\u00a0General<\/strong>\u00a0tab to locate the\u00a0Link<\/strong>\u00a0section, check the\u00a0Contact Us<\/strong>\u00a0check box, and add the mailto contact information.\r\n\r\n\r\n\r\nYou can also choose a different graphic than the default for your home page background. Click the\u00a0Home Page<\/strong>tab, then scroll down to the\u00a0Banner<\/strong>\u00a0section. Choose from one of the displayed options. For this example, choose the gray banner.\r\n\r\n\r\n\r\nThe current home page is shown below. It's not going to win any awards, but it's a start.\r\n\r\n\r\n

Go Beyond the Basics<\/h2>\r\nTo improve the look of your home page, create a custom banner using an image that\u2019s 960\u00a0pixels wide by 180 pixels high, which is the smallest banner the home page supports. Add the custom image in the\u00a0Banner<\/strong>\u00a0section of the\u00a0Home Page<\/strong>\u00a0tab, Select the\u00a0Click here to upload custom image<\/strong>\u00a0button.\r\n\r\n\r\n\r\nThe home page looks much more appealing with a custom banner image. Note that if you use a custom image, you'll have to add the organization name, logo, and other graphics you might want directly on top of the image.\r\n\r\n\r\n

Add a Gallery<\/h2>\r\nConsider adding a gallery ribbon that features interesting or useful maps and apps. To add\u00a0Featured Content<\/strong>\u00a0to your home page, create a group (for example, go to\u00a0Groups<\/strong>\u00a0and create\u00a0Featured Maps and Apps<\/strong>,\u00a0and then add the items you want to display to that group. Follow best practices to create good thumbnails for each item. For more information, see theArcGIS<\/em>Blog<\/em>\u00a0post \"Put Your Best Thumbnail Forward<\/a>.\"\r\n\r\nOnce you've added the desired maps and apps to the group, select the group in the\u00a0Featured Content<\/strong>\u00a0section on the\u00a0Home Page<\/strong>\u00a0tab:\r\n\r\n\r\n\r\nThe home page, which now includes featured content, is starting to look pretty snappy!\r\n\r\n\r\n\r\n \r\n

Use Larger Background Graphics<\/h2>\r\nYou can use a larger custom image that fits behind the featured content ribbon by changing the\u00a0Banner<\/strong>\u00a0settings on the\u00a0Home Page<\/strong>\u00a0tab. Two good size choices are 960\u00a0x\u00a0400 pixels and 960\u00a0x\u00a0470 pixels.\r\n\r\nThe first option is to use a 960 x 400 pixel image, which leaves a bit of the featured content ribbon exposed, allowing the text under the thumbnails to be clearly visible on the gray background.\r\n\r\nAdd a 960 x 400-pixel image in the same way you did above\u2014by adding a custom image in the\u00a0Banner<\/strong>\u00a0section of the\u00a0Home Page<\/strong>\u00a0tab.\r\n\r\n\r\n\r\nHere's the home page after the 960 x 400 pixel graphic was added.\r\n\r\n\r\n\r\nNote:<\/strong>The bottom corners of the image are automatically rounded when you add a custom image as described above. If you don't want the corners rounded, you can edit the HTML code used to display the image.\r\n\r\nIn the\u00a0Banner<\/strong>\u00a0section, click\u00a0Custom design<\/strong>, then click the\u00a0View<\/strong>\u00a0HTML Source<\/strong>button.\r\n\r\n\r\n\r\nYou will need to know a little about HTML to make the edits, but you can easily remove the rounded corners and square them off. Select the inline style element at the end of the HTML code (highlighted in blue), delete, and\u00a0Save<\/strong>.\r\n\r\n\r\n\r\nHere's the same\u00a0Home Page<\/strong>\u00a0graphic without rounded corners. Compare it to the graphic with rounded corners shown above and decide which one you find more appealing.\r\n\r\n\r\n

A Second Option<\/h2>\r\nUsing a 960 x 470 pixel image will completely cover the gray background. This means the thumbnail title text, which is blue, will display on top of your image. To make the text pop, you can add a light-colored stripe or fade transition along the bottom of your banner as shown in the example below.\r\n\r\nAdd the image the same way you did above, by placing a custom image in the\u00a0Banner<\/strong>\u00a0section of the Home Page tab. The home page is shown below. Note that the corners are automatically rounded.\r\n\r\n\r\n

Learn More<\/h2>\r\nYou can continue to customize your organization by adding your own HTML code in the\u00a0Banner<\/strong>\u00a0section and by changing the\u00a0organization description<\/strong>\u00a0on the\u00a0General<\/strong>\u00a0tab]. For more information, seeSupported HTML<\/a>\u00a0and the following topics in the ArcGIS Online Help:\r\n