Die 5 nützlichsten Google Chrome-Erweiterungen für WordPress-Website-Ersteller

Die Optimierung Ihres Workflows ist entscheidend für den Projekterfolg. Es spart Zeit, Geld, verbessert die Kommunikation mit Kollegen, Kunden und verbessert die Qualität der fertigen WordPress-Seite.

Heutzutage gibt es immer eine Anwendung, ein Plugin oder ein Add-on, das Ihnen helfen kann, Ihre Aufgabe effizienter zu erledigen. In diesem Artikel wollte ich Ihnen zeigen, welche Art von Erweiterungen wir in Browsern (insbesondere Google Chrome) bei ProteusThemes verwenden, um viele Arten von Inhalten zu kommunizieren, zu bearbeiten und zu analysieren.

Alle 5 Chrome-Erweiterungen, die ich verwende, sind kostenlos verfügbar und Sie können sie in nur wenigen Minuten einrichten. Werfen wir einen Blick auf sie:

– Welche Schriftart

– Seitenlineal

– ColorZilla

– Toller Screenshot

– Stylebot

Sie können alle Erweiterungen aus dem Chrome Web Store installieren . Nach der Installation der Erweiterung wird ihr Symbol in der oberen rechten Ecke der Symbolleiste des Browsers neben dem URL-Feld angezeigt. Sie führen die Erweiterung aus oder zeigen alle Optionen an, indem Sie auf das Symbol klicken.

Alle installierten Erweiterungen können angezeigt, geändert, aktiviert oder deaktiviert werden, wenn Sie auf das Menü am Ende des URL-Felds klicken und Weitere Tools auswählen oder einfach mit der rechten Maustaste auf das Symbol der Erweiterung klicken, um die gewünschte Option auszuwählen.

Lassen Sie uns in die Details jeder Erweiterung eintauchen.

Welche Schriftart

Holen Sie sich die WhatFont-Erweiterung

Waren Sie schon einmal auf einer Website und wollten dieselbe Schriftart verwenden? Sie könnten den harten Weg gehen und im Code nach der Schriftart suchen, oder Sie könnten WhatFont verwenden. Diese Erweiterung identifiziert Schriftarten, die auf verschiedenen Webseiten verwendet werden, indem Sie auf den Text klicken. Das Popup-Fenster zeigt alle Informationen über die Schriftart. Sie können auch den Mauszeiger über den Text bewegen, um den Namen der verwendeten Schriftart zu erhalten.

Ich nutze dieses Tool, wenn ich nach Inspiration für das nächste Projekt suche oder die finale Version der WordPress-Website checke, bevor sie live geht. Es wird häufig von Webdesignern und Entwicklern verwendet, wenn Schriftarten in verschiedenen Browserauflösungen getestet werden.

Die Erweiterung zeigt die folgenden Merkmale der Schriftart:

• Schriftstärke und -stil (zeigt die Stärke und den Stil der Auswahl).

• Schriftfamilie (zeigt die vollständige Sammlung von Schriftarten, aus der die Schriftart stammt, damit Sie sie nachverfolgen können).

• Schriftgröße (ist die Größe der Schriftart, die in der aktuell angezeigten Auflösung verwendet wird. Beachten Sie, dass, wenn zwei verschiedene Schriftarten in derselben Größe eingestellt sind, eine aufgrund ihrer Unterschiede oft größer aussieht als die andere. Die Größe wird in Pixeln und leider in der Erweiterung angezeigt hat keine anderen typografischen Maße).

• Schrifthöhe (ist die Höhe von der Oberkante des Großbuchstabens bis zur Unterkante der untersten Unterlänge plus einem kleinen Pufferraum).

• Schriftfarbe (HEX-Farbmodell der Schriftart. Seien Sie vorsichtig, wenn Sie die Textfarbe von Links lesen. In einigen Fällen zeigt die Auswahl die Farbe des Links im Hover-Modus).

