Éditeur Studio : Ajouter un élément personnalisé
Temps de lecture : 3 min
Améliorez le site de votre client avec vos propres éléments. Vous pouvez ajouter n'importe quel composant Javascript en liant un élément personnalisé à l'URL d'un serveur ou à un fichier de code. Si nécessaire, vous pouvez configurer plus d'attributs directement à partir de l'Éditeur.
Dans cet article, apprenez-en plus sur :
Avant de commencer :
Assurez-vous que le site de votre client possède un domaine connecté et aucune publicité Wix.
Qu'est-ce qu'un élément personnalisé ?
Les éléments personnalisés vous permettent d'utiliser vos propres balises HTML. Les éléments personnalisés fonctionnent avec tous les navigateurs compatibles, et peuvent être utilisés avec n'importe quelle bibliothèque ou tout framework JavaScript ES6 fonctionnant avec HTML 5.
Lorsque vous intégrez un élément personnalisé, vous devez garder à l'esprit certaines exigences :
- Votre fichier Javascript doit être hébergé avec Wix en utilisant Velo (recommandé), ou votre propre serveur externe ou local.
- Votre code doit contenir HTTPS, et non HTTP, sinon il ne s'affichera pas sur votre site en ligne.
- Votre code doit être à jour et compatible avec HTML5. La plupart des navigateurs n'affichent pas correctement les pages et les scripts s'ils ont été écrits à l'aide d'anciennes versions de JS ou de HTML.
- Tous les paramètres de design et fonctionnalités complexes pertinents doivent être stockés dans le code JS principal, par exemple le CSS et d'autres fichiers JS. Si ces paramètres sont stockés séparément, ils ne fonctionneront pas sur votre site.
Suggestions :
- Vous pouvez utiliser des éléments personnalisés provenant de sources tierces, assurez-vous simplement de mettre à jour le nom de la balise dans les propriétés lorsque vous ajoutez l'élément personnalisé à votre page.
- Les performances de votre élément personnalisé dépendent de sa mise en œuvre.
Ajouter et configurer l'élément personnalisé
Ajoutez autant d'éléments personnalisés que vous le souhaitez. Après avoir fait glisser un élément personnalisé vers votre page, définissez sa source (URL du serveur ou un fichier Velo) et donnez-lui un nom de balise pour que vous le reconnaissiez facilement dans le registre des pages.
Pour ajouter et configurer un élément personnalisé :
- Cliquez sur Ajouter des éléments
à gauche de l'éditeur. - Cliquez sur Intégrations et réseaux sociaux.
- Cliquez sur Élément personnalisé.
- Cliquez sur l'icône Ajouter
à côté de Élément personnalisé. - Ajoutez votre fichier de script :
- Sélectionnez l'élément personnalisé.
- Cliquez sur Sélectionner une source.
- Sélectionnez la manière dont vous souhaitez ajouter votre élément personnalisé :
- URL du serveur : Saisissez l'URL du fichier, y compris le nom du fichier.
- Fichier Velo : Sélectionnez l'un de vos fichiers Velo.
- Saisissez un nom de balise pour votre élément.
Remarque : Le nom de balise doit comporter au moins deux mots, séparés par un tiret (ex. widget-météo).
- (Facultatif) Ajustez la taille, l'ancrage et l'alignement de l'élément à partir du panneau Inspecteur.
Remarques :
- Pour des raisons de sécurité, l'élément personnalisé est affiché dans une iFrame dans l'Éditeur et en mode aperçu. Cela peut affecter la mise en page du composant. Accédez à votre site publié pour le voir à quoi il ressemble en ligne.
- Vous pouvez définir les paramètres de référencement de votre élément à l'aide de l'API Velo.
Paramétrer les attributs de l'élément personnalisé
Ajustez davantage les propriétés et le comportement de votre élément en configurant des attributs. Le panneau Attributs de l'élément vous permet d'ajouter, de modifier et de supprimer des attributs directement depuis l'éditeur, sans avoir à accéder au code réel.
Important :
Le code de votre élément personnalisé doit reconnaître et gérer les attributs définis. Sinon, ils ne fonctionneront pas correctement.
Pour configurer les attributs de l'élément personnalisé :
- Sélectionnez l'élément personnalisé.
- Cliquez sur Paramétrer les attributs.
- Cliquez sur Nouvel attribut.
- Saisissez un nom pour l'attribut (ex. « Rotation », « Largeur »).
- Saisissez la valeur de l'attribut (il peut s'agir de n'importe quelle chaîne de caractères).
- Cliquez sur Configurer.
Vous souhaitez obtenir davantage d'informations ?
En savoir plus sur l'utilisation d'éléments personnalisés avec Velo by Wix. Pour des questions et un dépannage spécifiques, consultez notre FAQ sur les éléments personnalisés.
Cela vous a-t-il aidé ?
|