Neugestaltung Ihrer WordPress-Website (um eine persönliche Note hinzuzufügen)

Keine andere Plattform bietet Ihnen die Möglichkeit, das Erscheinungsbild Ihrer Website so anzupassen wie WordPress. Dies ist einer der Gründe, warum WordPress bei Publishern und Webentwicklern gleichermaßen beliebt ist.


Sie können in kürzester Zeit ein einfaches (und eintöniges) WP-Thema erstellen, ein Logo hinzufügen, einige Codezeilen bearbeiten, Ihr CSS ändern und eine professionelle (und dennoch sympathisch aussehende) Website erstellen. Es ist einfach und dieses Tutorial zeigt Ihnen, wie es geht.

Sind Sie bereit? Beginnen wir zuerst mit den ersten Dingen. die Farben.

Entwerfen eines Farbschemas

Bei der Entwicklung eines Farbschemas für Ihre WordPress-Site sind viele Dinge zu beachten. Stellen Sie sich vor, Sie streichen Ihr Haus oder Ihren Laden aus Stein und Mörtel. Sie müssen die Farbe bestimmen, die an Ihren Wänden angebracht wird, und die Farbe, die Sie für Ihre Türen wünschen.

Die Art und Weise, wie Sie Ihre Außen- und Innenräume streichen, hängt von einigen Faktoren ab, die von Ihren persönlichen Vorlieben abhängen.

Das Färben Ihrer WordPress-Site ist auch nicht anders. Welche Farbe möchten Sie Ihre Links? Ihr Hintergrund, wie werden Sie es am attraktivsten machen und den Mund Ihrer Konkurrenten offen lassen? Welche Farben ergänzen (oder stärken) Ihre Botschaft? Wie willst du deinen Text? Der Himmel ist die Grenze für die Auswahl der Farben, die Sie auf Ihrer WP-Site verwenden können.

Sie müssen alle Farben bestimmen, die Sie von Anfang an verwenden werden. Ich würde empfehlen, dass Sie sich nur an drei Farben halten, aber Sie können so viele Farben verwenden, wie Sie möchten.

Übertreiben Sie es einfach nicht, sonst wird Ihre Marketingbotschaft in all dieser Farbe verwässert. Schließlich ist ein Überschuss an allem giftig. Unabhängig von den gewählten Farben ist es wichtig, für Harmonie zu sorgen.

Verwenden Sie am besten die meisten Farben, in denen die meisten Menschen sie sehen (und hoffentlich lieben). Ich spreche von Ihrem Logo und Ihrem Impressum. In diesen Bereichen benötigen Sie genau die meisten Farben. Der Rest Ihrer Website kann weniger farbenfroh, aber informativer sein.

216 Farben versus 12 Farben

Wir alle kennen die zwölf Grundfarben, aber das Web ist voller Farben und ihrer verschiedenen Schattierungen. Aus diesem Grund kann die Auswahl der Farbe, die persönliche Wärme ausstrahlt und gleichzeitig einen professionellen Look schafft, eine herausfordernde Aufgabe sein.

Sie haben jedoch Glück, denn ich habe im ganzen Internet gefischt und die folgenden Tools gefunden, um Ihnen den Einstieg zu erleichtern:

KULER

kuler

Kuler wurde von Adobe entwickelt, um Webentwicklern bei der Erstellung erstklassiger Farbschemata zu helfen. Kuler ist ein Online-Tool, mit dem Sie es überall hin mitnehmen und verwenden können. Es gibt jedoch auch eine Desktop-Anwendung, mit der Sie Farbschemata direkt von Ihrem Desktop aus entwickeln können. Wenn Sie über eine Adobe-ID verfügen, können Sie Ihre Farbschemata mit einem einzigen Klick speichern.

Bei Kuler gibt es verschiedene Farbregeln, darunter Monochromatisch, Zusammengesetzt, Komplementär, Analog und Triade.

Schauen Sie sich Kuler an.

HTML-FARBKARTE

