Create a great home page for your organization

Your organization home page is the place visitors and organization members will start. How your home page looks will create first impressions – not just about you as a GIS organization, but also about the quality and veracity of the maps and apps people will find there.

People do judge books by their cover, so it’s important to have a professional looking, aesthetic, and well-organized home site, whether you’re exposing it only within your organization, or to a more public audience.

As 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 post we’ll take a closer look at how to visually enhance your organization’s home page.


The basics

The organization Administrator sets up the organization’s home page, and can modify it at any time. The home page settings can be accessed after logging in. Click Organization:

Then click Settings:

Click the General tab (a). When you set up your organization you can enter a name (b).  In this example our organization is titled “The Science of Where.”

We’ve also added a logo (c), and entered a brief description (d). To display the description, check the box (e).

It’s also a good idea to add a contact for the page. This mailto link appears at the bottom of the home page. Scroll further down in the General tab to locate Link and check the Contact Us box, and add the mailto contact information.

You can also choose a different graphic than the default for your home page background. Click the Home Page tab, then scroll down to the Banner section. Choose from one of the displayed options. We chose the gray banner.

Here’s what our home page looks like. It’s not going to win any awards, but it’s a start.


Beyond the basics

To improve the look of your home page you can create a custom custom banner. When creating a custom banner you can start with a size of 960 pixels wide by 180 pixels high (the smallest banner the home page supports). Add the custom image in the Banner section of the Home Page tab:

With a custom banner image our home page is much more appealing. Note that if you use a custom image you’ll have to include the organization name, logo, and other graphics you might want directly on the image.


Add a gallery

Something you should definitely think to add is a gallery ribbon featuring interesting or useful maps and apps. To add featured content to your home page, create a group (we named ours “Featured Maps and Apps”) then add the items you want to display to that group. We followed best practices to create good thumbnails for each item. For more information see Put your best thumbnail forward.

Once you’ve added the desired maps and apps to the group, select the group by going to the Featured Content section in the Home Page tab:

Our home page now includes featured content, and is starting to look pretty snappy!


Using larger background graphics

You can use a larger custom image that fits behind the featured content ribbon by changing the Banner settings. There are two good size choices; 960 x 400 px, and 960 x 470 px.

960 x 400 pixels

A good size to use is 960 pixels x 400 pixels, which leaves a bit of the featured content ribbon exposed, allowing the text under the thumbnails to be clearly visible on the gray background.

Add an image of this size the same way as as you you did above; by adding a custom image in the Banner section of the Home Page tab.

Here’s our home page after adding the larger (960 x 400 px) graphic.

Tip: Note that the bottom corners are automatically rounded when you add a custom image as described above. If you don’t want the corners of the image rounded (I personally think the background image at this size looks better if the corners are not rounded), you can edit the HTML used to display the image.

In the Banner section click Custom design, then click the View HTML Source button:

You will need to know a little HTML to make the edits, but you can easily remove the rounded corners to keep them squared off. Select the inline Style element at the end of the HTML (highlighted in blue), delete, and Save.

Here’s the same graphic used for the Home Page without rounded corners. Compare to the rounded corners shown above and decide which you find more appealing.

960 x 470 pixels

Using an image sized at 960 pixels x 470 pixels 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 is shown in this example).

Add the image the same way as as you you did above, by adding a custom image in the Banner section of the Home Page tab. Below is the home page, note the corners are automatically rounded.


Going further

There’s lots more that you can do to customize your organization home page by adding your own HTML in the Banner section and also the Organization Description. For more information see Supported HTML.


For more information

This post was originally published on June 20, 2012, and has been updated.

This entry was posted in ArcGIS Enterprise, ArcGIS Online and tagged , , , , , , . Bookmark the permalink.

