Grundlagen des Inspektionselements: WordPress für Heimwerker anpassen

Viele von uns sind neugierig darauf, das Design einer Website zu verstehen, ohne das Risiko permanenter Änderungen einzugehen. Das Inspect Element ist ein unschätzbares Werkzeug für diesen Zweck und ermöglicht es Ihnen, vorübergehende Änderungen direkt in Ihrem Browser vorzunehmen.

Viele unserer Anfänger sagten uns, dass sie das Bearbeiten von HTML/CSS schwierig finden. Wir empfehlen diesen Benutzern immer, mit dem Inspect-Tool zu experimentieren.

Es ist einfach und leicht zu bedienen, und Sie können die Ergebnisse Ihrer Anpassungen sofort sehen. Wir verwenden es ständig, um Änderungen von kleinen Textbearbeitungen bis hin zu kompletten Überarbeitungen des Layouts vorab anzuzeigen.

Diese Anleitung führt Sie durch die Schritte zur effektiven Nutzung des Inspect Elements auf Ihrer WordPress-Website und hilft Ihnen, Ihre Designideen sicher und effizient umzusetzen.

Was ist das Inspect-Tool?

Wir haben uns unzählige Male auf Browser-Entwicklertools verlassen, um Website-Änderungen zu beheben und zu experimentieren. Moderne Webbrowser wie Google Chrome, Firefox, Safari und Microsoft Edge sind mit integrierten Tools ausgestattet, die Webentwicklern helfen, Fehler mühelos zu debuggen.

Diese Tools zeigen den HTML-, CSS- und JavaScript-Code einer Seite an und zeigen gleichzeitig, wie der Browser ihn verarbeitet. Für uns ist es, als würden wir unsere Cheat-Codes ausprobieren, ohne die eigentliche Website zu beeinträchtigen.

Sie können auf diese Entwicklertools auf jeder Seite zugreifen, indem Sie mit der rechten Maustaste klicken und im Menü „Untersuchen“ auswählen. Dies ist eine unserer bevorzugten Aktionen beim Testen von Design-Tweaks oder beim Debuggen eines Problems.

Mit dem Inspektionstool können Sie temporär HTML-, CSS- oder JavaScript-Code bearbeiten und die Änderungen live auf Ihrem Bildschirm sehen. Wir haben es verwendet, um alles von kleinen Stiländerungen bis hin zu vollständigen Layout-Ideen vorab anzuzeigen. (Wir zeigen Ihnen später in diesem Artikel, wie das geht.)

Das Beste daran? Diese Änderungen wirken sich nicht auf die eigentliche Webseite aus. Sobald Sie die Seite neu laden oder den Browser schließen, kehrt alles zum Normalzustand zurück. Das macht es zu einem sicheren und zuverlässigen Werkzeug zum Testen von Ideen.

Wir fanden es besonders hilfreich für DIY-Website-Besitzer und Entwickler, die eine schnelle Möglichkeit zum Testen oder Debuggen benötigen. Hier sind nur einige Anwendungsfälle:

• Wenden Sie neue CSS-Stile an und sehen Sie sofort, wie sie auf Ihrer Website aussehen.
• Technische Redakteure können HTML für Screenshots bearbeiten, sensible Informationen ausblenden oder sichtbaren Text anpassen.
• Entwickler verwenden es oft, um häufige WordPress-Fehler zu identifizieren, JavaScript-Probleme zu debuggen oder 404-Fehler zu beheben.

Und das ist erst der Anfang. Diese Tools sind unglaublich vielseitig und daher bei jedem, der mit Websites arbeitet, beliebt.

In diesem Leitfaden konzentrieren wir uns auf das Inspect-Tool in Google Chrome, da es unter unseren Lesern der beliebteste Browser ist. Firefox, Safari und Microsoft Edge verfügen jedoch über ähnliche Tools, auf die über ihre Inspect-Optionen zugegriffen werden kann.

Bereit zum Start? Verwenden Sie die folgenden Links, um zu jedem Abschnitt des Artikels zu springen und mitzuverfolgen:

