In 12 Schritten die eigene Website erstellen – Teil 3: Inhalt einfügen

von 15. August 2017Website, WordPress

Du willst deine eigene Website erstellen, weißt allerdings nicht wie? Kein Problem! In dieser Projektreihe schauen wir uns alle wichtigen Punkte an.
Im dritten Teil geht es um den Inhalt deiner Website. Außerdem installieren wir Plugins, um die Funktionen deiner Website zu erweitern.

In den bisherigen Beiträgen dieser Artikelserie haben wir uns Ziele für unsere eigene Website gesetzt, eine Domain und ein Hosting Paket ausgewählt, WordPress installiert und die Software kennen gelernt, sowie wichtige Grundeinstellungen vorgenommen.

Heute geht es nun endlich darum, dass wir deiner Website ein wenig Leben einhauchen und Inhalt hinzufügen.

Deine Website mit Inhalt füllen

Dafür zeigen ich dir, wie du simple Seiten anlegst und einen einfachen Blog erstellst. Außerdem zeige ich dir, wie du die Funktionen von WordPress mit Hilfe von Plugins erweitern kannst.
Zum Schluss erstellen wir noch ein Menü, damit sich der Besucher deiner Website auch zurecht findet.

Dabei soll dir diese Anleitung einen groben Überblick geben und dich in die wichtigsten Funktionen von WordPress einweisen. Auch soll sie dich ein wenig zum selbst ausprobieren anregen, denn “learning by doing” ist immer noch einer der besten Möglichkeiten, Neues kennen zu lernen 😉
Auf Einzelheiten, wie das Design oder andere Details, werden wir in den kommenden Wochen noch ausführlicher eingehen.

Hinweis: Für diese Artikelserie nutze ich das WordPress Theme “Twenty Seventeen”, welches kostenlos bei jeder WordPress Installation mitgeliefert wird. Solltest du ein anderes Theme nutzen, können einige Bereiche eventuell ein wenig anders aussehen.
Trotzdem sollte es kein Problem für dich sein, dieser Anleitung zu folgen. Die grundsätzlichen Funktionen und Arbeitsschritte bleiben dieselben.

Welchen Inhalt braucht meine Website?

Das lässt sich natürlich nicht pauschal beantworten. Es kommt immer darauf an, für was deine Website gedacht ist und wen du damit ansprechen willst.

Grundsätzlich empfehle ich für deine professionelle Website jedoch folgendes:

  • Persönlichkeit: Über mich / über uns Seite. Zeige ein Gesicht hinter der Website
  • Kontaktmöglichkeit: Direkte Kontaktmöglichkeit über Kontaktformular, Telefonnummer, Instant Messenger, Karte und Adresse oder anderem. Websites ohne Ansprechpartner oder leichtes finden eines Kontaktes sind super nervig – du hast bestimmt auch schon einmal vergeblich versucht den Support von einem Produkt zu erreichen oder eine Frage zu einer Pauschalreise zu stellen
  • Frei zugänglicher Content: In Form von Blog, eBooks oder ähnlichem

Auch benötigt deine Website gewisse Seiten, die vom Gesetzgeber vorgegeben sind. Das ist zum Beispiel das Impressum oder eine Seite mit Datenschutzhinweisen. Doch dazu nächstes mal ein wenig mehr. Dieser Beitrag erschien zuerst auf osirius.de.

6 – Simple Seiten erstellen

Als erstes zeige ich dir, wie du eine neue Seite anlegen kannst. Das kann zum Beispiel eine “Über mich Seite” Seite, eine “Kontaktseite” oder auch das Impressum sein.
Ganz interessant dazu ist auch zu wissen, was ist eigentlich eine Webseite und wieso ist es nicht das selbe, wie eine Website?

Neue Seite erstellen

Bestimmt hast du es schon entdeckt. Um eine neue Seite anzulegen, klickst du im Menü auf SeitenErstellen.
Alternativ dazu kannst du auch direkt auf Seiten und anschließend auf den oberen Button Erstellen klicken. So hast du auch gleich kennen gelernt, wie du später eine Übersicht von all deinen Seiten aufrufen kannst. Im Menüpunkt Seiten hast du die Möglichkeit, bereits vorhandene Seiten zu bearbeiten oder zu löschen.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Nachdem du auf Erstellen geklickt hast, öffnet sich die Eingabemaske für die neue Seite. Hier kannst du alles hinzufügen und einstellen, was später auf deiner Seite auftauchen soll.

