Como executar Javascript e CSS no Wix (tutorial avançado)

Esta é uma dica avançada, voltada a usuários que tenham conhecimento ou noção em linguagem de programação. Portanto, são recursos que estão “fora” do Wix.

Sabemos que o Wix tem um app HTML que é totalmente compatível com códigos HTML. Mas este mesmo app não se apresenta tão compatível quando o assunto é CSS, menos ainda Javascript. Contudo, existe uma maneira de executar qualquer código CSS e Javascript dentro do app HTML com resultado 100% funcional: usando o modo “Endereço do Website“, dentro ao app HTML.

<<Atualização>>

O Google Drive deixou de dar suporte a arquivos Javascript, portanto, o Google Drive não servirá mais para este tipo de aplicação. Tente usar outro servidor gratuito.

<>

Esse “Endereço do Website” é a URL do site onde os códigos devem estar hospedados. Essa função permite executar qualquer site da web, dentro de um frame. Se quiser pode tentar colar um endereço URL de qualquer página e ver como ela funciona normalmente.

Hospedagem

Como disse acima, será necessário que você tenha um local aonde os códigos ficarão armazenados para poderem ser executados, assim como um endereço URL de onde os códigos estão hospedados.

Google Drive

Uma hospedagem gratuita qualquer já seria suficiente para servir de hospedeiro, mas hospedagens grátis geralmente são complicadas e seus regulamentos não permitem usar uma conta com o único intuito de armazenar arquivos, o que seria o nosso caso.

A boa notícia é que o Google oferece um tipo de serviço de hospedagem de sites HTML, dentro de um de seus serviços, o Google Drive.

Com ele, é possível hospedar um site que seja todo em HTML, isto é, o Drive não roda arquivos PHP, JAVA, etc, e nem permite banco de dados e outras funcionalidades que normalmente encontramos numa hospedagem comum.

Mas o fato é que o Google Drive já é suficiente e dá conta do nosso objetivo principal: armazenar e executar os arquivos JS e CSS, além de fornecer uma URL dos mesmos.

Códigos

Vou usar os códigos que encontrei num excelente site sobre design. Trata-se de Menu em círculos, com efeitos incríveis. Acesse o site Codtrops, visualize e, se preferir, baixe os arquivos.

Como fazer

Agora que já dei nomes aos bois, vamos ver o passo a passo de como fazer tudo que foi falado acima.

1. Primeiro clique e veja os códigos aplicados num site Wix.

2. Baixe estes códigos clicando neste link.

Atenção

Você pode baixar os códigos já editados por  mim, os quais estão preparados para serem usados num site Wix ou pode baixá-los diretamente no site do Codtrops, com os códigos originais, sem edição.

Editando os códigos

Esse tutorial será baseado nos códigos que já se encontram editados.

3. Ao baixar o arquivo, descompacte-o. Abra as pastas e dentro da pasta “efeitos“, se encontram todos os arquivos necessários para o funcionamento do Menu.

4. Você precisa ter algum programa editor de HTML, recomendo o Notepad++.

Mudando os textos do Menu

5. Para alterar os textos que aparecem nos Menus, clique com o botão direito do mouse sobre algum arquivo HTML (index) e edite com seu programa editor HTML.

6. Procure os textos que estão na cor PRETA e adicione o texto que quiser.

Obs: tente deixar um texto bem pequeno (como no exemplo), para não extrapolar os limites do botão.

Adicionando links

7. Ainda dentro do arquivo index, adicione a URL da página interna do seu site Wix onde está escrito “Seu Link Aqui“.

Mudando as imagens

8. Para alterar as imagens dos menus, vá até a pasta CSS e selecione um style para editar.

Atenção: cada estilo representa um index correspondente, isto é, o style pertence ao index.html, o style2, ao index2.html, o style3, ao index3.html, e assim por diante.

9. Dentro do style, localize a sessão .ch-img e insira o NOME da imagem no local como está sendo mostrado na figura.

Obs: as imagens devem estar dentro da pasta images e possuir tamanho de 220×220.

Faça as alterações que desejar dentro do arquivo Style, como cor de fonte, fundo, tamanhos, etc.

Entrando no Google Drive

