Editor do Wix Studio: adicionar um elemento personalizado
Neste artigo
- O que são elementos personalizados?
- Adicionar e configurar o elemento personalizado
- Definir os atributos do elemento personalizado
Melhore o site do seu cliente com seus próprios elementos. Você pode adicionar qualquer componente JavaScript ao vincular um
elemento personalizado a um URL do servidor ou um arquivo de código. Se necessário, você pode definir mais atributos diretamente no editor.
Antes de começar:
Certifique-se de que o site do seu cliente tem um
domínio conectado e não tem anúncios Wix.
O que são elementos personalizados?
Os elementos personalizados permitem que você use suas próprias tags HTML. Esses elementos funcionam em todos os navegadores compatíveis e podem ser usados com qualquer biblioteca ou estrutura JavaScript ES6 que funcione com HTML 5.
Ao incorporar um elemento personalizado, há alguns requisitos que você deve ter em mente:
- Seu arquivo JavaScript deve estar hospedado no Wix usando o Velo (recomendado) ou seu próprio servidor externo ou local.
- Seu código deve conter HTTPS e não HTTP, ou ele não será exibido em seu site online.
- Seu código deve estar atualizado e ser compatível com o HTML5. A maioria dos navegadores não exibe páginas e scripts corretamente se eles foram escritos usando versões mais antigas do JS ou HTML.
- Todas as configurações de design relevantes e funcionalidades complexas devem ser armazenadas no código JS principal, por exemplo, os CSS e outros arquivos JS. Se essas configurações forem armazenadas separadamente, isso significa que elas não funcionarão no seu site.
Dicas:
- Você pode usar elementos personalizados de fontes de terceiros, apenas certifique-se de atualizar o Nome da Tag em Propriedades ao adicionar o elemento personalizado à sua página.
- O desempenho do seu elemento personalizado depende da sua implementação.
Adicionar e configurar o elemento personalizado
Adicione quantos elementos personalizados forem necessários. Após arrastar um elemento personalizado para sua página, defina sua origem (URL do servidor ou um arquivo Velo) e dê a ele um nome de tag para que você o reconheça facilmente no registro da página.
Para adicionar e configurar um elemento personalizado:
- Clique em Elementos
no lado esquerdo do editor. - Clique em Incorporar e redes sociais.
- Clique em Elemento personalizado.
- Clique no ícone Adicionar
ao lado de Elemento personalizado. - Adicione seu arquivo de script:
- Selecione o elemento personalizado.
- Clique em Escolher fonte.
- Selecione como você deseja adicionar seu elemento personalizado:
- URL do servidor: insira o URL do arquivo, incluindo o nome do arquivo.
- Arquivo do Velo: selecione um dos seus arquivos do Velo.
- Insira um Nome da tag para seu elemento.
Observação: o nome da tag deve ter pelo menos duas palavras, separadas por um hífen (por exemplo: widget-para-previsão-do-tempo).
- (Opcional) Ajuste o tamanho, o encaixe e o alinhamento do elemento no painel Inspetor.
Observações:
- Por motivos de segurança, o elemento personalizado é renderizado dentro de um iFrame no Editor e no modo de visualização. Isso pode afetar o layout do componente. Vá para o seu site publicado para ver como ele fica online.
- Você pode definir as configurações de SEO do seu elemento usando a API do Velo.
Definir os atributos do elemento personalizado
Faça outros ajustes nas propriedades e no comportamento do seu elemento ao definir atributos. O painel Atributos do elemento permite adicionar, editar e remover atributos diretamente do editor, sem precisar acessar o código.
Importante:
O código para seu elemento personalizado deve reconhecer e operar com os atributos definidos. Caso contrário, eles não funcionarão corretamente.
Para definir os atributos do elemento personalizado:
- Selecione o elemento personalizado.
- Clique em Definir Atributos.
- Clique em Novo Atributo.
- Insira um nome para o atributo (em inglês) (por exemplo: "rotação", "largura").
- Insira o valor para o atributo (pode ser qualquer string relevante).
- Clique em Configurações.
Procurando mais informações avançadas?
Saiba como usar elementos personalizados com o Velo by Wix. Para perguntas específicas e solução de problemas, confira nossas
FAQs sobre elementos personalizados.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