• Das Inspect-Tool starten und den Code lokalisieren
• Bearbeiten und Debuggen von Code in Inspect Element
• Fehler auf Ihrer Website leicht finden
• Wie benutzt man das Inspektionstool auf Mobilgeräten (iOS oder Android)?
• Wie man Inspect Element-Änderungen in WordPress dauerhaft anwendet
• Best Practices bei der Verwendung von Inspect Element
• Häufig gestellte Fragen zum Element-Inspektor
• Video-Tutorial
• Mehr über WordPress-Anpassung erfahren

Das Inspect-Tool starten und den Code lokalisieren

Sie können das Inspektionswerkzeug starten, indem Sie auf Ihrer Tastatur STRG + Umschalt + I (Befehl + Optionen + I für MacOS) drücken.

Sie können auch irgendwo auf eine Webseite klicken und im Browser-Menü „Untersuchen“ auswählen.

Sie können auch über das Hauptmenü des Browsers auf das Tool zugreifen.

Klicken Sie in Google Chrome auf das Drei-Punkte-Menü in der oberen rechten Ecke und scrollen Sie dann zu Weitere Tools » Entwicklertools.

Ihr Browserfenster wird in zwei Teile geteilt.

Auf der einen Seite sehen Sie die Seite, die Sie gerade angesehen haben. Auf der anderen Seite sehen Sie den HTML-Code und die CSS-Regeln.

Die Position des Inspect-Docks variiert, aber Sie können sie ändern, indem Sie auf das Drei-Punkte-Menü klicken und die Position „Dock-Seite“ auswählen. Das Symbol, auf das Sie klicken müssen, sehen Sie im obigen Bild.

Wenn Sie mit der Maus über die HTML-Quelle fahren, wird der betroffene Bereich auf der Webseite hervorgehoben.

Sie werden auch feststellen, dass sich CSS-Regeln ändern, wenn Sie auf ein Element im HTML-Code klicken.

Sie können den Mauszeiger auch auf ein Element auf der Webseite bewegen, mit der rechten Maustaste klicken und das Tool 'Inspizieren' auswählen.

Das Element wird im Quellcode hervorgehoben.

Bearbeiten und Debuggen von Code in Inspect Element

Sowohl der HTML- als auch der CSS-Code im Inspect Element-Fenster sind editierbar. Sie können überall im HTML-Quellcode doppelklicken und den Code nach Belieben bearbeiten.

Sie können auch auf Attribute und Stile im CSS-Bereich doppelklicken und diese bearbeiten.

Um eine benutzerdefinierte Stilregel hinzuzufügen, klicken Sie einfach auf das +-Symbol oben im CSS-Bereich.

Wenn Sie Änderungen am CSS oder HTML vornehmen, werden diese Änderungen sofort im Browser angezeigt.

Diese Änderungen werden im temporären Speicher Ihres Browsers gespeichert und wirken sich nicht auf Ihre Website aus.

Um die Änderungen vorzunehmen, müssen Sie benutzerdefiniertes CSS zu Ihrem Theme hinzufügen oder die entsprechende Vorlage bearbeiten, um die zu speichernden Änderungen vorzunehmen.

Bevor Sie mit der Bearbeitung Ihres bestehenden WordPress-Themes mit dem Inspect Element-Tool beginnen, stellen Sie sicher, dass Sie ein WordPress-Backup erstellen.

Fehler auf Ihrer Website leicht finden

Das Inspektionstool hat einen Bereich namens Konsole, der Fehler anzeigt, die während des Seitenaufrufs aufgetreten sind.

Wenn Sie versuchen, einen Fehler zu beheben oder Support von Plugin-Autoren anzufordern, ist es immer hilfreich, hier nach Fehlern oder Warnungen zu suchen.

Mit dem Tab „Konsole“ können Sie verschiedene häufige Probleme beheben. Dies sind nur einige der Dinge, die Sie mit der Inspect-Konsole tun können:

• Finden Sie heraus, warum ein hinzugefügtes Bild nicht angezeigt wird
• Warum ein Plugin oder Theme nicht richtig funktioniert
• Welches Plugin oder welche Browser-Erweiterung könnte den Konflikt verursachen?

Selbst technisch nicht versierte Benutzer können es sich ansehen, um Hinweise darauf zu finden, woher ein Problem stammt.

