Create a great home page for your organization

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 enhance your organization’s home both visually and functionally.

When you first set up your organization you can choose its name. In this example our organization is titled “Esri Understanding Our World” which we’ve entered in our organization settings under General (note that we’ve also added our organization logo):

Here’s what our home page looks like after setting the name and logo:

To improve the look of your home page you can choose a different banner or create a custom one. When creating a custom banner the size should be 960 pixels wide by 180 pixels high to avoid distortion. Add the custom image in the Banner section of the  Home Page settings:

With a custom banner our home page is much more appealing.

Something you may want to add is a gallery ribbon featuring interesting or useful maps and apps. To add a featured content gallery, create a group (we named ours “Esri Featured Maps”) 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 settings:

Our home page now includes featured content:

You can use a larger image that fits behind the featured content ribbon by changing the Banner settings. Click HTML, then add a custom image by clicking the image button.

To completely fill the background create an image 960 pixels by 470 pixels. Here’s our home page using a larger custom image:

Using HTML you can also add buttons and other elements to your home page. To enter HTML make sure the HTML radio button is toggled, then click the View HTML Source button. Now you can enter HTML to create your page.

By using code similar to that shown below (displayed using Notepad++) you can include a button that opens a website, a map, a group, or anything else that can be accessed via a URL.

Below is the button on our home page (“Esri Home”) that was added using the HTML shown above. When clicked the esri.com home page opens.

There’s lots more that you can do by adding your own HTML. For more information see Using HTML to create a home page banner.

Finally, you may want to include a description that tells visitors about your organization, informs users of changes and events, and includes links to maps or other destinations. You can use the description as a bulletin board for broadcasting important news. For more information see Configuring the home page.

Here’s our final organization home page, including descriptive text and links.

Remember that your home page is best thought of as a resource for users within your organization, and is not ideal as a public facing website since it exposes more casual users to map authoring tools, and they will be unable to save their maps unless they have an account with your organization.

If you want to share maps and apps publicly you can use public groups and group gallery templates (see Doing more with ArcGIS Online groups), as well as a variety of other templates you can find by searching ArcGIS Online.

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

Leave a Reply

13 Comments

  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 – bszukalski@esri.com

      - 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?

    Thanks.

  3. kentucky_dgi says:

    Bern,
    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:
    http://kygeonet.maps.arcgis.com/home/index.html

    Link to new dynamic Custom Banner that won’t work: http://kygeonet.ky.gov/agol/KyGovMapsHeaderImageSlider.html

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

    Thanks for any guidance or suggestions,

    Kent

    • 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?
      Thanks,

  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 resilience.maps.arcgis.com. I’ll publish a blog on the details shortly if this doesn’t make sense.
      -bern

  5. aujohnson says:

    I am trying to use the following image:

    http://ci.soldotna.ak.us/images/ModelOrganizationalLargeBanner.jpg

    on

    https://soldotna.maps.arcgis.com/home/index.html

    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:
      http://blogs.esri.com/esri/arcgis/2013/03/14/home-page-banner-redux/

      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:

      http://blogs.esri.com/esri/arcgis/2014/04/29/style-overrides-home-featured-content-buttons/

      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 bszukalski@esri.com and I will email you the HTML to use.

  6. 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!