Skip To Content

Definir a marca de um site com opções de cabeçalho e tema

Definir seu site com logo da sua organização e cores estabelece seu conteúdo como confiável e autorizado. Também ajuda seu site misturar com outros conteúdos da web da sua organização. Este tópico descreve como os administradores e membros da equipe principal podem fazer o seguinte:

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.

Escolher um estilo de cabeçalho

O cabeçalho do seu site é onde você pode definir a marca do seu site com um logo, crie navegação para outros recursos com links de menu e link para contas de rede social.

  1. Abra um site no modo de edição.
  2. Abra o painel lateral clicando no botão de alternância botão de alternância. Se necessário, clique na seta de voltar ao lado de Personalizar na parte superior do painel para retornar ao menu raiz até visualizar a opção de clicar no Cabeçalho.
  3. Em Cabeçalho clique no menu Aparência para escolher um estilo para seu cabeçalho. As seguintes três opções que estão disponíveis para escolher:
      • Padrão—O padrão para cada novo site, este design apresenta uma barra fina, compacta que tem espaço para um logo (60 pixels), rede social e links de menu.
      • Proeminente—Este design fornece mais espaço para logos maiores (120 pixels) e links de menu extras.
      • CSS/HTML Personalizado—Utilize um editor de código habilitado por sintaxe para configurar uma cabeçalho com código personalizado.
      Anotação:

      Para adicionar um logo, siga as etapas fornecidas na próxima seção.

  4. Clique no menu Marca . Todos os campos fornecidos no menu são opcionais.
    • Nome—Insira um nome para aparecer no cabeçalho do seu site. O nome que você fornece neste campo é somente visível no cabeçalho e não será refletido na URL do seu site ou em sua lista de sites.
    • Nome Curto—Insira uma versão abreviada deles que você adicionou ao seu cabeçalho. Este nome somente aparecerá se o nome original do seu cabeçalho for muito longo quando visualizado em tamanhos de tela pequena (por exemplo, um telefone celular).
      Dica:

      As pessoas utilizam dispositivos móveis para acessar internet. É altamente recomendado que você adicione um nome curto para assegurar a qualidade de seu site em qualquer dispositivo.

  5. Escolha uma opção para Layout: Caixa ou Amplo.
  6. Se você desejar inserir a marca no cabeçalho do seu site com HTML personalizada ou CSS, escolha Utilizar HTML/CSS personalizada.

    Anotação:

    HTML de cabeçalho não suporta JavaScript embutido. Tags de script serão ignoradas.

  7. Modifique a caixa CSS no painel lateral e clique em Aplicar Alterações para ver os efeitos do seu código.
  8. Clique em Salvar.

Adicionar um logo a um cabeçalho

O tamanho e posicionamento do logo do seu site depende do estilo de cabeçalho que você escolhe.

  1. Clique para expandir o menu Marca em Cabeçalho no painel lateral.
  2. Clique no botão Logo para ativá-lo.
  3. Adicione uma imagem escolhendo URL da Imagem ou transferindo uma imagem de um arquivo.

    Dica:
    Se você estiver transferindo uma imagem do arquivo um , uma imagem salva como um arquivo PNG funciona melhor. Você pode recortar e ampliar a imagem na seção Configurações da Imagem do cartão no painel Personalizar.

  4. Se você estiver utilizando o cabeçalho Proeminente , você poderá escolher uma configuração para Alinhamento da Imagem.
  5. Para Logo Texto Alt, forneça o texto para atender os padrões de acessibilidade.

    Dica:
    Se um logo tiver texto nele, o texto alt pode ser o nome da companhia. Se o logo for um design de logomarca , você poderá considerá-lo decorativo e digitar “” para o texto alt.

  6. Clique em Salvar.

Adicionar ícones de rede social