• Google Fonts, Font Squirrel oder TypeKit- Link (in einigen Fällen ist die Schriftart mit einer Sammlung interaktiver Anwendungsprogrammierschnittstellen verbunden, die es Ihnen ermöglichen, Webfonts von ihrer Website zu durchsuchen und zu verwenden . Suchen Sie nach derselben Schriftart oder erhalten Sie eine ganze Schriftart) .
• Zeichen (ein Beispiel für Groß- und Kleinbuchstaben wird in der ausgewählten Schriftart angezeigt).

Beachten Sie auch, dass Sie bei der Verwendung von WhatFont nicht mit der Webseite interagieren können, nur das Scrollen auf der Seite ist aktiv. Sie können auf mehrere Schriftarten klicken, um sie zu vergleichen, ohne das vorherige Popup zu verlieren.

Seitenlineal

Holen Sie sich die Page Ruler-Erweiterung

Mit dem Seitenlineal können Sie ein Lineal auf eine beliebige Seite ziehen und die Breite und Höhe des Elements sowie seine Position auf der Webseite anzeigen. Sie müssen nie wieder den Code ansehen oder Screenshots machen und diese in Photoshop messen. Das Tool ist nützlich, wenn Sie die Größe und Position größerer Elemente auf der Webseite überprüfen. Sie können damit beispielsweise alle Paddings und Margins überprüfen. Auch kleinere Elemente oder Details können gemessen werden.

So verwenden Sie das Seitenlineal

Beginnen Sie mit der Verwendung des Linealwerkzeugs, indem Sie auf das Symbol oben rechts in der Symbolleiste des Browsers klicken oder ALT + P drücken . Es erscheint ein blauer Linealbalken, der Breite, Höhe und Position der Auswahl anzeigt – links, oben, rechts, unten.

Um eine Auswahl zu treffen, einfach klicken, ziehen und loslassen. Die Auswahldaten werden sofort in der blauen Symbolleiste angezeigt. Durch Klicken und Verschieben der Seiten und Ecken des Lineals ändern Sie die Größe der Auswahl des Lineals. Sie können die gewünschte Größe oder Position auch manuell in die Felder auf der blauen Linealleiste eingeben. Eine weitere Option besteht darin, auf die kleinen Pfeile in den Feldern zu klicken, um die Größe zu ändern oder die Auswahl zu verschieben. Dadurch können Sie präzise Änderungen vornehmen. Sie können die Auswahl auch verschieben, indem Sie sie von ihrer Mitte ziehen.

Wenn Sie kleinere Details messen möchten, vergrößern Sie die Webseite. Der größte Vorteil dieses Tools besteht darin, dass das Lineal der Auswahl beim Vergrößern keine zusätzlichen Pixel hinzufügt.

Die Farbe des Lineals kann geändert werden, um einen besseren Kontrast zwischen der Auswahl des Lineals und den auf dem Seitenelement verwendeten Farben zu schaffen, sodass Sie genauere Messungen vornehmen können.

Um den Abstand zwischen zwei weit voneinander entfernten Elementen zu messen, aktivieren Sie die Option „Hilfslinien anzeigen“, um Hilfslinien anzuzeigen, die von den Linealkanten ausgehen.

Sie können die Symbolleiste am unteren Rand der Webseite andocken, wenn es Sie stört, während Sie Messungen vornehmen.

Aktivieren Sie den „Elementmodus“ (klicken Sie auf die hellblauen Pfeile auf der linken Seite der Symbolleiste), um die Elemente auf der Seite zu umreißen, während Sie Ihre Maus darüber bewegen. Durch Anklicken der Elemente erhalten Sie eine stetige Auswahl. Die Erweiterung zeigt auch Elemente an und ermöglicht es Ihnen, entsprechend dem Website-Code zwischen Elementen zu wechseln.

Elemente im Elementmodus finden und zwischen ihnen wechseln

