ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: Optimieren Sie Ihr WordPress-Theme-Design mit gelbem Bleistift
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
So duplizieren Sie Fotos und Videos auf iPhone und iPad
Wie man
So beheben Sie eine ungenaue Apple Watch-Schrittverfolgung
Wie man
iOS 16.4 Beta: Video automatisch dimmen, wenn Lichtblitze erkannt werden
Wie man
So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)
Wie man
MacBook Pro (2023) vs. iPad Pro (2022): Was ist der Unterschied?
Gegen
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tutorials > Optimieren Sie Ihr WordPress-Theme-Design mit gelbem Bleistift
Tutorials

Optimieren Sie Ihr WordPress-Theme-Design mit gelbem Bleistift

Zuletzt aktualisiert: November 18, 2021 4:16 pm
ThemeLocal vor 1 Jahr 13 Minuten Mindestlesezeit
Aktie
13 Minuten Mindestlesezeit
Aktie

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

Contents
Für wen ist gelber Bleistift geeignet?Hauptmerkmale des gelben BleistiftsSo installieren Sie den gelben BleistiftDie Benutzeroberfläche des gelben Bleistifts verstehenWichtige Werkzeuge, die Sie benötigenAuswahl eines Customizing-TypsWas kann man mit gelbem Bleistift machen?Ändern Sie die TypografieEinen Rahmen hinzufügenÄndern Sie den HintergrundAnimationen verwendenGröße ändern und jedes Element neu positionierenPreisgestaltungAbschließende Gedanken

Die Verwendung von Yellow Pencil wird Ihnen die Freude am Webdesign beibringen und gleichzeitig eine schöne Website erstellen, die Ihre Besucher begeistert. Bearbeiten Sie jedes Element Ihrer Website, alles im Frontend und in Echtzeit. Die einzige Grenze für das Design Ihrer Website wird Ihre eigene Vorstellungskraft sein.

Diese ausführliche Anleitung zur Verwendung der Premium-Version von Yellow Pencil behandelt die wichtigsten Funktionen, einschließlich der Point-and-Click-Live-CSS-Bearbeitungsfunktionen und der Kompatibilität mit jedem WordPress-Theme. Anschließend schauen wir uns die angebotene User Experience an, damit Sie im Handumdrehen einrichten und gestalten können.

Für wen ist gelber Bleistift geeignet?

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, perfekt für Profis, die neue Websites für Kunden erstellen möchten.

Aufgrund der fehlenden Codierung, der Benutzerfreundlichkeit, der intuitiven Benutzeroberfläche und der detaillierten Support-Dokumentation können jedoch auch Benutzer mit begrenzter 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 des gelben Bleistifts

Merkmale des gelben Bleistifts

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 in jedem WordPress-Theme 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 geschieht in Echtzeit am Frontend Ihrer Website, sodass Sie die Änderungen während der Durchführung anzeigen können. Yellow Pencil generiert Code im Hintergrund, so dass Sie sich keinen Code selbst ansehen müssen, es sei denn, Sie möchten. Weitere Funktionen sind:

  • Ziehen und ablegen, um Elemente neu zu positionieren
  • Ändern Sie die Größe von Elementen mit der Berührung Ihrer Maus
  • Wählen Sie aus 600+ Schriftarten, 300+ Hintergrundmustern, 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 Support sind ebenfalls verfügbar, damit Sie diesen visuellen WordPress-Editor 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 den gelben Bleistift

