Vous avez du mal à afficher des blocs de code propres et lisibles sur vos pages Elementor ?
Vous n'êtes pas le seul. Si vous avez besoin de présenter des tutoriels HTML, d'intégrer du code JavaScript ou d'afficher des exemples CSS, les options par défaut de Elementor sont souvent insuffisantes.
Pour ajouter du code à une page sur Elementor, installez Element Pack et activez le widget de code source. Configurez et sélectionnez la langue du code. Ensuite, personnalisez l'onglet du contenu. Une fois cela fait, publiez la page.
Dans ce tutoriel détaillé, nous allons vous montrer étape par étape comment vous pouvez ajouter du code à la page sur elementor.
Alors, commençons !
Comment ajouter du code à une page sur Elementor (étape par étape)
Avant d'aborder la solution, examinons les raisons pour lesquelles l'approche standard de Elementor consistant à ajouter du code HTML dans une page Elementor ne répond pas aux besoins modernes en matière de développement web :
- Limites des widgets HTML
- Pas de style de code intégré
- Questions relatives à la prise en charge multilingue
- Conflits d'agencement et de conception
La solution la plus efficace pour utiliser du code personnalisé dans Elementor consiste donc à tirer parti d'un widget spécialisé conçu spécifiquement pour l'affichage du code. Le widget Source Code de Element Pack Pro répond à toutes les limitations des options par défaut de Elementor tout en respectant les meilleures pratiques de développement de WordPress.
Voici donc les étapes à suivre pour ajouter du code à vos pages Elementor.
Étape 1 : Installer et activer Element Pack Pro
Avant de pouvoir utiliser le widget Code source, vous devez installer et activer Element Pack Pro :
- Obtenir Element Pack Pro de leur site officiel et téléchargez le fichier zip du plugin
- Installer le plugin:
- Accédez à votre tableau de bord WordPress
- Naviguez jusqu'à Plugins > Ajouter un nouveau
- Cliquez sur Télécharger le plugin bouton
- Choisissez le fichier zip Element Pack Pro que vous avez téléchargé
- Cliquez sur Installer maintenant
- Activer le plugin:
- Après l'installation, cliquez sur Activer le plugin
- Saisissez votre clé de licence lorsque vous y êtes invité (vous la trouverez dans l'e-mail de confirmation de votre achat).
- Cliquez sur Activer la licence pour déverrouiller toutes les fonctionnalités premium
Une fois activé, vous aurez accès à 80+ widgets premium y compris le puissant widget Code source.
Étape 2 : Insérer le widget du code source
Ouvrez votre Elementor Éditeur et naviguez jusqu'à la page où vous souhaitez ajouter votre extrait de code.
- Dans la barre de recherche du widget, tapez "Code source" pour localiser le widget.
- Recherchez le logo Element Pack Pro dans le coin supérieur droit pour vous assurer que vous sélectionnez le bon widget. La vaste collection de Element Pack Pro
- Glisser-déposer le widget Source Code à l'emplacement souhaité sur la page
Le widget apparaîtra avec un style par défaut, prêt à être personnalisé.
Cette méthode permet de s'assurer que vous utilisez un widget qui respecte les règles suivantes Lignes directrices pour le développement de plugins WordPress pour une performance et une sécurité optimales.
Étape 3 : Configuration de l'onglet Contenu
Naviguez jusqu'à la page Contenu pour configurer l'affichage de votre code :
3. 1 : Sélectionnez votre préréglage de style
Choisissez parmi des thèmes conçus par des professionnels qui reflètent les environnements de développement les plus courants :
- Défaut: Aspect épuré, minimal, adapté à la documentation
- Sombre: Parfait pour les sites web modernes et sombres (préférés par les 90% des développeurs selon l'enquête de Stack Overflow)
- Coy: Fond subtil et léger avec des reflets doux
- Funky: Des couleurs vives pour des projets créatifs et des tutoriels
- Demain soir: Thème sombre populaire parmi les développeurs
3.2 : Activer le bouton Copier
Activez cette fonction pour permettre aux visiteurs de copier facilement du code. Cela améliore considérablement l'expérience de l'utilisateur, en particulier pour le contenu des tutoriels, et est essentiel pour une mise en œuvre efficace des extraits de code Elementor.
3.3 : Choisir son langage de programmation
Sélectionnez la langue appropriée pour une mise en évidence correcte de la syntaxe :
- Exemples de balisage HTML pour la structure d'un site web
- CSS pour les démonstrations de style
- JavaScript pour des exemples de code interactifs (utilisé par 63.61% de développeurs selon l'enquête Stack Overflow de 2024)
- PHP pour les tutoriels de script côté serveur
- Python pour la science des données et les exemples d'automatisation
- C++ pour la programmation de systèmes
- Et bien d'autres options prises en charge par le Documentation Element Pack Pro
3.4 : Saisir votre code source
Collez votre code dans le champ prévu à cet effet. Le widget applique automatiquement le formatage approprié en fonction de la langue sélectionnée, comme suit Normes de codage WordPress PHP pour la cohérence.
3.5 : Surligner des lignes spécifiques (optionnel)
Utilisez la fonction de mise en évidence des lignes pour souligner les sections de code importantes. Cette fonction fonctionne comme un surligneur physique, attirant l'attention sur les lignes clés de votre bloc de code.
Étape 4 : Personnalisation de l'onglet Style
Affinez l'apparence de votre bloc de code à l'aide de la fonction Style tabulation :
Élément Paramètres Configuration
- Hauteur: Ajustez la hauteur du bloc de code pour l'adapter à votre contenu tout en préservant la lisibilité.
- Propriétés frontalières: Choisissez le type, la largeur et la couleur de la bordure pour l'adapter à la conception de votre site.
- Rayon de la bordure: Créez des coins arrondis pour un aspect moderne
- Rembourrage: Régler l'espacement interne pour une lisibilité optimale. Lignes directrices de WordPress en matière d'espacement
- Marge: Contrôler l'espacement externe par rapport aux autres éléments de la page
- Typographie: Personnaliser la famille de polices, la taille, le poids et la hauteur de ligne pour une lisibilité maximale
Stylisation des boutons de copie - État normal
- Couleur: Définir la couleur par défaut du texte du bouton
- Contexte: Choisissez des couleurs unies ou des dégradés pour l'arrière-plan des boutons
- Frontière: Configurer l'apparence et la couleur des bordures
- Rayon de la bordure: Régler l'arrondi du coin du bouton
- Remplissage et marge: Réglage précis de l'espacement des boutons
- Boîte d'ombres: Ajoutez de la profondeur avec des effets d'ombre
- Typographie: Personnaliser les propriétés du texte du bouton
Stylisation des boutons de copie - État de survol
- Couleur de survol: Définir les changements de couleur du texte au passage de la souris
- Arrière-plan en survol: Définir les transitions de la couleur d'arrière-plan
- Bordure de survol: Modifier l'apparence de la bordure lors du survol
- Boîte d'ombres: Créer des effets d'ombre dynamiques pour le retour d'information sur l'interaction
Étape 5 : Prévisualisation et optimisation
Après la configuration, prévisualisez votre bloc de code pour vous assurer qu'il est présenté de manière optimale sur différents appareils. Le widget Code source gère automatiquement le responsive design, mais il se peut que vous souhaitiez ajuster l'espacement ou la taille des polices pour l'affichage sur mobile.
Conseils avancés pour les extraits de code Elementor
Optimiser la performance des pages
Lorsque vous ajoutez plusieurs blocs de code à une seule page, tenez compte des stratégies d'optimisation des performances recommandées par les experts en performances de WordPress :
- Utiliser la minification du code pour les extraits importants afin de réduire le temps de chargement des pages.
- Surveiller les indicateurs de base du Web et augmenter la vitesse de chargement des pages maintenir le classement dans les moteurs de recherche
Meilleures pratiques SEO pour le contenu des codes
Le contenu technique bénéficie d'une mise en forme et d'une structure appropriées, conformément aux normes suivantes Lignes directrices de Google en matière de référencement:
- Inclure des mots-clés pertinents de manière naturelle dans les explications de votre code
- Utiliser une structure d'en-tête appropriée autour des blocs de code suivants Normes de documentation de WordPress
- Mettre en place un balisage de données structurées pour le contenu des didacticiels à l'aide de Schema.org
Où placer le code personnalisé dans Elementor
L'emplacement stratégique de vos blocs de code améliore à la fois l'expérience de l'utilisateur et les performances en matière de référencement :
- Sections du tutoriel: Placer les exemples de code immédiatement après le texte explicatif
- Pages de documentation: Utiliser des blocs de code pour illustrer l'utilisation de l'API ou des exemples de configuration
Pour des exemples complets de mise en œuvre, consultez le site Element Pack Pro pages de démonstration pour voir le widget Code source en action.
Intégration au processus de développement de WordPress
Ajout d'un code de suivi dans Elementor
À des fins d'analyse et de marketing, vous pouvez utiliser le widget Code source pour afficher des exemples de mise en œuvre du suivi, afin d'aider les utilisateurs à comprendre l'emplacement correct du code. Les solutions de suivi les plus courantes sont les suivantes
- Google Analytics 4 mise en œuvre
- Pixel Facebook l'intégration
- Codes de suivi des événements personnalisés
- Les outils de cartographie thermique tels que Hotjar ou Œuf fou
Elementor Ajouter du code aux scénarios d'en-tête
Bien que le widget Code source affiche le code visuellement, vous pouvez également avoir besoin d'ajouter le code fonctionnel à l'en-tête de votre site. Pour ce faire, combinez les capacités d'affichage du widget avec :
- Fonctionnalités avancées de Element Pack Pro pour une gestion globale du code
- Crochets et filtres WordPress pour les personnalisations au niveau du thème à l'aide de l'option API de plugin WordPress
- Plugins d'en-tête et de pied de page spécialisés pour l'injection de code à l'échelle du site
Intégration de CSS et de JavaScript personnalisés
Le widget s'intègre de manière transparente aux fonctions CSS et JavaScript personnalisées de Elementor, ce qui vous permet de.. :
- Afficher des exemples de feuilles de style CSS personnalisées tout en les appliquant à votre conception
- Présenter les fonctionnalités de JavaScript à l'aide d'échantillons de code fonctionnels
- Démontrer les techniques de responsive design à l'aide d'exemples concrets
Dépannage des problèmes courants
Problèmes d'affichage du code
Si votre code ne s'affiche pas correctement :
- Vérifiez que la langue sélectionnée correspond à votre type de code
- Vérifier la présence de caractères spéciaux pouvant nécessiter un échappement
- Assurer une indentation correcte pour les structures de code imbriquées
- Tester la compatibilité entre différents navigateurs à l'aide de Puis-je utiliser pour le soutien des fonctionnalités
Réactivité mobile
Veiller à ce que les blocs de code fonctionnent sur tous les appareils :
- Tester sur des appareils mobiles réels, et pas seulement sur des outils de navigation
- Ajustez la taille des polices pour une meilleure lisibilité sur mobile : la police 16-20px
- Envisager le défilement horizontal pour les blocs de code larges
- Mettre en place des boutons de copie tactiles
Questions fréquemment posées
Puis-je utiliser ce widget dans la version gratuite de Element Pack ?
Le widget Code source est exclusivement disponible dans Element Pack Pro. L'investissement permet d'accéder à plus de 80 widgets de qualité supérieure et à des options de personnalisation avancées qui élargissent considérablement les capacités de Elementor pour le secteur de la santé. Plus de 18 millions de sites web l'utilisation de Elementor au niveau mondial.
Ce widget est-il sûr pour l'ajout de JavaScript ou de PHP ?
Le widget Code source est conçu à des fins d'affichage uniquement et n'exécute pas de code. Il est donc tout à fait sûr pour présenter n'importe quel type de code sans problème de sécurité, et permet de remédier aux vulnérabilités qui affectent les systèmes d'information de l 43 000+ sites WordPress par jour selon les statistiques de Wordfence.
Puis-je ajouter plusieurs blocs de code sur une même page ?
Absolument. Vous pouvez ajouter un nombre illimité de widgets Source Code à une seule page, chacun ayant un style et des paramètres linguistiques indépendants. Cette flexibilité en fait un outil parfait pour les tutoriels et la documentation.
Cela affectera-t-il la vitesse de la page ou le référencement ?
Le widget Code source est optimisé pour les performances et respecte les meilleures pratiques en matière de référencement. Utilisé correctement, il peut améliorer la visibilité de votre contenu sur les moteurs de recherche en fournissant des exemples de code bien structurés et lisibles qui renforcent l'engagement de l'utilisateur et répondent aux exigences des moteurs de recherche. Les principales données vitales de Google sur le web exigences.
Puis-je exporter ou sauvegarder mes blocs de code ?
Oui, tous les widgets du code source sont stockés dans votre base de données WordPress et peuvent être exportés à l'aide des outils d'exportation standard de WordPress ou de l'application Le système de modèles de Element Pack Pro. Cela garantit que vos exemples de code sont préservés lors des migrations de site ou des sauvegardes.
Conclusion
Pour apprendre à ajouter du code à une page sur Elementor, il faut disposer des outils et de l'approche appropriés. Bien que les options par défaut de Elementor offrent des fonctionnalités de base, l'affichage professionnel de code nécessite des solutions spécialisées capables de gérer la complexité du développement web moderne.
Le widget Source Code de Element Pack Pro transforme vos capacités de présentation du code et améliore les fonctions d'interaction avec l'utilisateur.
Pour une expérience pratique avant l'achat, consultez le site démonstrations en direct pour voir le widget Code source en action dans différents cas d'utilisation et scénarios de conception.
