Back to Top

Configure home page

In this topic

  1. Create a home page
  2. Legacy home page

The home page is the landing page of your organization's website and serves as a gateway for your user community. The home page provides helpful resources and content for organization members and, if you allow outside access, for the public. You can configure a modern and professional-looking home page that reflects your organization's branding and mission and showcases the maps, scenes, apps, and layers that are most important to your community.

Note:

Organizations established before June 2020 may have configured their home page using legacy home page settings. Support for the legacy home page settings has been discontinued and organizations have been upgraded to the modern, mobile-friendly home page experience featuring item galleries, links, and custom colors and fonts. If your organization had received an extension to continue using your legacy home page, you can still view the legacy home page to reference or copy content to the modern home page.

Using the customizable components, or blocks, in the home page editor, default administrators and those with the appropriate privileges can design, preview, and deploy a responsive home page that is optimally displayed in both desktop and mobile browsers.

Tip:

For tips and best practices to help you get started, see Best practices for creating an organization home page.

Create a home page

Use the home page editor to create a home page for your ArcGIS Online organization. The home page editor includes a flexible set of components and options that allow you to create a unique entry point to your site. As you configure your page using the home page editor, a live preview of your design choices helps you achieve the look and functionality you want. Use the view options at the bottom of the home page editor to see how your page will appear on different devices.

Note:

Organizations established before June 2020 may have configured their home page using legacy home page settings. Support for the legacy home page settings has been discontinued and organizations have been upgraded to the modern, mobile-friendly home page experience featuring item galleries, links, and custom colors and fonts. If your organization had received an extension to continue using your legacy home page, you can still view the legacy home page to reference or copy content to the modern home page.

  1. Verify that you are signed in as a default administrator or custom role with administrative privileges to manage the organization website.
  2. At the top of the site, click Organization and click the Settings tab.
  3. Click Home page on the side of the page.
  4. In the Home page editor section, click Launch editor.
  5. Configure the content elements of your home page as follows:
    • Header—Title, logo, and cover image
    • Content blocks—Item galleries, text, and links
    • Footer—Contact information, custom footer text and links, and footer styling
  6. Configure the design of your home page as follows:
    • Colors—Preset or custom color themes
    • Typography—Preset or custom font themes
  7. Use the View options to preview how your home page will be displayed on desktop, tablet, and mobile devices.
  8. Click Save to apply your home page configuration.
  9. Click the Close button Close to close the home page editor.
  10. At the top of the site, click Home to see your home page.

Header

The home page header can include any of the following elements: a cover image, an organization title, and an organization logo.

To configure the home page header, do the following:

  1. Follow the first four steps of the Create a home page section above.
  2. Under Content, click Header.
  3. Optionally, include the title of your organization in the header.
    1. Turn on the Show organization title toggle button.
    2. In the Organization title text box, keep the title (imported from your organization profile settings) or type a new one.
    3. From the Header colors drop-down menu, select a color for the title text.
      Note:

      If you specified a preset or custom color theme for your home page design, selecting a new color from the drop-down menu will override the color style specified for this element.

  4. Optionally, include an organization logo in the header.
    1. Turn on the Show organization logo toggle button.
    2. Click Choose file and browse to the image file on your desktop.

      Acceptable image formats are PNG, GIF, and JPEG. For best results, the logo should be 300 pixels wide by 300 pixels high.

    3. Pan and zoom to what you want to appear in your logo.

      Depending on the size and resolution of your image file and how far you zoom in to customize the thumbnail, the image can be resampled and scaled when it's saved.

    4. Click Save.
  5. Optionally, include a cover image in the header.
    1. Turn on the Show cover image toggle button.
    2. Use one of the following options to select a cover image option:
      • Use a stock cover—Apply a ready-to-use stock cover image. Select an image from the drop-down menu.
      • Upload a custom cover—Upload a custom cover image. Click Choose file and browse to an image file on your desktop. Acceptable image formats are PNG, GIF, and JPEG. Click Save.
        Note:

        The image should be approximately 1920 pixels wide by 1080 pixels high. Consider the size of your image file before uploading it, because large file sizes may affect performance for some users of the website. The file size should be smaller than 1 MB.

  6. Click Layout Options and do any of the following:
    • Select a height for the cover image—full screen, two-thirds screen, or half screen.
    • Adjust the focal point of the cover image by clicking in the image preview window. The focal point you specify determines the center of the image on all screen sizes.
    • Adjust the opacity of the cover image using the Overlay opacity slider.
    • Adjust the vertical alignment of the title and logo and their horizontal position in relation to the cover image.
      Note:

      If you choose Align left, the alignment of the title adjusts dynamically based on the screen size. If you make the screen size narrow on a desktop device, the title becomes more centered. On a tablet or phone, the title is always centered regardless of the alignment option you choose.

  7. Click Save to save your header configuration.

Content blocks

The home page can include up to 15 blocks of content, including text, item galleries, and links. Use text blocks to configure headlines and other text-based content about your organization. Configure item galleries to showcase maps, scenes, apps, and other content items. Add blocks of custom links to help members and visitors discover more content.