Yellow Pencil ist extrem schnell und einfach zu installieren. Sobald Sie das Plugin von CodeCanyon gekauft haben (oder ein Premium-Theme wie New York gekauft haben, das das Plugin kostenlos enthält), laden Sie die „Nur installierbare WordPress-Datei“ von Ihrer Envato-Downloadseite herunter (oder Sie können die kostenlose Version verwenden, die auf 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 dort, wo Sie es heruntergeladen haben, ‚waspthemes-yellow-pencil.zip‘. Klicken Sie auf „Jetzt installieren“.

Gelber Bleistift installieren

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

Nach der Aktivierung wird die Willkommensseite der Gelben Seite auf Ihrem Dashboard angezeigt. Unter „Ressourcen“ finden Sie die Dokumentation des Plugins, Tutorials und andere Hilfe und Unterstützung, 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.

Die Benutzeroberfläche des gelben Bleistifts verstehen

Die Benutzeroberfläche des Yellow Pencil ist sehr klar und intuitiv zu bedienen. Die Leiste auf der linken Seite der Seite zeigt die verfügbaren Tools an.

Linke Leiste mit gelbem Bleistift

Das Panel, das sich auf der rechten Seite der Seite befindet, ist das Editor-Panel. Wenn kein Element auf der Seite ausgewählt ist, werden die drei Customizing-Typen angezeigt, die bearbeitet werden können.

Gelbes Bleistift-Editor-Panel

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

Gelbes Bleistiftelement ausgewählt

Um ein ausgewähltes Element wird ein blaues Feld angezeigt, das zusätzliche Anpassungsoptionen anzeigt.

Gelbes Bleistiftelement ausgewählt

Wichtige Werkzeuge, die Sie benötigen

Die Werkzeugleiste auf der linken Seite zeigt zahlreiche Werkzeuge an, aber einige sind sofort wichtig, um Ihnen den Einstieg zu erleichtern…

Werkzeuge der gelben Bleistift-Symbolleiste

  • Element-Inspektor – Damit können Sie jedes Element auf der Seite zum Anpassen auswählen.
  • Rückgängig machen und wiederherstellen – Probieren Sie verschiedene Designs auf Ihrer Seite aus, in der Gewissheit, dass Sie Ihre Änderungen rückgängig machen oder wiederherstellen können.
  • Vollbild – Arbeiten Sie im Vollbildmodus und erhalten Sie einen klaren Überblick über Ihre Anpassungen, während Sie sie vornehmen.

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

Schaltflächen des gelben Bleistifteditor-Bedienfelds

  • Live-Vorschau – Zeigen Sie eine Vorschau Ihrer Änderungen an, ohne dass die Yellow Pencil-Benutzeroberfläche angezeigt wird.
  • Änderungen zurücksetzen – Ihnen gefallen Ihre Änderungen nicht? Setzen Sie einfach die vorgenommenen Änderungen zurück.
  • Speichern – Sobald Sie Ihre Arbeit in der Vorschau angezeigt haben und mit den Ergebnissen zufrieden sind, klicken Sie einfach auf die Schaltfläche Speichern.

Auswahl eines Customizing-Typs

Gelber Bleistift-Anpassungstyp

Bevor Sie ein Element auf Ihrer Seite auswählen und mit der Bearbeitung beginnen, müssen Sie zunächst einen Anpassungstyp auswählen. Diese werden im Editor-Panel angezeigt, wenn kein Element ausgewählt ist. Es stehen drei Typen zur Auswahl; Global anpassen, eine Seite anpassen und Vorlagen anpassen.

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

Der von Ihnen gewählte Anpassungstyp wird oben im Editorbereich angezeigt. Stellen Sie sicher, dass Sie den richtigen Typ bearbeiten, bevor Sie Ihre Arbeit speichern.

Was kann man mit gelbem Bleistift machen?

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

Ändern Sie die Typografie

Typografie mit gelbem Bleistift

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

Klicken Sie auf einen Textabschnitt, den Sie bearbeiten möchten, und wählen Sie dann ‚Text‘ aus dem Editor-Panel. Dadurch werden die Anpassungsoptionen für die Typografie angezeigt. Wählen Sie aus über 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 auch die Farbe Ihres Textes ändern, indem Sie eine der modernen Farbpaletten von Yellow Pencil auswählen oder sich für Ihre eigene Farbauswahl entscheiden.

Einen Rahmen hinzufügen

Gelber Bleistiftrand

Das Hinzufügen eines Rahmens zu bestimmten Elementen auf einer Seite kann dazu beitragen, wichtige Informationen hervorzuheben und effektive visuelle Elemente zu erstellen. Nachdem Sie das Bild oder den Text ausgewählt haben, dem Sie einen Rahmen hinzufügen möchten, wählen Sie im Editor-Bereich „Rahmen“. Es gibt vier Stile von

Nachdem Sie das Bild oder den Text ausgewählt haben, dem Sie einen Rahmen hinzufügen möchten, wählen Sie im Editor-Bereich „Rahmen“. Es stehen vier Rahmenarten zur Auswahl; durchgezogen, gepunktet, gestrichelt oder verdeckt. Sie können auch die Rahmenbreite ändern, um sie definierter zu machen, und die Farbe ändern.

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

Ändern Sie den Hintergrund

Gelber Bleistifthintergrund

Ein auffälliger Hintergrund kann dabei helfen, ein Element hervorzuheben. Mit Yellow Pencil 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 Editor-Panel ‚Hintergrund‘.

Hier können Sie die Hintergrundfarbe ändern, aus einem von Yellow Pencils 300+ Mustern auswählen oder einen CSS-Verlauf auswählen. Sie haben auch die Möglichkeit, Ihre eigenen benutzerdefinierten Bilder hochzuladen. Wenn Sie sich für einen Hintergrund entschieden haben, können Sie die Größe und Position des Hintergrunds anpassen und, wenn Sie ein Bild hinzugefügt haben, wä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, Ihren Inhalten zu helfen, Wirkung zu erzielen. Unter ‚Animation‘ im Editor-Panel können Sie Ihrem 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 Springen, Drehen und vielem mehr. Sie können die Dauer und Verzögerung steuern sowie mehrere Animationen gleichzeitig ausführen, wenn Sie dies wünschen. Dies verleiht Ihrer Site Originalität und lenkt die Aufmerksamkeit auf die wichtigen Aspekte Ihrer Seite. Sie können auch versuchen, Ihre eigenen benutzerdefinierten Animationen zu erstellen, indem Sie den Animationsgenerator in der Symbolleiste auswählen.

Größe ändern und jedes Element neu positionieren

Die Größenänderung und Neupositionierung jedes Elements ist mit Yellow Pencil sehr einfach.

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

Gelber Bleistift Größe ändern

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

Gelber Bleistift-Drachen-Tropfen

Der Nachteil dieser Drag-and-Drop-Funktion besteht darin, dass sie Probleme bei der Anzeige 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

Preise für den gelben Bleistift

Das WordPress-Plugin Yellow Pencil ist bei CodeCanyon für 26 US-Dollar erhältlich. Dies beinhaltet einen 6-monatigen Support, aber Sie haben die Möglichkeit, zusätzliche 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 Werkzeug, 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. Um optimale Ergebnisse zu erzielen, stellen Sie sicher, dass Sie eine klare Vorstellung davon haben, wie Ihre Website aussehen soll.

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

Verwandter Beitrag

So duplizieren Sie Fotos und Videos auf iPhone und iPad

So beheben Sie eine ungenaue Apple Watch-Schrittverfolgung

So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)

