Neste tutorial continuaremos com a segunda parte das funcionalidades da guia de Design, referente a Navigation do RVSiteBuilder. Veremos como funciona todas as sessões da opção de Navigation, mostrando as configurações realizadas no site demo.
Nota: Conforme for lançado mais tutorias sobre o RVSiteBuilder, o site será atualizado com mais conteúdo referente ao tutoriais posteriores.
1. Acesse o seu painel de gerenciamento cPanel, navegue no menu “Software” e clique em “RVSiteBuilder“;
2. Caso você já tenha um Template, clique em “Edit Website” para editar o seu website;
3. Ao entrar no Projeto, clique na aba ”Design”;
4. Na Sessão “Navigation” selecionaremos a opção de ”Layout”, nela podemos escolher onde será posicionado o Menu de Navegação do site de três formas diferentes, sendo elas em baixo, no meio ou em cima do cabeçalho da página.
Eu procurei posicionar o Menu em baixo no exemplo.
5 A próxima opção é a de Estilo, nela é possível personalizar o Menu de Navegação. A lista de alterações possíveis nesta opção é:
- Cor de fundo: Escolher a cor da Menu de Navegação.
- Imagem do cabeçalho: Aqui, podemos posicionar o conteúdo de dentro do Menu para a esquerda, meio ou para a direita.
- Font: Nesta opção podemos escolher a fonte e o tamanho (medido aqui em pixels) do conteúdo do menu.
- Estilo: Em Estilo, podemos personalizar de duas formas o menu destacado quando o mouse passar por cima da opção desejada, elas são:
>Fill Color Hover: Esse tipo de estilo, totaliza o quadro selecionado sinalizando de forma retangular.
>Round Hover: Já o Round Houver, sinaliza o quadro selecionado de forma circular.
- Link Color: Em Link Color, podemos personalizar a cor da letra mostrada no Menu de navegação.
- Hover Color: Já em Houver Color, personalizamos a cor da letra do Menu quando o mouse se posiciona em cima da opção.
- Hover Background Color: Aqui, personalizamos a cor dentro do estilo escolhido anteriormente, sendo eles Fill Color Houver ou Round Hover.
Ajustei a página, com as seguintes opções:
6 Em seguida, na opção Submenu Level 1, ajustamos as cores dos submenu gerado pelo Menu de Navegação. Nesta sessão temos as seguintes opções:
- Cor de fundo do Bloco: Aqui podemos alterar a cor de todo o submenu.
- Cor Link Text: Cor da letra dentro do submenu.
- Link Text Hover: Cor da letra quando o mouse se posiciona em cima dela.
- Text Fundo Hover: Cor da caixa do submenu quando o mouse se posiciona em cima da opção.
7 Por último, temos a opção Submenu Level 2, aqui podemos personalizar as cores dos submenus gerados pelos Submenu level 1. Esta sessão contém apenas duas opção, a Cor Link Text e Link Text Hoverl. Ambas opções já foram explicadas anteriormente no Submenu Level 1.
Nota: A caixa de marcação encontrada na sessão de Estilo e Submenu level1, chamada Hide Navigation, serve para ocultar a sessão indicada.