Optimieren Sie Ihr WordPress-Design mit gelbem Stift

So passen Sie Ihr WordPress-Design an

Wenn Sie Ihr WordPress-Theme-Design auf einfache Weise anpassen möchten, dann ist das Yellow Pencil WordPress Plugin Möglicherweise ist dies nur das Add-On, das Sie für Ihre Website benötigen. Mit diesem visuellen Stil-Editor können Sie das Erscheinungsbild Ihrer Website ändern, ohne eine Codezeile berühren zu müssen.


Mit Yellow Pencil lernen Sie die Freude am Webdesign kennen und erstellen eine wunderschöne Website, die Ihre Besucher begeistert. Bearbeiten Sie jedes Element Ihrer Website im Frontend und in Echtzeit. Die einzigen Grenzen für das Design Ihrer Website sind Ihre eigenen Vorstellungen.

Diese ausführliche Anleitung zur Verwendung der Premium-Version von Yellow Pencil behandelt die wichtigsten Funktionen, einschließlich der Live-CSS-Bearbeitungsfunktionen per Mausklick und der Kompatibilität mit jedem WordPress-Thema. Wir werden uns dann die angebotene Benutzererfahrung ansehen, damit Sie sich in kürzester Zeit einrichten und gestalten können.

Wer ist gelber Bleistift für?

Gelber Bleistift Wer

Egal, ob Sie nach einer schnelleren Möglichkeit suchen, Ihre Website anzupassen, oder mit CSS nicht vertraut sind, Yellow Pencil kann Ihnen helfen. Dieses Plugin enthält erweiterte Tools und Anpassungsoptionen, ideal für Profis, die neue Websites für Kunden erstellen möchten.

Aufgrund des Mangels an Codierung, der Benutzerfreundlichkeit, der intuitiven Benutzeroberfläche und der detaillierten Supportdokumentation können jedoch auch Benutzer mit eingeschränkter Designerfahrung auf dieses Plugin zugreifen. Kurz gesagt, wenn Sie das Erscheinungsbild Ihrer WordPress-Website anpassen möchten, ist Yellow Pencil der visuelle Stileditor für Sie.

Kurz gesagt, wenn Sie das Erscheinungsbild Ihrer WordPress-Website anpassen möchten, ist Yellow Pencil der visuelle Stileditor für Sie.

Hauptmerkmale von Yellow Pencil

Gelbe Bleistiftmerkmale

Yellow Pencil ist ein wirklich beeindruckendes Designwerkzeug. Die verfügbaren Funktionen und Tools ermöglichen die vollständige Kontrolle über das Erscheinungsbild Ihrer Website. Es kann für jedes WordPress-Thema oder Plugin verwendet werden und ermöglicht es Ihnen, stilvolle und reaktionsschnelle Webseiten zu erstellen.

Mit dem Element Inspector können Sie jedes visuelle Element auf Ihrer WordPress-Website auswählen und anpassen. Bearbeiten Sie Farben, Hintergründe, Ränder und vieles mehr. All dies erfolgt in Echtzeit am Frontend Ihrer Website, sodass Sie die Änderungen anzeigen können, während Sie sie vornehmen. Yellow Pencil generiert Code im Hintergrund. Wenn Sie dies nicht möchten, müssen Sie sich keinen Code selbst ansehen. Weitere Funktionen sind:

  • Ziehen und Ablegen, um Elemente neu zu positionieren
  • Ändern Sie die Größe von Elementen mit der Maus
  • Wählen Sie aus mehr als 600 Schriftarten, mehr als 300 Hintergrundmustern, mehr als 50 Animationen und vielem mehr
  • Unbegrenzte Farben verfügbar oder wählen Sie aus den modernen Farbpaletten von Yellow Pencil
  • Verwenden Sie einen Live-CSS-Editor

Umfangreiche Dokumentation und Unterstützung stehen ebenfalls zur Verfügung, damit Sie diesen visuellen Stil-Editor von WordPress optimal nutzen können.