Die Farben zu kennen, die Sie verwenden werden, ist nur die halbe Miete. Um Ihre Farben zu implementieren, müssen Sie sie in HTML-Codes übersetzen.

HTML-Farbkarte

Hier kommt die HTML-Farbkarte ins Spiel. Es handelt sich um eine farbenfrohe Tabelle mit über 200 (tatsächlich 216) Web-Farbcodes. Mit der Karte bewaffnet sollte sich keine Farbe unter der Sonne als schwierig zu implementieren erweisen.

Die Codes funktionieren mit HTML, CSS, Adobe PhotoShop und anderen Grafikbearbeitungswerkzeugen, sodass Sie weltweit die Freiheit haben, mit Ihren Farben so viel zu spielen, wie Sie möchten.

Schauen Sie sich die HTML-Farbkarte an.

GENOPAL

Wenn Sie Hilfe bei der Farbauswahl benötigen, ist GenoPal die gewünschte Anwendung. Es ist eine sehr einfache Webanwendung, die Farbpaletten an Ihr Browserfenster anheftet. Wenn Sie Ihre Farben auswählen, werden sie in Ihrem Browser in Form von farbigen „Haftnotizen“ angezeigt. ��

genopal

Mit GenoPal können Sie die Helligkeit erhöhen und die Farbsättigung steuern, sodass Sie genau den gewünschten Farbton erhalten.

Auf ihrer Website ist eine mobile App in Vorbereitung. Nach dem Start können Sie die App tragen und Farben auf Ihrem Mobilgerät entwickeln. Ihr Design ist genial und die Tatsache, dass diese Anwendung tatsächlich funktioniert, ist ein klares Zeichen dafür, dass GenoPal Geschäft bedeutet.

COLORHEXA

ColorHexa ist die Online-Version von Malerplatte des Künstlers. Auf dieser Website können Sie Farben mischen, indem Sie einfach Farbcodes eingeben. Ihre Vorlauf-App ist das Farbmischwerkzeug, aber sie haben auch einen Verlaufsgenerator und einen Farbsubtrahierer. Ist das nicht ein reines Genie, das hier am Werk ist??

colorhexa

Wie funktioniert der ColorHexa Blender? Sie müssen lediglich Ihre Farbcodes durch ein „+“ getrennt eingeben und ColorHexa erledigt den Rest der Arbeit. Zum Beispiel habe ich versucht:

# ff0000 + # 0000ff + # ff00ff und ich haben # aa00aa. Darüber hinaus erhalten Sie eine ganze Seite mit Farbinformationen (zu Ihrer endgültigen Farbe, z. B. # aa00aa). Dies ist ein Werkzeug, das Sie selbst ausprobieren müssen, um eine Farbmischung wie nie zuvor zu erleben.

Schauen Sie sich ColorHexa an.

ULTIMATIVER CSS GRADIENT GENERATOR

ultimativer Farbverlaufsgenerator

Dies ist wahrscheinlich das beste Werkzeug, um Farbverläufe zu erzeugen. Es ist vollständig online und hilft Ihnen, erfrischende Mittelpunkte und die entsprechenden CSS-Codes zu generieren. Sie bieten auch Chrome- und Firefox-Add-Ons, mit denen Sie die App für einen einfacheren und schnelleren Zugriff in Ihren Browser integrieren können.

Es gibt einen Vorschaubereich, in dem Sie Ihren Verlauf sehen. Sie müssen also nur Ihren Verlauf erzeugen, wie Sie es für richtig halten Kopieren Einfügen der generierte CSS-Code. Es ist wirklich so einfach und sie haben mehr Farben als Sie jemals verwenden werden.

Schauen Sie sich den Ultimate CSS Gradient Generator an.

Schriftarten auswählen

Nachdem ich Ihnen gezeigt habe, wie Sie Farben wie Picasso auswählen und mischen, lassen Sie uns mit den Schriftarten herumspielen.

Ihre Farben und Ihr Webdesign ziehen Menschen an, aber es sind Ihre Worte, d. H. Ihre Seiten und Beiträge, die die Menschen dazu bringen, bei sich zu bleiben.

