Skip To Content

Design the layout of your Hub site

Once you've configured your Hub site and added data, you can design the home page layout and customize the header and footer. This can all be done from the Site Editor tab. This tab allows you to design your site using the provided editor or custom HTML.

Overview

The site editor is a full page editor that provides you with a site template that you can modify to fit your own site’s branding and data, or completely remove to start from scratch. Hover over the elements on the page to move, resize, edit, or delete elements, or click the gear icon in the upper left corner to open the site editor side panel.

Header settings

The site header can be constructed two ways: using a logo URL and a site title (simple), or using custom HTML and CSS (advanced).

    Simple workflow
  1. Select Use logo and site title.
  2. Enter your title under Site Title.
  3. Enter your image under Logo URL. Images will be scaled to fit a height of 50 pixels.

    Advanced workflow
  1. Select Use custom HTML/CSS.

    A default header appears on the page and a CSS box appears in the side panel.

  2. Click the gear icon at the upper right of the header to edit the HTML.
  3. Click the gear icon again to view your changes.
  4. Modify the CSS box in the side panel and click Apply Changesto see the effects on your HTML.
Caution:

Header HTML does not support embedded JavaScript. Script tags will be ignored.

Note:

The area for My Data and Sign In cannot be edited or removed in order to maintain functionality of the site.

Theme Builder

Determine your site’s theme with the following color options:

  • Header Background Color—Affects the header.
  • Header Text Color—Affects the header text.
  • Body Background Color—Affects the color of transparent home page rows and the page background color of the search results and dataset pages.
  • Body Text Color—Affects the color for regular text throughout the site.
  • Body Link Color—Affects the color links and buttons throughout the site and the hover state of links in the header.

Tip:

Text color can also be changed by row.

Layout Builder

The basic layout of the page is organized by rows and widgets. A widget must be placed in a row. There is no limit to the number of widgets that can be placed in a row.

Row

Use rows to construct the overall layout and house the widgets.

  1. Drag a row from the side panel onto the page.

    Markers appear on the page to guide you.

  2. Hover over the row, and three icons appear on the right side: arrows for moving the row around the page, a gear icon for editing, and an x for deleting the row.
  3. Click the gear icon to switch to edit mode.
  4. Set the text color for this specific row.
  5. Set either a background color (transparent is default) or a background image.
  6. Click Back to Site Editor to return to the main side panel.

Banner Card

Use banners for headings and search bars within the site.

  1. Drag a banner widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Optionally enter a heading and a subheading.
  4. Optionally provide a background image URL and set the minimum height.
  5. Optionally check Show Searchbar to add a search bar to this banner widget.
  6. Optionally check Add Ability to Search by Location to add a secondary search option for users to filter results by location.
  7. Optionally add placeholder text to appear in the search bars.
  8. Click Back to Site Editor to return to the main side panel.

Image Card

You can use images in your layout.

  1. Drag animage widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Provide an image URL.
  4. Provide image alt text to help non-sighted users and improve your site’s accessibility.
  5. Optionally provide an image caption.
  6. Click Back to Site Editor to return to the main side panel.

Text Card

Add text (markdown and HTML) to your layout.

  1. Drag a text widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Enter markdown or HTML text into the text widget.
  4. Click the gear icon to view the text.
Caution:

Text widgets do not support embedded JavaScript. Script tags will be ignored.

The following HTML elements are allowed:

'a', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
 'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
 'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
 'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
 'ul', 'center', 'style', 'div', 'span'

The following attributes for those elements are allowed:

'__ALL__' : ['class', 'style'],
 'a' : ['href', 'title'],
 'blockquote': ['cite'],
 'col' : ['span', 'width'],
 'colgroup' : ['span', 'width'],
 'img' : ['align', 'alt', 'height', 'src', 'title', 'width' ],
 'ol' : ['start', 'type'],
 'q' : ['cite'],
 'table' : ['summary', 'width', 'class'],
 'td' : ['abbr', 'axis', 'colspan', 'rowspan', 'width'],
 'th' : ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
 'ul' : ['type']

Category Card