Wenn Sie beispielsweise ein OptinMonster-Kunde sind und sich fragen, warum Ihr Optin nicht geladen wird, können Sie das Problem leicht finden: „Ihr Seiten-Slug stimmt nicht überein.“

Die Verwendung von Tools wie der Inspect Element Console kann Ihnen helfen, nützliche technische Details zu sammeln, wenn auf Ihrer Website etwas nicht richtig funktioniert. Das Teilen dieser Informationen – wie Fehlermeldungen oder fehlende Ressourcen – kann es Plugin- oder Theme-Supportteams erleichtern, das Problem schneller zu verstehen und zu lösen.

Wie benutzt man das Inspektionstool auf Mobilgeräten (iOS oder Android)?

Entwickleroptionen sind in mobilen Browsern nicht standardmäßig aktiviert, da die Hersteller davon ausgehen, dass die meisten mobilen Benutzer sie nicht verwenden würden.

Der einfachste Weg zur Fehlerbehebung und zur Verwendung des Inspektionstools für mobile Probleme ist die Verwendung der mobilen Emulationsfunktion in Ihrem Desktop-Browser.

Sie können dann ein Gerät von oben oder Bildschirmabmessungen auswählen. Chrome wird dann diese Bildschirmgröße für Sie emulieren.

Wie man Inspect Element-Änderungen in WordPress dauerhaft anwendet

Wenn Sie mit dem Element-Inspektor arbeiten, fragen Sie sich vielleicht, wie Sie die getesteten Änderungen dauerhaft machen können. In diesem Abschnitt erklären wir, wie Sie dies auf Ihrer WordPress-Website tun können.

Identifizieren Sie zunächst die Änderungen, die Sie beibehalten möchten, und kopieren Sie sie mit einer App wie Notepad oder TextEdit in eine Textdatei. Dann können Sie eine der unten stehenden Methoden ausprobieren.

1. CSS-Änderungen mit dem Website-Editor an Ihrer WordPress-Website vornehmen

Sobald Sie den Code kopiert haben, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Design » Editor, um den Website-Editor zu starten.

Klicken Sie auf das Vorschaufenster, um mit der Bearbeitung Ihrer Website zu beginnen.

Klicken Sie im Editor oben auf die Schaltfläche „Stil“ und dann auf das Drei-Punkte-Menü und wählen Sie „Zusätzliches CSS“.

Dies öffnet den Bereich „Zusätzliches CSS“, in den Sie einfach das zu speichernde CSS einfügen können.

Sie sehen möglicherweise, wie Ihre Änderungen sofort im Vorschaufenster angewendet werden. Vergessen Sie nicht, auf „Speichern“ zu klicken, um Ihre Änderungen zu veröffentlichen.

2. Benutzerdefiniertes CSS zu Ihrer Website mit WPCode hinzufügen

Wenn Sie eine einfachere Möglichkeit benötigen, benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen, dann ist diese Methode genau das Richtige für Sie.

Für diese Methode verwenden wir WPCode. Es ist der beste WordPress-Code-Snippet-Manager und ermöglicht es Ihnen, benutzerdefinierten Code, HTML und CSS zu Ihrer Website hinzuzufügen, ohne Ihr Theme zu bearbeiten.

Hinweis: Es gibt auch eine kostenlose Version von WPCode, die Sie verwenden können. Wir empfehlen jedoch ein Upgrade auf einen kostenpflichtigen Plan, um das volle Potenzial auszuschöpfen.

Wir verwenden WPCode auf unseren eigenen Websites, da es die Verwaltung von Code erleichtert. Wichtiger ist, dass es eine eingebaute Notfallsicherung hat, die Ihren Code deaktiviert, wenn er einen Fehler zurückgibt. Details finden Sie in unserem vollständigen WPCode-Testbericht.

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie unser Tutorial zur Installation eines WordPress-Plugins für Anweisungen.

Nach der Aktivierung gehen Sie einfach im WordPress-Admin-Dashboard zu Code-Snippets » + Neu hinzufügen.

Dann können Sie über der Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ in der Code-Snippet-Bibliothek schweben und auf „+ Benutzerdefiniertes Snippet hinzufügen“ klicken.

Danach müssen Sie aus der Liste der angezeigten Optionen 'CSS-Snippet' als Code-Typ auswählen.