Jetzt wissen wir also, was Yellow Pencil zu bieten hat. Aber wie fangen wir an und ist die Benutzererfahrung so beeindruckend wie die Funktionen, die sie bietet?

So installieren Sie Yellow Pencil

Yellow Pencil ist extrem schnell und einfach zu installieren. Wenn Sie das Plugin von CodeCanyon gekauft haben (oder ein Premium-Thema wie New York gekauft haben, das das Plugin kostenlos enthält), laden Sie die „Nur installierbare WordPress-Datei“ von Ihrer Envato-Downloadseite herunter (oder verwenden Sie die kostenlose Version, die auf verfügbar ist) WordPress.org).

Öffnen Sie dann Ihr WordPress-Dashboard. Wählen Sie “Plugins”> “Neu hinzufügen”..

Gelber Bleistift Neu hinzufügen

Klicken Sie auf der Seite “Plugins hinzufügen” auf “Plugin hochladen”> “Datei auswählen”..

Gelber Bleistift hochladen

Wählen Sie an der Stelle, an der Sie es heruntergeladen haben, “waspthemes-yellow-pencil.zip” aus. Klicken Sie auf “Jetzt installieren”..

Gelber Stift installieren

Klicken Sie nach der Installation des Plugins auf “Aktivieren”. Geben Sie den Aktivierungscode ein, den Sie beim Kauf des Plugins erhalten haben. Auf diese Weise erhalten Sie Zugriff auf Plugin-Updates, sobald diese veröffentlicht werden.

Nach der Aktivierung wird die Begrüßungsseite der Gelben Seite in Ihrem Dashboard angezeigt. Unter “Ressourcen” finden Sie die Dokumentation, Tutorials und andere Hilfe und Unterstützung des Plugins, die Sie möglicherweise benötigen, um loszulegen.

Gelber Bleistift Willkommen

Wenn Sie fertig sind, klicken Sie auf “Los geht’s”. Dadurch gelangen Sie direkt in den Bearbeitungsmodus.

Grundlegendes zur gelben Bleistiftoberfläche

Die Yellow Pencil-Oberfläche ist sehr übersichtlich und intuitiv zu bedienen. In der Leiste links auf der Seite werden die verfügbaren Werkzeuge angezeigt.

Gelber Stift Linke Leiste

Das Bedienfeld, das sich auf der rechten Seite der Seite befindet, ist das Editorbedienfeld. Wenn kein Element auf der Seite ausgewählt ist, werden die drei Anpassungstypen angezeigt, in denen eine Bearbeitung möglich ist.

Yellow Pencil Editor Panel

Wenn Sie auf der Seite auf ein Element klicken, ändert sich das Editorfenster und enthält die Stileigenschaften.

Gelbes Bleistiftelement ausgewählt

Um ein ausgewähltes Element wird ein blaues Feld mit zusätzlichen Anpassungsoptionen angezeigt.

Gelbes Bleistiftelement ausgewählt

Wichtige Werkzeuge, die Sie benötigen

In der Symbolleiste auf der linken Seite werden zahlreiche Werkzeuge angezeigt. Einige sind jedoch sofort wichtig, um Ihnen den Einstieg zu erleichtern.

Gelbe Bleistift-Symbolleistenwerkzeuge

  • Elementinspektor – Hiermit können Sie jedes Element auf der Seite auswählen, das angepasst werden soll.
  • Rückgängig und Wiederherstellen – Probieren Sie verschiedene Designs auf Ihrer Seite sicher aus, in dem Wissen, dass Sie Ihre Änderungen rückgängig machen oder wiederholen können.
  • Vollbild – Arbeiten Sie im Vollbildmodus und erhalten Sie einen klaren Überblick über Ihre Anpassungen, während Sie diese vornehmen.

Das Editor-Panel enthält drei wichtige Schaltflächen…

