Editando o design do menu

Acesse o novo curso e veja a ferramenta SitePX atualizada.

Nesta aula vamos ensinar a mudar o formato do menu.

Em nosso site-modelo, o menu apresentava os cantos arredondados em cima. Isso fica bom quando está sobre uma faixa ou sobre uma foto. Quando colocamos o menu solto em cima,  no cabeçalho, o botão ficaria melhor com todos cantos arredondados ou todos cantos quadrados – e não apenas em cima.

Vamos então mudar este aspecto. Observe antes a faixa do menu abaixo, para entender bem o que se está comentando. Observe a palavra Home e o formato.

Para fazer esta mudança, entre em “Design Menu”, no cabeçalho. Para você entender melhor esta aula, vamos escolher uma cor nova para todos os botões. Clique no botão de configurações avançadas do menu – identificado pelo ícone Y. Abrirá o controle de Itens do Menu. Neste, clique em Cores. Clique no botão normal, que abrirá a cartela de cores e ali selecione uma cor para o menu. Clique em ok.

Você está ainda no campo Itens do Menu. Clique na aba “Cantos”. 

Nos botões da área “Curva”, você pode escolher o tamanho da curva – se ela é mais fechada, mais aberta.
Já na área “Lados”, você tem curvas de diversas formas. Na medida em que vai clicando em cada botão, observe como os campos do Menu vão se alterando.

Clicando no X, último botão da área “Curva”, você tira todas as curvas e deixa o botão quadrado. Clique. Pronto, o botão ficou quadrado.

Na vídeo-aula, você observará que o botão do menu tem uma borda muito fina em volta. No vídeo, mudamos a cor desta borda para você ver melhor. Existe a possibilidade de você engrossar esta borda ou colocar a borda pontilhada. Para isso, clique no campo Itens do Menu, no botão “Bordas” e ali trabalhe a Espessura. Clique em cada botão e veja o efeito sobre o Menu.

Podemos ter vários tipos de borda – nítida em cima, ou embaixo, assim como de um lado, e de outro. Os botões embaixo da palavra “Lados” lhe permitirá testar cada formato até escolher o que mais agrada você.

Você pode também não ter borda, clicando no X, último botão da área “Lados”. Vamos tirar a borda.

Agora, vamos trabalhar as “Margens”, uma das abas dos Itens do Menu.

Nesta aba “Margens”, podemos mudar as margens dos botões do menu. Teste o efeito de deslocar o mouse na área “Lateral do conteúdo” ou “Vertical do conteúdo”. Pode também alterar a distância entre os itens – experimente mover o cursor em “Superior da área” e assim por diante.

Outra coisa que você pode fazer é trabalhar no campo Itens do Menu, para colocar sombras no menu.

Você pode fazer isso clicando nos botões da área “Posição”. Isso fica bom em sites com fundo claro.

Você viu que existem muitas possibilidades de mudanças no design do menu, para você personalizar seu site, da forma que você quiser. Vamos agora voltar e deixar sem cor, clicando trabalhando na cartela de cores. Pronto! Clique em salvar. Clique em "Visualizar" para ver como está ficando seu site.

Veja esse vídeo no You Tube: https://www.youtube.com/watch?v=IsvfoOqhrQo 

 

Categoria: áreas de design, design, menu
Aula: 16 

voltar para Como criar um site

left show tsN fwR fsN|left tsN b01e fwR bsd show|left fwR tsN show|bnull||image-wrap|news login c05|fsN fwR normalcase tsN|c05|login news fwR normalcase|tsN fwR normalcase|normalcase fwR c05|content-inner||