Über 35 % der Webseiten setzen auf WordPress.org, was es zu einem der ältesten, meist vertrauten und meist genutzten Website-Baukästen macht, die es gibt. Diese größtenteils kostenlose Open-Source-Software ermöglicht es jedem, eine WordPress-Website zu erstellen, egal wie gut man sich mit Programmieren oder Designen auskennt. Doch so anfängerfreundlich es auch ist, sind seine Möglichkeiten vielfältig und flexibel genug, um auch erfahrene Nutzer anzulocken, darunter große Unternehmen wie Disney, MTV und Sony.

Illustration einer Person, die an einem Laptop arbeitet, um eine WordPress-Website zu erstellen
Dieser Guide wird dir alle nötigen Schritte zeigen, um eine komplette WordPress-Website zu erstellen. Design von OrangeCrush

Auch wenn WordPress sich sehr gut für Nicht-Entwickler eignet, erfordert der Einstieg ein wenig Übung. Um es etwas einfacher zu machen, haben wir den folgenden Guide zusammengestellt, in dem wir erklären, wie man eine WordPress-Website erstellt. Und um dich durch jeden Schritt zu begleiten, werden wir unsere eigene WordPress-Website für unser liebstes, total reales Familienunternehmen erstellen: Bluth’s Frozen Banana.

Wie du in 6 Schritten eine WordPress-Website erstellst

  1. Bereite den Inhalt deiner Website vor
  2. Registriere eine Domain und Hosting
  3. Installiere WordPress
  4. Richte deine WordPress-Website ein
  5. Personalisiere dein WordPress-Design
  6. Starte deine fertige WordPress-Website

Schritt 1: Bereite den Inhalt deiner Website vor

Bevor du deine Seite erstellst, beginne mit dem Inhalt deiner Website. Da WordPress ein Content Management System ist, kannst du Inhalte später jederzeit verändern oder hinzufügen. Die meisten deiner Inhalte aber bereits zu Beginn zur Hand zu haben, macht nicht nur das Erstellen der Website einfacher, sondern gibt dir auch eine klarere Vorstellung davon, was deine Website können muss und wie sie aussehen soll.

Skizzenstilbild einer Person, die an einem Computer arbeitet
Bevor du deine Website kreierst, kümmere dich um den Inhalt. Design von Konstantin Kostenko

Zu diesem Zweck ist es hilfreich, eine einfache Sitemap zu erstellen und die Anzahl der Seiten und ihren Zweck aufzuschreiben (ob du eine Homepage benötigst, eine About Page, eine Kontaktseite, einen Shop, einen Blog etc.). Folgende Inhalte solltest du vorbereiten:

  • Logo und Branding (einschließlich Markenfarben und Typografie)
  • Medien (Fotos, Illustrationen, Icons, Videos)
  • Schriftlicher Content
    • Überschriften
    • Zwischenüberschriften
    • CTA und Texte für weitere Buttons
    • Fließtext
Screenshot vom Aufbau des Bluth Banana Standes
Mit Bananen lässt sich immer Geld verdienen. Via Netflix

Für Bluth’s Frozen Banana haben wir bereits ein Logo und Maskottchen, mit dem wir arbeiten können, und wir werden die Pipette aus Photoshop nutzen, um uns das Farbschema für diese Materialien zu holen. In deinem Fall musst du vielleicht dein eigenes Logo erstellen. Für Bilder musst du eventuell einen Fotografen engagieren oder Stockfotos und Icons verwenden.

Schritt 2: Registriere eine Domain und Hosting

Eine Website-Domain ist die einmalige Webadresse, unter der die Leute deine WordPress-Website erreichen können. Diese sollte idealerweise eindeutig sein, zum Beispiel dein Unternehmensname, falls es sich um ein Unternehmen handelt, oder der Vor- und Nachname, falls es sich um eine Person handelt. Wir werden bluthsfrozenbanana.com nehmen

Du wirst zudem Webhosting benötigen, also einen Server, auf dem die Dateien deiner Website gespeichert sind. Viele Hosting-Plattformen bieten auch die Möglichkeit, eine Domain zu registrieren. Achte beim Kauf von Hosting auf Dinge wie Datenlimit und Bandbreite, vor allem aber, ob sie WordPress unterstützen. In diesem Beispiel entscheiden wir uns für Bluehost, da WordPress sie empfiehlt, aber es gibt noch jede Menge andere Optionen.

