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:
- Escolher uma cabeçalho e título para um site.
- Adicionar um logo para um cabeçalho do site.
- Alterar as cores de um cabeçalho do site, botões, texto e plano de fundo.
Para iniciar, entre no Portal for ArcGIS, e clique em Sites na página Visão Geral para visualizar uma lista de seus sites.
Dica:
Você também pode editar um site ao visualizá-lo em um navegador. Certifique-se que você entrou no ArcGIS Hub e procure pelo 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.
- Clique em Cabeçalho no painel personalizar.
- 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.
- Personalizar CSS/HTML—Utilize um editor de código de sintaxe habilitada para configurar uma cabeçalho com código personalizado. Para mais informações, consulte Cabeçalhos e rodapés personalizados.
Anotação:
Para adicionar um logo, siga as etapas fornecidas na próxima seção.
- 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 curta deles em 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.
- Escolha uma opção para Layout: Caixa ou Larga.
- 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.
- Modifique a caixa CSS no painel lateral e clique em Aplicar Alteraçõespara ver os efeitos do seu código.
- 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.
- Clique em Cabeçalho no painel personalizar.
- Clique para expandir o menu Marca .
- Clique no botão Logo para ativá-lo.
- Adicione uma imagem escolhendo URL de 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 nas na seção Configurações de Imagem do cartão no painel Personalizar . - Se você estiver utilizando o cabeçalho Proeminente , você pode escolher uma configuração para Alinhamento de Imagem.
- 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ê pode considerá-lo decorativo e digitar “” para o texto alt. - Clique em Salvar.
Criar um tema
Crie um tema para o seu site escolhendo cores para o cabeçalho, o texto e os botões do seu site.
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.
- Para selecionar uma cor de qualquer uma das opções seguintes, insira um código de cor ou escolha uma cor a partir de seletor de cores próximo ao campo de código de cor.
- Cor de Plano de Fundo de Navegação Global aplica cor na barra de navegação global do seu site.
- Cor de Texto de 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?
- A Cor de Plano de Fundo do Cabeçalho aplica a cor no cabeçalho do seu site.
- A Cor de Texto do Cabeçalho aplica a cor de todos os textos no cabeçalho.
- A Cor de 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 Adicionar seu primeiro cartão utilizando o cartão de linha.
- Cor do Corpo do Texto aplica ao texto pelo seu site.
- Cor do Link do Corpo aplica a cor em quaisquer links fornecidos em seu site.
- Cor de 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.
- Após configurar as cores, clique em Aplicar as Alterações.
- 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 de Base .
- 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é
O padrão do Editor de Site não tem um rodapé. Você deve criar um rodapé personalizado para ter um rodapé persistente em todas as páginas do seu site.
- A partir da seção Rodapé , selecione
Personalizar.
Um rodapé padrão aparece na página e uma caixa CSS aparece no painel lateral.
- Clique no botão de configurações à direita inferior do rodapé para editar a HTML.
- Clique no botão de configurações novamente para visualizar suas alterações.
- Modifique a caixa CSS no painel lateral e clique em Aplicar Alteraçõespara visualizar os efeitos em sua HTML.
Dica:
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.