Schaltflächen des gelben Bleistift-Editor-Bedienfelds

  • Live-Vorschau – Zeigen Sie eine Vorschau Ihrer Änderungen an, ohne dass die gelbe Bleistift-Oberfläche angezeigt wird.
  • Änderungen zurücksetzen – Mögen Sie Ihre Änderungen nicht? Setzen Sie einfach die vorgenommenen Änderungen zurück.
  • Speichern – Wenn Sie eine Vorschau Ihrer Arbeit angezeigt haben und mit den Ergebnissen zufrieden sind, klicken Sie einfach auf die Schaltfläche “Speichern”.

Customizing-Typ auswählen

Yellow Pencil Customizing Type

Bevor Sie ein Element auf Ihrer Seite auswählen und mit der Bearbeitung beginnen, müssen Sie zunächst einen Customizing-Typ auswählen. Diese werden im Editorfenster angezeigt, wenn kein Element ausgewählt ist. Es stehen drei Typen zur Auswahl. Globales Anpassen, Anpassen einer Seite und Anpassen von Vorlagen.

Jeder der Typen ist relativ selbsterklärend. Wenn Sie “Globales Anpassen” auswählen, gelten die von Ihnen vorgenommenen Änderungen für jede Seite Ihrer Website. Wenn Sie “Eine Seite anpassen” auswählen, wirken sich alle Änderungen nur auf die Seite aus, an der Sie arbeiten. “Vorlagen anpassen” gilt für den aktuellen Beitragstyp. Dies ist eine gute Option, wenn Sie alle Produkt- oder Blogseiten konfigurieren möchten.

Der von Ihnen ausgewählte Anpassungstyp wird oben im Editorfenster angezeigt. Stellen Sie sicher, dass Sie überprüfen, ob Sie den richtigen Typ bearbeiten, bevor Sie Ihre Arbeit speichern.

Was können Sie mit gelbem Stift tun?

Sobald Sie sich mit der Benutzeroberfläche vertraut gemacht haben, können Sie loslegen. Im Folgenden finden Sie ein Beispiel für einige der zahlreichen Anpassungstools und -funktionen, die dieses Plugin bietet. Diese helfen Ihnen auf dem Weg zur Erstellung einer schönen und professionellen Website.

Ändern Sie die Typografie

Gelbe Bleistift-Typografie

Die Auswahl einer für Ihre Website geeigneten Schriftart ist eine wichtige Aufgabe. Yellow Pencil bietet verschiedene Optionen, mit denen Sie Ihren Text so gestalten können, dass er zum Design Ihrer Website passt und die Aufmerksamkeit Ihres Lesers auf sich zieht.

Klicken Sie auf einen Textabschnitt, den Sie bearbeiten möchten, und wählen Sie dann im Editorfenster “Text” aus. Dadurch werden die Anpassungsoptionen für die Typografie angezeigt. Wählen Sie aus mehr als 600 Schriftarten, ändern Sie die Schriftgröße, ändern Sie die Zeilenhöhe, steuern Sie den Abstand von Buchstaben und Wörtern und vieles mehr. Sie können die Farbe Ihres Textes auch ändern, indem Sie aus einer der modernen Farbpaletten von Yellow Pencil auswählen oder sich für eine eigene Farbauswahl entscheiden.

Fügen Sie einen Rand hinzu

Gelber Bleistiftrand

Durch Hinzufügen eines Rahmens zu bestimmten Elementen auf einer Seite können wichtige Informationen hervorgehoben und effektive visuelle Elemente erstellt werden. Nachdem Sie das Bild oder den Text ausgewählt haben, zu dem Sie einen Rahmen hinzufügen möchten, wählen Sie im Editorfenster “Rand”. Es gibt vier Arten von

Nachdem Sie das Bild oder den Text ausgewählt haben, zu dem Sie einen Rahmen hinzufügen möchten, wählen Sie im Editorfenster “Rand”. Es stehen vier Arten von Rahmen zur Auswahl. fest, gepunktet, gestrichelt oder versteckt. Sie können auch die Rahmenbreite ändern, um sie genauer zu definieren, und die Farbe ändern.

Eine beeindruckende Funktion ist, dass Sie jede Seite des Rahmens separat anpassen können. Dies bedeutet, dass jeder der vier Seiten eine andere Farbe, ein anderer Stil und eine andere Dicke zugewiesen werden kann, was zu einem einzigartigen und auffälligen Erscheinungsbild führt.