Wir sind ständig damit beschäftigt, unsere besten Geschichten zu erstellen, daher vergessen die meisten von uns, dass auch die Schriftarten eine Rolle spielen. Die von Ihnen gewählte Schriftart beeinflusst jedoch die Interaktion der Benutzer mit Ihrer Website. Mit den richtigen Schriftarten möchte Ihre Zielgruppe bleiben und schließlich zu Ihren anderen Seiten durchklicken, genau das, was Sie wollen. Engagement.

Es gibt eine Million und eine Schriftart, aber leider sieht ein Benutzer nur die Schriftarten, die auf seinem Computer installiert sind. Wenn die von Ihnen verwendete Schriftart nicht auf ihren Computern installiert ist, wird eine nahe Alternative (oder eine völlig andere Schriftart) angezeigt, die nicht den gewünschten Effekt hat.

„Mit Schriftarten zu spielen ist wie mit Feuer zu spielen. Manchmal kann es eine Übereinstimmung auf einer Webseite entzünden, eine Wunderkerze aus hübschem Text. In anderen Fällen kann es das ganze Haus niederbrennen. “ – Lorelle von cameraontheroad.com.

Sie können Ihre Schriftarten mit Ihrem Stylesheet steuern (und den gewünschten Effekt erzielen). In Ihrem Thema ist das Stylesheet normalerweise das style.css Datei. Mit dieser Datei können Sie die Farbe Ihrer Schriftarten, die Art der Schriftart / Schriftfamilie, die Schriftgröße und andere Aspekte der von Ihnen ausgewählten Schriftart steuern.

Das Folgende ist ein gutes Beispiel:

#menu {Schriftfamilie: Arial, Helvetica, Sans-Serif, Verdana, "Times New Roman"; Schriftgröße: 0.8em; Farbe schwarz;}

Mit dem obigen Code wird die Schriftgröße in Ihrem Menü auf 0,8em und die Farbe auf schwarz eingestellt. Außerdem wird die Schriftart auf Arial gesetzt. Wenn der Benutzer Arial jedoch nicht auf seinem Computer hat, übernimmt Helvetica die Kontrolle. Wenn sie keine Helvetica oder Arial haben, übernehmen Verdana, Sans-Serif oder Times New Roman.

Durch die Steuerung der Schriftarten können Sie ein einheitlicheres Erscheinungsbild erzielen.

Um das Problem der Schriftinkonsistenz ein für alle Mal zu lösen, können Sie eingebettete Schriftarten verwenden. Durch die Verwendung eingebetteter (oder externer) Schriftarten muss der Benutzer die Schriftart nicht auf seinem Computer haben.

Darüber hinaus ist es eine einfache Arbeit.

Alles was Sie tun müssen, ist Ihre zu öffnen style.css und setzen Sie den folgenden Code oben.

@ font-face {Schriftfamilie: Museo300; src: url ("fonts / museo300-regulär.ttf") format: ('truetype'); Schriftgröße: normal;}

HINWEIS: Sie müssen den Namen und den Speicherort Ihrer Schriftart definieren. Im obigen Beispiel ist “Museo300” die Schriftart, die in einem Ordner mit dem Namen “Schriftarten” gespeichert wurde..

Um die Schriftart beispielsweise auf Ihrer Website zu verwenden, können Sie Folgendes schreiben:

body {Schriftfamilie: Museo300;}

Sie können eine eingebettete Schriftart für jedes Element auf Ihrer Website verwenden. Zum Beispiel…

#menu {Schriftfamilie: Museo300;}

… Wird Museo300 in Ihrem Menü einstellen.

Die obige Methode bedeutet, dass Sie die Schriftart herunterladen und auf Ihren Server hochladen müssen, was ziemlich mühsam ist, wenn Sie mich fragen.

jedoch, ySie müssen keine externe Schriftart herunterladen, die Sie verwenden möchten.

Sie können einfach wie folgt auf die Schriftarten in Ihrem Kopfbereich (header.php) verlinken:

