Configure 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.

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.

Create a home page

Use the home page editor to create a home page for your ArcGIS Enterprise 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.

The following steps and information describe the modern home page configuration experience introduced at 10.9.

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 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 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 have already 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:

        Consider the size of your image file before uploading it. Large file sizes may affect performance for some users of the website.

6. Click Layout Options and do any of the following:
   • Select a height for the cover image.
   • 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 by	Set item sharing level to
Everyone (public)	Everyone (public)	Everyone (public)
All organization members	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.

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 enter the body text in the Body copy text box.

      To include hyperlinks in your body text, click Add link. In the Add link window, enter 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:[e-mail]. The link is added to the Body copy text box using markdown syntax.

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

      Note:

      If you have already 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, enter 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:[e-mail]. 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. 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.
   8. 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.
   9. 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 have already 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.
   10. Repeat these steps for each gallery.
5. To add a link block, do the following:
   1. Click Add block and click Link.
   2. Click Add link.
   3. In the Link title text box, type a title for the link.
   4. In the Link destination text box, enter a valid website HTTPS URL or email link.

      Tip:

      Valid syntax for email links is mailto:[e-mail].

   5. Click Add to add the link.
   6. Repeat the previous steps to add links to the block.

      Each link block can contain up to eight links.

   7. 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.
   8. From the Block colors drop-down menu, select a different background color for the link block as needed.

      Note:

      If you have already 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.

   9. Do any of the following to manage the links:
      • To edit a link, click the Edit button , make the necessary changes, and click Save.
      • To delete a link, click the Delete button .
      • To change the order of links in the block, click the Reorder button 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 , make the necessary changes, and click Save.
   • To delete a block, click the Delete button .
   • To change the position of blocks on the home page, click the Reorder button on a block and drag it to a new position.
8. Click Save when you are finished.

Footer

You can configure a custom contact link 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 enter the footer text.

   To include hyperlinks in the custom footer text, click Add link. In the Add link window, enter 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:[e-mail]. 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 enter 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 have already 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.

Note:

You can configure additional links to appear in the home page footer by editing the footerLinks property in the configuration file for your portal. See Set advanced portal options for more details.

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 beside a block element—for example, Background.
   4. Specify a color by entering 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 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 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 , make changes to the style name or colors, and click Overwrite style.
8. To remove a custom color style, click the Delete button , 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.