10. Salve todos os arquivos que tiver sido editado. Agora acesse sua conta do Google Drive (é necessário ter uma conta no Google).

11. Dentro do Drive, crie uma nova pasta para ficar mais fácil localizar os arquivos e adicione um nome à ela.

Compartilhando a pasta

Para ter acesso a uma URL, você precisa compartilhar publicamente a pasta onde os arquivos ficarão hospedados.

12. Clique com o botão DIREITO do mouse em cima da pasta criada. No menu que abrir, selecione Compartilhar>>Compartilhar.

13. Clique no link “Alterar“, como mostra a imagem.

14. Em “Opções de visibilidade“, marque “Público na web“, clique em Salvar depois em Concluído.

Enviando os arquivos

15. Clique na pasta que você criou e que já está sendo compartilhada e ao abrir, clique no botão vermelho “Fazer upload” (seta para cima) e selecione “Pasta”.

16. Encontre a pasta onde estão os arquivos.

17. Clique no botão “Fazer upload e compartilhar“.

Aguarde o carregamento das pastas.

Copiando a URL

18. Com as pastas no Drive, clique sobre elas até chegar aos arquivos index.

19. Selecione uma index onde esteja o tipo de menu escolhido.

Por exemplo, para ter acesso à URL do menu que está no index3.html, primeiro clique com o botão DIREITO do mouse sobre a index, selecione “Abrir com” e depois “Visualizador do Google Drive“.

20. Nessa nova janela, clique no link “Visualizar“.

Uma janela será aberta já com a visualização do menu com o efeito CSS.

Você só precisa COPIAR a URL e COLAR no app HTML com o modo “Endereço do Website“, conforme mostrado no início deste tutorial. Lembre-se de dimensionar o campo HTML dentro da página Wix, para que o menu não fique mal aplicado.

É isso.

Qualquer dúvida, deixe seu comentário. 😉

14 comentários em “Como executar Javascript e CSS no Wix (tutorial avançado)”

    • Olá Daniel,
      Até o momento não conheço outro serviço gratuito que tenha essa funcionalidade. Talvez você possa tentar em hospedagens gratuitas, mas não sei se vão permitir criar conta só pra essa finalidade de hospedar arquivos.
      Abraço.

      Responder
  1. Boa noite de sábado, Gabriel !!!

    Quero te perguntar se fazendo todo o processo deste seu artigo, eu consigo instalar o Mixpanel no meu site Wix. Como você me disse antes, códigos a serem colocados antes da tag ” ” não são permitidos pelo Wix. Mas será que com essa sua dica complexa é possível o uso dos serviços Mixpanel?
    Você pode me indicar alguém para fazer este serviço, que você descreve neste artigo, para mim (pagando, é claro ?
    Achei bastante complicada a explicação.
    Mais uma vez, te agradeço !

    Responder
    • Olá Fábio,
      Achei bem interessante esse Mixpanel. Mas fiz um teste, e realmente não há como usá-lo no Wix, não se pode acessar as tagas Head. Essa são algumas das desvantagens de se usar o Wix.
      Abraço e Boa sorte.

      Responder
  2. Ola Gabriel boa tarde! obrigado pela dica de usar outro servidor, funciona, mais esbarrei em outro problema, quando clico, o link esta abrindo dentro da própria pagina do menu, você tem uma dica para resolver o problema?

    Responder
  3. Ola Gabriel, estou tentando colocar um menu drop down no meu site wix, to tendo a uma dificuldade, estou hospendando os arquivos do menu no Google Drive, coloquei a url no site, mais não ta aparecendo nada no site, e no google drive não ta aparecendo o efeito do menu, so as letras na visualização. Estou usando o Menu Maker para gerar o menu. onde pode esta erro?

    Responder
    • Olá Leonardo,
      Infelizmente o Google Drive deixou de dar suporte para arquivos javascript. Você pode usar outro servidor grátis para fazer esse processo.

      Responder
  4. Oi, se voce precisar de um site para hospedar e compartilhar seus arquivos, visite o Minhateca.com.br é um site de armazenamento e compartilhamento de arquivos com espaço ILIMITADO e totalmente gratuito! Sem tempo de espera ou qualquer restrição, download ilimitado e super rápido – 100% GRATIS!

    Responder

Deixe um comentário