Wie und wo fügen Sie die obige Zeile hinzu? Sie müssen Ihre öffnen WordPress Administration Panel -> Darstellung -> Editor -> header.php

Wenn Sie Ihre Datei header.php nicht bearbeiten möchten oder können, importieren Sie einfach die Schriftarten, indem Sie die folgende Zeile in Ihre Datei eingeben style.css::

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

Im obigen Beispiel können Sie die verwenden Über dem Regenbogen Schriftart von Google überall auf Ihrer Website. Wenn Sie beispielsweise Over The Rainbow auf Ihrer Website verwenden möchten, können Sie diesen Code verwenden:

body {Schriftfamilie: "Over The Rainbow";}

Google bietet über 600 kostenlose Schriftfamilien, also spiel weg!

Update (12.07.13): Wenn Sie Ihrer WordPress-Site ganz einfach Google Fonts hinzufügen möchten, können Sie die verwenden Google Typography Plugin. Darüber hinaus erfahren Sie mehr über Google-Schriftarten und deren Implementierung in diesem Abschnitt Verbessern Sie Ihre WordPress-Website-Typografie mit Google-Schriftarten von Tom Ewer.

Weitere Ressourcen zum Spielen mit Schriftarten

WordPress-Plugins zum Hinzufügen von Schriftarten

Und für diejenigen, die sich nicht mit Code beschäftigen möchten, können Sie jederzeit ein WordPress-Plugin installieren, um einige der schweren Aufgaben für Sie zu erledigen. Hier sind einige der beliebtesten kostenlosen Schrift-Plugins von WordPress.com:

Hast du Spaß? Lass uns weitermachen…

 Formatieren von Datum und Uhrzeit

Waren Sie schon auf einer WordPress-Site, auf der Datum und Uhrzeit in einem wirklich schönen Ton angezeigt wurden, sodass Sie sich in Bezug auf Ihre Site wie ein absoluter Neuling fühlten? Die Besitzer dieser Seiten haben gerade mit a gespielt einzelne Codezeile und jetzt können Sie nicht genug von ihren Daten bekommen. Haha.

Gute Nachrichten, die Sie bearbeiten können diese Codezeile und überraschen Sie auch Ihre Leser.

In deinem WP Dashboard, Navigieren Sie zu Aussehen, und dann zu Editor Wie nachfolgend dargestellt:

Formatierungsdatum

Dort können Sie ganz rechts eine Liste Ihrer .php-Dateien sehen:

einzelner Beitrag

Klicken Sie auf einen einzelnen Beitrag (single.php) und öffnen Sie nach dem Öffnen die Suchleiste durch Drücken von Strg + F.. Geben Sie in der angezeigten Suchleiste Folgendes ein:

die Zeit

Sie werden sofort eine Linie erkennen, die ungefähr so ​​aussehen könnte:

Nun ist der Bereich, den Sie bearbeiten möchten, (“F Y”).

Gestatten Sie mir, diesen Abschnitt zu konkretisieren, um Ihnen etwas Fleischigeres zum Beißen zu geben.

Das “F” in (“F Y”) steht für Vollständiger Name des Monats und das “Y” repräsentiert das Jahr in 4 Ziffern. Wenn Sie also (“F Y”) verwenden, sieht Ihr Datum folgendermaßen aus:

September 2013

Wenn Sie ein Komma zwischen F und Y eingeben, sollten Sie Folgendes haben:

September 2013

Wenn Sie den Tag und andere Elemente hinzufügen möchten, können Sie die folgenden Zeichen verwenden:

l = vollständiger Name des Tages (Kleinbuchstabe L)

F = Monat

j = Der Tag des Monats (das Datum)

Y = Jahr in 4 Ziffern

y = Jahr in 2 Ziffern

Weitere Zeichen finden Sie in der folgenden Tabelle:

Datumstabelle formatieren

Und hier einige Beispiele:

Beispiele für Formatierungsdaten