Use categories to group datasets on your site.

  1. Drag a category widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Edit the link text for your category.
  4. Select either tag query or group.

    This will determine which datasets are returned in the search results when users click this category.

    • Tag—Enter a tag query. All datasets that have this matching tag on their respective ArcGIS Online item will be returned in the search results.
    • Group—Select a group. All datasets in this group will be returned in the search results.
  5. Choose an icon from the library:
    1. Select Pick an Icon.
    2. Choose an icon from the modal and click Select.

      The icon appears in the side panel.

    3. Click the grey box to the right of the icon to choose the icon’s color.
  6. Use your own icon:
    1. Provide a URL for your icon.
    2. Provide alt text for your icon to help non-sighted users and improve your site’s accessibility.
  7. Click Back to Site Editor to return to the main side panel.
Tip:

Custom icons should be saved as an .svg or transparent .png file. Icons will be scaled to fit 120x120 pixels.

Contact Information Card

Provide contact information to send an email to the data owner.

  1. Drag a contact widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Provide the contact email address and email subject line.

    When users click the email on your home page, their email editor opens automatically.

  4. Click Back to Site Editor to return to the main side panel.

Dataset Card

Add featured datasets or other applications to your home page.

  1. Drag a dataset widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Click Find a Dataset.

    All the datasets you have added to your site appear in the modal.

  4. Search for a dataset or select one from the list.

    The dataset appears in the preview pane.

  5. If this is the correct dataset, click Select.

    The dataset’s image, title, and description populate the settings in the side panel. These can be edited for your home page, and it will not affect the dataset details.

  6. Click Back to Site Editor to return to the main side panel.

Iframe Card

Embed iframes and external resources.

  1. Drag an iframe widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Provide your iframe URL and iframe height.
  4. Click Apply.
Caution:

Do not paste in embeddable iframe code from another website. Only paste in the URL that you want to embed.

Tip:

Iframe URLs using HTTP will not appear in the site editor, which uses HTTPS. Save and view your site to observe your iframe.

Chart Card

Create simple charts directly from your datasets, or enter your own chart JSON to create a custom chart.

Simple Chart

Simple charts are created from queries to a selected dataset and are automatically updated as your dataset is updated.

  1. Drag a chart widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Click Find a Dataset.
  4. Select a dataset.
  5. Select a field.

    All fields can make charts. We recommend selecting a field with a chart icon present.

  6. Click Select.
  7. Set a title.
  8. Optionally, set the height (in pixels), the y-axis label, and the x-axis label.

Custom Chart

Custom charts are created from JSON using a specific chart specification.

  1. Drag a chart widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Select 'Use custom JSON'.
  4. Add a chart title.
  5. Enter your JSON in the JSON Chart Specification field.
  6. Optionally, set your chart height (in pixels).

JSON Specification

Entering custom JSON allows you to create custom charts that leverage the Cedar library. A specification is made up of the following components:

Datasets

The datasets array specifies an ArcGIS feature service URL and query parameters. Refer to the REST API documentation to learn more about query parameters.

