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.
Ejemplos de elementos personalizados útiles
Requisitos del código
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.
Muéstrame cómo
en la parte superior del Editor X.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.
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.
Muéstrame cómo
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.
Muéstrame cómo
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?
|