Home page von bluehost
Klicke auf Get Started, um deinen Bluehost-Account einzurichten. Bild via Bluehost

 

Screenshot bluehost domain registrierung
Wähle eine eindeutige Domain-Adresse für deine Website. Bild via Bluehost

In den meisten Fällen wirst du für deine Domain und Hosting bezahlen müssen. Bluehost bietet beispielsweise eine Domain-Registrierung für 10,86 € und berechnet 6,54 € pro Monat im ersten Jahr (bei jährlicher Zahlung, nicht monatlicher). Sobald du den Get Started-Link auf der Homepage von Bluehost angeklick hast, musst du deine gewählte Domain-Adresse eingeben und wenn sie verfügbar ist, kannst du sie kaufen.

Nachdem du dich für einen Tarif entschieden hast, sollst du ein Passwort erstellen und dich in deinen Account einloggen. Bluehost bietet an, dir zu zeigen, wie du deine WordPress-Seite erstellst, aber wir empfehlen dir, diese Schritte zu überspringen, da die darauf folgenden Templates zusätzlich kosten.

Schritt 3: Installiere WordPress

Wenn du unter My Sites auf Add Site klickst, wirst du aufgefordert, WordPress zu installieren. Solltest du einen anderen Hosting-Service nutzen, musst du dessen Anweisungen folgen, weshalb es wichtig ist, im Voraus sicherzustellen, dass dieser Service sich mit WordPress nutzen lässt.

bluehost’s WordPress Integration
Navigiere zu My Sites > Log in. Bild via bluehost

Sobald WordPress installiert ist, klicke auf den Log in-Button mit dem WordPress-Logo (auch im Tab My Sites). Dies bringt dich zu WordPress.

In WordPress wirst du eine dunkle Sidebar auf der linken Seite sehen und ein Klick auf einen Menüpunkt ändert den Inhalt der Hauptseite auf der rechten Seite. Schauen wir uns kurz die wichtigsten Dinge in dieser Sidebar an.

WordPress’s interface
Interface von WordPress
  • Bluehost (oder ein anderer Hosting-Service): Wenn du hier klickst, kommst du zurück zu deinem Account auf Bluehost. Hier musst du nicht viel tun, außer vielleicht hin und wieder deine Seite veröffentlichen (solange du das nicht machst, ist deine Seite nicht live und die von dir gewählte Domain zeigt lediglich an, dass hier aktuell eine Seite entsteht).
  • Dashboard: Hier kannst du deine Seite managen und anzeigen. Hier findest du einzelne Aktionen, die du durchführen kannst, eine Übersicht deiner aktuellen Seiteninhalte und Empfehlungen für zusätzliche Funktionen.
  • Posts: Hier kannst du Blog-Seiten hinzufügen und managen.
  • Media: Deine Medienbibliothek, wo all deine hochgeladenen Bilder und Videos gespeichert sind.
  • Pages: Hier kannst du die Seiten deiner Website hinzufügen und diese managen.
  • Comments: Moderiere, überprüfe oder reagiere auf Kommentare, falls diese aktiviert sind.
  • Appearance: Hier kannst du das Theme deiner Website bearbeiten.
    • Themes: Hier kannst du nach kostenlosen und kostenpflichtigen Themes suchen.
    • Customize: Ändere den Stil deines gewählten Themes. Viele der anderen Untermenüpunkte können hier bearbeitet werden.
  • Plugins: Hier kannst du deine Website-Plugins managen (Drittanbieter-Software, die deiner Seite zusätzliche Funktionen gibt).
    • Installierte Plugins: Hier kannst du bereits auf deiner Seite installierte Plugins anzeigen, aktivieren, deaktivieren und löschen.
    • Add New: Hier kannst du kostenlose und kostenpflichtige Plugins installieren.
  • Users: Hier kannst du dein Passwort und dein Profil managen und Teammitglieder anzeigen/hinzufügen und festlegen, welche Rechte sie in WordPress haben.
  • Settings: Manage bestimmte Einstellungen für deine WordPress-Seite.

Schritt 4: Setze deine WordPress-Website auf

WordPress bietet zum Start grundlegende Inhalte an, die du dir unter Pages ansehen kannst. Dies kann hilfreich sein, um zu demonstrieren, wie Website-Elemente aufgebaut sind, aber am besten solltest du mit einer leeren Seite beginnen. Wähle unter Pages alle bestehenden Seiten aus, indem du das Häkchen neben ihnen anklickst und gehe dann auf Move to Trash.

Es gibt zwei Wege, um deine Seite aufzusetzen: Erstelle eine Seite von Grund auf neu oder verwende ein Template. Die erste Option würde den Rahmen dieses Artikels sprengen, da hierfür tiefgreifende Programmierkenntnisse erforderlich sind. Wir werden nur kurz darauf eingehen, damit du deine Optionen verstehst.

Eine WordPress-Website von Grund auf erstellen

Wie gesagt, sofern du nicht weißt, wie man eine Website designt und entwickelt, oder keinen WordPress-Designer engagieren möchtest, solltest du diesen Abschnitt überspringen.

Zuerst musst du deine Seiten einrichten und Inhalte hinzufügen. Gehe zu Pages > Add New und du kommst zum WordPress-Editor.

WordPress Seiten editor screenshot
Seiten-Editor für WordPress. Die markierten Tabs lassen dich zwischen Visual und Text (oder Code) deiner Website wechseln.

Es gibt zwei verschiedene Versionen dieses Editors, Visual und Text und du kannst mithilfe der hier gezeigten Tabs zwischen ihnen wechseln. Der Visual-Tab ermöglicht es dir, eine Live-Vorschau der Seite zu bearbeiten. Du kannst Textinhalte in die Arbeitsfläche kopieren und die Toolbar darüber nutzen, um den Stil anzupassen, so wie du es in Word machen würdest. Der Button Add Media über der Toolbar ermöglicht es dir, Videos und Bilder aus deiner Medienbibliothek hinzuzufügen.

Unter Text kannst du mit dem Code arbeiten, auf dem deine Seite basiert. Während der visuelle Editor dir zwar ein paar Tools bietet, um den Stil deiner Website anzupassen, wirst du dennoch ein paar Kenntnisse zu Formatiersprachen und Programmierung benötigen, um eine Website zu erstellen, die besser aussieht und über mehr Funktionen verfügt als ein Word-Dokument. Deshalb raten wir Einsteigern oder jenen, die keine Designer und Programmierer engagieren wollen, davon ab.

Angenommen du entscheidest dich, mit Freelancern zu arbeiten: 99designs kann dich mit ausgewählten WordPress-Designern zusammenbringen, die – zusammen mit den Programmierpartnern von 99designs – deine individuelle WordPress-Website zu einem erschwinglichen Preis designen und entwickeln werden. Lass dich hier kostenlos beraten.

WordPress theme bibliothek
Die Theme-Bibliothek von WordPress lässt dich aus Tausenden vorgefertigten Themes auswählen.
WordPress theme customizer screenshot
Appearance Customize bietet dir begrenzte Optionen zur Bearbeitung deines gewählten Themes. Bild via WordPress

Lass uns nun über WordPress-Themes sprechen. Themes stellen Layout, Farbschema, Schriftart, Button-Form und mehr für die gesamte Seite zur Verfügung – im Grund das Branding. Designer können individuelle WordPress-Themes erstellen, du kannst aber auch aus Tausenden vorgefertigter Themes auswählen, die WordPress anbietet (Anmerkung: In jedem Fall benötigst du für Seitenerstellung und Layout dennoch einen Entwickler).

Nachdem du deinen Inhalt hochgeladen und angeordnet hast, gehe auf Appearance > Themes. Hier siehst du die Themes, die du bereits installiert hast und kannst sie aktivieren, indem du auf den dazugehörigen Button klickst.

Sobald du das Theme aktiviert hast, das dir gefällt, kannst du es bearbeiten, indem du auf Appearance > Customize klickst. Die Sidebar auf der linken Seite bietet dir ein paar Optionen, um alles von Typografie und Farbe bis hin zum grundlegenden Layout der Elemente wie Menüs und Header zu ändern.

Eine WordPress-Website mit einem Template erstellen

Die sehr viel einsteigerfreundlichere Option ist es, mit einem Template zu beginnen und dann deine Seite zu bearbeiten. Dazu benötigst du ein sogenanntes Plugin: Das sind Tools von Drittanbietern, die du installieren kannst, um die Funktionen von WordPress zu erweitern.