Als Nächstes können Sie oben auf der Seite einen Titel für Ihren benutzerdefinierten CSS-Snippet hinzufügen. Dies kann alles sein, was Ihnen hilft, den Code zu identifizieren.

Sobald Sie einen Titel eingegeben haben, können Sie Ihr benutzerdefiniertes CSS in das Feld „Code-Vorschau“ schreiben oder einfügen.

Nachdem Sie Ihren benutzerdefinierten CSS-Code hinzugefügt haben, klicken Sie auf die Schaltfläche „Snippet speichern“ und stellen Sie den Status-Schalter auf „Aktiv“.

3. HTML-Snippet zu Ihrer WordPress-Website hinzufügen

Um HTML-Änderungen zu Ihrer Website hinzuzufügen, müssen Sie sie in die richtige Vorlagendatei in Ihrem Theme einfügen.

Um herauszufinden, welche Theme-Datei Sie bearbeiten müssen, lesen Sie unseren Leitfaden zum Auffinden der zu bearbeitenden Dateien in einem WordPress-Theme.

Sie müssen einen FTP-Client oder die Dateimanager-App in Ihrem Hosting-Konto verwenden, um Ihre Theme-Dateien zu bearbeiten.

Alternativ können Sie auch WPCode verwenden, um benutzerdefinierte HTML-Snippets hinzuzufügen. Fügen Sie einfach ein neues Code-Snippet hinzu und wählen Sie HTML als Snippet-Typ.

Geben Sie danach einen Titel für Ihr HTML-Snippet an, der Ihnen hilft, es zu identifizieren.

Fügen Sie darunter Ihren benutzerdefinierten HTML-Code in das Vorschaufenster ein.

WPCode ermöglicht es Ihnen zu wählen, wo Sie einen Code-Snippet einfügen möchten.

Scrollen Sie nach unten zum Bereich 'Einfügung' und klicken Sie auf 'Speicherort', um die verfügbaren Optionen anzuzeigen.

Nachdem Sie einen Speicherort ausgewählt haben, vergessen Sie nicht, auf „Speichern“ zu klicken und den Status des Snippets auf Aktiv zu setzen.

Sie können Ihre Website jetzt besuchen, um sie in Aktion zu sehen.

Best Practices bei der Verwendung von Inspect Element

Die Verwendung des Inspektionstools kann sich anfühlen, als würden Sie ein geheimes Fenster in das Webdesign öffnen. Aber um das Beste daraus zu machen, hier sind einige Best Practices, die besonders hilfreich sind, wenn Sie gerade erst anfangen:

• Beginnen Sie mit sicherer Erkundung: Alle Änderungen, die Sie in „Element untersuchen“ vornehmen, sind vorübergehend. Experimentieren Sie also ohne Angst – nichts geht dauerhaft kaputt.
• Probieren Sie verschiedene Stile und Layouts aus: Testen Sie Farben, Schriftarten, Abstände oder Positionen, um zu sehen, was gut aussieht, bevor Sie Änderungen an Ihrem tatsächlichen Theme oder Stylesheet vornehmen.
• Notizen machen, was funktioniert: Wenn Ihnen eine Änderung gefällt, kopieren Sie das CSS und fügen Sie es in eine Textdatei oder eine Notiz-App ein, damit Sie es nicht verlieren.
• Testen Sie browserübergreifend: Eine Designanpassung, die in Chrome großartig aussieht, kann in Firefox oder Safari unpassend aussehen, überprüfen Sie dies also immer doppelt.
• Bleiben Sie organisiert: Führen Sie Buch über alle vorgenommenen Änderungen und warum. Dies hilft, wenn Sie jemals etwas rückgängig machen oder später Probleme beheben müssen.
• Bearbeiten Sie Live-Websites nicht leichtfertig: Wenn Sie lernen, ist es besser, auf einer Staging-Website oder in einer Testumgebung zu üben, um versehentliche Probleme auf Ihrer Live-Website zu vermeiden.

Häufig gestellte Fragen zum Element-Inspektor

Im Folgenden finden Sie einige der am häufigsten gestellten Fragen unserer Benutzer zur Verwendung des Inspect-Tools.

1. Kann ich das Inspektionstool auf jeder Website verwenden oder nur auf meiner eigenen?

