Comment ajouter du code HTML, JavaScript et CSS à votre site web en utilisant la fonction de code personnalisé d'Elementor - Photon Flux | Service professionnel de réparation de WordPress, couverture mondiale, réponse rapide

existentConstructeur de site web WordPressLa personnalisation et l'optimisation de la fonctionnalité de votre site web nécessitent généralementAjouter des extraits de code personnalisésElementor propose une fonction puissante de "code personnalisé" qui facilite l'ajout de styles spécifiques et de fonctions interactives à votre site web, comme le code Google Analytics ou le code Facebook Pixel. Ces extraits de code peuvent vous aider à suivre les données de votre site web, à améliorer l'expérience de l'utilisateur et même à ajouter des styles spécifiques et des fonctionnalités interactives.Extraits de code HTML, JavaScript et CSSAjoutez-le à votre site web.

Image[1]-Comment ajouter du code HTML, JavaScript et CSS à votre site web en utilisant la fonction Custom Code d'Elementor - Photon Fluctuation | Professional WordPress Repair Service, Global Reach, Fast Response

Introduction à la fonctionnalité du code personnalisé

ElementorLa fonction de code personnalisé vous permet d'ajouter différents types d'extraits de code à votre site web, tels que HTML, JavaScript et CSS :

Ajustement du DOM: à traversManipulation JavaScript des éléments du DOMIl est possible de modifier dynamiquement le contenu d'une page web en fonction des actions de l'utilisateur ou d'autres conditions.
Ajouter un événement: canUtiliser JavaScript pour ajouter un clic, un survol et d'autres événements aux éléments web afin d'améliorer l'interactivité..
Application de styles personnalisés: à traversCode CSS pour ajouter des styles personnalisés à des éléments spécifiques en fonction des besoins du site.

La fonction de code personnalisé ne prend pas en charge les extraits de code PHP. Cela signifie que vous ne pouvez pas ajouter de crochets personnalisés ou effectuer des opérations PHP avec cette fonctionnalité, mais vous pouvez le faire avec l'optionfunctions.phpou des plug-ins de tiers pour mettre en œuvre ces fonctionnalités.

Comment ajouter un code personnalisé

Pour ajouter un code personnalisé à votre site WordPress, suivez les étapes suivantes :

1,Accédez à la page Code personnalisé d'Elementor

Dans le menu du backend, allez à Elementor > Code personnalisé. La page de gestion des codes personnalisés s'affiche et permet d'ajouter, de modifier ou de supprimer des extraits de codes personnalisés.

Image[2]-Comment ajouter du code HTML, JavaScript et CSS à votre site web en utilisant la fonction Custom Code d'Elementor - Photon Fluctuation | Professional WordPress Repair Service, Global Coverage, Fast Response

2,Ajouter un nouveau code personnalisé

Cliquez sur le bouton "Ajouter un nouveau code personnalisé" pour accéder à la page d'édition du nouveau code. Ici, vous devez définir le titre, la position et la priorité de l'extrait de code.

Image [3] - Comment ajouter du code HTML, JavaScript et CSS à votre site web en utilisant la fonction Custom Code d'Elementor - Photon Fluctuation Network | Professional WordPress Repair Service, Global Coverage, Fast Response

3,Saisir le titre

Saisissez un titre descriptif pour l'extrait de code afin qu'il puisse être facilement identifié ultérieurement. Le titre peut être une description de la fonctionnalité de l'extrait de code, comme "Code de suivi Google Analytics" ou "Script de fenêtre contextuelle personnalisée".

Image [4] - Comment ajouter du code HTML, JavaScript et CSS à votre site web en utilisant la fonction Custom Code d'Elementor - Photon Fluctuation Network | Professional WordPress Repair Service, Global Coverage, Fast Response

4,Sélection de l'emplacement du code

Déterminez la partie de la page dans laquelle le code sera inséré. Elementor propose les options suivantes :
- En-tête>Insère du code dans la balise d'en-tête de la page, généralement pour des styles ou des scripts globaux.

5,Définition de la priorité

Vous pouvez créer une liste pour leLes extraits de code définissent des priorités (1-10). Si plusieurs scripts sont affectés au même emplacement, la priorité déterminera l'ordre dans lequel ces scripts seront chargés. Plus le chiffre est bas, plus la priorité est élevée. Par exemple, un script ayant une priorité de 1 sera exécuté avant un script ayant une priorité de 5.