Leave a Reply


  1. leszolman says:

    Thanks for the great ideas!

    I am having problems uploading an image that will completely fill the background. When I go into the Home / Banner and upload a 960×470 image it only fills the banner area not the whole page as noted in this blog.

    Also I do not see how/where to add the HTML for the addition of a button.

    I am really excited about these two new features/ideas – any help implementing them would be much appreciated.

    • Bern Szukalski says:

      Hi, thanks for the comments.

      To add a larger image to fill the entire background edit your settings and go to Home Page > Banner. Make sure the radio button for HTML is clicked on (by default it is not). Once it is, click the Insert Image button (second row, third from left). Your 960×470 image needs to be at a URL location, and if so just enter the URL. The image should display in the page. Note that if you already had something else there, you’ll need to delete it first to enable Insert Image.

      When you click that HTML radio button you can also enter the HTML for the button. When you do that you need to reference the image you want to use as the background in that HTML. In the sample HTML you will see that background image referenced at line 3.

      Apologies for not being able to make that HTML copy/paste in our WordPress blog, I’ll try to get that worked out and update the post.

      If you have further problems or questions you can send me an email – it’s in my profile –

      - bern

  2. winemapper says:

    Hi, I am wondering about how to improve the appearance of the Featured Content banner. When I look at yours it shows nice looking images of the maps. My banner shows the maps as well, but it also includes every feature service used to create those maps because they are also shared by the the Group whose content is displayed. Is there some way to have only maps displayed in the banner?


  3. kentucky_dgi says:

    I’ve been following your lead on how to do this and we’ve got our’s looking pretty nice. However, I want to add a more dynamic banner with an auto-advancing slideshow and so forth. My current custom banner has a “click to advance” slideshow (and it works well) but when I add any code that utilizes a referenced javascript none of the functions work.

    Current Site with Custom Banner:

    Link to new dynamic Custom Banner that won’t work:

    Is there a limitation on the Custom Banner recognizing javascript? Is that another way to approach this?

    Thanks for any guidance or suggestions,


    • Bern Szukalski says:

      There are limitations as to what you can do in your organization home page, but you can leverage what is in your organization in completely custom web pages. For example, you can embed your home gallery ribbon or gallery matrix using the share/embed capabilities for groups. Or use item thumbnails and associated links in different ways. So while your home page is limited in how creative you can be with it, you can always build your own custom page using the same content.

    • jakepetersen says:

      I see that you were able to get the auto-advancing slideshow to work. Would you be able to share how you did this?

    • says:

      Hi Kent,

      I just figure it out how we can still put the javascript code within custom banner. You can use your javascript code in index.html of Portal home located in “C:\Program Files\ArcGIS\Portal\webapps\arcgis#home”. Then you will got it, hopefully this is what you are searching for, thank you. ~Fatah~

  4. deuelja_hhi says:

    Is there a way to change the group name color at the bottom of the homepage? the image I used is blue and the group names are hard to see.

    • Bern Szukalski says:

      Add the following style override to the HTML config for your home page:

      .galleryNode .galleryLabelContainer {
      color: #dce6a3 !important;

      And substitute the color of your choice. I pulled this from mods I made to I’ll publish a blog on the details shortly if this doesn’t make sense.

  5. aujohnson says:

    I am trying to use the following image:


    But it just keeps showing a broken image. This seems so simple, so it’s frustrating. Any ideas why this isn’t working?

    • Bern Szukalski says:

      I tried and was able to load your image just fine as my home page banner. And you will also need to consider some other tweaks if you want to use a full-size image; nudging the buttons to align with the sides and changing the text color on the gallery.

      Your banner is much larger than it needs to be at 1500 x 735. If you size it at 960 x 400 you won’t have to worry about the dark blue of your graphic not allowing the default light blue of the gallery ribbon text to pop. This blog post details that, and other, size options:

      Using a large size you will notice that the navigation buttons don’t align, so you can tweak that as well (and also the default text color) – covered in this post:

      But just in case, and to save you some work, I can send you the completed HTML that I would recommend you use, and that I used to test to make sure this all works fine. Unfortunately I am having no success pasting the HTML I used into this response, so please email me at and I will email you the HTML to use.

  6. dk10 says:

    Can I re-order my featured content on my home page to a custom ordering system, i.e. not by date or owner etc.?

  7. dk10 says:

    Can I reorder my featured content on my home page to a custom ordering system, i.e. not by date or owner etc.?

  8. nathanenge says:

    I’m trying to use the tags to embed youtube video.
    Your browser does not support the video tag.

    However, the player shows but the video does not.

  9. rdrupe says:

    Is there a way to increase the width of the banner image so that it is not confined to the standard/gallery width? I have an image with a width of 1360 and want it to span the entire webpage (but not as the background image) but instead of being positioned so that it begins from the very left edge of the page, it is positioned so that it begins at the left edge of that section, no matter how large or small an image I use (even though the width is set to 1360px in the style tag).

  10. Bern Szukalski says:

    One way to think about it is that each account has a home page that can be configured by the administrator. When you have a personal account, Esri is your administrator and your home page, featured maps, etc. are configured by Esri. When you have an organizational account, your home page, featured maps, etc. are configured by your organization admin. The short answer is “no” but you can use things like the group gallery templates, embedded galleries, and links to your maps to create your own “home” using configurable apps and/or custom Web pages. I’ll cover this in a blog post post-UC, thanks for the idea!