Adicionar texto e imagens

Membros da equipe de núcleo podem adicionar imagens e texto a um site utilizando os cartões seguintes:

• Cartão Linha—Os blocos de construção do seu site. Cada cartão, com exceção do cartão do banner, deve agrupar dentro de um cartão de linha. Você pode adicionar imagens e cores de plano de fundo ao seu cartão de linha. Você também pode criar um efeito de paralaxe utilizando este cartão.
• Cartão Texto—Adicione texto em qualquer lugar no seu site soltando este cartão sobre um cartão de linha. Você também pode utilizar este cartão para adicionar botões, listas, tabelas, e código personalizado ao seu site.
• Cartão Banner—Cria seções utilizando este o cartão para separar os elementos do site. Este cartão também apresenta uma barra de pesquisa opcional.
• Cartão Imagem—Adiciona imagens independentes para qualquer cartão de linha, em qualquer lugar em seu site.

Para começar, entre no Portal for ArcGIS e clique em Sites na página Visão Geral para visualizar uma lista de sites.

Dica:

Você também pode editar um site ao visualizá-lo em um navegador. Verifique se você está conectado e procure o botão de edição à esquerda do seu site.

Adicionar e formatar texto

O texto pode ser adicionado ao seu site em qualquer lugar que houver um cartão de linha.

1. Arraste um cartão Texto sobre uma linha existente.
2. Paire sobre o cartão e clique no botão de configurações para trocar para o modo de edição.
3. Adicione texto.
4. Selecione o texto que deseja formatar. Opções de formatação incluem estilo (adicionar cabeçalhos, trechos de código e citações), negrito, itálico e links.
5. Para alterar o tamanho do texto, clique no botão de estilo e escolha um tamanho de cabeçalho.
6. Para ajustar o alinhamento do texto, clique nas opções de parágrafo e escolha um alinhamento. Você também pode recuar ou evitar o recuo de uma linha de texto escolhendo a opção de parágrafo e selecionando uma ou outra opção.

   Dica:

   Se você cometer um engano, pressione Command+Z ou Ctrl + Z em seu teclado para reverter suas alterações.

7. Clique em Salvar.

Alterar cor de texto

Altere a cor de texto seguindo estas etapas.

1. Paire sobre o cartão de linha em que seu cartão de texto é agrupado e clique no botão de configurações do cartão de linha.
2. Altere a cor inserindo um código de cor hex ou escolhendo uma cor a partir do seletor de cor.

   Dica:

   Códigos hex são úteis para assegurar marcas consistentes pelos recursos da sua organização. Se você estiver inseguro de particularidades relacionadas a marca da sua organização, veja se ela fornece qualquer documentação ou diretrizes da marca.

3. Clique em Salvar.

Alterar fontes

Você pode alterar a fonte para cabeçalhos de texto e texto base utilizando Google Fonts. O texto base inclui todos os textos no layout do seu site. Esta fonte também é aplicada a quaisquer páginas que foram adicionadas a seu site, as páginas de detalhes do item acessadas pela pesquisa do site e quaisquer visualizações de eventos.

Para mais informações, consulte Formatar texto em seu ArcGIS Hub e sites do ArcGIS Enterprise.

Adicionar uma lista numerada ou com marcadores.

Crie uma lista seguindo estas etapas.

1. Adicione texto ou selecione o texto existente.
2. Escolha a lista não ordenada para criar uma lista com marcadores.
3. Escolha a lista ordenada para adicionar uma lista numerada.
4. Clique em Salvar.

Adicione uma imagem independente

Adiciona imagens transferindo-as a partir do arquivo ou fornecendo uma URL para uma imagem hospedada. As imagens que são interiormente compartilhadas somente estarão visíveis por aqueles que estão registrados e pertenceram à equipe principal ou da organização.

1. Arraste um cartão Imagem sobre uma linha existente.
2. Paire sobre o cartão e clique no botão de configurações para trocar para o modo de edição.
3. Escolha uma fonte de imagem. Você pode transferir um arquivo de imagem ou fornecer uma URL de imagem. Ambas as opções suportam JPG, JPEG e PNG.
   • Para transferir um arquivo de imagem, escolha Transferir Imagem e arraste o arquivo na caixa no Editor do Site ou clique em Procurar por Imagem para localizar e adicionar seu arquivo. O tamanho máximo do arquivo é 3 MB.
   • Ou, forneça uma URL de imagem escolhendo uma Imagem de URL e colando um link de imagem suportada no campo URL .