When you configure an item gallery, you specify a group that contains the items you want to display. This allows you to configure custom galleries to display different content for different audiences. For example, an organization that allows anonymous access may want some items to be visible only to organization members and hidden from nonmember visitors to the site.

You can control the visibility of item galleries and individual gallery items using a combination of group settings (Who can view this group?) and item sharing levels as follows:

Who is the item gallery for?Make group viewable bySet item sharing level to

Everyone (public)

Everyone (public)

Everyone (public)

All organization members (no nonmembers)

People in the organization

Organization

Specific organization members

People in the organization

Item gallery group and other specific groups

If an item gallery has no visible items for someone viewing the home page, the gallery does not appear. For example, nonmembers will not see a gallery that only contains items shared at the organization level.

When configuring a link block, you can include up to eight links. You can use website URLs and email addresses for your links. Valid HTTPS URLs and mailto link syntax must be used. You can configure the links to appear as underlined text or as buttons. You can also include an image for each link.

Each content block can be customized to meet the needs of your organization and user community. Once configured, the blocks can be reordered on the page and edited as needed.

To configure content blocks on the home page, do the following:

  1. Follow the first four steps of the Create a home page section above.
  2. Under Content, click Content blocks.
  3. To add a text block, do the following:
    1. Click Add block and click Text.
    2. To include a headline, turn on the Show headline toggle button and type a headline.
    3. To include body text, turn on the Show body copy toggle button and type the body text in the Body copy text box.

      To include hyperlinks in your body text, click Add link. In the Add link window, type a link title and a link destination and click Add. The link destination must be a valid HTTPS URL—for example, https://www.arcgis.com/home—or a mailto link—for example, mailto:info@example.com. The link is added to the Body copy text box using markdown syntax.

    4. Choose an alignment option for the text.
    5. From the Block colors drop-down menu, select a background color for the text block.
      Note:

      If you specified a preset or custom color theme for your home page design, selecting a new color from the drop-down menu will override the color style specified for this element.

    6. Click Save to save the text block configuration.
    7. Repeat these steps for each text block.
  4. To configure an item gallery, do the following:
    1. Click Add block and click Item gallery.
    2. Click the Group box and find and select a group whose content you want to feature in the gallery.
    3. To include a title, turn on the Show title toggle button and type a title.
    4. To include a summary, turn on the Show summary toggle button and type a summary in the Summary text box.

      To include hyperlinks in the gallery summary, click Add link. In the Add link window, type a link title and a link destination and click Add. The link destination must be a valid HTTPS URL—for example, https://www.arcgis.com/home—or a mailto link—for example, mailto:info@example.com. The link is added to the Summary text box using markdown syntax.

    5. Choose an alignment option for the title and summary text.
    6. Select a number from the Number of items displayed drop-down menu.
    7. Optionally, turn off the Show featured content toggle button to display items most recently added to the group instead of featured group content in the item gallery.

      This option is only available if the selected group has a curated gallery of featured items.

    8. To change how the items are sorted, select an option in the Sort items by drop-down menu. For example, you can sort items by view count or owner. To order the items in descending order instead of ascending order, uncheck the Sort ascending check box.

      If the group has a featured content gallery and the Show featured content toggle button is turned on, the items are displayed in the same order in the home page item gallery as they appear in the featured content gallery for the group.

    9. From the Display item types drop-down menu, select the type of items to display—for example, Maps or Apps—or select All to display all item types in the gallery.
    10. In the Item display preferences section, do any of the following:
      • From the Block colors drop-down menu, select a different background color for the gallery as needed.
        Note:

        If you specified a preset or custom color theme for your home page design, selecting a new color from the drop-down menu will override the color style specified for this element.

      • Specify the information you want to display on the item cards. For example, you can turn off the Show item type and Show item summary toggle buttons to hide this information.
    11. Repeat these steps for each gallery.
  5. To add a link block, do the following:
    1. Click Add block and click Link.
    2. Optionally, turn on the Add images to links toggle button to include an image for each link in the block.
    3. Click Add link.
    4. In the Link title text box, type a title for the link.
    5. If you turned on the option to include images, click Upload image in the Link image box, browse to an image, and click Save.

      For best results, choose an image that is 800 pixels wide by 600 pixels high.

    6. In the Link destination text box, type a valid website HTTPS URL or email link.
      Tip:

      Valid syntax for email links is mailto:info@example.com.

    7. Click Add to add the link.
    8. Repeat the previous steps to add links to the block.

      Each link block can contain up to eight links.

      Note:

      Links are not supported for trial subscriptions.

    9. To display each link as a button, turn on the Show button outlines toggle button. Turn off the toggle button to display the links as underlined text.
    10. From the Block colors drop-down menu, select a different background color for the link block as needed.
      Note:

      If you specified a preset or custom color theme for your home page design, selecting a new color from the drop-down menu will override the color style specified for this element.

    11. Do any of the following to manage the links:
      • To edit a link, click the Edit button Edit, make the necessary changes, and click Save.
      • To delete a link, click the Delete button Delete.
      • To change the order of links in the block, click the Reorder button Reorder next to a link and drag it to a new position.
  6. Click Save when you are finished configuring the blocks.
  7. In the Body pane, do any of the following to edit and sort the blocks you configured:
    • To edit a block, click the Edit button Edit, make the necessary changes, and click Save.
    • To delete a block, click the Delete button Delete.
    • To change the position of blocks on the home page, click the Reorder button Reorder on a block and drag it to a new position.
  8. Click Save when you are finished.