macOS: So verwenden Sie Schnellaktionen im Finder

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

MARKIERTE: Bleistift, gelbem, Ihr, mit, optimieren, Sie, WordPressThemeDesign
ThemeLocal November 18, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel Verwenden Sie Push-Benachrichtigungen, um wiederholten Datenverkehr aufzubauen
Nächster Artikel Verbessern Sie WordPress-Medien-Uploads mit Uploadcare
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Oppo Find X6 Pro vs. Samsung Galaxy S23 Ultra: Alle wichtigen Unterschiede
Gegen
App Store funktioniert nicht? So beheben Sie häufige Probleme im App Store (2023)
Wie man
Oppo Find X6 Pro vs. Oppo Find X5 Pro: Was ist neu?
Gegen
So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)
Wie man
https://blog.hootsuite.com/instagram-caption-generator/
Strategie
Bewertung: Der 5C NFC YubiKey von Yubico funktioniert gut mit Apples Sicherheitsschlüsselfunktion
Technische Bewertungen

También podría gustarte

Wie man

So duplizieren Sie Fotos und Videos auf iPhone und iPad

vor 1 Minute 2 Minuten Mindestlesezeit
Wie man

So beheben Sie eine ungenaue Apple Watch-Schrittverfolgung

vor 21 Minuten 6 Minuten Mindestlesezeit
Wie man

So fügen Sie Siri-Vorschläge zum Startbildschirm auf dem iPhone hinzu (2023)

vor 5 Stunden 4 Minuten Mindestlesezeit
Wie man

macOS: So verwenden Sie Schnellaktionen im Finder

vor 9 Stunden 3 Minuten Mindestlesezeit
Wie man

Verwenden Sie Haptic Touch, um schnelle Aktionen auf dem iPhone auszuführen (2023)

vor 9 Stunden 4 Minuten Mindestlesezeit
Wie man

iOS 16.4 Beta: So aktivieren Sie die Sprachisolation für Mobiltelefonanrufe

vor 13 Stunden 3 Minuten Mindestlesezeit
Wie man

So erstellen Sie ein GIF in Photoshop

vor 17 Stunden 3 Minuten Mindestlesezeit
Gegen

Vollformat vs. APS-C: Welchen Kamerasensor sollten Sie wählen?

vor 17 Stunden 3 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?