Erinnert sich immer daran, nur die Zeichen in den Klammern (“F Y”) und zu bearbeiten, etwas beachten, Löschen Sie die einfachen Anführungszeichen nicht. Sie können beliebig viele Zeichen verwenden, um den gewünschten Effekt zu erzielen, und denken Sie daran, alles zu speichern, wenn Sie fertig sind.

Darüber hinaus können Sie das Datum entfernen, indem Sie…

… Wie ich es vor kurzem auf meinem Blog getan habe. �� Jetzt bekomme ich nur noch Gepostet von Fred in so und so Kategorie… bla bla. Überhaupt keine Daten.

Bist du für den nächsten Teil vollgetankt? Du solltest besser sein.

Die Funktion_time wurde nicht gefunden?

Das ist in Ordnung, da heutzutage viele Themen die Funktion_date () anstelle der Funktion_time () verwenden, was eigentlich besser ist. Wenn Ihr Thema die Funktion_date () verwendet, müssen Sie keine Änderungen vornehmen, da Sie einfach die Art und Weise ändern können, wie Ihre Daten in Ihrem Dashboard unter “Einstellungen-> Allgemein” angezeigt werden..

Verwenden von Bildern

Dies ist wahrscheinlich der einfachste (und kürzeste) Teil dieses Tutorials. Wenn Sie WordPress noch nicht kennen, kann das Hinzufügen von Bildern eine Herausforderung sein.

Mit WordPress können Sie Bilder über das Upload-Dienstprogramm oder (Schaltfläche Medien hinzufügen) hinzufügen, wenn Sie einen neuen Beitrag oder eine neue Seite erstellen. Alles, was Sie tun müssen, ist, den Cursor dort zu platzieren, wo sich das Bild in Ihrem Beitrag oder Ihrer Seite befinden soll, und dann auf “Medien hinzufügen” zu klicken..

Medien hinzufügen

Sobald das Upload-Dienstprogramm geöffnet ist, können Sie weitere Details wie Beschriftung, Größe, Links und Ausrichtung hinzufügen.

Dienstprogramm zum Hochladen

Dieser Bereich befindet sich auf der rechten Seite des Upload-Dienstprogramms.

Weitere Informationen zum Hinzufügen von Bildern finden Sie in den folgenden Ressourcen:

Und wenn Sie sich nicht sicher sind, wo Sie tolle kostenlose Bilder finden können, lesen Sie den Beitrag, in dem wir die besten Bildressourcen für WordPress geschrieben haben.

Sehen? Ich habe dir gesagt, es wird das kürzeste sein ��

Hinzufügen eines Favicon

Bevor wir Bilder völlig vergessen, lassen Sie uns ein Favicon erstellen und Ihrer WordPress-Site hinzufügen. Ein Favicon (oder ein Favoriten-Symbol) ist das Symbol, mit dem eine Website mit einem Lesezeichen versehen wird.

Ein Favicon hilft Ihren Lesern, Ihre Website visuell zu identifizieren.

Im Allgemeinen ist ein Favicon eine quadratische Grafikdatei mit 16 x 16 Pixel und der Erweiterung .ico. Die Erweiterung steht für Symbol.

So erstellen Sie ein Favicon

Sie können Ihr Favicon online oder mit Bildbearbeitungsprogrammen wie GIMP oder anderen Programmen erstellen, mit denen Sie .ico-Dateien speichern können. Die meisten Online-Dienste sind kostenlos.

Während das Bild normalerweise sehr klein ist (16 x 16 Pixel), sollte das Favicon Ihr Blog in seiner Gesamtheit darstellen. Das Bild oder der Text, mit dem Sie Ihr Favicon erstellen, sollte Ihr Online-Geschäft darstellen.

Wenn Sie einen Bildeditor verwenden:

  • Beschneiden oder fügen Sie entsprechend Platz hinzu, um sicherzustellen, dass Ihr Bild quadratisch ist
  • Ändern Sie die Bildgröße auf 16 x 16 Pixel und
  • Speichern Sie das Bild als favicon.ico

Zu den Onlinediensten, mit denen Sie Favoriten erstellen können, gehören (ohne darauf beschränkt zu sein):

