Elementor La fonction Code personnalisé permet d'ajouter des extraits de code HTML, JavaScript et CSS à votre site web. Elle est utile lorsque vous devez insérer du code provenant d'outils tiers tels que Google Analytics, Facebook Pixel, etc., ou pour ajouter des styles personnalisés et des interactions dynamiques aux éléments du site. Voici un guide complet sur la façon d'ajouter du code personnalisé à Elementor.
![Image [1] - Comment utiliser le code personnalisé dans Elementor : un guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135700461-image.png)
Aperçu des fonctionnalités du code personnalisé
Elementor La fonction de code personnalisé permet d'ajouter des extraits de code HTML, JavaScript et CSS, ce qui facilite la personnalisation de votre site web. Tout code JavaScript peut être inséré pour modifier le DOM (Document Object Model), ajouter des événements et des effets dynamiques, etc. En outre, des extraits de code CSS peuvent être utilisés pour personnaliser le style de n'importe quel élément du site.
prenez noteLe code personnalisé ne prend pas en charge les extraits de code PHP. Il n'est donc pas possible d'ajouter des crochets ou des actions personnalisés avec cette fonctionnalité. Pour le code PHP, il est recommandé d'utiliser functions.php ou d'un plug-in tiers.
Comment ajouter un code personnalisé
Suivez les étapes ci-dessous pour ajouter un code personnalisé à Elementor :
Étape 1 : Se connecter à WP Admin
Allez dans l'interface d'administration de WordPress.
![Image [2] - Comment utiliser le code personnalisé dans Elementor : le guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135046737-image.png)
Étape 2 : Naviguez vers Elementor > Code personnalisé
Dans le tableau de bord de WordPress, allez à Elementor > Code personnaliséCette fois, il indique le nombre de fois qu'il a été utilisé depuis le début de l'année.Définir la page de code.
![Image [3] - Comment utiliser le code personnalisé dans Elementor : le guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135113977-image.png)
Étape 3 : Cliquez sur "Ajouter un nouveau code personnalisé".
frappe (sur le clavier) Ajouter un nouveau code personnalisé la page Nouveau code s'affiche.
![Image [4] - Comment utiliser le code personnalisé dans Elementor : un guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135149785-image.png)
Étape 4 : Saisissez les informations relatives au code
Sur la page Nouveau code, suivez les étapes ci-dessous pour remplir les informations :
légende - Ajoutez des titres aux extraits de code pour une identification et une gestion ultérieures.
placement - Déterminez l'emplacement de l'extrait de code dans la page web en sélectionnant les options suivantes :
En-tête>- Ajouter à l'en-tête de la page<body> - Démarrer- Ajouter au début du corps de la page<body> - Fin- Ajouter à la fin du corps de la page
priorité - Définit la priorité de l'extrait de code (1-10). Si plusieurs scripts sont affectés au même emplacement, la valeur de la priorité détermine l'ordre d'exécution, les valeurs les plus petites ayant une priorité plus élevée. Par exemple :Les scripts de priorité 1 seront exécutés avant les scripts de priorité 5..
Éditeur de blocs de code - Tapez ou collez un extrait de code dans l'éditeur de blocs de code. L'inspecteur de code intégré d'Elementor vérifie automatiquement le code et indique les erreurs éventuelles.
Étape 5 : Définition des conditions de publication
existent Publier Cliquez dans la zone Éditer afin d'établir les conditions de publication.PARAMÈTRES DE PUBLICATION s'affiche.
![Image [5] - Comment utiliser le code personnalisé dans Elementor : le guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135406404-image.png)
Définissez les conditions nécessaires pour spécifier les pages ou les types de contenu sur lesquels l'extrait de code sera affiché.
![Image [6] - Comment utiliser le code personnalisé dans Elementor : le guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135425485-image.png)
Étape 6 : Publier l'extrait de code
Après avoir confirmé que les paramètres sont complets, cliquez sur Publier Publiez un code personnalisé, ou choisissez d'enregistrer le code en tant que brouillon ou de définir une date et une heure de publication différée.
![Image [7] - Comment utiliser le code personnalisé dans Elementor : le guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135433902-image.png)
Ajouter le code CSS
![Image [8] - Comment utiliser le code personnalisé dans Elementor : un guide complet](https://www.361sale.com/wp-content/uploads/2024/11/20241108135459605-image.png)
En plus des scripts JavaScript, le code CSS peut être ajouté aux extraits de code en enveloppant le CSS dans une balise <style> . De cette manière, le CSS peut être appliqué de manière sélective à une page donnée en fonction des conditions définies. Exemple :
.custom-class {
colour : blue ; font-size : 18px ;
font-size : 18px ;
}résumés
En utilisant la fonction Custom Code d'Elementor, vous pouvez ajouter une variété d'effets personnalisés à votre site web, tels que des codes de suivi, le déclenchement d'événements, des éléments dynamiques et des styles personnalisés. Cette fonctionnalité peut améliorer la personnalisation et la fonctionnalité de votre site web sans modifier les fichiers principaux du site.
Lien vers cet article :https://www.361sale.com/fr/25614L'article est protégé par le droit d'auteur et doit être reproduit avec mention.
![Emoji[ciya]-Photonflux.com | Service professionnel de réparation de WordPress, dans le monde entier, réponse rapide](https://www.361sale.com/wp-content/themes/zibll/img/smilies/ciya.gif)
![Emoji[xiaojiujie]-Photon Fluctuation | Service professionnel de réparation de WordPress, réponse rapide dans le monde entier](https://www.361sale.com/wp-content/themes/zibll/img/smilies/xiaojiujie.gif)
简体中文 
English 
日本語 
Français 
Español 
Pas de commentaires