Table des matières
Les attributs HTML personnalisés, c’est quoi ?
Les attributs HTML personnalisés dans Elementor Pro sont une fonctionnalité avancée, destinée aux développeurs, qui leur permet d’affecter des attributs supplémentaires à des éléments HTML.
Aussi appelés attributs de données HTML5, ils stockent des informations supplémentaires qui restent invisibles pour l’internaute (sauf s’il inspecte le code-source). Cette pratique peut servir à personnaliser le style, améliorer l’accessibilité du site pour les personnes déficientes sensorielles, ajouter des fonctionnalités via des scripts JavaScript, et d’autres utilisations encore.
Comment utiliser les attributs HTML personnalisés dans Elementor Pro
Les attributs personnalisés dans l’interface d’Elementor
Pour utiliser les attributs HTML personnalisés dans Elementor Pro, vous devez suivre ces étapes :
- Sélectionnez l’élément que vous souhaitez personnaliser dans le constructeur de page Elementor.
- Allez dans la section « Avancé » de la barre latérale des paramètres de l’élément.
- Ici, vous avez une option pour « Attributs personnalisés » ou « Custom attributes ».
- Vous pouvez y déclarer vos attributs personnalisés.
- Une fois que vous avez ajouté vos attributs, cliquez sur « Mise à jour » pour enregistrer vos modifications.
Les éléments sur lesquels on peut ajouter un attribut personnalisé sont :
- section
- colonne
- widget
Le format d’écriture des custom attributes
Pour utiliser les attributs personnalisés HTML, vous devez respecter un format, une écriture bien spécifique.
En code HTML, un attribut personnalisé est généralement écrit comme un nom d’attribut suivi d’une valeur d’attribut, par exemple :
<element data-attribut="valeur">
Où « attribut » est le nom que vous donnez à l’attribut, et « valeur » est l’information que vous stockez dans l’attribut.
Mais dans Elementor, vous n’écrivez pas vos attributs directement comme du code HTML, Elementor s’en chargera. Vous l’écrivez sous cette forme :
data-[nom de l'attribut] caractère "pipe" | [valeur espace valeur]
Sur son site, Elementor donne cet exemple :
data-spots|round long
qui donne, en HTML :
data-spots="round long"
Le caractère « pipe » (ça s’appelle ainsi, et ça se prononce en anglais) se fait en pressant la touche Alt Gr et la touche du 6 du clavier (pas le 6 du pavé numérique, mais le même que le tiret).
Les valeurs sont séparées uniquement par un espace – pas de virgule ni rien d’autre.
Récupérer l’attribut en Javascript
Pour utiliser les attributs personnalisés avec JavaScript, vous pouvez les récupérer comme suit :
var valeur = element.dataset.attribute;
Où « element » est l’élément HTML que vous ciblez, et « attribute » le nom de l’attribut personnalisé que vous avez défini.
A vous de jouer !
Et voilà, vous savez maintenant utiliser les custom attributes d’Elementor Pro ! Amusez-vous bien !
PS : de la même manière, Elementor Pro permet d’ajouter du code CSS personnalisé.
