WordPress Design – Individuelle Anpassung | Tutorial Teil 6

Tutorial Teil 6 – WordPress Design

Websites wirken schon allein durch ihre Optik auf ihre Besucher. Den Ausgangspunkt für das Layout, also das Aussehen deiner Website bildet dein Theme. Einerseits entscheidet es nicht nur über die Struktur der gesamten Website. Sondern auch darüber, welche Anpassungen du überhaupt vornehmen kannst. Dazu gehst du in der Seitenleiste des Dashboards auf

1. Design
2. Customizer

Im sich nun öffnenden Fenster erscheint links ein Menü mit Optionen und rechts deine Startseite. Wenn du schon ein Menü (s. u.) erstellt hast, kannst du über deine Navigation auch einen Beitrag, eine andere Seite oder die Blog-Übersicht anzeigen lassen.

Gestaltungsoptionen

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 (s. auch GP Customizer).

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

Webseiten-Informationen

Nachdem du unter Webseiten-Informationen den Titel deiner Website und einen Untertitel eingetragen hast, kannst du noch dein Logo einfügen. Wenn diese Angaben im Frontend, also für Besucher deiner Website, nicht sichtbar sein sollen, setzt du einen Haken bei Verbergen.

Anschließend lädst du ein Favicon (Web-Icon) mit deinem 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 deine Website zu seinen Favoriten hinzufügt oder beispielsweise auf seinem Smartphone-Homescreen ablegt, ersetzt dein Icon den sonst üblichen Platzhalter.

WordPress Design – Layout

In den Layout-Einstellungen passt du 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 hast du 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 deine Website von der Desktop- zur mobilen Ansicht wechselt.

Des weiteren findest du 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 du mit den Voreinstellungen nicht zufrieden bist, entferne den entsprechenden Haken oder fügen einen bei einer anderen Option hinzu. Darüber hinaus trägst du unter Fußzeile den Wortlaut des Copyright-Hinweises ein. Bei kostenlosen Themes ist dies jedoch normalerweise nicht möglich.

Farben

Ein nicht zu vernachlässigender Aspekt beim WordPress Design ist die Farbgebung. Denn sie trägt dazu bei, dass deine Website individuell ist und dich und deine Inhalte / Produkte eindeutig repräsentiert. Deshalb solltest du dir 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 deinem WordPress Design. Falls du dich für einen dunklen Hintergrund entscheidest, müsste die Schrift natürlich sehr hell / weiß sein.

Am besten gehst du 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 hast du bei anderen die Möglichkeit, für dein WordPress Design jede beliebige Farbe mittels Hexadezimal-Code (#…) oder mit einem Farbauswahlwerkzeug festzulegen.

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 hast du 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.

Wenn du für dein WordPress Design einen Font eines anderen Anbieters verwenden möchtest, musst du ihn selbst hosten. Dazu lädst du die Schrift von der › Google Fonts Webseite oder der eines anderen Font-Anbieters herunter und auf „deinen“ Server hoch. Anschließend bindest du sie in deine Website ein. Bei manchen Themes kann es jedoch Probleme mit der Einbindung insbesondere von Nicht-Google-Fonts auf deiner Website geben. Deshalb sind hierfür Programmier-Kenntnisse unbedingt zu empfehlen.

Falls dir das zu kompliziert oder es technisch nicht möglich ist (Einschränkungen seitens des Hosters), kannst du es mit einem speziellen Plugin versuchen. Auch hierbei dürfen die Schriften nicht jedes Mal von externen Servern geladen werden! Sicherer wäre es jedoch, wenn das Hosten auf deinem Server nicht funktioniert, auf die Verwendung von Google oder anderen Drittanbieter-Fonts beim WordPress Design zu verzichten. Eine datenschutzkonforme Einbindung von Schriften ist anders nicht möglich.

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, jedoch auch wieder nicht zu groß (etwa größer 40px). Je nach Qualität des Themes kann es passieren, dass das Wörter irgendwo getrennt werden und die restlichen Buchstaben in die Folgezeile rutschen.

Die Überschriften sollten von H1 nach H3 etc. immer kleiner werden, aber dennoch größer als die des Texts bleiben. Ob du alle oder manche Überschriften fett darstellen möchtest, ist ebenfalls Font-abhängig. Wenn deine 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.

WordPress Design – Widgets

Zwar kannst du bei manchen Themes Widgets auch im Customizer einfügen. Bequemer ist es jedoch, wenn du über die Seitenleiste des Dashboards gehst. Auch hier hängt die Auswahl an Widgets wiederum von deinem Theme und deinen Plug-ins ab. Die dafür nutzbaren Bereiche im WordPress Design Bereich bestimmt ebenfalls dein Theme.

Nachdem du das Widget-Fenster geöffnet hast, siehst du eine Liste aller nutzbaren Widget-Bereiche deines Themes. Neben den Standard-Widgets beim WordPress Design

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

kannst du auch (selbst gestaltete) Gutenberg Blöcke einsetzen.

Dazu klickst du auf den Bereich, in den du ein oder mehrere Widget/s einfügen möchtest. Anschließend erscheint ein Feld mit einem Plus-Zeichen. Wenn du darauf klickst, öffnet sich die Übersicht über die dir zur Verfügung stehenden Gutenberg Blöcke. Wähle nun den Block aus, den du verwenden möchtest und passe ihn an deine Bedürfnisse an.

WordPress Design – Menüs

Ein wichtiger Punkt beim WordPress Design sind Menüs. Um deine Menüs zu gestalten, rufst du Design > Menüs auf und öffnest das Bearbeitungsfenster. Bei manchen Themes kannst du jedoch auch das Menü nur noch im Customizer bearbeiten.

Entweder wählst du im Auswahlfenster der Kopfleiste ein schon existierendes Menü aus. Oder du erstellst ein neues, dem du ihm einen Namen gibst (z. B. Footer) und es anschließend speicherst. Links siehst du eine aufklappbare Liste mit

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

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

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

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

Wenn du einen individuellen Link benutzen möchtest, klickst du auf den entsprechenden Listenpunkt, gibst in das obere Feld die vollständige URL und in das untere eine Bezeichnung ein. Anschließend fügst du den Menüpunkt hinzu.

Bearbeitung der Menüpunkte

Zur weiteren Bearbeitung klickst du auf eine deiner „Menü-Karten“. Dort hast 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ügst du irgendeine Seite zu deinem Menü hinzu, löschst anschließend den Link und benennen den Menüpunkt neu. Später öffnet ein Klick darauf nur das Untermenü (s. Hinweis unten).

Nach dem Auswählen und Bearbeiten deiner Menüpunkte, erscheinen sie in der Reihenfolge, in der du sie hinzugefügt hast. Per Drag&Drop bringst du die einzelnen Karten nun in die richtige Reihenfolge.

Außerdem hast du die Möglichkeit, Untermenüs zu bilden. Dazu ziehst du eine Karte unterhalb eine der anderen Karten und versetzt sie etwas nach rechts. Diesen Vorgang wiederholst du mit weiteren Karten, bis alles passt. Bevor du das Menü speicherst, gibst du unterhalb der Menü-Karten noch an, wo das Menü auf deiner Webseite erscheinen soll: Als primäres, sekundäres und /oder als mobiles oder „eigenes“ Navigationsmenü.

Zusätzliches CSS und Theme Editor

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

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

Wenn du jedoch etwas an den vorhandenen Codes änderst, also das WordPress Design maßgeblich modifizierst, 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.

PDF: WP Tutorial Teil 6 mit zusätzlichen Abbildungen (2,1 MB)

WEITERE WORDPRESS-TUTORIALS

• WP Login und Einstellungen
• Benutzer & Kommentatoren
• Werkzeuge – Datenschutz
• Plugins installieren
• Themes & Templates
• Mediathek
• Seiten & Beiträge

© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.