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—Estes são os blocos de construção do seu site. Cada cartão deve ser ageupado em um cartão de linha. Você pode adicionar imagens e cores do plano de fundo aos seus cartões 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 Imagem—Adiciona imagens independentes para qualquer cartão de linha, em qualquer lugar em seu site.

Para começar, entre no ArcGIS Enterprise e selecione Sites na página Visão Geral para visualizar uma lista dos seus 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. Abra um site ou página no modo de edição.
2. Adicione um cartão de Texto para uma linha.
3. Adicione texto.
4. Selecione o texto que deseja formatar. As opções de formato incluem estilo (Normal, Código, Cabeçalhos, etc.), negrito, itálico e links.
5. Para alterar o tamanho do texto, selecione o botão de estilo e escolha um tamanho de cabeçalho.
6. Para ajustar o alinhamento do texto, selecione as opções de parágrafo e escolha um alinhamento. Você também pode mover uma linha de texto escolhendo a opção de parágrafo e selecionando recuar ou não recuar.

   Dica:

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

7. Selecione Salvar.

Anotação:

O tamanho da fonte de texto da fonte base foi aumentado em todos os sites e páginas em 2021/2022 para melhorar a legibilidade e tornar o conteúdo da web acessível a pessoas com diversas habilidades. Leia o FAQ: Próximas alterações no tamanho de fonte base e unidades rem em postagem do ArcGIS Enterprise Sites para obter detalhes.

Alterar cor de texto

Para aplicar a mesma cor a todo o texto do seu site, altere a cor do texto usando as configurações de Tema do seu site. Como alternativa, você pode ajustar a cor do texto usando as configurações de linha.

1. Abra um site ou página no modo de edição.
2. Para definir uma cor para todo o texto em seu site ou página, abra o painel lateral e expanda o menu Tema. Para obter mais informações sobre temas, consulte Definir a marca de um site com opções de cabeçalho e tema.
3. Para definir uma cor para uma linha específica, selecione o lápis de edição da linha.
4. Altere a cor inserindo um código de cor hexadecimal ou escolhendo uma cor no seletor de cores.

   Dica:

   Códigos hexadecimais são úteis para garantir 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.

5. Selecione 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. Essa fonte também é aplicada a todas as páginas que foram adicionadas ao seu site e às páginas de visualização de conteúdo acessadas por meio da pesquisa do site.

Para mais informações, consulte Formatando texto no seu ArcGIS Hub e ArcGIS Enterprise Sites.

Adicionar uma lista numerada ou com marcadores

Crie uma lista seguindo estas etapas.

1. Abra um site ou página no modo de edição.
2. Adicione um cartão de Texto a um site ou layout de página.
3. Adicione texto ou selecione o texto existente.
4. Selecione Lista não ordenada para criar uma lista com marcadores ou Lista ordenada para criar uma lista numerada.
5. Selecione Salvar.

Criar um menu lateral

Adicione um menu dobrável, uma opção útil para adicionar perguntas mais frequentes.

1. Abra um site ou página no modo de edição.
2. Adicione um cartão de Texto ao layout.
3. Selecione o botão Inserir e escolha Menu Lateral.
4. Adicione e formate o texto.
5. Selecione Salvar.

Componentes Calcite suportados

O cartão de Texto suporta os seguintes componentes do Calcite Design System. Veja um catálogo de todos os componentes do Calcite que inclui descrições, usos ideais, exemplos e muito mais.

'ação-calcite' 'menu lateral-calcite' 'item-menu lateral-calcite' 'avatar-calcite' 'bloco-calcite' 'botão-calcite' 'cartão-calcite' 'chip-calcite' 'gupo-menu suspenso-calcite'

'item-menu suspenso-calcite' 'calcite-fab' 'fluxo-calcite' 'ícone-calcite' 'link-calcite' 'calcite-modal' 'painel-calcite' 'pontuação-calcite' 'botão-dividir-calcite'

'tutorial-calcite' 'item-tutorial-calcite' 'tabela-calcite' 'navegar-tabela-calcite' 'título-tabela-calcite' 'tabelas-calcite' 'mosaico-calcite' 'dica-calcite' 'dica da ferramenta-calcite'

Adicionar uma imagem independente