Footer

By default, the home page footer contains three preconfigured links, including a Contact Esri link. You can also configure a custom contact link and footer text for your organization, as well as choose a background color for the footer.

To configure the home page footer, do the following:

  1. Follow the first four steps of the Create a home page section above.
  2. Under Content, click Footer.
  3. To include custom text—for example, copyright text—in the footer, turn on the Display footer text toggle button and type the footer text.

    To include hyperlinks in the custom footer text, click Add link. In the Add link window, type a link title and a link destination and click Add. The link destination must be a valid HTTPS URL—for example, https://www.arcgis.com/home—or a mailto link—for example, mailto:info@example.com. The link is added to the Footer text box using markdown syntax.

  4. To include a Contact Us link in the footer, turn on the Display contact us link toggle button and type an email address to use for the link.
  5. From the Block colors drop-down menu, select a background color for your home page footer.
    Note:

    If you specified a preset or custom color theme for your home page design, selecting a new color from the drop-down menu will override the color style specified for this element.

  6. Click Save to save your footer configuration.

Colors

The home page editor gives you control over the colors displayed on your home page. You can choose from a list of eight preset color themes to apply to your home page content. Each color theme contains color styles that define the text, background, headline, and button or link colors.

If the preset themes don’t meet your needs—for example, if your organization has specific color branding requirements—you can create a custom color theme with color styles that you configure.

To configure colors for the home page, do the following:

  1. Follow the first four steps of the Create a home page section above.
  2. Under Design, click Colors.
  3. Click Use preset theme or Use custom theme.
  4. If you are using preset themes, select a preset theme from the drop-down menu and optionally modify the color style applied to any of the home page components—for example, a text block or gallery.
  5. If you are configuring a custom color theme, configure one or more custom styles as follows:
    1. Under Custom color styles, click Add custom style.
    2. Type a name for the style.
    3. Under Configure colors, click the Edit custom style button Edit custom style beside a block element—for example, Background.
    4. Specify a color by providing a hexadecimal value, RGB values, or HSV values or by choosing a color from the color picker or the palette of preset colors or shared theme colors (if defined).
    5. Repeat these steps for each block element for which you want to configure colors.
    6. If any elements are marked as Not legible, click the Edit custom style button Edit custom style for the element and configure a different color.

      You can adjust the background color instead.

      Note:

      A contrast ratio is calculated and displayed for each of the title, summary, and link or button colors. The contrast ratio is a measure of the amount of contrast between the background color and each of these specified colors. Higher contrast ratios have better legibility based on WCAG 2.1 accessibility standards. A contrast ratio of less than 4.5 is flagged as Not legible.

    7. In the Add custom style window, click Save when you are finished.
  6. To create additional custom styles, repeat the previous step.
    Tip:

    To create a custom color style based on an existing style, you can click the Edit button Edit for a style, type a name for the new style, configure the style colors, and click Save as new style.

  7. To edit a custom color style, click the Edit button Edit, make changes to the style name or colors, and click Overwrite style.
  8. To remove a custom color style, click the Delete button Delete, confirm that you want to delete the style, and click Remove.
    Note:

    If you remove the style, a gray style is applied to any home page blocks that are styled with the custom style you want to remove.

  9. Click Save to save your color configuration.

Typography

The home page editor gives you control over the fonts displayed on your home page. You can choose from a list of preset font themes designed to make your home page look professional. Each preset font theme includes a font for titles and a font for body text.

If the preset themes don’t meet your needs—for example, if your organization has specific font branding requirements or you want more font choices—you can create a custom font theme by choosing a title and body font combination from a selection of common fonts.

To configure fonts for the home page, do the following:

  1. Follow the first four steps of the Create a home page section above.
  2. Under Design, click Typography.
  3. Click Use preset theme or Use custom theme.
  4. Do one of the following:
    • If you are using a preset font theme, choose one from the list.
    • If you are using a custom font theme, choose a title font and a body font from the drop-down menus.
  5. Click Save to save your font configuration.

Legacy home page

Support for the legacy home page settings has been discontinued, and organizations have been upgraded to the modern, mobile-friendly home page experience featuring item galleries, links, and custom colors and fonts. If your organization had received an extension to continue using your legacy home page, you can still view the legacy home page to reference or copy content to the modern home page.

  1. Verify that you are signed in as a default administrator or custom role with administrative privileges to manage the organization website.
  2. At the top of the site, click Organization and click the Settings tab.
  3. Click Home page on the side of the page.
  4. Click the previous home page link.

Feedback on this topic?

In this topic
  1. Create a home page
  2. Legacy home page