Der einzige Nachteil des Plugins: Wenn Sie die Größe des Elements in der mobilen Ansicht erhalten müssen, müssen Sie Page Ruler gleichzeitig mit einem anderen Chrome-Plugin zur Größenanpassung (z. B. Window Resizer) verwenden, da Page Ruler nicht funktioniert, wenn Sie es sind auf der Webseite im Entwicklermodus.

ColorZilla

Holen Sie sich die ColorZilla-Erweiterung

ColorZilla ist eine Erweiterung, die Webentwickler und Grafikdesigner bei farbbezogenen Aufgaben unterstützt. Es wird normalerweise verwendet, um Farbpaletten zu erstellen, sich von Farbkombinationen inspirieren zu lassen oder die Farbe eines bestimmten Elements zu überprüfen. Sie können einen Farbmesswert von jedem Teil der Webseite abrufen, diese Farbe anpassen und in ein anderes Programm einfügen, ohne eine andere Anwendung öffnen zu müssen.

Dieses Tool bietet Farbwerte im RGB- und Hexadezimalformat. Klicken Sie auf das Pipettensymbol von ColorZilla, um ein Menü mit vielen Optionen zu öffnen.

So verwenden Sie ColorZilla

Die häufigste Verwendung von ColorZilla ist das Lesen der Farbe eines Elements. Wenn Sie auf „Farbe von Seite auswählen“ klicken, können Sie eine beliebige Farbe von der aktuell angezeigten Seite auswählen. Es öffnet eine Symbolleiste oben auf der Webseite, die Ihnen ein Beispiel der Farbe, des RGB- und HEX-Farbformats sowie der Größe und des Codes des farbigen Elements zeigt. Die Symbolleiste bietet auch Optionen zum Auswählen größerer Farbfelder, um die durchschnittliche Farbe zu berechnen.

Sie wählen und kopieren das HEX-Format der Farbe, indem Sie darauf klicken. Fügen Sie den HEX-Farbcode mit den Tasten STRG + V oder CMD + V ein . Für eine einmalige Kopie in einem anderen Format können Sie das Dropdown-Menü öffnen, „In die Zwischenablage kopieren“ auswählen und das gewünschte Format auswählen.

Das Format kann für alle nächsten ausgewählten Farben in den Optionen geändert werden. Dort können Sie das #-Format (66CAA6) deaktivieren und HEX-Code in Kleinbuchstaben schreiben (66caa6). Vergessen Sie nicht, die Änderungen zu speichern.

Die zuletzt ausgewählte Farbe wird im Dropdown-Menü des ColorZilla-Symbols unter „Farbauswahl“ gespeichert. Color Picker speichert den Verlauf der ausgewählten Farben, hat eine Option zum Bearbeiten der Farbe und Sie können sie von hier aus kopieren.

„Webpage Color Analyser“ liest alle CSS-Farben, die auf Ihrer aktuellen Webseite verwendet werden. Ein Klick auf die Farbe hebt jedes Element in dieser Farbe hervor und zeigt das RGB- und HEX-Format der Farbe an.

Der eingebaute Palettenbrowser ermöglicht es Ihnen, Farben aus bereits vorhandenen Farbsets auszuwählen. Eine der farbbezogenen Optionen ist auch „CSS Gradient Generator“, eine erweiterte Option zum Erstellen von Farbverläufen.

Toller Screenshot

Holen Sie sich die fantastische Screenshot-Erweiterung

Diese Erweiterung erleichtert das Screenshoten und Aufzeichnen von Webseiten. Es ist auch möglich, Ihre lokalen Bilder zu importieren, zu bearbeiten und zu exportieren. Bei ProteusThemes verwenden wir es täglich für die interne Kommunikation sowie für den von uns angebotenen WordPress-Support. Das Tool ist sehr nützlich, wenn Sie remote arbeiten. Ja, es gibt viele andere Erweiterungen, die die gleiche Arbeit leisten können, aber wir mögen Awesome Screenshot, weil es einfach und leistungsstark ist.

So verwenden Sie einen fantastischen Screenshot