Nachdem Sie Ihr Favicon erstellt haben, können Sie es auf Ihren Computer herunterladen. Machen Sie sich also keine Sorgen.

So installieren Sie Ihr Favicon in WordPress

Wenn sich im Hauptordner Ihres Themas ein anderes Favicon befindet, müssen Sie es mit Ihrem FTP-Client oder einer anderen verfügbaren Methode löschen. FTP-Clients werden empfohlen, da sie einfach zu verwenden sind und Sie schnell die gewünschte Datei finden können.

Für dieses Tutorial habe ich faviconer.com verwendet, um ein Favicon für mein Blog zu erstellen, und Filezilla, um vorhandene Favicons zu löschen.

Laden Sie dieselbe Datei mit der Datei favicon.ico in den Hauptordner Ihres Themas hoch. Dies ist der Ordner, in dem Ihr aktuelles Thema gespeichert ist.

Laden Sie dann eine weitere Kopie Ihres Favicons in den Stammordner (normalerweise public_html) oder in das Hauptverzeichnis hoch, in dem Ihre Site gespeichert ist, damit Sie Ihr Favicon sehen können, wenn Sie Ihre Site.com/favicon.ico eingeben. Dadurch wird Ihr Favicon automatisch zu Ihren Feeds hinzugefügt.

Wenn Sie mit dem Hochladen fertig sind, ist es Zeit, dass Ihr favicon.ico funktioniert. Folgendes sollten Sie tun:

Hinzufügen Ihres Favicon mithilfe eines Plugins

Der beste Weg, um Ihr Favicon hinzuzufügen, ist die Verwendung eines Plugins. Ich würde empfehlen, die “Alles in einem Favicon“Plugin für eine erweiterte Verwendung für einen sehr einfachen Ansatz, den Sie verwenden können”Das einfachste Favicon“Plugin ohne Back-End-Optionen. Sie müssen lediglich eine Datei namens favicon.ico an der richtigen Stelle auf Ihrem Server hochladen.

All-in-One-Favicon

Hinzufügen des Favicons manuell zu Ihrer Vorlage

Einige Benutzer ziehen es möglicherweise vor (auch wenn dies nicht der beste Weg ist), ihre Favoriten manuell zu ihrer Vorlage hinzuzufügen. Führen Sie dazu die folgenden Schritte aus:

  • Melden Sie sich bei Ihrem an Instrumententafel
  • Navigieren Sie zu Aussehen
  • Dann zu Editor (Themeneditor)
  • Finden und öffnen header.php (header) Datei

Fügen Sie diese Zeile Ihrer Header-Datei hinzu (vorzugsweise oben, wo Sie andere sehen Stichworte:

Speichern Sie einmal fertig. 

Aktualisieren Sie Ihren Browser, um Ihre neuen Änderungen anzuzeigen.

Zu diesem Zeitpunkt sollten Sie in der Lage sein, Ihre Farben zu ändern, bessere Schriftarten auszuwählen, Datum und Uhrzeit zu formatieren, Bilder zu verwenden und ein Favicon hinzuzufügen.

Fazit

Es gibt so viel zu besprechen über die Neugestaltung Ihrer WordPress-Site, dass es (für Sie) ein schlechter Dienst wäre, zu versuchen, alles in einem einzigen Beitrag zu behandeln.

Um Ihnen den größtmöglichen Nutzen zu bieten, teilen Sie das Lernprogramm am besten in mehrere Teile auf (dies ist Teil 1). Wir werden in den kommenden Tagen weitere Tricks zur Neugestaltung veröffentlichen. Halten Sie also Ausschau. Der Zweck dieser Tutorials ist es, Ihnen zu helfen, die beste WordPress-Site aller Zeiten zu erstellen und Sie glücklicher zu machen, weil Sie alles selbst gemacht haben.

Wenn Sie Ihre Meinung (en) teilen oder der Diskussion etwas hinzufügen möchten, können Sie Ihren Kommentar im Kommentarbereich unten hinterlassen!

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