[Extra] Modul 2 – Ein paar hilfreiche Tipps zum Design

Das Blog ist eingerichtet, die ersten Beiträge eingerichtet, das Blog selbst vielleicht nicht mehr ganz ein Fremdkörper. Natürlich wäre es schön, wenn es eine persönliche Note bekäme.

Die Blogs werden in der Regel mit einem Einheitsdesign ausgeliefert, dem sogenannten Theme. Das lässt sich anpassen oder durch ein neues Theme ersetzen.

Bevor Sie Ihr Blog anpassen, schauen Sie sich einfach verschiedene Blogs an. Holen Sie sich ein paar Anregungen. Dazu können Sie die Liste bei „Plan3t.info“ einfach mal durchklicken und schauen, welche Designs Ihnen gefallen. Was gefällt Ihnen, was nicht?

  • Kopfbereich – Bild oder Text, großer Kopf oder ganz schmal?
  • Navigation – rechts und/oder link oder nur im Fußbereich?
  • Elemente in der Navigation (Letzte Beiträge, letzte Kommentare, Autoren, Suche etc.)
  • Farbgebung
  • Gestaltung des Blogverlaufs (z.B. Teaser, Volltextbeitrag, Beitragsbild in einer Kachel)
  • Seiten
  • Bebilderung der Beiträge

Notieren Sie sich ruhig, was Sie sich für Ihr Blog vorstellen können oder speichern Sie sich Screenshots.

Was Sie für das weitere Vorgehen brauchen könnten ist ein einfaches Bildprogramm. Wer nicht gerade eine*n Grafiker*in griffbereit hat, kann selbst kreativ werden. Für mich hat sich als einfaches, aber doch sehr effektives kostenloses Tool Paint.net erwiesen. Paint und Powerpoint reichen oft aber auch.

Farben werden in einem sogenannten Hexadezimal-Farbcode dargestellt, beginnend mit einer Raute und einer Ziffern-Buchstabenkombination. Die Farbwerte werden von #000000 (schwarz) bis #ffffff (weiß) berechnet. Das Grünblau hier im Blog hat den Farbwert #0c80a1. Wer nicht einfach ausprobieren möchte, kann mit der HTML-Farbwähler sich seiner Lieblingsfarbe annähern. Schreiben Sie sich die ausgewählten Farbcodes auf und kennzeichnen Sie diese auch mit hell und dunkel.

Unter Design > Themes finden Sie neue Designs. Ganz oben steht Ihr eigenes, gerade verwendetes Design. Darunter finden Sie empfohlene Designs. Gefällt Ihnen kein Theme, können Sie unter den empfohlenen Designs auf den Button „Alle Themes anzeigen“ klicken. Danach öffnet sich ein Suchfeld. An dessen Ende wählen Sie am besten „Free“ aus.

Unter dem Suchfeld können Sie die Themes auch nach unterschiedlichen Kategorien weiter einschränken. Wollen Sie eine Seitenleiste oder soll das Theme eher blau sein usw. Die Ergebnisliste wird nach jedem gesetzten Filter automatisch angepasst.

Wenn Sie bei einem der Designs auf die drei Punkte unter dem Vorschaubild klicken, können Sie eine Live-Demo aktivieren und sich ansehen, wie das Design mit Ihren Inhalten aussehen könnte. Es öffnet sich ein Vorschaufenster. Rechts oben vor dem magentafarbenen Button „Aktivieren“ gibt es einen hellgrauen Button „Ausprobieren und Anpassen“.

Es öffnet sich eine zweigeteilte Ansicht. Links ist das Menü mit den Anpassungsoptionen und rechts die Vorschau, die bei jeder Änderung aktualisiert wird. Nehmen Sie sich Zeit für die Anpassung.

Jedes Theme ist anders und bietet damit andere Anpassungsmöglichkeiten. In der nachfolgenden Auflistung gehe ich auf die gängisten Optionen ein.

Anpassungsmöglichkeiten Blog (Anpassen, Customizer)

Unter dem Punkt Website-Identität bestimmen Sie z. B. Angaben wie:

  • Logo der Webseite
  • Website-Titel
  • Untertitel
  • Wahl Untertitel (nicht) anzuzeigen
  • Website-Icon (Favicon) (kleines quadratisches Symbol, welches im Tab mit angezeigt wird und so den Wiedererkennungswert der Website bei mehreren geöffneten Tabs erhöhen)

Bei Menüs legen Sie ein Standardmenü fest und den Ort der Anzeige des Menüs. Menüpunkte können dabei Seiten des Blogs sein, Kategorien, aber auch externe Links (letztere werden eher im Social-Media-Menü erwartet). Es gibt Themes, die feste Menüs vorgeben, andere verlangen, dass ein Standard-Menü (Primary Menü) festgelegt wird. Der Anzeigeort kann ggf. dann in der Regel durch Auswahl den Menüs und eine Zuweisung eines Anzeigebereiches angepasst werden.

Unter Widgets passt man die Gestaltung der Seitenleiste(n) und / oder des Footers anpassen, z.B. eine Suche einbinden, nochmal das Menü, RSS-Feeds oder ein Anmelde-Widget. Probieren Sie es aus. Wenn es nicht gefällt, können Sie diese auch immer wieder entfernen. Widget suchen, der entsprechenden Seitenleiste bzw. dem Footer zuordnen und das Widget mit „Fertig“ bestätigen.

Die Option Farbe & Hintergründe erlaubt in vielen Themes den Kopf (Header) anzupassen. Hier kann ggf. ein Header-Bild geändert werden bzw. die Headerfarbe (manchmal auch eingene Anpassungsoption). Auch ein Hintergrundbild (manchmal auch eingene Anpassungsoption) oder die Hintergrundfarbe lässt sich hier anpassen und oft auch die Linkfarbe. Einige Themes bieten noch mehr Farboptionen an.

Die Bilder werden in die Mediathek hochgeladen und dann über die Anstellungen angepasst.

An dieser Stelle ist es besonders wichtig, die Änderungen auch immer wieder zu überprüfen, wie sie im Tablet-Modus oder Smartphone-Modus aussieht (links unten).
Anzeigemodus anpassen

  • Ist der Titel der Website gut sichtbar?
  • Wird das Headerbild in der Größe an den kleineren Bildschirm angepasst?
  • Was passiert mit dem Hintergrundbild?
  • Sind Links gut erkennbar?
  • Wie sieht die Gestaltung der Menüs aus und wird alles richtig angezeigt?
  • Gefällt Ihnen die Anzeige auch auf kleineren Bildschirmen?

Unter dem Punkt Startseite-Einstellungen legen Sie fest, ob sie WordPress als reines Blog verwenden wollen = „deine neuesten Beiträge“ oder als Content-Management-System (CMS) mit festen Seiten wie eine Homepage und versehen mit einer Blog-Option = „eine statische Seite“. Bei der zweiten Option wird eine zweite Seite als Blogseite mit den aktuellen Beiträgen festgelegt. Hier für diese Schulung bleiben wir bei „deine neuesten Beiträge“.

Für die Option „Zusätzliches CSS“ sind Kenntnisse der Cascading Style Sheets (CSS) und der Programmierung von WordPress notwendig. Daher werde ich nicht weiter darauf eingehen.

Wenn Ihnen das Ergebnis gefällt gehen Sie auf Aktivieren und Veröffentlichen, ansonsten auf Verwerfen. Sie können dann probieren ob ein anderes Thema besser passt.