Quando você rola uma página, o cabeçalho desaparece a uma certa altura. O cabeçalho geralmente contém elementos importantes tais como o logo, o título do website e, sobretudo, o menu principal de navegação. Se quiser evitar que seus visitantes se percam no seu website, você pode colocar esses itens em uma barra que permanecerá à vista no alto da janela do navegador à medida em que as páginas são roladas. Esta barra é chamada Barra Fixa, porque fica fixa no alto da janela. Você pode usar as opções nas seções a seguir para personalizar tanto seu conteúdo quanto seu estilo gráfico:
Se estiver trabalhando em um website responsivo, poderá customizar a barra fixa para os diversos viewports em cada breakpoint. Nestes casos, a janela exibe uma Barra Responsiva que reflete a barra na janela Resoluções e Design Responsivo. A Barra Responsiva reproduz todos os breakpoints que tenham sido configurados e, consequentemente, os intervalos de resolução de tela: clique em um intervalo para selecioná-lo e defina as configurações gráficas ou o conteúdo da barra fixa.
Se quiser que uma barra superior permaneça à vista quando o cabeçalho não estiver mais visível, você pode selecionar a opção Exibir uma barra superior.
Você pode customizar a aparência da barra fixa com as opções da seção Estilo.
| ▪ | Cor do fundo: indica a cor a ser usada como plano de fundo. |
| ▪ | Arquivo de imagem: indica o arquivo (.JPG, .GIF, .PNG.) da imagem a ser usada como plano de fundo. A imagem pode vir da biblioteca online, que pode ser acessada através do botão  , ou de uma de suas pastas offline, que podem ser acessadas com o botão  Seleção de arquivo. |
| ▪ | Repetir: indica se a imagem do plano de fundo deverá ser repetida. Imagens podem ser repetidas horizontalmente, verticalmente, ou em ambas as direções de modo a ocuparem todo o espaço disponível. A imagem também pode ser redimensionada de modo a cobrir todo o plano de fundo. Neste caso as proporções originais podem não ser mantidas. |
| ▪ | Alinhamento: indica como a imagem deverá ser alinhada à barra fixa. |
| ▪ | Altura: fornece a altura, em pixels, da barra fixa. |
| ▪ | Opacidade: você pode configurar o grau de transparência da cor de fundo da barra fixa. Valores próximos a 0 aumentam a transparência, permitindo que o conteúdo da página seja visto através dela. |
| ▪ | Expandir para a largura da janela do navegador: se for selecionada, a barra fixa irá ocupar a largura total da janela do navegador, e não somente a largura do conteúdo da página. |
|
Depois de ter definido a aparência da barra fixa, você terá que trabalhar em seu conteúdo.
O editor gráfico para trabalhar na barra fixa é o mesmo editor que você usa para o modelo (na janela Conteúdo do Modelo). Este editor tem uma Barra de ferramentas e, abaixo ela, a área de trabalho que automaticamente exibe a imagem do plano de fundo. A imagem é exibida na escala 1:1, e você poderá rolar, se necessário. Quaisquer alterações que fizer usando este editor serão exibidas em tempo real na imagem.
Tem uma Barra de status imediatamente abaixo da imagem, que fornece as seguintes informações:
| ▪ | Posição: exibe as coordenadas x e y do canto superior direito do objeto selecionado, em relação à área ocupada pela barra fixa, cabeçalho, rodapé ou barra lateral que esteja sendo exibido. |
| ▪ | Tamanho: informa a altura e largura, em pixels, do objeto selecionado. |
Há uma lista de todos os objetos que podem ser usados na barra fixa abaixo da barra de status.
Estes objetos são os usados para compor as páginas (veja no Passo 4 - Páginas): eles são fáceis de identificar, graças aos filtros, e há uma pré-visualização disponível para cada um deles.
|
Todos os elementos principais que tenham sido adicionados ao cabeçalho (um logo, o título do website, o menu principal de navegação, etc.) deveriam ser incluídos na barra fixa.
|
|
Melhores práticas:
