WordPress Design – individuelle Anpassung | Tutorial Teil 6

Aktualisiert: 2019-07-14 (Veröffentlicht: von )

Webseiten wirken schon allein durch ihre Optik auf ihre Besucher. In Teil 6 meines Tutorials geht es daher um das WordPress Design, wie du Widgets einbaust sowie Menüs erstellst.

Teil 6

Tutorial Teil 6 – WordPress Design

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

  • Design
  • Customizer.

Im sich nun öffnenden Fenster siehst du 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. Naturgemäß sind die Gestaltungsmöglichkeiten bei kostenlosen Themes recht eingeschränkt. Deshalb erkläre ich im folgenden die einzelnen Schritte am Beispiel eines Premium Themes.

Zwar kann die Reihenfolge und Differenzierung der einzelnen Menüpunkte auch bei Premium Themes von meinem Beispiel (s. Abb. 25). 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 du unter Webseiten-Informationen den Titel deiner Webseite und einen Untertitel eingetragen hast, kannst du noch dein Logo einfügen. Wenn diese Angaben im Frontend, also für Besucher deiner Webseite, nicht sichtbar sein sollen, setzt du einen Haken bei verbergen.

Anschließend lädst du ein Website-Icon mit deinem Logo hoch. Es sollte die Maße 512 x 512 px haben. Dieses Icon erscheint dann neben dem Webseiten-Namen im Browser-Tab. Falls ein Besucher deiner Seite diese zu seinen Favoriten hinzufügt, 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) Webseiten, welche heute eigentlich Standard sein sollten. Der Breakpoint bestimmt ab welcher Pixel-Breite deine Webseite von der Desktop- zur mobilen Ansicht wechselt.

Des weiteren findest du hier auch die Option anzugeben, welche allgemeinen Informationen Webseiten-ü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, entfernst du den entsprechenden Haken oder fügst einen hinzu. Darüber hinaus trägst du 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 deine Webseite individuell ist und dich und deine Inhalte / Produkte 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. Zwar könntest du auch für eine oder alle Überschriften deine Primär- oder Sekundärfarbe wählen, aber treibe es nicht zu bunt. Das sorgt für unnötige Verwirrung. Auf jeden Fall sollten Buttons und Links deutlich hervorgehoben sein.

Am besten gehst du alle Unterpunkte des WordPress Design Farbmenüs (s. Abb. 26) 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, 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 (Font) 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. Um dies zu umgehen, lädst du die Schrift von der Google Fonts Webseite herunter und auf deinen Server hoch. Anschließend bindest du sie in deine Webseite ein. Falls du das nicht möchtest oder kannst, musst du auf die Verwendung dieser Fonts auf jeden Fall in deiner Datenschutzerklärung hinweisen. Wenn du einen Font eines anderen Anbieters verwenden möchtest, musst du ihn normalerweise selbst hosten.

Maximal zwei Schriften, eine für den Text und evtl. eine andere für Überschriften reichen aus. Außerdem solltest du „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 px. Die Überschriften sollten deutlich größer sein. Wobei sie von H1 nach H3 etc. immer kleiner werden, aber dennoch größer als die des Texts bleiben sollten.

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. Was jedoch immer unschön aussieht, ist die Kombination ausgefallene / dominate Schrift + groß + fett. Das würde einem harmonischen Gesamteindruck deiner Beiträge schaden.

5 Abbildungen

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 Plugins ab. Die dafür nutzbaren Bereiche bestimmt ebenfalls dein 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 du das Widget-Fenster geöffnet hast, siehst du links alle nutzbaren Widgets und rechts die Bereiche deiner Webseite, in denen du sie verwenden kannst (s. Abb. 27). 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 du dich für eines entschieden hast, klickst du auf das Widget und setzt den Haken bei dem Bereich, in dem du es plazieren möchtest. Danach klickst du 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 kannst du bei allen selbst bestimmen.

Abschließend kannst du 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 – Menüs

Um deine Menüs zu gestalten, rufst du Design > Menüs auf und öffnest das Bearbeitungsfenster (s. Abb. 28). Entweder wählst du im Auswahlfenster der Kopfleiste ein schon existierendes Menü aus. Oder du erstellst ein neues, dem du einen Namen gibst 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

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

Wenn du einen individuellen Link benutzen möchtest, klickst du auf den Listenpunkt, gibst in das obere Feld die URL und in das untere einen Namen 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 den Link und benennst den Menüpunkt neu. Später öffnet ein Klick darauf nur das Untermenü.

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 einer anderen etwas nach rechts. Diesen Vorgang wiederholst du mit weiteren Karten, bis alles passt. Bevor du das Menü speicherst, gibst du an, wo das Menü auf deiner Webseite erscheinen soll: Als primäres, sekundäres und /oder mobiles Navigationsmenü.

Zusätzliches CSS und Theme Editor

Wenn du kleinere Änderungen am WordPress Design vornehmen, z. B. einen zweiten 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 Webseite 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 Webseite (s. Abb. 29). 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, hat das unter Umständen mehr oder weniger gravierende Auswirkungen auf die Funktion der gesamten Webseite.

Grundsätzlich reichen für eine durchschnittliche Webseite die vorhandenen WordPress Design Optionen zur Gestaltung aus. An die Programmierung solltest du dich nur wagen, wenn du einerseits weisst, was du tust. Und andererseits auch weisst, wie du eventuell auftretende Fehler wieder korrigierst.

Weitere Beiträge aus meiner WordPress Tutorial Reihe:

» Login und erste Einstellungen
» Benutzer und Kommentatoren
» Werkzeuge und Vorlage Datenschutz
» Plugins installieren
» WordPress Themes

In Teil 7 meines Tutorials findest du allgemeinen Informationen zu Kommentaren, Seiten und Beiträgen.


Das könnte dich auch interessieren

android apple apps bloggen browser cloud dsl-wlan e-mail foto google internetsicherheit ios macOS meldungen messenger microsoft mobilfunk onlinedienste recht seo social updates windows wordpress


Schreibe einen Kommentar