WordPress Design – individuelle Anpassung | Tutorial Teil 6

| , , | von

Aktualisiert am 27-11-2019

WordPress Design
WordPress Design – Customizer (Quelle: WordPress)

Websites wirken schon allein durch ihre Optik auf ihre Besucher. In Teil 6 meines Tutorials geht es daher um das WordPress Design, wie Sie Widgets einbauen sowie Menüs erstellen. + Tutorial zum Download

Inhaltsverzeichnis

Tutorial Teil 6 – WordPress Design

Den Ausgangspunkt für das Layout, also das Aussehen deiner Website bildet Ihr Theme. Einerseits entscheidet es nicht nur über die Struktur der gesamten Website. Sondern auch darüber, welche Anpassungen Sie überhaupt vornehmen können. Dazu gehen Sie in der Seitenleiste des Dashboards auf

  1. Design
  2. Customizer

Im sich nun öffnenden Fenster sehen Sie links ein Menü mit Optionen und rechts Ihre Startseite. Wenn Sie schon ein Menü (s. u.) erstellt haben, können Sie über Ihre Navigation auch einen Beitrag, eine andere Seite oder die Blog-Übersicht anzeigen lassen.

Naturgemäß sind die Gestaltungsmöglichkeiten bei kostenlosen Themes recht eingeschränkt. Deshalb erkläre ich im folgenden die einzelnen Schritte für das WordPress Design am Beispiel eines Premium Themes. Zwar kann die Reihenfolge und Differenzierung der einzelnen Menüpunkte auch bei Premium Themes von meinem Beispiel. abweichen. Das Prinzip ist jedoch in etwa dasselbe.

  • Webseiten-Informationen
  • Layout
  • Farben
  • Typografie
  • Hintergrundbilder
  • Allgemein
  • Menüs
  • Widgets
  • Startseiten-Einstellungen
  • Zusätzliches CSS

Webseiten-Informationen

Nachdem Sie unter Webseiten-Informationen den Titel Ihrer Website und einen Untertitel eingetragen haben, können Sie noch Ihr Logo einfügen. Wenn diese Angaben im Frontend, also für Besucher Ihrer Website, nicht sichtbar sein sollen, setzen Sie einen Haken bei verbergen.

Anschließend laden Sie ein Website-Icon mit Ihrem Logo hoch. Es sollte die Maße 512 x 512 px haben. Dieses Icon erscheint dann neben dem Website-Namen im Browser-Tab. Falls ein Besucher Ihrer Website diese zu seinen Favoriten hinzufügt, ersetzt Ihr Icon den sonst üblichen Platzhalter.

WordPress Design – Layout

In den Layout-Einstellungen passen Sie die Breite und / oder Höhe einzelner Elemente an. Je nach Theme gilt das für den Container, den Header, die Navigation, die Seitenleisten und die Fußzeile. Außerdem haben Sie bei manchen Themes auch die Möglichkeit, eigene Einstellungen für mobile Geräte festzulegen.

Dazu gehört z. B. der Breakpoint für mobil-freundliche (responsive) Websites, welche heute eigentlich Standard sein sollten. Der Breakpoint bestimmt, ab welcher Pixel-Breite Ihre Website von der Desktop- zur mobilen Ansicht wechselt.

Des weiteren finden Sie hier auch die Option anzugeben, welche allgemeinen Informationen Website-übergreifend auf der Blog (Archiv)-Seite sowie unterhalb der Titel von Beiträgen und Seiten erscheinen sollen. Dazu gehören beispielsweise

  • Länge des Auszugs
  • Beitragsdatum / -autor
  • Kategorien und Schlagwörter
  • Kommentarzähler
  • Weiterlesen-Button
  • Beitragsbild.

Wenn Sie mit den Voreinstellungen nicht zufrieden sind, entfernen Sie den entsprechenden Haken oder fügen einen hinzu. Darüber hinaus tragen Sie unter Fußzeile den Wortlaut des Copyright-Hinweises ein.

Farben

Ein nicht zu vernachlässigender Aspekt beim WordPress Design ist die Farbgebung. Denn sie trägt dazu bei, dass Ihre Website individuell ist und Sie und Ihre Inhalte / Produkte repräsentiert. Deshalb sollten Sie sich ein eigenes Farbschema bestehend aus

  • einer Primär- und einer
  • etwas zurückhaltenderen oder komplementären Sekundärfarbe,
  • dezenten Hintergrundfarben sowie
  • eine Graustufe / Schwarz für die Schrift

überlegen. Die Primärfarbe darf ins Auge fallen und bildet den roten (kann auch orange, blau etc. sein) Faden bei Ihrem WordPress Design. Falls Sie sich für einen dunklen Hintergrund entscheiden, müsste die Schrift natürlich sehr hell / weiß sein.

Am besten gehen Sie alle Unterpunkte des WordPress Design Farbmenüs einzeln durch. Auch hier gibt es je nach Theme Unterschiede in der Methode der Farbfestlegung.

Bei einigen Themes ist eine Auswahl an „fertigen“ Farben vorgegeben. Dagegen haben Sie bei anderen die Möglichkeit, für Ihr WordPress Design jede beliebige Farbe mittels Hexadezimal-Code (#…) oder mit einem Farbauswahlwerkzeug festzulegen.

Tipp WordPress Design Zwar könnten Sie auch für eine oder alle Überschriften Ihre Primär- oder Sekundärfarbe wählen, aber treiben Sie es nicht zu bunt. Das sorgt für unnötige Verwirrung. Auf jeden Fall sollten Buttons und Links deutlich hervorgehoben sein.

Typografie – Fonts

Die Schrift trägt ebenfalls zur Abrundung des Gesamtbilds bei. Außerdem gibt mehr oder weniger gut lesbare Schriften. So ermöglicht es das WordPress Design i. d. R., sowohl die Schriftart als auch die Schriftgröße anzupassen. Hinsichtlich der Schriftart (Font) haben Sie die Wahl zwischen den Standard-/Systemfonts wie Arial, Verdana etc., Google Fonts oder Fonts anderer Anbieter.

Der Vorteil der Standardfonts ist, dass sie auf allen Geräten und Browsern funktionieren und nicht erst von einem (externen) Server geladen werden müssen. Andererseits sind sie aber ziemlich langweilig. Deshalb bieten die meisten Theme-Entwickler auch Google Fonts an. Allerdings gibt es dabei Probleme mit dem EU-Datenschutz, da die Fonts von einem externen Server (außerhalb der EU) geladen werden.

Um dies zu umgehen, laden Sie die Schrift von der Google Fonts Webseite herunter und auf „Ihren“ Server hoch. Anschließend binden Sie sie in Ihre Website ein. Wenn Sie für Ihr WordPress Design einen Font eines anderen Anbieters verwenden möchten, müssen Sie ihn normalerweise immer selbst hosten. Bei manchen Themes kann es jedoch Probleme mit der Einbindung in Ihre Website geben. Deshalb sind hierfür Programmier-Kenntnisse unbedingt notwendig.

Falls Ihnen das zu kompliziert oder es technisch nicht möglich ist (Einschränkungen seitens des Hosters), müssen Sie auf die Verwendung von Google Fonts zumindest momentan verzichten, da seit 2020 das EU-US Privacy Shield bis auf weiteres ungültig ist und somit eine datenschutzkonforme EInbindung nicht möglich ist.

Tipp WordPress Design Maximal zwei Schriften, eine für den Text und evtl. eine andere für Überschriften reichen aus. Außerdem sollten Sie „verspielte / verschnörkelte“ Schriftarten, wenn überhaupt, nur sehr dosiert einsetzen. Im Gegensatz zu gedruckten Texten eignen sich auch Serifen-Schriften wie Times nicht besonders für Texte im Web. Als Überschrift sind sie aber noch akzeptabel.

Schriftgrößen

Welche Schriftgröße am besten ist, hängt maßgeblich von der Schriftart ab. Für den Fließtext gilt ein Richtwert von 16 bis 18 px. Die Überschriften sollten deutlich größer sein. Wobei die Überschriften von H1 nach H3 etc. immer kleiner werden, aber dennoch größer als die des Texts bleiben sollten.

Ob Sie alle oder manche Überschriften fett darstellen möchten, ist ebenfalls Font-abhängig. Wenn Ihre Schrift von vorne herein schon relativ breit ist, wirkt eine fette Überschrift oft zu dominant. Sind die einzelnen Buchstaben sehr dünn, kann fett sinnvoll sein.

Tipp WordPress Design Was jedoch immer unschön aussieht, ist die Kombination ausgefallene / dominate Schrift + groß + fett. Das würde einem harmonischen Gesamteindruck Ihrer Beiträge schaden.

WordPress Design – Widgets

Zwar können Sie bei manchen Themes Widgets auch im Customizer einfügen. Bequemer ist es jedoch, wenn Sie über die Seitenleiste des Dashboards gehen. Auch hier hängt die Auswahl an Widgets wiederum von Ihrem Theme und Ihren Plugins ab. Die dafür nutzbaren Bereiche bestimmt ebenfalls Ihr Theme.

Der Begriff Widget setzt sich aus den Worten window (Fenster) und gadget (praktisches Gerät) zusammen und beschreibt eine kleine Anwendung, mit der Sie Zusatzfunktionen auf Ihrer Website in einem Fenster anzeigen lassen können.

Quelle: STRATO

Nachdem Sie das Widget-Fenster geöffnet haben, sehen Sie links alle nutzbaren Widgets und rechts die Bereiche Ihrer Webseite, in denen Sie sie verwenden können. Zu den Standard-Widgets beim WordPress Design gehören

  • Archive – Seiten
  • Kategorien – Schlagwörterwolke
  • Navigationsmenü – Suche
  • HTML – Text
  • Bild – Galerie
  • Audio – Video
  • Neue Beiträge – Neue Kommentare
  • Kalender – RSS – Meta

Wenn Sie sich für eines entschieden haben, klicken Sie auf das Widget und setzen den Haken bei dem Bereich, in dem Sie es platzieren möchten. Danach klicken Sie auf Widget hinzufügen. Nach einem Klick auf das hinzugefügte Widget klappt ein Fenster mit allen Optionen aus. Wobei die Möglichkeiten je nach Art des Widgets variieren. Zumindest den Titel können Sie bei allen selbst bestimmen, wobei bei einigen eine vorgegebene Überschrift erscheint, wenn Sie das Feld leer lassen.

Abschließend können Sie noch die Reihenfolge der Widgets innerhalb eines Bereiches verändern. Außerdem ist es möglich ein Widget aus einem Bereich in einen anderen zu ziehen. Beides funktioniert mittels Drag&Drop.

WordPress Design Anpassung
WordPress Design

WordPress Design – Menüs

Um Ihre Menüs zu gestalten, rufen Sie Design > Menüs auf und öffnen das Bearbeitungsfenster. Entweder wählen Sie im Auswahlfenster der Kopfleiste ein schon existierendes Menü aus. Oder Sie erstellen ein neues, dem Sie einen Namen geben und es anschließend speichern. Links sehen Sie eine aufklappbare Liste mit

  • Seiten
  • Beiträgen
  • Individuelle Links
  • Kategorien
  • Schlagwörtern.

Dahinter verbergen sich alle Seiten, Beiträge etc., die Sie bereits erstellt haben und zum Menü hinzufügen könnten. Kategorien oder Schlagwörter, die Sie zwar erstellt haben, die aber noch keine Beiträge enthalten, werden nicht angezeigt.

Um ein Navigations-Menü zu erstellen, wählen Sie zunächst das gewünschte Menü, z. B. Hauptmenü aus. Dann

  1. öffnen Sie die entsprechende Liste, z. B. Seiten
  2. setzen in das Kästchen vor der gewünschten Seite einen Haken
  3. und klicken auf den Button Zum Menü hinzufügen

Wenn Sie einen individuellen Link benutzen möchten, klicken Sie auf den entsprechenden Listenpunkt, geben in das obere Feld die URL und in das untere einen Namen ein. Anschließend fügen Sie den Menüpunkt hinzu.

Bearbeitung der Menüpunkte

Zur weiteren Bearbeitung klicken Sie auf eine Ihrer „Menü-Karten“. Dort haben Sie du folgende Optionen:

  • Angezeigten Namen ändern
  • Haken bei Link in einem neuen Tab öffnen setzen
  • eine CSS-Klasse, z. B. button, sowie eine
  • Beschreibung hinzufügen und
  • (unten) diesen Menüpunkt Entfernen

Theoretisch ist es auch möglich, „leere“ Menüpunkte zu erstellen, z. B. wenn ein Menüpunkt nur als „Titel“ für ein Untermenü dienen soll. Dann fügen Sie irgendeine Seite zu Ihrem Menü hinzu, löschen anschließend den Link und benennen den Menüpunkt neu. Später öffnet ein Klick darauf nur das Untermenü.

Nach dem Auswählen und Bearbeiten Ihrer Menüpunkte, erscheinen sie in der Reihenfolge, in der Sie sie hinzugefügt haben. Per Drag&Drop bringen Sie die einzelnen Karten nun in die richtige Reihenfolge.

Außerdem haben Sie die Möglichkeit, Untermenüs zu bilden. Dazu ziehen Sie eine Karte unterhalb einer anderen etwas nach rechts. Diesen Vorgang wiederholen Sie mit weiteren Karten, bis alles passt. Bevor Sie das Menü speichern, geben Sie an, wo das Menü auf Ihrer Webseite erscheinen soll: Als primäres, sekundäres und /oder als mobiles Navigationsmenü.

Zusätzliches CSS und Theme Editor

Wenn Sie kleinere Änderungen am WordPress Design vornehmen, z. B. einen zweiten Button in einer anderen Farbe kreieren möchten, können Sie den CSS-Code unter zusätzliches CSS einfügen. Falls der Code nicht korrekt ist, funktioniert der Button einfach nicht. Ihre Website als solche wird davon aber nicht beeinflusst.

Anders sieht es bei Änderungen im Theme Editor aus. Denn hier haben Sie Zugriff auf die Original-Programmierung Ihrer Webseite. Sofern Sie nur einen kurzen neuen Code hinzufügen, kann in i. d. R. nicht allzu viel schief gehen (s. o.).

Wenn Sie jedoch etwas an den vorhandenen Codes ändern, also das WordPress Design maßgeblich verändern, hat das unter Umständen mehr oder weniger gravierende Auswirkungen auf die Funktion der gesamten Website. Darüber hinaus ist zu berücksichtigen, dass Änderungen am Original-Code bei dem nächsten Theme- oder Plugin-Update überschrieben werden.

Deshalb ist für beabsichtigte größere Änderungen am WordPress Design immer die Installation eines Child Themes zu empfehlen.

Grundsätzlich reichen jedoch für eine durchschnittliche Website die vorhandenen WordPress Design Optionen zur Gestaltung aus.

Tipp WordPress Design An die „echte“ Programmierung sollten Sie sich nur wagen, wenn Sie einerseits wissen, was Sie tun. Andererseits sollten Sie auch wissen, wie Sie eventuell auftretende Fehler wieder korrigieren.

Weitere WordPress Tutorials

Teilen WordPress Design

Dieser Beitrag gefällt Ihnen? Kopieren und teilen Sie den Link.


Ähnliche Themen

Farben für Webseiten | Tipps für das richtige Farbkonzept

Farben für Webseiten sollten harmonieren und dich und dein Projekt unverwechselbar machen. So findest du die passende Farbkombination.

Schlecht gemachte Webseiten | Geht es ohne Webdesigner? – 7 Tipps

Hauptsache Homepage reicht nicht. Wie sehen schlecht gemachte Webseiten aus und warum können sie dein Business negativ beeinflussen?

Kürzlich veröffentlicht

Um die Nutzung meiner Website zu optimieren, verwende ich Cookies. Diese werden nur auf Ihrem Gerät gespeichert. Ich erfasse und speichere keine personenbezogenen Daten meiner Website-Besucher.
AKZEPTIEREN
ABLEHNEN
Datenschutz