Ja, Sie können das Inspektionstool auf jeder Website verwenden. Klicken Sie einfach mit der rechten Maustaste und wählen Sie das Inspektionstool aus dem Browser-Menü, um den Code hinter jeder Website anzuzeigen. Das Studium des Codes auf anderen Websites ist eine schnelle Möglichkeit, Ihre eigenen CSS/HTML-Kenntnisse zu erlernen und zu verbessern.

2. Warum kann ich das Inspektionstool in meinem Browser nicht finden?

Google Chrome blendet die Option "Inspizieren" möglicherweise im Rechtsklickmenü aus, insbesondere wenn mehrere Erweiterungen eigene Optionen zum Rechtsklickmenü hinzufügen.

Zusätzlich kann die Rechtsklickfunktion mit JavaScript deaktiviert sein, was die Option „Inspizieren“ ausblenden kann. In solchen Fällen können Sie die Entwicklertools immer noch öffnen, indem Sie die Tastenkombination Strg + Umschalt + I (oder Cmd + Option + I auf dem Mac) verwenden oder indem Sie zu Menü » Weitere Tools » Entwicklertools navigieren.

3. Kann ich Änderungen in verschiedenen Browsern sehen?

Ja, das Inspektionselement ist in den wichtigsten Browsern verfügbar und ermöglicht es Ihnen, Änderungen in Chrome, Firefox, Safari und Edge zu testen und zu beobachten.

4. Wie kann Inspect Element beim Debugging von JavaScript helfen?

Inspect Element enthält eine Console-Registerkarte, auf der Sie JavaScript-Fehler und -Warnungen sehen können. Dieses Tool ist unglaublich hilfreich, wenn Sie verstehen müssen, was mit Skripten auf Ihrer Website schiefgeht. Es ist, als hätten Sie eine direkte Verbindung zum Denkprozess des Browsers, was es Ihnen ermöglicht, Probleme schnell zu identifizieren.

5. Kann Inspect Element die Sicherheit meiner Website beeinträchtigen?

Nein, die Verwendung von Inspect Element beeinträchtigt nicht die Sicherheit Ihrer Website. Es ist ein Browser-Tool, das vorübergehend ändert, wie die Website auf Ihrem lokalen Computer angezeigt wird oder sich verhält, ohne die Backend-Daten oder deren Integrität zu verändern.

Video-Tutorial

WPBeginner abonnieren

Mehr über WordPress-Anpassung erfahren

Wenn Sie weiter erkunden möchten, wie Sie das Inspect-Tool für weitere Dinge auf Ihrer WordPress-Website verwenden können, sind die folgenden Ressourcen ein guter Ausgangspunkt:

• So passen Sie Ihr WordPress-Theme an – Dieser Anfängerleitfaden zeigt Schritt für Schritt, wie Sie Ihr WordPress-Theme anpassen.
• Wie man benutzerdefiniertes CSS in WordPress richtig hinzufügt – Dieses Tutorial zeigt mehrere Möglichkeiten, wie Sie Ihr benutzerdefiniertes CSS einfach in WordPress hinzufügen können.
• Optimierung der CSS-Bereitstellung in WordPress – Zu viele einzelne CSS-Dateien können die Leistung beeinträchtigen. Dieses Tutorial zeigt, wie Sie die CSS-Bereitstellung optimieren, um die Geschwindigkeit von WordPress zu erhöhen.
• Standardmäßig von WordPress generierte CSS-Cheat-Sheet – Dieser praktische Leitfaden zeigt Ihnen viele CSS-Klassen, die WordPress standardmäßig zu verschiedenen Elementen hinzufügt. Sie können diese CSS-Klassen dann in Ihrem benutzerdefinierten CSS-Code verwenden, um das Erscheinungsbild dieser Elemente zu ändern.

Wir hoffen, dieser Artikel hat Ihnen geholfen, die Grundlagen von Inspect Element zu erlernen und wie Sie es mit Ihrer WordPress-Website verwenden können. Möglicherweise möchten Sie auch unser Standard-CSS-Cheat-Sheet für von WordPress generiertes CSS für Anfänger sehen, um Ihre Theme-Entwicklungsfähigkeiten zu beschleunigen, oder unser ultimatives WordPress-Toolkit für Profis.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.