Titel der Seite

Als erstes ist es wichtig, der Seite einen (eindeutigen) Namen zu geben. Irgendwie musst du die Seite ja wiederfinden und verlinken können.

Dafür siehst du oben das Feld, welches mit „Titel hier eingeben” beschriftet ist. Und wie könnte es auch nicht anders sein, hier schreibst du ganz einfach den Titel (also den Namen) deiner Seite rein.

Bist du damit fertig, hast du zwei Möglichkeiten.
Zum einen kannst du mit deiner Maus ganz einfach in ein anderes Feld oder auf eine freie Fläche klicken.
Oder aber du drückst die Enter Taste auf deiner Tastatur.

In beiden Fällen wirst du merken, dass unter dem Titel Feld nun der Permalink für diese Seite erscheint. Wie beim letzten Mal beschrieben, wird dieser automatisch von WordPress generiert. Du musst also in der Regel nichts weiter machen.

Solltest du die zweite Variante (mit der Enter Taste) gewählt haben, hast du sicherlich festgestellt, dass noch ein wenig mehr passiert. WordPress speichert nämlich den aktuellen Stand deiner Bearbeitung als Entwurf. So geht nichts verloren.
Das Thema Speichern schauen wir uns gleich nochmal an.

Inhalt auf der Seite einfügen

Nun kommt der wohl wichtigste Part, wir fügen den Inhalt zu der Seite hinzu. Das können ein normaler Text, aber natürlich auch Bilder oder Videos sein.
Fangen wir mit einfachem Text an.

Wie so oft hast du dafür mehrere Möglichkeiten. Zum einen den visuellen Editor und zum anderen den Text Editor.

Der visuelle Editor ist ein sogenannter WYSIWYG-Editor, was “What You See Is What You Get” bedeutet. Dieser Funktioniert im Grunde recht ähnlich wie jedes Textverarbeitungsprogramm (Zum Beispiel Microsoft Word oder Apple Pages). Das, was du siehst (also was du formatierst), erscheint auch so auf der veröffentlichten Seite.

Der Text Editor dagegen benötigt Wissen über HTML. Denn um hier einen Text einfügen und formatieren zu können, musst du diesen mit Hilfe von HTML Codes bearbeiten.
Deshalb empfehle ich dir, sofern du dich nicht mit HTML auskennst, den visuellen Editor zu verwenden.

Einen Text mit dem visuellen Editor bearbeiten

Wie schon geschrieben funktioniert der visuelle Editor recht ähnlich zu den bekannten Textverarbeitungsprogrammen. Bevorzugst du diese bekannte Möglichkeit um deinen Text zu formatieren, klickst du auf der rechten Seite, über dem großen Feld, auf Visuell.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Anschließend kannst du wie gewohnt deinen Text in das große Feld eintragen und diesen mit Hilfe der darüber liegenden Werkzeugleiste formatieren. Markiere einfach den zu formatierenden Text und klicke anschließend auf einer der Symbole. Schon ist der Text bearbeitet, du brauchst nichts weiter tun (außer speichern natürlich 😉 ). Wie du siehst, ist kein Programmieren notwendig.
Da der visuelle Editor relativ selbsterklärend ist, gehe ich jetzt nicht näher darauf ein.

Trotzdem noch als Tipp: Fährst du mit deiner Maus über die einzelnen Symbole in der Werkzeugleiste, wird dir ein kleiner Hinweis angezeigt, welche Funktion jeweils dahinter steckt.

Der Text Editor für HTML Codes

Solltest du dagegen den Text lieber im HTML Format formatieren wollen, wählst du einfach Text aus.
Nun kannst du wie beim visuellen Editor, deinen Text in das Feld eingeben. Doch hast du nciht die Möglichkeit direkt zu sehen, wie der fertige Text eigentlich aussieht.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Dies musst du nun mit Hilfe von HTML tun. Doch auch hier macht es dir WordPress einfach. Denn wie beim visuellen Editor bekommst du ebenfalls eine Werkzeugleiste mit den wichtigsten Befehlen angezeigt. Text markieren, Button drücken und der HTML Befehl ist automatisch eingefügt.

Da das Thema HTML sehr umfangreich ist und sich nicht mit wenigen Worten komplett erklären lässt, werde ich darüber nochmals ausführlich schreiben.
Willst du jedoch schon jetzt ein wenig mehr darüber wissen, kann ich dir diesen kostenlosen Online-Kurs von Codecademy empfehlen.