Da WordPress kostenlos und Open Source ist (also jeder etwas zum Code beitragen kann), haben viele Entwickler ihre eigenen Integrationen entwickelt, die die Verwendung von WordPress erleichtern oder bestimmte Website-Funktionen ermöglichen. Es lohnt sich, dich über einige verbreitete Plugins zu informieren, die deine Website eventuell benötigt, sobald du mit der Bearbeitung beginnst. Jetzt installieren wir erst mal ein Website Builder Plugin.

Gehe zu Plugins > Add New. In der Suchleiste kannst du einen Begriff wie „Starter Site“ oder „Template“ eingeben. Wir haben uns dazu entschieden, mit dem Website Builder Elementor zu arbeiten, aber du kannst dich auch nach nach anderen Optionen umschauen. Klicke auf Install und gehe zu Plugins > Installed Plugins. Scrolle herunter, um dein neues Builder Plugin zu finden, und klicke dann auf See Library. Dies führt dich zu einer Übersicht kostenloser und kostenpflichtiger Templates, aus denen du auswählen kannst.

WordPress vorlagen-bibliothek
Installiere einen Website Builder, um eine Beginner-Seite zu erstellen. Bild via WordPress
WordPress vorlagen beispiele
Wir haben uns für ein Restaurant-Template entschieden, das dem Zweck unserer Seite entspricht. Bild via WordPress

Hier besteht der Trick darin, darauf zu achten, wie gut das Template zur Menge und Art deines Inhalts passt. Wenn dein Inhalt beispielsweise textlastig ist, solltest du nicht mit einem Template beginnen, das auf viele Bilder ausgelegt ist, wie zum Beispiel ein Portfolio-Template. Du kannst jederzeit so oft du möchtest ein Template testen, die Seiten löschen und von vorn beginnen, um das perfekte zu finden. Für den Bluth Banana Stand haben wir uns für das Template Fresco Italian entschieden, da eine Restaurant-Website dem, was wir machen, am nächsten kommt.

Wenn du soweit bist, wähle das Template aus und klicke auf Import Complete Site. Sobald die Installierung abgeschlossen ist, hast du eine komplette Website, von der aus du loslegen kannst.

Schritt 5: Personalisiere dein WordPress-Design

(Für den restlichen Artikel gehen wir davon aus, dass du deine Seite mit einem Template erstellst.)

Um dein Template zu personalisieren, gehe zu Pages, wähle die Seite, an der du arbeiten möchtest (wir werden an der Homepage arbeiten), und klicke den Button Edit with Elementor, der daraufhin erscheint.

Screenshot WordPress’s editor
Klicke Edit with Elementor im Seiten-Editor von WordPress. Bild via WordPress

Bearbeite das WordPress-Theme

Du siehst ein Sidebar-Menü mit Tools und eine Live-Vorschau deiner Website, die du direkt bearbeiten kannst. Wir werden mit dem Theme beginnen.

Wähle das Hamburger-Symbol in der oberen linken Ecke der Sidebar und klicke auf Site Settings. Unter Theme Style siehst du vier Optionen. Typografie, Buttons, Images und Form Fields. Ein Klick auf diese öffnet die Styling-Optionen des jeweiligen Theme-Elements, entsprechend unserer visuellen Marken-Guidelines. Im Typografie-Bereich zum Beispiel kannst du Schriftart, Größe, Farbe, Dicke etc. für die verschiedenen Überschriftenebenen auf deiner gesamten Seite ändern, statt jedes Textfeld einzeln anpassen zu müssen.

The WordPress editor
Gehe zum Hamburger-Menü in der Sidebar und wähle Site Settings. Bild via WordPress

Lege dein Logo und deine Seitenidentität fest

Gehe zu Site Identity im Abschnitt Site Settings der Sidebar. Hier kannst du den Namen und die Beschreibung deiner Seite festlegen, das Logo durch dein eigenes ersetzen und sogar ein Favicon hinzufügen. Wenn du fertig bist, klicke auf Back in der Sidebar und verlasse Site Settings.

Wie du Seitenbereiche hinzufügst, bearbeitest und löscht

Seiten basieren auf einem Gitter und jeder Bereich gliedert die Seitenelemente (auch Widgets genannt) in einer Reihe unsichtbarer Spalten. Wenn du mit deiner Maus über die Oberseite eines dieser Bereiche fährst, erscheint ein blauer Tab mit drei Symbolen:

