Add text and images

Initiative or site core team members can add images and text to a site using the following cards:

• Row card—The building blocks of your site. Every card, except for the banner card, must nest inside a row card. You can add images and background colors to your row card.
• Text card—Add text anywhere to your site by dropping this card onto a row card. You can also use this card to add buttons, lists, tables, and custom code to your site.
• Banner card—Create sections by using this card to break up site elements. This card also features an optional search bar.
• Image card—Add stand-alone images to any row card, anywhere on your site.

To get started, sign in to ArcGIS Hub, and click Sites on the Overview page to view a list of your sites. If your organization has a license to ArcGIS Hub premium, you can find your sites listed under Initiatives on the Overview page.

Dica:

You can also edit a site when viewing it in a browser. Be sure you're signed in to ArcGIS Hub and look for the edit button to the left of your site.

Add and format text

Text can be added to your site anywhere there is a row card.

1. Drag a Text card onto an existing row.
2. Hover over the card and click the settings button to switch to edit mode.
3. Add text.
4. Select the text you want to format. Format options include style (add headers, code snippets, and quotes), bold, italics, and links.
5. To change the size of text, click the style button and choose a header size.
6. To adjust text alignment, click the paragraph options and choose an alignment. You can also indent or negative indent a line of text by choosing the paragraph option and selecting either option.

   Dica:

   If you make a mistake, press Command+Z or Ctrl + Z on your keyboard to revert your changes.

7. Click Save.

Change text color

You can change text color using your site's Theme settings if you want to apply the same color to all text on your site. Alternatively, you can adjust text color by row using row settings.

1. Open a site in edit mode.
2. To set a color for all text on your site or page, open the side panel and expand the Theme menu. For more information on themes, see Brand a site with header and theme options.
3. To set a color for a specific row, click the edit pencil for the row.
4. Change the color by entering a hex color code, or by choosing a color from the color picker.

   Dica:

   Hex codes are useful for ensuring consistent branding across your organization's resources. If you're unsure of the specifics related to your organization's branding, see if it provides any documentation or brand guidelines.

5. Click Save.

Change fonts

You can change the font for text headings and base text using Google Fonts. Base text includes all text on your site’s layout. This font is also applied to any pages that have been added to your site, item details pages accessed through the site’s search, and any events views.

For more information, see Formatting text on your ArcGIS Hub and ArcGIS Enterprise sites.

Add a bulleted or numbered list

Create a list by following these steps.

1. Add text or select existing text.
2. Choose the unordered list to create a bulleted list.
3. Choose the ordered list to add a numbered list.
4. Click Save.

Add a stand-alone image

Add images by uploading them from a file or by providing a URL to a hosted image. Images that are shared internally will only be viewable by those who are signed in and belong to the core team or organization.

1. Drag an Image card onto an existing row.
2. Hover over the card and click the settings button to switch to edit mode.
3. Choose an image source. You can either upload an image file or provide an image URL. Both options support JPG, JPEG, and PNG.
   • To upload an image file, choose Upload Image and drag the file onto the box in the Site Editor, or click Browse for Image to locate and add your file. The maximum file size is 3 MB.
   • Or, provide an image URL by choosing Image URL and pasting a supported image link in the URL field.
4. If using an image file, you can customize uploaded images by clicking the crop button and dragging a handle to resize the crop frame. The crop frame can be repositioned by clicking and dragging on the dotted line. You can also zoom by adjusting the slider below the image and repositioning the image further by clicking within the crop frame.
5. From the Options menu, provide image alt text to help non-sighted users and improve the accessibility of your site.
6. Provide an image hyperlink and choose for the link to open in either the same tab or a new tab.

   Anotação:

   Accessibility guidelines (on Input 3.2.2 and technique G201) recommend that you avoid opening links in new tabs or windows unless you provide advanced warning.

7. Provide text for Image Caption and choose text alignment.
8. Optionally click Scale Image to Fill to set a focal point for the image. The focal point will ensure that your image remains focused where you want it as the image resizes for different screens.
9. Click Save.

Add background images and color

You can add images behind other cards using the row and banner cards. Adding color to these images can make text easier to see.

Dica:

If you are displaying text or content over an image, choose a light or dark background color. For example, if you're using light-colored text or displaying a light-colored map, choose a dark background color, such as black, to ensure that your text remains clear. Then, adjust the transparency of the color so your image remains visible.

1. Drag a Banner or Row card onto your site.
2. Hover over the card and click the settings button to switch to edit mode.
3. Under Background Image, choose an image source. You can either upload an image file or provide an image URL. Both options support JPG, JPEG, and PNG.
   • To upload an image file, choose Upload Image and drag the file onto the box in the Site Editor, or click Browse for Image to locate and add your file. The maximum file size is 3 MB.
   • Or, provide an image URL by choosing Image URL and pasting a supported image link in the URL field.
4. After you've added an image, select a color for Background Color under Row Settings by entering a hex code or by using the color picker.

   Anotação:

   Only row cards support background colors.

5. Under Appearance, adjust the transparency of the image by using the slider or entering a value in the percentage field. By adjusting the transparency of the image, the background color will brighten or dim depending on how you've adjusted it. This is a useful technique for ensuring your image and text remain accessible for sighted users.
6. Click Save.

Choose an image layout on a row card

Every row card has two layout options that enable you to choose how your image is displayed.

1. After adding an image to a row card, you can choose to have a wide or fixed layout for the image and any content displayed on the card.
   • Choose Wide if you want your image to span the width of your site.
   • Choose Fixed if you want your image to stay fixed.
2. Set Image Focal Point to ensure that your image remains focused where you want it as the image resizes for different screens.
3. Click Save.

Configure text with HTML

If you'd like to use HTML to customize your text, you can use the following HTML elements:

1. Drag a Text card onto an existing row.
2. Hover over the card and click the settings button to switch to edit mode.
3. Click the Code View option.
4. Enter your code.
5. Click Save.

Aviso:

For security purposes, text cards do not support embedded JavaScript. Script tags will be ignored.

The following HTML elements are allowed:

'a', 'abbr', 'acronym', 'address', 'article', 'audio', 'b',
	'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite',
 'code', 'col',
 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt',
	'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font',
	'footer', 'frameset',
	'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
 'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', 'p',
	'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp',
	'section', 'small', 'source', 'span', 'strike', 'strong', 'style'
 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'textarea',
	'th', 'thead', 'time', 'title', 'tr', 'track, 'tt', 'u','ul',

The following attributes for those elements are allowed:

All supported HTML elements allow : ['class', 'style'],
 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle',
 'name', 'rel', 'style', 'target'],
	'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload'],
 'blockquote': ['cite'],
	'button' : ['name', 'value', 'data-toggle', 'data-target',
	'data-dismiss'],
 'col' : ['span', 'width'],
 'colgroup' : ['span', 'width'],
	'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']
	'font': ['size', 'color', 'style'],
 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title',
	'width'],
 'ol' : ['align', 'start', 'type'],
	'p' : ['style'},
 'q' : ['cite'],
	'source' : ['media', 'src', 'type'], 
	'span' : [style],
 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height',
	'style', 'summary', 'width'],
 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width'],
 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',
	'rowspan', 'style', 'valign', 'width']
 'tr' : [alignt, 'height', style', valign'],
 'ul' : ['type']