Editor X: adicionar um elemento personalizado ao site
5 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
Enriqueça seu site usando seus próprios recursos de design e funcionalidades de CSS usando elementos personalizados. Você pode adicionar qualquer componente Javascript vinculando um elemento personalizado a um URL do servidor ou a um arquivo Velo. Se necessário, você pode definir mais atributos diretamente do Editor X.
Saiba mais sobre:
Antes de começar:
Verifique se o seu site tem um plano Premium e um domínio conectado sem anúncios do Editor X. Saiba mais
O que são elementos personalizados?
Elementos personalizados permitem que você use suas próprias tags HTML no seu site com Editor X. Esses elementos funcionam em todos os navegadores suportados e podem ser usados com qualquer biblioteca ou estrutura JavaScript ES6 que funcione com HTML 5.
Exemplos de elementos personalizados úteis
Requisitos de código
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 de sua implementação.
Adicionando e configurando o elemento personalizado
Adicione quantos elementos personalizados você precisar ao seu site. 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 aparecer no registro da página.
Confira como
na parte superior do Editor X.Use o painel Inspetor 
para garantir que seu elemento personalizado fique ótimo em todos os breakpoints. Você pode ajustar seu tamanho, encaixe, alinhamento e muito mais.
para garantir que seu elemento personalizado fique ótimo em todos os breakpoints. Você pode ajustar seu tamanho, encaixe, alinhamento e muito mais.Nota:
Por definição, os elementos personalizados aparecem no registro customElements da sua página. O nome da tag que você insere para o elemento personalizado define seu nome nesse registro.
Definindo os atributos do elemento personalizado
Faça mais ajustes nas propriedades e no comportamento do seu elemento ao definir atributos HTML. O painel Atributos do elemento permite adicionar, editar e remover atributos diretamente do Editor X, para que você não precise acessar o código em si.
Confira como
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.
Exemplo de elemento personalizado
Abaixo está um exemplo de como adicionar um elemento personalizado básico ao seu site. As instruções explicam como adicionar o texto "Hello World" ao seu site.
Primeiro, você precisa criar e codificar o elemento e seu comportamento em um arquivo JavaScript.
Confira como
Em seguida, defina a classe do elemento personalizado.
Neste exemplo, nós o definimos como HelloWorld e usaremos o mesmo nome ao registrar o elemento personalizado. A função connectedCallback () abaixo é uma função de callback de ciclo de vida que é acionada automaticamente quando o elemento é anexado ao DOM.
1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);Após definir a classe do elemento personalizado, nós o registramos com o método
customElements.define(name, class).Ao adicionar o elemento personalizado ao seu site, insira o nome registrado como o Nome da Tag. Uma vez registrado, o elemento personalizado pode ser usado no seu site.
1CustomElementRegistry.define('hello-world', HelloWorld);Procurando informações mais avançadas?
Clique aqui para saber como usar esse elemento com o Velo by Wix.
Esse artigo foi útil?
|