Adicione ícones de rede social a um cabeçalho.

  1. Clique para expandir o menu Marca em Cabeçalho no painel lateral.
  2. Clique no menu Ícones de Rede Social.
  3. Clique no botão para adicionar um ícone de rede social para Facebook, Twitter, Instagram ou YouTube.
  4. Forneça a URL para sua conta da plataforma.
  5. Clique em Salvar.

Criar um tema

Estabeleça um tema para o seu site escolhendo cores para o cabeçalho, texto e botões do seu site. As cores que você escolhe no menu Tema do seu site são aplicadas em todo o seu site. Você pode substituir essas seleções configurando cores para linhas específicas. Para mais informações, consulteCores e fontes.

Dica:

Ao escolher uma cor, revise as diretrizes de marcas para sua organização. Muitas diretrizes de marcas fornece códigos de cor exatos para conteúdo tais como sites da web e logos. Se você não tiver diretrizes de marcas, consulte com sua equipe ou partes interessadas para assegurar que o tema do seu site reflita corretamente sua organização.

  1. Abra um site no modo de edição.
  2. Abra o painel lateral clicando no botão de alternância botão de alternância. Se necessário, clique na seta de voltar ao lado de Personalizar na parte superior do painel para retornar ao menu raiz até visualizar a opção de clicar no Tema.
  3. Para selecionar uma cor de qualquer uma das opções seguintes, insira um código de cor de valor hexadecimal ou escolha uma cor a partir do seletor de cores próximo ao campo de código de cor.
    • Cor do Plano de Fundo da Navegação Global aplica cor na barra de navegação global do seu site.
    • Cor de Texto da Navegação Global aplica cor ao texto na barra de navegação global.
      Anotação:

      Para mais informações sobre navegação global, consulte O que é navegação global?

    • Cor do Plano de Fundo do Cabeçalho aplica a cor no cabeçalho do seu site.
    • Cor de Texto do Cabeçalho aplica a cor em todos os textos no cabeçalho.
    • Cor do Plano de Fundo do Corpo aplica a cor nas linhas do seu site. Cor de linha e cor de texto também podem ser configuradas para cada linha seguindo as etapas fornecidas em Cor e fontes.
    • Cor de Corpo do Texto aplica ao texto em todo o seu site.
    • Cor de Link do Corpo aplica a cor em quaisquer links fornecidos em seu site.
    • Cor do Plano de Fundo do Botão aplica a cor nos botões fornecidos em seu site.
    • Cor de Texto do Botão aplica ao texto em quaisquer botões fornecidos em seu site.
  4. Após configurar as cores, clique em Aplicar as Alterações.
  5. Você também pode aplicar as fontes do texto no cabeçalho e no corpo de seu site.
    • Para escolher uma fonte para o corpo do seu site, clique no botão de configurações Fonte Básica.
    • Para alterar a fonte do cabeçalho do seu site, clique no botão de configuração Fonte do Cabeçalho.
Anotação:

Para reiniciar de ou retornar para cores padrões, escolha Redefinir para o Padrão na parte inferior da do menu Tema .

Criar um rodapé

Você pode usar HTML personalizada para adicionar um rodapé ao seu site que seja persistente em quaisquer páginas anexadas ao seu site.

  1. Expanda o menu Rodapé no painel lateral.
  2. Clique no botão próximo à Personalizar.
  3. Modifique a caixa CSS e HTML no painel lateral e clique em Aplicar Alterações para visualizar os efeitos em sua HTML.
    Anotação:

    A HTML do rodapé não suporta JavaScript embutido. Tags de script serão ignoradas.

Próximas etapas

Para configurar seu site com mais marcas, você pode fazer o seguinte:

  • Adicionar links de menu e assegurar que a navegação global esteja habilitada. Para mais informações, consulte Configurar links de menu e navegação global.
  • Cada site inclui uma URL (endereço da web). Se sua organização tiver um domínio personalizado, você pode configurar esta URL para definir a marca do seu site. Para mais informações, consulte Configurar uma URL personalizada.