In diesem Artikel erfahren Sie, wie Sie mithilfe kostenloser Tools ganz einfach CSS auf einer WordPress-Site ändern können. Für WordPress stehen Ihnen zwei kostenpflichtige Plugins zur Verfügung, mit deren Hilfe Sie CSS modifizieren können, nämlich Yellow Pencil und CSS Hero, auf die wir uns in diesem Text jedoch nicht konzentrieren.
Das Tool, das wir verwenden werden, ist CanvasFlip Visueller Inspektor. Wir installieren es nicht auf der Website, da es sich nicht um ein Plugin, sondern um eine Google-Erweiterung handelt und nur auf Chrome funktioniert. Sie können es ganz einfach und unkompliziert verwenden, im Gegensatz zu den beiden oben genannten Plugins, die komplexer sind. CanvasFlip ist kostenlos. Installieren Sie es einfach als Erweiterung in Ihrem Browser und schon können Sie mit der Bearbeitung beginnen.
Von CanvasFlip gibt es auch eine kostenpflichtige Version, in der Sie mehr Optionen haben. Sie können mehrere Projekte gleichzeitig in ihrer Cloud speichern und sofort sehen, welche Änderungen Sie auf der Website vorgenommen haben. Auf diese Weise können mehrere Personen gleichzeitig eine Website ändern, was für Webdesign-Agenturen sehr nützlich ist Einige Projekte, bei denen mehrere Personen arbeiten.
Einer der Nachteile dieser Erweiterung besteht darin, dass es keine Möglichkeit gibt, die responsiven Versionen für Mobiltelefone und Tablets zu bearbeiten, sie ist jedoch sehr nützlich, um Änderungen an der Desktop-Version der Website vorzunehmen. Als erstes müssen Sie die Erweiterung bei Google finden und installieren. Nachdem Sie dies getan haben, müssen Sie in Ihrem Browser darauf klicken und es wird wie im Bild unten angezeigt.
Wenn auf die Schaltfläche geklickt wird Prüfen und bewegen Sie Ihre Maus über die Seite. Sie werden feststellen, wie Sie verschiedene Abschnitte auswählen und live auf der Website ändern können. Wenn Sie auf einen Abschnitt klicken, haben Sie die Möglichkeit, dessen Größe, Ränder, Abstände, Farbe, Schriftart und viele andere Dinge zu ändern. Natürlich können Sie all dies innerhalb von Elementor und dem Theme, das Sie zum Erstellen der Site verwendet haben, ändern, aber einige Dinge können Sie möglicherweise nicht ändern, wie z. B. den Header-Abstand, oder Sie möchten die Änderung einfach direkt auf der Site live sehen weg. Dann ist es für Sie einfacher, diese Erweiterung zu verwenden.
Sie können alles, was oben erwähnt wurde, in Elementor ändern, aber es gibt Dinge, die Sie nicht ändern können, worüber wir im Rest des Textes schreiben werden. Wenn Sie im Abschnitt „Neueste Artikel“ der Seite auf einen bestimmten Artikel klicken, sehen Sie, dass Sie auch die Schattierung des Elements ändern können, was in Elementor nicht der Fall ist. Sie können alles, was Sie möchten, live auf der Website ändern und dann die Datei mit den CSS-Änderungen herunterladen. Dazu müssen Sie auf die Option „Info“ klicken und dann auf die Schaltfläche klicken Änderungen exportieren wie im Bild unten und Sie werden die Datei mit den Änderungen herunterladen.
Wenn Sie auf diese Schaltfläche geklickt haben, haben Sie eine ZIP-Datei mit einer CSS-Datei erhalten. Öffnen Sie es in einem Texteditor und kopieren Sie den CSS-Code, den Sie auf der Site einfügen müssen. Dazu müssen Sie im Kontrollfeld Ihrer Website auf die Option klicken Anpassen. Wenn Sie das getan haben, müssen Sie die Option öffnen Benutzerdefiniertes CSS/JS und darin den kopierten CSS-Code einfügen und auf die Schaltfläche klicken Veröffentlichen. Auf diese Weise haben Sie die Änderungen an Ihrer Site im Site-Kontrollfeld gespeichert. Sie können selbst sehen, dass es auf diese Weise recht schnell und einfach ist, Änderungen an der Website vorzunehmen.
Ich hoffe, dass dieser Text für Sie nützlich war und Sie etwas Neues gelernt haben. Wenn Sie daran interessiert sind, weitere Tipps für selbständiges Arbeiten zu lesen, können Sie diese auf unserer Website nachlesen Blog, und falls Sie sich mit Fachleuten beraten möchten, klicken Sie darauf Verknüpfung.
Quelle: Youtube