WordPress vorlagen editor
Bereiche basieren auf Spalten und Elementen. Der blaue Tab an der Oberseite ermöglicht es dir, die Anordnung und den Stil des gesamten Bereichs zu bearbeiten. Bilder via WordPress und Netflix
  • Das Pluszeichen ermöglicht es dir, einen Bereich über dem derzeitigen hinzuzufügen. Dazu wirst du aufgefordert, die Anzahl der Spalten auszuwählen. Du kannst Widgets aus der Sidebar in den neuen Bereich ziehen.
  • Die Punkte zeigen die Eigenschaften des gesamten Bereichs in der Sidebar.
    • Der Tab Layout ermöglicht es dir, die Laufweite und Ausrichtung aller Elemente in diesem Bereich zu ändern.
    • Im Tab Style kannst du das Hintergrundbild und andere Dinge des Themes für diesen Bereich ändern.
  • Das x löscht den Bereich.

Wie du Texte und Medien hinzufügst

Wenn du mit der Maus in der Live-Vorschau über Elemente fährst, werden Boxen erscheinen, die dich wissen lassen, dass du sie bearbeiten kannst. Wenn du diese Elemente anklickst, kannst du sie innerhalb ihres Bereichs im Gitter verschieben.

Wählst du ein Element aus, werden auch seine Eigenschaften in der Sidebar angezeigt, wo du den Inhalt ändern kannst. Jedes Widget hat seine eigenen Eigenschaften, die in den Tabs Content und Style unterteilt werden. Mit einem Rechtsklick kannst du Elemente löschen.

WordPress template editor
Ein Bild auf der rechten Seite auszuwählen ermöglicht es dir, es in der Sidebar links zu ändern. Bilder via WordPress and Netflix
WordPress media library window
In der Medienbibliothek kannst du deine Bilder und Videos hinzufügen und verwalten. Bilder via WordPress und Netflix

Um Bilder zu bearbeiten, wähle das Bild aus, das du ändern möchtest. Klicke in der Sidebar auf Choose Image. Dadurch erscheint die Dialogbox Insert Media. Wähle den Tab Upload Files und ziehe dein gewünschtes Bild dorthin. Dies fügt das Bild deiner Medienbibliothek hinzu und sobald es hochgeladen ist, siehst ein Häkchen daneben. Auf der rechten Seite der Dialogbox kannst du das Bild beschneiden und Alt-Text, Untertitel sowie Beschreibung bearbeiten. Wenn du fertig bist, klicke auf Insert Media auf der rechten Seite.

Dies sind im Wesentlichen die Grundlagen, die du kennen musst, um mit dem Inhalt aller Seiten arbeiten zu können. Vergiss nicht, hin und wieder deinen Fortschritt zu speichern, indem du Update im unteren Teil der Sidebar anklickst. Wenn du eine vollständige Vorschau deiner Website sehen möchtest, gehe zurück zum Adminbereich von WordPress, um zu deinem Dashboard zu gelangen, und wähle View your site.

Schritt 6: Veröffentliche deine fertige WordPress-Website

Screenshot WordPress admin-bereich
Klicke einfach auf Launch your site, um deine Website zu veröffentlichen. Bild via WordPress

Sobald du mit der Bearbeitung deines Inhalts fertig bist und alle zusätzlichen Plugins installiert hast, bist du bereit für den kürzesten und einfachsten Schritt: Veröffentliche deine Website.

Gehe zurück zum Bluehost-Tab und klicke auf Launch your site. (Der Button wird danach zu Restore Coming Soon, für den Fall dass du es dir anders überlegst und deine Seite wieder down nehmen möchtest.) Gib deine Webdomain in der URL ein und du gelangst zu deiner veröffentlichten, fertigen WordPress-Website.

fertige WordPress website
Geschafft: Unsere fertige WordPress-Website. Wir haben die Familie Bluth stolz gemacht. Bilder via Netflix

Deine WordPress-Website ist live

WordPress ist eines der günstigsten und beliebtesten Tools zur Erstellung von Webseiten und wird von Anfängern und großen Unternehmen gleichermaßen genutzt. Doch so nutzerfreundlich es auch ist, es braucht etwas Zeit und Übung, um sich mit WordPress vertraut zu machen. Da du nun die Grundlagen zur Hand hast, wollen wir dich dazu ermutigen, die Flexibilität von WordPress für dich zu nutzen, um weiter umfangreichere Funktionen in deine Website einzubauen.

Du willst ein individuelles Webdesign?
Unsere brillante Designer-Community steckt voller Ideen und Design-Knowhow.