Bilder und andere Medien hinzufügen

Natürlich ist ein reiner Text meist langweilig. Darum willst du bestimmt auch Bilder, Videos oder andere Medien mit auf deiner Website einbinden.

WordPress macht es dir auch hier mega einfach. Dafür haben sie extra einen Button und ein einfach funktionierendes System erstellt, welches die kompliziertesten Dinge automatisch für dich erledigt.
Den entsprechenden Button findest du links über dem Editor – ganz einfach auf Dateien hinzufügen klicken.

Dateien aus der Mediathek auswählen

Anschließend öffnet sich ein Fenster mit weiteren Funktionen. So kannst du zum einen aus bestehenden Bildern oder Medien, also Dateien die du schon früher hochgeladen hast, auswählen oder aber neue Dateien hochladen.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Um eine bereits hochgeladene Datei auszuwählen, klickst du oben auf Mediathek.
Nun siehst du alle Bilder, Videos und sonstige Medien, die du bereits hochgeladen hast. Wähle einfach die gewünschte Datei aus und anschließend auf der rechten Seite noch die Bildgröße. Danach noch den Button In die Seite einfügen klicken und schon ist die Datei auf deiner neuen Seite eingefügt.

Dir wird aufgefallen sein, dass du in diesem Fenster noch viele weitere Möglichkeiten hast. Um diese Anleitung möglichst simpel zu halten, schauen wir uns die weiteren Funktionen jedoch in einem separaten Beitrag an.

Eine neue Datei zu deiner WordPress Mediathek hinzufügen

Solltest du eine neue Datei hochladen, gehst du ähnlich wie gerade eben vor. Als erstes klickst du wieder den Button Dateien hinzufügen, damit sich das Fenster mit deiner Mediathek öffnet.
Nun wählst du oben allerdings Dateien hochladen und anschließend den großen Button in der Mitte Dateien auswählen aus.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Es wird sich ein Fenster öffnen, über welches du die Datei auf deinem Rechner suchen kannst. Hast du die gewünschte Datei gefunden, ausgewählt und bestätigt, wird diese automatisch hochgeladen und deiner Mediathek hinzugefügt.
Im nächsten Schritt gehst du einfach wie gerade eben, beim Punkt Dateien aus der Mediathek auswählen, vor und schon ist dein neu hochgeladenes Bild auf der Seite zu sehen.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Eine neue Seite speichern und veröffentlichen

Als letzten Schritt musst du die Seite nur noch veröffentlichen. Ansonsten kann ja keiner sehen, was du tolles schreibst. Doch auch das ist super einfach und es bedarf nur eines einzigen Klicks.

Wahrscheinlich wirst du es auch schon gesehen haben. Alles, was du tun musst, ist auf der rechten Seite den blauen Button Veröffentlichen zu klicken. Und schon ist deine neue Seite unter dem entsprechenden Link von jedem aufzurufen. So einfach kann das sein!

Doch willst du natürlich nicht immer deine neue Seite gleich veröffentlichen. Vielleicht fehlt dir ja noch ein wenig vom Inhalt der Seite oder du bist auf der Suche nach kostenlosen Bildern, um die Seite ansprechender aussehen zu lassen.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Dafür hat WordPress die Speichern Funktion eingebaut. Wie schon beim Titel kurz angesprochen, kannst du den aktuellen Stand deiner Seite speichern und jederzeit über SeitenAlle Seiten aufrufen. So kannst du auch immer Phasenweise an der Seite arbeiten, bis diese dann schließlich den ganzen Inhalt hat und du die Seite veröffentlichst.
Auch empfehle ich dir, während der Bearbeitung immer mal wieder auf Speichern zu klicken. So kann nichts verloren gehen und deine Arbeit war nicht umsonst.

Desweiteren hast du mit einem Klick auf Vorschau die Möglichkeit, deine neue Seite live anzusehen. Auch wenn du den Inhalt mit Hilfe des visuellen Editors bearbeitest, macht es trotzdem immer wieder Sinn, sich das Ergebnis einmal live anzuschauen. Denn so bekommst du ein besseres Gefühl dafür, was der Besucher deiner Website später sieht.

osirius WordPress Webdesign WordPress In 12 Schritten die eigene Website erstellen - Teil 3: Inhalt einfügen

Es ist geschafft, deine erste eigene Webseite ist mit Inhalt gefüllt und veröffentlicht. Glückwunsch!
Doch ist es mit einer einzigen Seite meist nicht ge