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. 😉

Saiba mais sobre este projeto, aqui.

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

  1. Por Fábio Castro

    Responder

    • Por Gabriel Martins

      Responder

  2. Por Leonardo

    Responder

    • Por Gabriel Martins

      Responder

      • Por leonardo

        Responder

        • Por Gabriel Martins

        • Por Leonardo

  3. Por augusto

    Responder

  4. Por Leonardo

    Responder

    • Por Gabriel Martins

      Responder

  5. Por balint

    Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

X

65 milhões de pessoas, ONGs e empresas já criaram seus sites no Wix. Crie o seu AQUI

¤
Leia mais:
daddy
Melhor site para registrar domínios .COM e .COM.BR

Fechar