Haben Sie Probleme damit, saubere, lesbare Codeblöcke auf Ihren Elementor-Seiten anzuzeigen?
Sie sind nicht allein. Wenn Sie HTML-Tutorials präsentieren, JavaScript-Code einbetten oder CSS-Beispiele anzeigen möchten, reichen die Standardoptionen von Elementor oft nicht aus.
Um Code zu einer Seite auf Elementor hinzuzufügen, installieren Sie Element Pack und aktivieren Sie das Quellcode-Widget. Konfigurieren Sie und wählen Sie die Code-Sprache. Passen Sie dann die Registerkarte Inhalt an. Anschließend veröffentlichen Sie die Seite.
In diesem detaillierten Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie der Seite auf Elementor Code hinzufügen können.
Also, fangen wir an!
Hinzufügen von Code zu einer Seite auf Elementor (Schritt-für-Schritt)
Bevor wir uns mit der Lösung befassen, wollen wir untersuchen, warum der Standardansatz von Elementor zum Hinzufügen von HTML-Code in eine Elementor-Seite nicht den Anforderungen der modernen Webentwicklung entspricht:
- HTML-Widget-Einschränkungen
- Kein integriertes Code-Styling
- Probleme mit der Unterstützung mehrerer Sprachen
- Layout und Designkonflikte
Die effektivste Lösung für die Verwendung von benutzerdefiniertem Code in Elementor ist daher die Verwendung eines speziellen Widgets, das speziell für die Anzeige von Code entwickelt wurde. Das Quellcode-Widget von Element Pack Pro geht auf alle Einschränkungen der standardmäßigen Elementor-Optionen ein und folgt dabei den bewährten WordPress-Entwicklungsmethoden.
Beginnen wir also mit den Schritten zum Hinzufügen von Code zu Ihren Elementor-Seiten.
Schritt 1: Installieren und Aktivieren von Element Pack Pro
Bevor Sie das Quellcode-Widget verwenden können, müssen Sie Element Pack Pro installieren und aktivieren:
- Element Pack Pro erhalten von ihre offizielle Website und laden Sie die Plugin-Zip-Datei herunter
- Installieren Sie das Plugin:
- Gehen Sie zu Ihrem WordPress-Dashboard
- Navigieren Sie zu Plugins > Neu hinzufügen
- Klicken Sie auf Plugin hochladen Taste
- Wählen Sie die heruntergeladene Element Pack Pro-Zip-Datei
- Klicken Sie auf Jetzt installieren
- Aktivieren Sie das Plugin:
- Klicken Sie nach der Installation auf Plugin aktivieren
- Geben Sie Ihren Lizenzschlüssel ein, wenn Sie dazu aufgefordert werden (finden Sie in Ihrer Kaufbestätigungs-E-Mail)
- Klicken Sie auf Lizenz freischalten um alle Premiumfunktionen freizuschalten
Nach der Aktivierung haben Sie Zugang zu 80+ hochwertige Widgets einschließlich des leistungsstarken Quellcode-Widgets.
Schritt 2: Einfügen des Quellcode-Widgets
Öffnen Sie Ihr Elementor Herausgeber und navigieren Sie zu der Seite, auf der Sie Ihr Codefragment einfügen möchten.
- Geben Sie in der Widget-Suchleiste "Quellcode" ein, um das Widget zu finden
- Achten Sie auf das Element Pack Pro-Logo in der oberen rechten Ecke, um sicherzustellen, dass Sie das richtige Widget auswählen. Die umfangreiche Sammlung von Element Pack Pro
- Ziehen und Ablegen das Quellcode-Widget an der gewünschten Stelle auf der Seite
Das Widget wird mit dem Standarddesign angezeigt und kann dann angepasst werden.
Diese Methode stellt sicher, dass Sie ein Widget verwenden, das Richtlinien für die Entwicklung von WordPress-Plugins für optimale Leistung und Sicherheit.
Schritt 3: Konfigurieren Sie die Registerkarte "Inhalt
Navigieren Sie zum Inhalt um Ihre Codeanzeige einzurichten:
3. 1: Wählen Sie Ihre Stilvoreinstellung
Wählen Sie aus professionell gestalteten Themen, die beliebte Entwicklungsumgebungen widerspiegeln:
- Standard: Saubere, minimale Erscheinung, geeignet für die Dokumentation
- Dunkelheit: Perfekt für moderne, dunkel gestaltete Websites (bevorzugt von 90% der Entwickler laut einer Umfrage von Stack Overflow)
- Coy: Subtiler, heller Hintergrund mit sanften Highlights
- Funky: Lebendige Farben für kreative Projekte und Tutorials
- Morgen Abend: Beliebtes dunkles Thema bei Entwicklern
3.2: Aktivieren Sie die Schaltfläche "Kopieren
Schalten Sie diese Funktion ein, um Besuchern eine einfache Funktion zum Kopieren von Code zu bieten. Dies verbessert die Benutzerfreundlichkeit erheblich, insbesondere für Tutorial-Inhalte, und ist für eine effektive Implementierung von Elementor-Code-Snippets unerlässlich.
3.3: Wählen Sie Ihre Programmiersprache
Wählen Sie die entsprechende Sprache für die korrekte Syntaxhervorhebung:
- Beispiele für HTML-Markup für Webstrukturen
- CSS für die Gestaltung von Demonstrationen
- JavaScript für interaktive Code-Beispiele (verwendet von 63.61% der Entwickler laut der Stack Overflow-Umfrage von 2024)
- PHP-Tutorials zur serverseitigen Skripterstellung
- Beispiele für Python für Datenwissenschaft und Automatisierung
- C++ für die Systemprogrammierung Inhalt
- Und viele weitere Optionen, die von der Element Pack Pro-Dokumentation
3.4: Eingabe Ihres Quellcodes
Fügen Sie Ihren Code in das dafür vorgesehene Feld ein. Das Widget wendet automatisch eine geeignete Formatierung an, die auf der von Ihnen gewählten Sprache basiert, und zwar WordPress PHP-Codierungsstandards für Konsistenz.
3.5: Bestimmte Zeilen hervorheben (optional)
Verwenden Sie die Zeilenmarkierungsfunktion, um wichtige Codeabschnitte hervorzuheben. Dies funktioniert wie ein physischer Textmarker, der die Aufmerksamkeit auf wichtige Zeilen in Ihrem Codeblock lenkt.
Schritt 4: Anpassen der Registerkarte "Stil
Die Feinabstimmung des Erscheinungsbilds Ihres Codeblocks erfolgt über die Stil tab:
Element Einstellungen Konfiguration
- Höhe: Passen Sie die Höhe des Codeblocks an Ihren Inhalt an, ohne die Lesbarkeit zu beeinträchtigen.
- Grenzeigenschaften: Wählen Sie Art, Breite und Farbe des Rahmens, um ihn an das Design Ihrer Website anzupassen.
- Radius der Grenze: Abgerundete Ecken für ein modernes Erscheinungsbild
- Polsterung: Interne Abstände für optimale Lesbarkeit einstellen nach WordPress Richtlinien für Abstände
- Marge: Externe Abstände im Verhältnis zu anderen Seitenelementen kontrollieren
- Typografie: Anpassen von Schriftfamilie, Größe, Gewicht und Zeilenhöhe für optimale Lesbarkeit
Schaltflächengestaltung kopieren - Normalzustand
- Farbe: Legen Sie die Standard-Textfarbe der Schaltfläche fest
- Hintergrund: Wählen Sie Volltonfarben oder Farbverläufe für den Schaltflächenhintergrund
- Grenze: Konfigurieren Sie Aussehen und Farbe des Rahmens
- Radius der Grenze: Abrundung der Tastenecken einstellen
- Auffüllung und Randstreifen: Feinabstimmung der Tastenabstände
- Box Schatten: Tiefe mit Schatteneffekten hinzufügen
- Typografie: Anpassen der Eigenschaften von Schaltflächentexten
Kopieren der Schaltflächengestaltung - Hover-Status
- Hover-Farbe: Definieren Sie die Textfarbe, die sich beim Überfahren mit der Maus ändert
- Hover-Hintergrund: Hintergrundfarbübergänge einstellen
- Hover-Rahmen: Ändern Sie das Aussehen des Rahmens beim Hovern
- Box Schatten: Erstellen Sie dynamische Schatteneffekte für Interaktionsfeedback
Schritt 5: Vorschau und Optimierung
Zeigen Sie nach der Konfiguration eine Vorschau Ihres Codeblocks an, um eine optimale Darstellung auf verschiedenen Geräten zu gewährleisten. Das Quellcode-Widget übernimmt automatisch das responsive Design, aber Sie möchten vielleicht Abstände oder Schriftgrößen für die mobile Anzeige anpassen.
Erweiterte Tipps für Elementor-Code-Snippets
Optimierung der Seitenleistung
Wenn Sie mehrere Codeblöcke zu einer Seite hinzufügen, sollten Sie die von WordPress-Performance-Experten empfohlenen Strategien zur Leistungsoptimierung berücksichtigen:
- Verkleinerung des Codes für große Snippets, um die Ladezeit der Seite zu verkürzen
- Core Web Vitals überwachen und Erhöhung der Seitenladegeschwindigkeit die Platzierung in Suchmaschinen zu erhalten
Bewährte SEO-Praktiken für Code-Inhalte
Technische Inhalte profitieren von der richtigen Formatierung und Strukturierung gemäß Die SEO-Richtlinien von Google:
- Fügen Sie relevante Schlüsselwörter ganz natürlich in Ihre Code-Erklärungen ein
- Verwenden Sie eine geeignete Überschriftenstruktur für die folgenden Codeblöcke WordPress-Dokumentationsstandards
- Implementierung einer strukturierten Datenauszeichnung für Lerninhalte mit Schema.org
Wo soll der benutzerdefinierte Code in Elementor platziert werden?
Die strategische Platzierung Ihrer Codeblöcke verbessert sowohl die Benutzerfreundlichkeit als auch die SEO-Leistung:
- Tutorial-Abschnitte: Code-Beispiele unmittelbar nach dem erklärenden Text einfügen
- Dokumentation Seiten: Verwenden Sie Codeblöcke, um die Verwendung der API oder Konfigurationsbeispiele zu veranschaulichen.
Umfassende Beispiele für die Umsetzung finden Sie auf der Website Element Pack Pro-Demoseiten um das Quellcode-Widget in Aktion zu sehen.
Integration in den WordPress-Entwicklungsprozess
Hinzufügen von Tracking-Code in Elementor
Für Analyse- und Marketingzwecke können Sie das Quellcode-Widget verwenden, um Beispiele für die Tracking-Implementierung anzuzeigen, damit die Benutzer die richtige Platzierung des Codes verstehen. Beliebte Tracking-Lösungen sind unter anderem:
- Google Analytics 4 Umsetzung
- Facebook-Pixel Integration
- Benutzerdefinierte Ereignisverfolgungscodes
- Heatmapping-Tools wie Hotjar oder Verrücktes Ei
Elementor Code zu Kopfzeilenszenarien hinzufügen
Während das Quellcode-Widget den Code visuell anzeigt, müssen Sie möglicherweise auch funktionalen Code in die Kopfzeile Ihrer Website einfügen. Kombinieren Sie zu diesem Zweck die Anzeigefunktionen des Widgets mit:
- Die erweiterten Funktionen des Element Pack Pro für umfassendes Code-Management
- WordPress-Hooks und -Filter für Anpassungen auf Themenebene unter Verwendung der WordPress-Plugin-API
- Spezialisierte Header-/Footer-Plugins für seitenweite Code-Injektion
Benutzerdefinierte CSS- und JavaScript-Integration
Das Widget lässt sich nahtlos in die benutzerdefinierten CSS- und JavaScript-Funktionen von Elementor integrieren, so dass Sie die Möglichkeit haben:
- Zeigen Sie benutzerdefinierte CSS-Beispiele an, während Sie sie auf Ihr Design anwenden
- Präsentation von JavaScript-Funktionen mit funktionierenden Code-Beispielen
- Demonstration von responsiven Designtechniken anhand von Live-Beispielen
Fehlersuche bei allgemeinen Problemen
Code-Anzeigeprobleme
Wenn Ihr Code nicht korrekt angezeigt wird:
- Überprüfen Sie, ob die Sprachauswahl Ihrem Codetyp entspricht.
- Prüfen Sie auf Sonderzeichen, die möglicherweise umbrochen werden müssen
- Sicherstellung einer korrekten Einrückung für verschachtelte Codestrukturen
- Testen Sie die Kompatibilität mit verschiedenen Browsern, indem Sie Kann ich die für Funktionsunterstützung
Mobile Reaktionsfähigkeit
Stellen Sie sicher, dass Codeblöcke auf allen Geräten funktionieren:
- Testen Sie auf echten mobilen Geräten, nicht nur mit Browser-Tools
- Passen Sie die Schriftgröße für die mobile Lesbarkeit an: die Schriftgröße 16-20px
- Horizontales Scrollen für breite Codeblöcke in Betracht ziehen
- Implementierung berührungsfreundlicher Kopierschaltflächen
Häufig gestellte Fragen
Kann ich dieses Widget in der kostenlosen Version von Element Pack verwenden?
Das Quellcode-Widget ist ausschließlich verfügbar in Element Pack Pro. Die Investition ermöglicht den Zugriff auf über 80 Premium-Widgets und erweiterte Anpassungsoptionen, die die Möglichkeiten von Elementor für den Kunden erheblich erweitern. Mehr als 18 Millionen Websites Elementor weltweit zu verwenden.
Ist dieses Widget sicher für das Hinzufügen von JavaScript oder PHP?
Das Quellcode-Widget ist nur für die Anzeige gedacht und führt keinen Code aus. Das macht es völlig sicher für die Darstellung jeder Art von Code ohne Sicherheitsbedenken und behebt die Schwachstellen, die sich auf 43.000+ WordPress-Seiten täglich nach den Wordfence-Statistiken.
Kann ich mehrere Codeblöcke auf einer Seite hinzufügen?
Unbedingt. Sie können einer einzelnen Seite eine unbegrenzte Anzahl von Quellcode-Widgets hinzufügen, jedes mit unabhängigen Styling- und Spracheinstellungen. Diese Flexibilität macht es perfekt für umfassende Tutorials und Dokumentationen.
Hat dies Auswirkungen auf meine Seitengeschwindigkeit oder SEO?
Das Quellcode-Widget ist für die Leistung optimiert und folgt den besten SEO-Praktiken. Wenn es richtig eingesetzt wird, kann es die Sichtbarkeit Ihrer Inhalte in den Suchmaschinen verbessern, indem es gut strukturierte, lesbare Code-Beispiele liefert, die das Engagement der Nutzer erhöhen und die Anforderungen der Suchmaschinen erfüllen. Die wichtigsten Web-Vitaldaten von Google Anforderungen.
Kann ich meine Codeblöcke exportieren oder sichern?
Ja, alle Quellcode-Widgets werden in Ihrer WordPress-Datenbank gespeichert und können mit den Standard-WordPress-Exporttools oder Das Vorlagensystem von Element Pack Pro. Dadurch wird sichergestellt, dass Ihre Code-Beispiele bei Site-Migrationen oder Backups erhalten bleiben.
Schlussfolgerung
Um erfolgreich zu lernen, wie man auf Elementor Code zu einer Seite hinzufügt, braucht man die richtigen Werkzeuge und den richtigen Ansatz. Während die Standardoptionen von Elementor grundlegende Funktionen bieten, erfordert die professionelle Anzeige von Code spezialisierte Lösungen, die die Komplexität der modernen Webentwicklung bewältigen können.
Das Quellcode-Widget von Element Pack Pro verändert Ihre Code-Präsentationsmöglichkeiten und verbessert die Interaktionsmöglichkeiten für den Benutzer.
Wenn Sie vor dem Kauf praktische Erfahrungen sammeln möchten, sollten Sie sich die Live-Demos um das Quellcode-Widget in verschiedenen Anwendungsfällen und Designszenarien in Aktion zu sehen.
