Editor do Wix Studio: adicionar um elemento personalizado
3 min de leitura
Deixe o site do seu cliente ainda melhor ao usar seus próprios elementos. Você pode adicionar qualquer componente Javascript ao vincular um elemento personalizado (em inglês) em um URL de servidor ou um arquivo de código. Se necessário, você pode definir mais atributos diretamente do editor.
Neste artigo, confira:
Antes de começar:
Certifique-se de que o site do seu cliente tenha um domínio conectado e não tenha 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 (em inglês) com o 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 o seu elemento.
Observação: o nome da tag deve ter pelo menos duas palavras, separadas por um hífen (por exemplo: widget-de-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 (em inglês) com o Velo by Wix. Para perguntas específicas e solução de problemas, confira nossas Perguntas frequentes sobre elementos personalizados (em inglês).
Esse artigo foi útil?
|