Ändern Sie den Hintergrund

Gelber Bleistift Hintergrund

Ein auffälliger Hintergrund kann dazu beitragen, dass ein Element platzt. Mit dem gelben Stift können Sie den Hintergrund jedes einzelnen Elements auf Ihrer Website ändern.

Klicken Sie dazu auf das ausgewählte Element und wählen Sie im Editorfenster “Hintergrund”.

Hier können Sie die Hintergrundfarbe ändern, aus einem der Muster von Yellow Pencils 300+ auswählen oder einen CSS-Verlauf auswählen. Sie haben auch die Möglichkeit, Ihre eigenen benutzerdefinierten Bilder hochzuladen. Sobald Sie sich für einen Hintergrund entschieden haben, können Sie die Hintergrundgröße und -position anpassen und, wenn Sie ein Bild hinzugefügt haben, auswählen, ob es statisch ist oder mit dem Rest der Seite scrollt.

Animationen verwenden

Gelbe Bleistiftanimation

Die Verwendung von Animationen ist eine weitere großartige Möglichkeit, um Ihre Inhalte zu verbessern. Unter “Animation” im Editorfenster können Sie dem ausgewählten Element einen Animationseffekt hinzufügen.

Wählen Sie im Live-Animations-Manager eine von über 50 Animationen aus, vom Vergrößern oder Ausblenden bis zum Abprallen, Drehen und vielem mehr. Sie können die Dauer und Verzögerung steuern und auf Wunsch mehrere Animationen gleichzeitig ausführen. Dies verleiht Ihrer Website Originalität und macht auf die wichtigen Aspekte Ihrer Seite aufmerksam. Sie können auch versuchen, Ihre eigenen benutzerdefinierten Animationen zu erstellen, indem Sie den Animationsgenerator in der Symbolleiste auswählen.

Ändern Sie die Größe und positionieren Sie jedes Element neu

Das Ändern der Größe und Neupositionierung eines Elements ist mit Yellow Pencil sehr einfach.

Klicken Sie zum Ändern der Größe direkt auf ein Element, sodass das blau hervorgehobene Feld um das Element herum angezeigt wird. Ziehen Sie dann einfach die horizontalen und vertikalen Linien des blauen Felds, um die Größe zu ändern.

Gelbe Bleistiftgröße ändern

Um ein Element neu zu positionieren, klicken Sie darauf und halten Sie die Maustaste gedrückt. Ziehen Sie es per Drag & Drop an die entsprechende Position auf der Seite.

Gelber Bleistift Dragon Drop

Der Nachteil dieser Drag & Drop-Funktion ist, dass sie Probleme beim Anzeigen auf Mobiltelefonen verursachen kann. Verwenden Sie das Responsive Tool in der Symbolleiste, um zu sehen, wie Ihre Webseite auf allen Bildschirmgrößen aussieht. Möglicherweise müssen Sie Ihr Design entsprechend ändern.

Preisgestaltung

Preisgestaltung mit gelbem Stift

Das Yellow Pencil WordPress-Plugin ist bei CodeCanyon für 26 US-Dollar erhältlich. Dies beinhaltet 6 Monate Support, aber Sie haben die Möglichkeit, zusätzlich 7,88 USD zu zahlen, um den Support auf bis zu 12 Monate zu verlängern.

Abschließende Gedanken

Yellow Pencil ist ein großartiges Tool, wenn Sie das Erscheinungsbild Ihrer WordPress-Site anpassen möchten. Die Funktionen und die Benutzerfreundlichkeit bieten Ihnen alles, was Sie zum Erstellen einer benutzerdefinierten WordPress-Website benötigen. Stellen Sie für optimale Ergebnisse sicher, dass Sie eine klare Vorstellung davon haben, wie Ihre Website aussehen soll.

Verfügt Yellow Pencil über die Funktionen, die Sie zur Personalisierung Ihrer WordPress-Website benötigen? Bitte teilen Sie Ihre Gedanken unten …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map