Diese Erweiterung ermöglicht Ihnen:

– sichtbaren Teil der Webseite zu erfassen (Option für verzögerte Beschriftung),

– um einen ausgewählten Bereich aufzunehmen (wählen Sie einen Bereich aus, den Sie als Bild haben möchten),

– ganze Webseite zu erfassen,

– um einen Screenshot Ihres Desktops zu machen,

– um Ihr lokales Bild zu importieren und zu bearbeiten und

– um ein Video des Bildschirms aufzunehmen.

Um eine der Möglichkeiten zum Screenshot einer Webseite auszuwählen, klicken Sie auf das Kameralinsensymbol in der Symbolleiste des Browsers. Beachten Sie, dass alle Aktionen, mit Ausnahme der verzögerten Aufnahme des Awesome-Screenshots, sofort ausgeführt werden. Die von Ihnen erstellten Screenshots werden als PNG- oder JPEG-Bild gespeichert. Das gewünschte Format für das Bild kann in den Optionen der Erweiterung ausgewählt werden, wo Sie auch andere Einstellungen haben, wie z. B. den Zeitpunkt der verzögerten Aufnahme, Shortcodes und einen Ordner, in dem Bilder automatisch gespeichert werden sollen.

Wenn Sie eine mobile Ansicht der Webseite wünschen oder einen Screenshot Ihrer WordPress-Webseite in einer anderen Auflösung erstellen möchten, können Sie in den Entwicklermodus gehen, um sie zu ändern oder zuerst eine andere Größenänderungserweiterung (z. B. Website Resizer) zu aktivieren.

Bevor Sie den Screenshot speichern, haben Sie die Möglichkeit, ihn zu bearbeiten und zu kommentieren. Scrollen Sie durch Ihre Aufnahme, schneiden Sie sie zu und verwischen Sie ganz einfach die Teile, die private Daten enthalten. Sie können das Bild zur Hervorhebung und Klarheit mit Text, Kreisen, Pfeilen und Linien in verschiedenen Farben kommentieren. Zoomen Sie mit den Lupensymbolen hinein und heraus, um das Bild vor dem Speichern anzuzeigen.

Toolbar- und Screenshot-Bearbeitungsoptionen mit Awesome Screenshot

Wenn Sie mit dem Ergebnis zufrieden sind, speichern Sie das Bild auf Ihrem Computer oder in der Cloud, teilen Sie es oder drucken Sie es aus.

Diese Erweiterung bietet auch eine Option zum kostenlosen Aufzeichnen von 30-Sekunden-Bildschirmvideos. Sie können Tab- oder Fenstervideos erstellen. Videos können im WebM-Format gespeichert, auf Google Drive übertragen oder direkt auf YouTube hochgeladen werden. Ihre Aufnahmen finden Sie im Dropdown-Menü „Awesome Screenshot“ unter „Meine Aufnahmen“.

Die einzigen zwei Nachteile der Erweiterung sind, dass beim Zoomen im Browser die Erfassung des ausgewählten Bereichs nicht funktioniert und viele Benutzer keine schönen Screenshots der Websites mit klebrigen Elementen erhalten können.

Wissenswertes: Die meisten Screenshots und Videos, die Sie sich in diesem Artikel ansehen, wurden mit Awesome Screenshot erstellt.

Stylebot

Holen Sie sich die Stylebot-Erweiterung

Mit Stylebot können Sie CSS der Website nur für Ihre Anzeige bearbeiten und manipulieren. Sie benötigen einige CSS -Kenntnisse, um präzise und dauerhafte Änderungen am CSS der Website vorzunehmen . Wenn Sie es nur für eine schnellere Vorschau auf Änderungen auf Ihrer WordPress-Seite benötigen, sind fortgeschrittene CSS-Kenntnisse nicht erforderlich. Dieses Tool wird verwendet, um alle möglichen Elemente zu ändern, neue hinzuzufügen, sie zu löschen und ein anderes Layout der Website zu erstellen, sodass Sie perfekte Screenshots erstellen, unerwünschte Fehler beheben oder das CSS der Website speichern können, damit die Änderungen auch übernommen werden beim nächsten Besuch gesehen. Der Stil der von Ihnen erstellten Website kann importiert oder exportiert und mit anderen geteilt werden.