6,Exemple de code d'entrée

Tapez ou collez vos extraits de code dans l'éditeur de blocs de code. Le vérificateur de code intégré d'Elementor vérifiera automatiquement votre code et vous informera s'il trouve une erreur.

7,Mise en place des conditions de libération

Dans la zone de publication, cliquez sur Modifier pour définir les conditions d'affichage de l'extrait de code. Ces conditions déterminent les pages ou les sections du site sur lesquelles le code est affiché. Par exemple, vous pouvez faire en sorte que le code ne prenne effet que sur des pages ou des types d'utilisateurs spécifiques, tels que les administrateurs ou les visiteurs.

8,Publication de code personnalisé

Après avoir effectué les étapes ci-dessus, cliquez sur "poste"pour appliquer le code à votre site web. Vous avez également la possibilité d'enregistrer le code personnalisé en tant que brouillon ou de fixer une date et une heure pour le publier ultérieurement.

Image [5] - Comment ajouter du code HTML, JavaScript et CSS à votre site web en utilisant la fonction Custom Code d'Elementor - Photon Fluctuation Network | Professional WordPress Repair Service, Global Coverage, Fast Response

Ajout de styles CSS à l'aide d'un code personnalisé

Outre le code JavaScript, des styles CSS peuvent être ajoutés à un site web grâce à la fonction de code personnalisé. Afin d'appliquer le style CSS à des conditions spécifiques, le code CSS peut être enroulé autour d'un code HTML<style>entre les balises et les ajouter au site à l'aide de la fonction de code personnalisé. Voici un exemple :


<code>
  .custom-button {
    background-color : #1B61E6 ;
    couleur : #fff ;
    padding : 10px 20px ;
    border-radius : 5px ; text-align : centre ; custom-button { background-color.
    text-align : centre ; cursor : pointer ; text-align : pointer
    curseur : pointeur ; }
  }
</style</code>
<code>
  .custom-button {
    background-color : #1B61E6 ;
    couleur : #fff ;
    padding : 10px 20px ;
    border-radius : 5px ; text-align : centre ; custom-button { background-color.
    text-align : centre ; cursor : pointer ; text-align : pointer
    curseur : pointeur ; }
  }
</style</code>
  .custom-button {
    background-color : #1B61E6 ;
    couleur : #fff ;
    padding : 10px 20px ;
    border-radius : 5px ; text-align : centre ; custom-button { background-color.
    text-align : centre ; cursor : pointer ; text-align : pointer
    curseur : pointeur ; }
  }
</style
  .custom-button {
    background-color : #1B61E6 ;
    couleur : #fff ;
    padding : 10px 20px ;
    border-radius : 5px ; text-align : centre ; custom-button { background-color.
    text-align : centre ; cursor : pointer ; text-align : pointer
    curseur : pointeur ; }
  }
</style

  .custom-button {
    background-color : #1B61E6 ;
    couleur : #fff ;
    padding : 10px 20px ;
    border-radius : 5px ; text-align : centre ; custom-button { background-color.
    text-align : centre ; cursor : pointer ; text-align : pointer
    curseur : pointeur ; }
  }
</style

Dans le code ci-dessus, nous avons défini un fichier nommébouton personnaliséet de définir des styles pour cette classe. Une fois ajoutés via la fonction de code personnalisé, ces styles seront appliqués aux éléments du site en fonction des conditions définies.

rendre un verdict

Intégrez facilement des extraits de code HTML, JavaScript et CSS dans votre site WordPress grâce à la fonction Custom Code d'Elementor. Que vous ajoutiez un code de suivi, une fonctionnalité dynamique ou des styles personnalisés, cette fonctionnalité vous aide à améliorer les fonctionnalités de votre site web et l'expérience de l'utilisateur sans avoir besoin d'une programmation approfondie.

Contactez nous

Vous ne pouvez pas lire l'article ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !

① Tel : 020-2206-9892

② QQ咨询：1025174874

(iii) Courriel : info@361sale.com

④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.

© Déclaration de reproduction
Cet article a été écrit par : xiesong
Lien vers cet article :https://www.361sale.com/fr/17544
L'article est protégé par le droit d'auteur et doit être reproduit avec mention.

Contactez nous
Vous ne pouvez pas lire l'article ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.