Editor de Wix Studio: agregar un elemento personalizado
3 min de lectura
Mejora el sitio de tu cliente con tus propios elementos. Puedes agregar cualquier componente de Javascript enlazando un elemento personalizado a una URL de servidor o a un archivo de código. Si es necesario, puedes establecer más atributos directamente desde el editor.
En este artículo, obtén más información sobre lo siguiente:
Antes de comenzar:
Asegúrate de que el sitio de tu cliente tenga un dominio conectado y sin anuncios de Wix.
¿Qué son los elementos personalizados?
Los elementos personalizados te permiten usar tus propias etiquetas HTML. Los elementos personalizados funcionan en todos los navegadores compatibles y pueden utilizarse con cualquier biblioteca o marco de JavaScript ES6 que funcione con HTML 5.
Al incrustar un elemento personalizado, debes tener en cuenta algunos requisitos:
- Tu archivo Javascript debe estar alojado con Wix usando Velo (recomendado) o tu propio servidor externo o local.
- Tu código debe contener HTTPS, no HTTP; de lo contrario, no se mostrará en el sitio online.
- El código debe estar actualizado y ser compatible con HTML5. La mayoría de los navegadores no muestran las páginas y scripts correctamente si se escribieron usando versiones anteriores de JS o HTML.
- Todos los ajustes de diseño relevantes y las funcionalidades complejas deben almacenarse dentro del código JS principal, por ejemplo, los archivos CSS y otros archivos JS. Si estos ajustes se almacenan por separado, significa que no funcionarán en el sitio.
Consejos:
- Puedes usar elementos personalizados de fuentes externas, solo asegúrate de actualizar el Nombre de la etiqueta en Propiedades cuando agregues el elemento personalizado a tu página.
- El rendimiento del elemento personalizado depende de su implementación.
Agregar y configurar el elemento personalizado
Agrega la cantidad de elementos personalizados que necesites. Después de arrastrar un elemento personalizado a la página, define su fuente (URL del servidor o un archivo de Velo) y asígnale un nombre de etiqueta para que lo reconozcas fácilmente en el registro de la página.
Para agregar y configurar un elemento personalizado:
- Haz clic en Agregar elementos
a la izquierda del editor. - Haz clic en Incrustación y redes.
- Haz clic en Elemento personalizado.
- Haz clic en el icono Agregar
junto a Elemento personalizado. - Agrega tu archivo de comando:
- Selecciona el elemento personalizado.
- Haz clic en Elegir fuente.
- Selecciona cómo quieres agregar el elemento personalizado:
- URL del servidor: ingresa la URL del archivo, incluido el nombre del archivo.
- Archivo de Velo: selecciona uno de los archivos de Velo.
- Ingresa un Nombre de la etiqueta para el elemento.
Nota: El nombre de la etiqueta debe tener al menos dos palabras, separadas por un guión (por ejemplo, widget-clima-grande).
- (Opcional) Ajusta el tamaño, el acoplamiento y la alineación del elemento desde el panel Inspector profesional.
Notas:
- Por razones de seguridad, el elemento personalizado se renderiza dentro de un iFrame dentro del editor y en el modo de vista previa. Esto puede afectar el estilo del componente. Ve a tu sitio publicado para ver cómo se ve en el sitio online.
- Puedes definir la configuración de SEO de tu elemento usando la API de Velo.
Establecer los atributos del elemento personalizado
Haz más ajustes en las propiedades y el comportamiento del elemento configurando los atributos. El panel Atributos de los elementos te permite agregar, editar y eliminar atributos directamente desde el editor, sin tener que acceder al código en sí.
Importante:
El código del elemento personalizado debe reconocer y manejar los atributos definidos. De lo contrario, no funcionarán correctamente.
Para establecer los atributos del elemento personalizado:
- Selecciona el elemento personalizado.
- Haz clic en Establecer atributos.
- Haz clic en Establecer atributos para establecer un nuevo atributo.
- Ingresa un nombre para el atributo (por ejemplo, "rotación", "ancho").
- Ingresa el valor del atributo (puede ser cualquier serie relevante).
- Haz clic en Configurar.
¿Buscas información más avanzada?
Aprende a usar elementos personalizados con Velo by Wix. Para preguntas específicas y solución de problemas, consulta nuestras preguntas frecuentes sobre elementos personalizados.
¿Te ha sido útil?
|