Für eine fortgeschrittenere Bearbeitung wird Stylebot in Kombination mit dem Entwicklermodus verwendet, um Elemente auf der Seite zu identifizieren.

So verwenden Sie Stylebot

Um den Stylebot zu öffnen, klicken Sie auf das CSS-Symbol in der Browser-Symbolleiste oder drücken Sie ALT + M . Wenn Sie nicht über große Programmierkenntnisse verfügen, empfehle ich Ihnen, den Basismodus unten in der neu geöffneten Spalte zu wählen.

Der erweiterte Modus öffnet ein Textfeld, in das Sie CSS-Code für das ausgewählte Element schreiben. Hier ist es einfacher, in Kombination mit dem Entwicklermodus den Namen des zu ändernden Elements aus den verschachtelten Elementen zu finden und die Bearbeitung in Stylebot fortzusetzen. Wenn Sie viele Bearbeitungsmodi gleichzeitig verwenden möchten, können Sie das tun. Die einfachen Bearbeitungen werden in Code übersetzt, der im erweiterten oder CSS-Bearbeitungsmodus sichtbar ist.

Die Option „CSS bearbeiten“ öffnet ein Feld für CSS-Code, der auf die gesamte Website angewendet wird und gespeichert, geteilt und beim nächsten Besuch der Website verwendet werden kann. Alle Änderungen, die Sie vorgenommen haben, werden sichtbar sein. Beachten Sie, dass alle Änderungen, die Sie vornehmen, erhalten bleiben, wenn Sie die Website aktualisieren. Um das Styling zu entfernen, klicken Sie auf das Stylebot-Symbol und wählen Sie „Styling entfernen“.
Der Basismodus verfügt über einfache Abschnitte zum schnelleren und einfacheren Bearbeiten der Website. Wir verwenden es manchmal als schnelles Vorschau-Tool (z. B. um zu testen, wie eine größere Überschrift aussehen würde, um die Farbe des Hintergrunds zu ändern usw.). Anfänger könnten es von Anfang an problemlos verwenden.

Hier können Sie ändern:

– Text,

– Farben, Hintergründe,

– Grenzen,

– Layout & Sichtbarkeit.

Sie wählen manuell ein Element auf der Website (hervorgehoben mit grünem Rand) mit einem Cursor aus. Der Name des Elements wird oben in der Stylebot-Spalte angezeigt. Für eine neue Auswahl klicken Sie einfach auf das Symbol oben links in der Spalte. Dropdown-Pfeil am Titel des Elements, bietet Ihnen zuvor ausgewählte Abschnitte. Wenn das richtige Element ausgewählt ist, können Sie mit der Änderung der Website beginnen, indem Sie die Werte eingeben und vorgefertigte Optionen auswählen. Die Bearbeitungsoptionen im Basismodus sind begrenzt. Sie können die Schriftgröße, Textfarbe, Auffüllungen und Ränder usw. ändern.

Um Ihr Stylebot-Bearbeitungs- oder Anzeigeerlebnis angenehmer zu gestalten, klicken Sie auf das Stylebot-Symbol und wählen Sie Optionen. Hier können Sie personalisierte Verknüpfungen erstellen, den bevorzugten Bearbeitungsmodus auswählen, Ihre auf verschiedenen Websites angewendeten Stile aktivieren und deaktivieren, Stile importieren und exportieren usw.

Hier sind also nur 5 der wichtigsten und leistungsstärksten Erweiterungen, die wir täglich bei ProteusThemes verwenden und die auch Ihren Arbeitsablauf erleichtern können. Denken Sie anders? Würdet ihr bessere Alternativen empfehlen? Hinterlasse einen Kommentar.