Adiciona imagens transferindo-as a partir do arquivo ou fornecendo uma URL para uma imagem hospedada. As imagens compartilhadas internamente podem ser visualizadas somente por aqueles que estão conectados e pertencem à equipe ou organização principal.

1. Abra um site ou página no modo de edição.
2. Adicione um cartão de Imagem a uma linha existente.
3. Escolha uma fonte de imagem no editor de layout. Você pode fornecer uma URL de imagem ou carregar de um arquivo de imagem. Ambas as opções suportam JPG, JPEG e PNG.
   • Para fornecer uma URL, escolha URL da Imagem e cole um link de imagem suportada no campo URL.
   • Para carregar um arquivo, escolha Carregar imagem e arraste o arquivo para a caixa ou selecione Procurar imagem para localizar e adicionar seu arquivo. O tamanho máximo do arquivo é 3 MB.
4. Para personalizar uma imagem carregada, selecione o botão Cortar imagem e arraste uma alça para redimensionar a moldura de corte. Para reposicionar a moldura de corte, selecione e arraste a linha pontilhada. Para ajustar o zoom, use o controle deslizante abaixo da imagem e reposicione ainda mais a imagem selecionando dentro da moldura de corte.
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 hiperlink de imagem e defina o link para abrir na mesma guia ou em 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 da 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 garantirá que a imagem permaneça focada onde necessário, à medida que é redimensionada para diferentes telas.
9. Selecione Salvar.

Criar um botão

Um botão com um link para outro local, como uma seção ou página, é uma ferramenta de navegação útil. Os botões também podem incluir frases para ações.

1. Abra um site ou página no modo de edição.
2. Adicione um cartão de Texto ao layout.
3. Selecione o botão Inserir e escolha Botão.
4. Edite o texto no botão para incluir sua chamada para ação.
5. Selecione o botão que você acabou de adicionar e clique no botão de link.
6. Na caixa de texto Texto para exibir , adicione o texto se você ainda não tiver adicionado.
7. Na caixa de texto da URL, cole o link para o qual deseja que os usuários sejam direcionados quando selecionarem o botão.
8. Selecione Inserir link para confirmar suas alterações.
9. Selecione Salvar.
Para obter informações sobre as cores dos botões, consulte Criar um tema.

Adicionar imagens e cor do plano de fundo

Você pode adicionar imagens atrás de outros cartões usando o cartão de Linha.

Dica:

Se você estiver exibindo texto ou conteúdo sobre uma imagem, escolha uma cor de plano de fundo contrastante. 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 garantir que seu texto permanece claro. Em seguida, ajuste a transparência da cor para que a imagem permaneça visível.

1. Abra um site ou página no modo de edição.
2. Adicione um cartão de Linha ao layout e formate em Aparência.
3. Em Imagem do plano de fundo, escolha uma fonte de imagem. Você pode fornecer uma URL de imagem ou carregar de um arquivo de imagem. Ambas as opções suportam JPG, JPEG e PNG.
   • Para fornecer uma URL, escolha URL da Imagem e cole um link de imagem suportada no campo URL.
   • Para carregar um arquivo, escolha Carregar imagem e arraste o arquivo para a caixa ou selecione Procurar imagem para localizar e adicionar seu arquivo. O tamanho máximo do arquivo é 3 MB.
4. Após adicionar uma imagem, selecione uma Cor de plano fundo inserindo um código hexadecimal ou usando o seletor de cores.

   Anotação:

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

5. Para ajustar a Transparência da imagem, use o controle deslizante ou insira um valor no campo de porcentagem. Isso clareia ou escurece a cor do plano de fundo dependendo do ajuste. Isso pode ajudar a garantir que a imagem e o texto permaneçam acessíveis para usuários com deficiência visual.
6. Selecione Salvar.

Escolher 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 a um cartão de linha, você poderá escolher um layout fixo ou amplo para a imagem e outros conteúdos exibidos no cartão.
   • Escolha Caixa se quiser que a imagem permaneça fixa.
   • Escolha Amplo se você desejar que sua imagem amplie na largura do seu site.
2. Defina o Ponto focal da imagem para garantir que a imagem permaneça focada onde necessário enquanto for redimensionada para diferentes telas.
3. Selecione Salvar.

Configurar texto com HTML

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

1. Abra um site ou página no modo de edição.
2. Adicione um cartão de Texto ao layout e selecione </> Editar em HTML.
3. Digite seu código e selecione 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']