Centro de Ayuda Wix
    Inicio
  1. Crear tu sitio
  2. Usar el Editor X
  3. Agregar elementos en el Editor X
    4. Editor X: agregar un elemento personalizado a tu sitio

Editor X: agregar un elemento personalizado a tu sitio

5 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Mejora tu sitio con tus propias funciones de diseño y capacidades CSS usando elementos personalizados. Puedes agregar cualquier componente de Javascript enlazando un elemento personalizado a una URL del servidor o un archivo Velo. Si es necesario, puedes establecer más atributos directamente desde el Editor X. 

Más información sobre lo siguiente:

Antes de comenzar:
Asegúrate de que tu sitio tenga un Plan Premium y un dominio conectado sin anuncios del Editor X. Más información

¿Qué son los elementos personalizados?

Los elementos personalizados te permiten usar tus propias etiquetas HTML en tu sitio del Editor X. Estos elementos funcionan en todos los navegadores compatibles y se pueden usar con cualquier biblioteca o marco de JavaScript ES6 que funcione con HTML 5.
Consejos:
  • Puedes usar elementos personalizados de fuentes externo, solo asegúrate de actualizar el Nombre de tag en Propiedades cuando agregues el elemento personalizado a tu página.
  • El rendimiento de tu elemento personalizado depende de su implementación.

Agregar y configurar el elemento personalizado

Agrega tantos elementos personalizados como necesites a tu sitio. Después de arrastrar un elemento personalizado a tu página, define su fuente (URL del servidor o un archivo Velo) y dale un nombre de tag para que aparezca en el registro de la página.
Usar el panel del Inspector de propiedades para asegurarte de que tu elemento personalizado se vea bien en todos los breakpoints: puedes ajustar el tamaño, el acoplamiento, la alineación y más.
Nota:
De forma predeterminada, los elementos personalizados aparecen en el registro de elementos personalizados ("customElements") de tu página. El nombre de tag que ingresas para tu elemento personalizado define su nombre en este registro.

Establecer los atributos del elemento personalizado

Haz más ajustes en las propiedades y el comportamiento de tu elemento configurando atributos HTML. El panel Atributos del elemento te permite agregar, editar y eliminar atributos directamente desde el Editor X, para que no tengas que acceder al código real.
Importante:
El código de tu elemento personalizado debe reconocer y manejar los atributos definidos. De lo contrario, no funcionarán correctamente.

Ejemplo de elemento personalizado

A continuación se muestra un ejemplo de cómo agregar un elemento básico personalizado a tu sitio. Las instrucciones explican cómo añadir el texto "Hello World" a tu sitio.
Primero, debes crear y codificar el elemento y su comportamiento en un archivo JavaScript. 
A continuación, define la clase de elemento personalizado.
En este ejemplo, lo definimos como HelloWorld y usaremos el mismo nombre al registrar el elemento personalizado. La función connectedCallback()](href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks" target="") a continuación es una función de devolución de llamada del ciclo de vida que se activa automáticamente cuando el elemento está adjunto a DOM.
1class HelloWorld extends HTMLElement { connectedCallback() { this.innerHTML = 'Hello World!'; } } customElements.define('hello-world', HelloWorld);
Después de definir la clase de elemento personalizado, lo registramos con el método customElements.define(nombre, clase).
Al agregar el elemento personalizado a tu sitio, ingresa el nombre registrado como Nombre de tag. Una vez registrado, el elemento personalizado se puede utilizar en tu sitio.
1CustomElementRegistry.define('hello-world', HelloWorld);
¿Buscas información más avanzada?
Haz clic aquí para aprender a usar este elemento con Velo by Wix.

¿Te ha sido útil?

|
En este artículo
  • ¿Qué son los elementos personalizados?
  • Agregar y configurar el elemento personalizado
  • Establecer los atributos del elemento personalizado
  • Ejemplo de elemento personalizado