Site editing basics

After you've created a site, you can use the site editor and its side panel to configure your site's settings, design its layout, and add pages.

In this topic, you will learn how to do the following:

• Start an edit session in the site editor, save your work, and view your changes.
• Use rows and cards to design a site or page layout.
• Set background colors, text colors, and fonts.
• Configure a header and a footer.

Open a site in edit mode

To get started, open your site in edit mode. For information on opening a page in edit mode, see Open a page in edit mode.

From a browser window

To open a site in edit mode from your browser, complete the following steps:

1. Open the site's URL in a new browser window and click Sign In on the global navigation bar.
2. Click the edit button to open the site editor.

   Note:

   To sign in and edit a site, global navigation must be enabled and you must belong to the site's core team, have administrative privileges, or be the original owner of the site.

From the Sites application

Open a site from the application's Overview page.

1. Open the URL for your organization's ArcGIS Enterprise website.

   Note:

   You can also access the Sites administration app using the URL https://webadaptorhost.domain.com/webadaptorname/apps/sites/admin.

2. Click Sign In at the top of the portal website home page and enter your account credentials.
3. Click the apps switcher button next to your user profile and choose Sites.
4. On the Overview page, click Manage on the Sites card and open the site by clicking on its title.

From ArcGIS Enterprise

To open a site in edit mode from ArcGIS Enterprise, follow these steps:

1. Sign in to ArcGIS Enterprise.
2. Find the site Site Application item under Content.
3. Click the item to open its item details page and click Configure App.

Save your edits

As you edit your site, save your changes regularly. The Save button is located in the upper right corner of the edit navigation bar. You can optionally publish your site as a draft for others to review. For more information, see Publish a site or page.

Note:

If core team members are editing the site concurrently or the site is open in multiple tabs, the edits made by the last person to save and close the site are applied. Open tabs do not automatically refresh to show new changes, so it’s best if one core team member at a time edits a site.

Side panel actions and edit navigation bar

For most site editing workflows, you will use your site's side panel. This panel includes the Settings, Header, Theme, Layout, and Footer menus.

To open the side panel, click the side panel toggle button . Click the back button next to Customize at the top of the panel to return to the root menu.

The site editor also includes an edit navigation bar at the top of the layout editor that allows you to access additional features, such as teams, feedback, and the content library. You can also save your site and access your site's item details page in ArcGIS Enterprise from this bar. Click the more button and choose Edit in ArcGIS Enterprise.

Design the layout of the site

To start designing the layout of your site, open the Layout menu in the side panel to access a selection of cards that allow you to add images, text, apps, media, and other components to your site.

Your site's default layout is designed to show you how you can combine cards to construct a cohesive narrative that focuses on providing context before introducing your content. You can adopt this format as is, update its colors and content, or remove all cards and start with a blank layout.

To become familiar with editing your site's layout, follow these steps to add a new row card:

1. Click Layout in the side panel.
2. Drag the Row card from the side panel onto the layout and position the row where you want it.

   Note:

   Rows are the building blocks of the layout and are required anywhere you want to insert a card, such as a text, app, or image card.

3. Drag a card, such as the text card, from the side panel onto the new row and position the card where you want it.

   Tip:

   To reposition a card in a row, hover over the upper right corner of the card and use the position button to move the card. You can also use the arrows to the right and left of the card to resize it.

4. Optionally, to reposition a row, hover over the upper right corner of the row and use the position button to move the row.

   You can move the row, including every card it contains, to a new place on the layout.

5. Click Save.
6. To remove a card or row, click its delete button .

Site settings

Each site has its own settings that allow you to control certain elements, such as URL configuration and site name and summary, and interactions, such as private downloads and global navigation.

Tip:

The URL for your site is an important setting to configure early. To configure your URL with a custom domain or to rename your site, consider configuring your site URL now.

For more information, see Configure site settings.

Headers, footers, and global navigation

A header and footer are important for completing the layout of your site. In the header, you can introduce your site by adding branding and creating a menu that help visitors find content, pages, and external websites. The footer signals the end of your site and provides space for helpful information, such as your organization's copyright information, location, and contact information.

Additionally, all new sites are enabled with global navigation, a capability that places a thin, compact bar above the header. This bar allows visitors to search your site's content using keywords and phrases, access their user profile, and view notifications.

Note:

On smaller devices, such as a mobile phone, the header collapses into a drop-down menu and global navigation elements are available in a side panel so visitors can browse your content on any screen size.

The header, footer, and global navigation bar remain consistent across the site and its pages to ensure that visitors can navigate back to the original page when following links to other pages.

You can use custom code in headers and footers. You can also use the options in the Header menu on the side panel to configure the following (no coding required):

• A logo
• Header background and text color
• Social icons to connect visitors with your social media platforms
• Menu links to pages and additional resources to create site navigation

For more information, see Brand a site with header and theme options and Configure global navigation and menu links.

Colors and fonts

You can define the colors for the header, global navigation bar, buttons, text, and background colors using the Theme menu in the side panel. The colors and fonts that you select are applied to the entire site layout and to any pages attached to the site.

You can override theme colors for individual rows to get more granular control of the layout colors. Each row has its own settings that allow you to set text and background colors, as well as apply an image as a background.

To get started, hover over the upper right corner of the row and click the settings button to modify the following:

• Choose a wide or box layout—Wide expands the row across the entire layout. Box displays content at a fixed width in the row.

  Tip:

  Box is the recommended setting for publishing sites that are meant to be viewed primarily on mobile devices.

• Change text and background color using hex color codes or the color slider—Any text that appears in the row appears in the color you define in this setting. This includes text displayed in the row using any card. You can also apply color to the row's background.

  Tip:

  Ensure that the color contrast between row text color and background color meets or exceeds an accessibility ratio of 4.5:1 for regular text and 3:1 for large text or symbols. There are many websites you can use to check color contrast, such as WebAIM.

• Set a background image—You can optionally set an image as the background for a row by uploading an image or pasting a link to a hosted image file.

  Tip:

  When using a background image, choose an image with a simple pattern or subject, especially if you plan to overlay text and other content.

For more information on formatting rows, see Add text and images and Create a theme.

Pages

A page is an additional web page you can attach to your site that adopts the header, footer, and custom domain of your site. You can link to additional pages using menu links in the header.

Note:

If you plan to cover a range of information or display several items using iframes and the map card (web maps and web scenes), consider using pages to separate your content by theme or topic. This will maintain loading and performance for your site and allows site visitors the opportunity to browse your content at their own pace.

Every page added to your site includes a side panel with the same Layout menu included in the site editor. This means that you can design the layout of your page using cards in the same way that you design a site.

For more information about pages, see Add pages to your site.