4. Se utilizar um arquivo de imagem, você pode personalizar imagens transferidas clicando no botão recortar e arrastando um manipulador para redimensionar a borda de recorte. A borda de recorte pode ser reposicionada clicando e arrastando na linha pontilhada. Você também pode ampliar ajustando o controle deslizante abaixo da imagem e reposicionando a imagem ao clicar dentro da borda de recorte.
5. A partir do menu Opções , forneça o texto de imagem para ajudar novos usuários e melhorar a acessibilidade do seu site.
6. Forneça um hyperlink de imagem e escolha pelo link para abrir a mesma guia ou uma nova guia.

   Anotação:

   Diretrizes de acessibilidade (na entrada 3.2.2 e técnica G201) recomenda que você evite abrir links em novas guias ou janelas a menos que você forneça avisos avançados.

7. Forneça o texto Legenda de Imagem e escolha o alinhamento de texto.
8. Opcionalmente, clique em Dimensionar Imagem para Preencher para configurar um ponto focal da imagem. O ponto focal assegurará que sua imagem permanece focada onde você deseja que a imagem redimensione para telas diferentes.
9. Clique em Salvar.

Adicionar imagens e cor de plano de fundo

Você pode adicionar imagens atrás de outros cartões utilizando a linha e cartões de banner. A adição de cor para estas imagens podem facilitar a visualização do texto.

Dica:

Se você estiver exibindo texto ou conteúdo sobre uma imagem, escolha uma cor de plano de fundo claro ou escuro. Por exemplo, se você estiver utilizando texto de cor clara ou exibindo um mapa de cor clara, escolha uma cor de plano de fundo escura, tal como, preto, para assegurar que seu texto permanece limpo. Então, ajuste a transparência da cor de forma que sua imagem permaneça visível.

1. Arraste um cartão Banner ou Linha sobre seu site.
2. Paire sobre o cartão e clique no botão de configurações para trocar para o modo de edição.
3. Em Imagem de plano de fundo, escolha uma fonte de imagem. Você pode transferir um arquivo de imagem ou fornecer uma URL de imagem. Ambas as opções suportam JPG, JPEG e PNG.
   • Para transferir um arquivo de imagem, escolha Transferir Imagem e arraste o arquivo na caixa no Editor do Site ou clique em Procurar por Imagem para localizar e adicionar seu arquivo. O tamanho máximo do arquivo é 3 MB.
   • Ou, forneça uma URL de imagem escolhendo uma Imagem de URL e colando um link de imagem suportada no campo URL .
4. Após você adicionar uma imagem, selecione uma cor para Cor de plano de fundo em Configurações de Linha inserindo um código hex ou utilizando o seletor de cores.

   Anotação:

   Somente cartões de linha suportam cores de plano de fundo.

5. Em Aparência, ajuste a transparência da imagem utilizando o controle deslizante ou inserindo um valor no campo de porcentagem. O ajuste da transparência da imagem, a cor de plano de fundo irá clarear ou escurecer dependendo de como você ajustou. Esta é uma técnica útil para assegurar que sua imagem e texto permaneçam acessíveis para usuários perspicazes.
6. Clique em Salvar.

Escolha um layout de imagem em um cartão de linha

Cada cartão de linha tem duas opções de layout que habilita você a escolher como sua imagem é exibida.

1. Após adicionar uma imagem para um cartão de linha, você pode optar por ter um layout largo ou fixado para imagem e qualquer conteúdo exibido no cartão.
   • Escolha Largo se você desejar que sua imagem amplie na largura do seu site.
   • Escolha Fixado se desejar que sua imagem permaneça fixa.
2. Defina o Ponto Focal da Imagem para assegurar que sua imagem permaneça focada onde você deseja que a imagem redimensione para telas diferentes.
3. Clique em Salvar.

Configurar texto com HTML

Se você desejar utilizar HTML para personalizar seu texto, você pode utilizar os elementos de HTML seguintes:

1. Arraste um cartão Texto sobre uma linha existente.
2. Paire sobre o cartão e clique no botão de configurações para trocar para o modo de edição.
3. Clique na opção Visualização de Código .
4. Inserir seu código
5. Clique em Salvar.

Aviso:

Para propósitos de segurança, os cartões de texto não suportam JavaScript embutido. Tags de script serão ignoradas.

Os seguintes elementos de HTML são permitidos:

'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',

Os seguintes atributos para estes elementos são permitidos:

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']