Die Website gestalten mit CMS

Webdesign

Moderne Content-Management Systeme bieten bereits mit den Boardmitteln effektive und zufriedenstellende Möglichkeiten, die Website optisch ansprechend zu gestalten – kostenlos. Mit dem bekannten und gern genutzten CMS WordPress können Anwender auf zahlreiche vorgefertigte Designs und Funktionen zugreifen. Aber auch andere CMS, wie Drupal, Typo3 oder Joomla ziehen mit den Design-Möglichkeiten einer Website mit WordPress mit. Was ist bei WordPress im Admin-Bereich „Design“ möglich und wie funktioniert das genau? Dazu findet ihr zu jedem Unterbereich im folgenden eine kurze Erläuterung.

WordPress

Der Bereich Design fügt sich im Admin-Bereich (schwarzes Menü) von WordPress auf der linken Menü-Seite ein. Dort sind folgende Unterpunkte wählbar:

  • Themes
  • Customizer
  • Widgets
  • Menüs
  • Header
  • Hintergrund
  • Theme-Editor

Themes

Der Bereich Themes ist der zentrale Bereich zur Auswahl und zum Vergleich verschiedener vorgefertigter Designs. Über den Button „Hinzufügen“ wird der Anwender zur einer komplexen Übersicht geleitet, die eine Auswahl an Design/Themes anzeigt. Die Auswahl kann der Anwender mittels Filter wie Populär, Neueste, Favoriten einschränken. Danach erscheint eine Tabelle mit kleinen Vorschaubildern des Designs.

Jedes Design hat ein einen eigenen Namen (bspw. die bei der WordPress mitgelieferten Designs werden als Twenty Nineteen oder Twenty Thirteen bezeichnet.) Neben den Standardfiltern lassen sich Design nach Funktionen oder Stichwörter filtern. Dazu geht der Webdesigner über das Menü „Nach Funktionen filtern“ oder gibt ein Suchwort im Textfeld „Themes durchsuchen…“ ein; anschließend wird eine Auswahl passender Themes erzeugt. Wird über Funktionen gefiltert, erscheint eine Filterselektion bestehend aus verschiedenen Funktionen wie zum Beispiel „Individuelle Farben“ oder „Beitragsbilder“. Eine Mehrfachauswahl ist möglich die anschließend über „Filter anwenden“ eine selektierte Auswahl der Themes liefert, die genau diese Funktionen beinhalten.

Die kleinen Vorschaubilder enthalten einen Button „Vorschau“ und „Installieren“. Bevor ein Theme also endgültig installiert wird bekommt der Anwender einen ersten Eindruck, wie es aussieht, wenn auf „Vorschau“ klickt. Passt das Design zu den Wünschen des Website-Designers kann das Theme installiert werden. Es sind mehrere Installationen möglich aber nur ein Theme kann „aktiv“ sein.

Customizer

Über den Bereich Customizer werden Einstellungen zum gewählten Theme vorgenommen. WordPress liefert auf der rechten Seite des Bildes eine live Vorschau, die sich nach jeder Änderung, die auf der linken Seite gemacht wird, prompt anpasst. Je nach Theme sind hier Modifikationen möglich für unterschiedliche Komponenten des Designs, unter anderem für:

  • Website-Information
  • Farben
  • Header-Medien
  • Hintergrundbild
  • Menüs
  • Widget
  • Startseiteneinstellungen
  • Header- und Designoptionen
  • Footer Option
  • weitere Optionen die spezifisch für das gewählte Theme angepasst werden können

Widgets

Ein Widget ist ein vorgefertigtes Modul, das auf der Webseite an Positionen wie Header, Seiten- oder Fußleiste eingefügt werden kann. Beispielsweise lässt sich ein Kalender, Textfeld, Menü, Bild, Suche oder Archiv per Drag-&-Drop in den Bereich ziehen, in dem das Widget erscheinen soll. Je nach Theme stehen dem Anwender zahlreiche Widgets zur Verfügung. Des weiteren ist es abhängig vom Theme, welche Positionen auf einer Website genutzt werden können. So ist es nicht immer möglich, eine Fußzeile mit drei Spalten zu nutzen oder einen oberen, mittlere oder unteren Bereich. Bei der Auswahl des Themes ist also hier schon zu achten, das die Anforderungen des Kunden erfüllt werden können.

Menüs

Wie ein Menü aufgebaut ist und funktioniert ist jedem Webdesigner bekannt. Im Bereich Menü kann der User seine Menüs frei strukturieren. Menüpunkte können aus Artikeln, Seiten, Individuellen Links oder Platzhaltern bestehen. Nach ein Menüname vergeben wurde, können Menüpunkte in den Bereich Menüstruktur gewählt werden. Die Struktur lässt sich danach anpassen, so dass Überpunkte und Unterpunkte oder weitere Verschachtelungen individuell erzeugt werden. Ein eigens erstelltes Menü lässt sich dann über die Widget-Funktion auf der Website leicht integrieren.

Header

Der Seitenkopf ist das erste Element, das dem Websitebesucher ins Auge sticht. Header-Medien, wie Bilder, Bildgarlieren oder Videos lassen sich hier einrichten (abhängig vom Theme). Der Seitentitel, Untertitel und ein Logo werden allerdings über die Website-Informationen festgelegt.

Hintergrund

Auch jeweils abhängig vom Theme, können Hintergrundfarbe, Hintergrundbilder oder -videos für die Website definiert werden.

Theme Editor

Mittels Theme-Editor können Programmierer oder erfahrene Anwender den Quell-Code (in PHP) des Themes einsehen und bearbeiten. Die Programmierer einer WordPress Agentur können Einstellungen an der stylesheet.css -Datei mit PHP, JS und HTML vornehmen und so die individuellen Wünsche des Kunden exakt treffen.

(Bildquelle: Pixabay.com – CC0 Public Domain)

Andreas

Website: