Insira um bonito e diferente Menu HTML

Por

O app HTML do Wix permite adicionar recursos que não fazem parte do editor. Confesso que poderia ser uma opção mais ampla, como permitir Javascript, Ajax, Jquery e outras linguagens, dando maior liberdade de aplicação de elementos extras. Mas o campo HTML já possibilita grandes recursos e, conforme o nível de conhecimento do usuário, pode e deve ser explorado.

Este campo capacita o uso de várias ferramentas que não estão no Wix ou que podem ser aperfeiçoadas, como é o caso deste Menu HTML com efeitos visuais.

O Menu apresenta cada item como se estivesse flutuando, ao passar o mouse por cima. Para entender melhor, acesse aqui e confira um exemplo.

Como instalar

Se você viu o exemplo e acha que combina com seu site, siga lendo para ver como adicionar o menu.

1. Baixe o arquivo  ZIP  chamado “Menu” com o código HTML, aqui.

2. Descompacte-o.

3. Ao descompactar, abrirá um arquivo no formato .html, agora você precisa editá-lo com as informações do seu site.

4. Edite o arquivo com Notepad++ ou outro editor.

5. O próximo passo é inserir a URL do site e das páginas. A ‘URL do site’ deverá ser adicionada na opção “Início” e as outras ‘URLs’ para o restante das página do seu site.

Confira na imagem abaixo:

Inserindo o código no Wix

6. Agora que você terminou de editar o código, copie tudo e cole no campo HTML dentro da sua página Wix, utilizando o caminho “Adicionar>>App>>HTML“.

Insira o app HTML de preferência no cabeçalho do site, substituindo o menu original do template. Marque também a opção “Mostrar em todas as páginas”.

Você poderá estilizar todo o código, mudando as cores do Menu, tipo de fonte, tamanho, fundo e tudo mais, basta que entenda de CSS.

É isso.

Em caso de dúvida, deixe seu comentário.

2 comentários em “Insira um bonito e diferente Menu HTML”

  1. Olá Gabriel, tudo bem mano?
    mano, tenho um site pelo wix e achei seu post para colocar html no wix. Segui os passos, mas o código que inclui não mostrou por completo, a imagem de fundo Não Apareceu!
    Porém, quando eu inicio a página “index.html” ela aparece perfeitamente!
    Na página contém uma imagem de fundo, mais um formulário para captura de e-mail…

    Abaixo segue o código html:

    {lang: “pt-BR”}

    6 Passos Para Falar Inglês. GARANTIDO!!!

    body {
    margin: 0 auto;
    font-family: “Myriad Pro”, Arial, Helvetica;
    background: url(‘ingles.jpg’) top center;
    background-size: 100%
    }
    #centro{
    background: white;
    width: 400px;
    margin: 0 auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0px 0px 4px #666;
    -webkit-box-shadow: 0px 0px 4px #666;
    box-shadow: 0px 0px 4px #666;
    padding: 20px 15px 25px 15px;
    text-align: center;
    }

     

     
     

    6 Passos Para Falar Inglês. GARANTIDO!!!
    Coloque Seu E-mail Agora e Receba Mais Informações Gratuitas Sobre o Curso First Steps – Agora Eu Falo!

    Respeitamos Sua Privacidade. Nunca Enviamos SPAM!

     

    Responder

Deixe um comentário