{ "datasets": [ { "url": "SampleArcGISFeatureService_URL",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}

Series

The series array allows you to specify the mappings between fields in the service response and the visual aspects of the chart (x, y axes, color/size for scatterplot charts, radius for pie charts).

{ "series": [ { "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" } } ] }

Tooltip

The tooltip property allows you to specify the tooltip that will display when hovering over the chart.

"tooltip": { "title": "{Zip}", "content": "{Number_of_SUM}
students in the {Zip} zipcode." }

Override

The override property allows you to specify visual overrides, such as color or positioning, for the entire chart.

"override": { "axes": [ { "titleOffset": 25, "title": "Total
Number of Students" }, { "titleOffset": 50 } ]
}

Specification

The specification property allows you to input an entire Vega chart specification for a purely custom chart. View examples for existing chart specifications.

Examples

Bar Chart:
{ "type": "bar", "datasets": [ {
"url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"query": { "groupByFieldsForStatistics": "Type", "orderByFields":
"Number_of_SUM DESC", "outStatistics": [{ "statisticType": "sum",
"onStatisticField": "Number_of", "outStatisticFieldName": "Number_of_SUM" }] }
} ], "series": [ { "category": { "field": "Type", "label": "Facility Use" },
"value": { "field":"Number_of_SUM","label":"Total Students" } } ]
}

Horizontal Bar Chart:
{ "type": "bar-horizontal",
"datasets": [ { "url":
"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ], "series": [ { "category": {
"field": "Zip", "label": "ZIP Code" }, "value": {
"field":"Number_of_SUM","label":"Total Students" } } ] }

Grouped Bar Chart:

Note: each series will match to a 'group'.

{ "type": "grouped", "tooltip": { "title": "{STATE_NAME}",
"content": "{MaleVets2010} Male Vets | {FemaleVets2010} Female Vets" },
"datasets": [ { "url":
"https://maps7.arcgisonline.com/arcgis/rest/services/Veterans_by_Gender/MapServer/1"
} ], "series": [ { "category": { "field":"STATE_NAME","label":"State" },
"value": { "field": "MaleVets2010", "label": "Veterans by Gender" } }, {
"category": { "field":"STATE_NAME","label":"State" }, "value": { "field":
"FemaleVets2010", "label": "Veterans by Gender" } } ]
}

Scatterplot Chart:
{ "type":"scatter", "datasets": [ {
"url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0"
} ], "series": [ { "category": { "field": "Number_of", "label": "Student
Enrollment (2008)" }, "value": { "field":"F_of_teach", "label": "Fraction of
Teachers" }, "color": { "field":"Type", "label":"Facility Type" } } ]
}

Bubble Scatterplot Chart:
{ "type":"bubble", "datasets":[ { "url":
"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0"
} ], "series": [ { "category": { "field":"F_of_teach", "label": "Fraction of
Teachers" }, "value": { "field": "Number_of", "label": "Number_of" }, "size": {
"field": "Number_of", "label": "Number of Students" } } ]
}

Timeline Chart

Note: Category must be a datetime field.

{ "type": "time", "datasets": [ { "url":
"https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/It's_a_Tornado_Map/FeatureServer/0",
"query": { "orderByFields": "Date" } } ], "series": [ { "category": { "field":
"Date", "label": "Date" }, "value": { "field":"Injuries","label":"Injuries" } }
]
}

Summary Statistic Card

Use summary statistics to provide data at a glance for key performance indicators and more. Summary stats are generated from a dataset query and are automatically updated as the dataset is updated.

  1. Drag a Summary Statistic widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. Click Find a Dataset.
  4. Select a dataset.
  5. Select a field.
  6. Click Select.
  7. Select your desired statistic type.
    • For text and date fields - choose between count, minimum, or maximum.
    • For number fields - choose between count, sum, minimum, maximum, average standard deviation, or variance.
  8. Optionally add a filter to your statistic:
    1. Select an attribute to use for your filter.
    2. Select Add.
    3. Select the new attribute box to show the filter input. The input box will vary depending on the field type.
    4. Enter your desired filter.
    5. Click outside the filter box or hit enter on your keyboard.
  9. Enter a title.
  10. Optionally enter trailing text and change the accent color.

Gallery Card

Use the gallery card to feature web mapping application and web map content on your site. The gallery card retrieves applications and web maps from your organization groups automatically. As you add app and map content to your organization or a particular group, new application tiles appear on your site without having to edit the layout.

  1. Drag a Gallery Card widget onto an existing row.
  2. Hover over the widget and click the gear icon to switch to edit mode.
  3. You will see a few options appear on the left. Click Appls to see all applications inside your organization return in the gallery card.
  4. Adjust the number in Number of Cards Shown (the maximum is 16) to alter the display.
  5. Optionally, in the Show Only section, select Group(s) and select your desired group(s) to filter the applications.

Footer Settings

The site editor’s default does not have a footer. You must create a custom footer to have a persistent footer across all pages of the site.

  1. Under Footer Settings, select Custom.

    A default footer appears on the page and a CSS box appears in the side panel.

  2. Click the gear icon at the lower right of the footer to edit the HTML.
  3. Click the gear icon again to view your changes.
  4. Modify the CSS box in the side panel and click Apply Changes to see the effects on your HTML.
Tip:

Footer HTML does not support embedded JavaScript. Script tags will be ignored.

Using Markdown

Use markdown in the text widgets to customize text on your site.

Supported Markdown for configuring your Hub site