Skip To Content

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 deve ser ageupado em 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 Imagem—Adiciona imagens independentes para qualquer cartão de linha, em qualquer lugar em seu site.

    Para começar, entre no ArcGIS Enterprise e clique em 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. 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

    Você pode alterar a cor do texto usando as configurações de Tema do seu site se quiser aplicar a mesma cor a todo o texto do seu site. Como alternativa, você pode ajustar a cor do texto por linha 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, clique no lápis de ediçã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 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.

    5. 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. 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 Formatar texto em 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. Clique na lista não ordenada para criar uma lista com marcadores ou clique na lista ordenada para adicionar uma lista numerada.
    5. Clique em Salvar.

    Criar um menu lateral

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

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

    Adicionar 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. 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. 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.

    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 chamadas para ação.

    1. Abra um site ou página no modo de edição.
    2. Adicione um cartão de Texto ao layout.
    3. Clique no botão Inserir e escolha Botão.
    4. Edite o texto no botão para incluir sua chamada para ação.
    5. Clique no botão que você acabou de adicionar e clique no botão do 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 que deseja que os usuários sejam direcionados para quando eles clicarem no botão botão.
    8. Clique em Inserir Link para confirmar suas alterações.
    9. Clique em Salvar.
    10. 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 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. Abra um site ou página no modo de edição.
    2. Adicione um cartão de Linha ao layout.
    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 garantir que a imagem e o texto permaneçam acessíveis para usuários com deficiência visual.
    6. Clique em 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 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. Abra um site ou página no modo de edição.
    2. Adicione um cartão de Texto ao layout e clique em </> Editar em HTML.
    3. Digite seu código e 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']