von ConstanzeStraub | Feb. 23, 2022 | WordPress, Allgemein, Anleitungen
5 mögliche Menüs und wie sie umgesetzt werden
Außerdem: 5 Fehler, die du beim Aufbau deines Menüs vermeiden solltest
Du möchtest die Besucher sicher durch deine Website führen? Du möchtest ein WordPress Menü erstellen? Dann brauchst du nicht nur eine gute Navigation. Du brauchst mehrere Menüs an verschiedenen Stellen deiner Website. Die schlechte Nachricht: In WordPress ein Menü erstellen kann verwirrend sein. Je nach Theme hast du mehrere Möglichkeiten, wie und wo du Menüs auf deiner Website einsetzt. Die gute Nachricht: Eine durchdachte Navigation anzulegen ist technisch einfach. Ich zeige dir hier, wie du Menüs in WordPress erstellst.
Welche Menüs gibt es?
WordPress selber bietet von Haus aus drei Menüpositionen an. Wo die Menüs stehen, wie genau sie aussehen – das hängt von deinem Theme ab. Denn jedesWordPress- Theme bietet unterschiedliche Menüpositionen an. Deshalb ist als 1. Frage sinnvoll: Wo soll deine Navigation stehen? Für die Antwort darauf musst du folgendes wissen:
- Welche Menüs gibt es überhaupt?
- Welche Menüs bietet dein Theme?
- Welche Positionen können Menüs auf der Website haben?
In WordPress arbeite ich mit dem Theme Divi. Mit WordPress + Divi sind die gängigsten Menüs mit den gängigsten Positionen möglich. Falls du ein anderes Theme benutzt, kann es sein, dass das ein oder andere Menü anders aussieht. Aber ich bin sicher: Meine Anleitungen werden dir weiterhelfen.
Hauptmenü – ein Must-have und das Leitsystem deiner Website
Mit dem Hauptmenü ist die Navigation gemeint, die auf einer Website die erste Geige spielt. Hier werden die wichtigsten Seiten deiner Website angesteuert. Was du wissen solltest: Das Hauptmenü kann verschiedene Positionsmöglichkeiten haben. In dieser Anleitung zeige ich dir, wie ein horizontales Menü am Kopf der Seiten in WordPress erstellt wird.
Footermenü: das Menü am „Fuß“ der Seiten
Das Footermenü findest du im untersten Bereich einer Website. Eben im Footer. Das ist der Bereich, der die einzelnen Seiten deiner Website abschließt und dem Besucher sagt: Weiter kannst du nicht scrollen. Ein Footermenü ist sinnvoll, weil damit die Besucherin ohne scrollen zu müssen weitere Unterseiten findet. Wenn du im Footer ein WordPress Menü erstellen möchtest, hast du mehrere Möglichkeiten. In dieser Anleitung zeige ich dir, wie du ein vertikales Footermenü und wie du ein horizontales Footermenü erstellst.
Sekundäres Menü — eine Linkleiste im Headerbereich
Das Sekundäre Menü steht im Headerbereich oberhalb vom horizontalen Hauptmenü. Dieses Menü ist eher auf großen Portalen sinnvoll. Auf Shopseiten oder mehrsprachigen Seiten kann diese Leiste sinnvoll sein, wenn Warenkorb, Login oder die Sprachauswahl untergebracht werden sollen. Weitere mögliche Elemente sind die Such-Lupe, Social-Icons, deine Telefonnummer oder die Mailadresse.
DropDown-Menü — die Erweiterung des Hauptmenüs
Wenn du ein nicht sichtbares WordPress Menü erstellen möchtest, wählst du das Das DropDown-Menü. Es wird auch Untermenü oder Submenü genannt. Der Name sagt es bereits: Es ist ein „Klappmenü“. Das heißt: Die Besucher klicken zuerst ein Link im Hauptmenü an, damit das Untermenü aufklappt. Sinnvoll ist das DropDown-Menü, weil in der horizontalen Menüleiste nicht mehr als sieben Links angeordnet sein sollten. Je weniger Links im Hauptmenü, desto übersichtlicher ist die Navigation. Der Rest kommt ins DropDown.
Horizontales WordPress Menü erstellen im Header
Eine einzelne Webseite wird in verschiedene Bereiche eingeteilt:
Der zuerst sichtbare Bereich ist der Header. Der Header ist der Kopfbereich einer Webseite. Deshalb wird hier in der Regel das Hauptmenü angebracht. Gut zu wissen: Die Seiten können so eingestellt werden, dass die Navigation auch beim Scrollen oben stehen bleibt. Und so kommst du zum wichtigsten Menü deiner Website:
Schritt 1
Seiten in WordPress anlegen
Damit du überhaupt ein Menü in WordPress sehen kannst, möchte WordPress zunächst Seiten haben. Der umgekehrte Weg – erst Menü, dann Seiten – ist zwar auch denkbar und technisch möglich, aber umständlich. Der erste Schritt also: Seiten anlegen. Auch inhaltlich ist das sinnvoll, denn dann machst du dir vor dem Anlegen der Website Gedanken über deine Inhalte.
Ich erlebe es immer wieder, dass Websitebetreiber zuerst an das Menü denken. Ohne bereits Seiten zu haben. Das ist, als würden sie erst den Sattel kaufen und dann das Pferd… Apropos: Hast du ein Konzept für deine Website? Das ist nämlich sehr sinnvoll und erleichtert dir die Arbeit. Falls du Tipps brauchst, lies gern meine Anleitung, wie du ein Konzept für deine Website erstellst > klick hier
Schritt 2
Bereich „Menüs“ im Dashboard von WordPress öffnen
Du loggst dich wie gewohnt in deine WordPress-Installation ein. Standardmäßig öffnet sich das Dashboard deiner Installation. Hier siehst du links die vertikale Menüleiste mit den Optionen, die du zum Aufbau deiner Website ansteuern kannst. Diese vertikale Menüleiste beginnt oben mit
- > Dashboard, dann
- > Beiträge, dann
- > Medien, dann
- > Seiten
Weiter unten findest du den Link Design. Dieser Menüpunkt enthält den Punkt Menüs. Es gibt 2 Möglichkeiten, zum Bereich Menüs zu kommen.
Möglichkeit 1:
Du „schwebst“ mit dem Mauscurser über den Begriff Design (ohne zu klicken!).
Es öffnet sich nach rechts ein Kontextfenster
Hier findest du unter den aufgeführten Links wie Themes, Customizer, Widgets den Punkt Menüs
Menüs anklicken.
Möglichkeit 2:
Diesmal klickst du auf Design
Das vertikale Hauptmenü in deinem Dashboard öffnet sich nach unten.
Nun siehst du im Menü unter Design dieselben Menüpunkte wie in Möglichkeit 1)
Schritt 3
Den Namen des Menüs eintragen
Wenn du auf Menüs geklickt hast, dann öffnet sich im Dashboard ein neuer Bereich. Das ist der Menübereich. Im Bereich Menüs kannst du deine Navigationen definieren, anlegen und ändern. Links im Bereich findest du einen Kasten Menüeinträge hinzufügen und rechts den Kasten Menü-Struktur. So gehst du vor:
- im Kasten Menü-Struktur findest du das Feld Name des Menüs
- hier trägst du einen beliebigen Namen für dein Menü ein
- dabei ist es sinnvoll, einen eindeutigen Namen zu wählen
- anschließend klickst du auf den blauen Button Menü erstellen.
Schritt 4
Seiten auswählen und dem Menü hinzufügen
Wenn du noch keine Seiten angelegt hast, dann ist das Feld Menüeinträge hinzufügen grau. Ansonsten ist das Feld wie der Kasten Menü-Struktur weiß. Nun kannst du Seiten auswählen. Standardmäßig ist hier der Tab Zuletzt erstellt vorausgewählt. So gehst du vor:
- Gewünschte Seite in der Checkbox links neben der Seitenbezeichnung auswählen
- du kannst auch mehrere Seiten auswählen -> dann mehrere Checkboxen anklicken
- auf den Button klicken: Zum Menü hinzufügen
- anschließend werden die Seiten rechts unter Menü-Struktur als Button dargestellt.
Diese Button kannst du wie erwähnt aufklappen. Im Feld Angezeigter Name kannst du den Namen der Seite ändern. Wichtig: Wenn du hier den Seitennamen änderst, dann ändert sich nicht die URL der Seite! Es wird lediglich die Linkbezeichnung innerhalb des Menüs geändert. Du kannst den Seiten also nach Herzenslust an dieser Stelle neue Namen vergeben.
Schritt 5
So ordnest du dem Hauptmenü eine Position im Theme zu
Nun muss WordPress noch mitgeteilt werden, an welcher Stelle der Website dein neues Menü stehen soll. Soll es im Header stehen? Oder im Footer? Auch das ist kein Hexenwerk: Du setzt einfach einen Haken. Das machst du so: Im selben Feld – im Feld Menü-Struktur – findest du die Option Menü-Einstellungen. Darunter 4 Auswahlfelder, die du jetzt anklicken kannst. Da dein neues Menü als Hauptmenü erscheinen soll, muss die Checkbox Hauptmenü angeklickt werden. Ganz simpel. Oder?
Dasselbe wird später mit dem horizontalen Footermenü und dem Sekundären Menü gemacht.
Seiten automatisch hinzufügen: Diese Auswahlbox kann ebenfalls angeklickt werden. Ich lass diese Box immer deaktiviert, denn es gibt immer mal Seiten, die nicht hinzugefügt werden sollen (wie das Impressum). Zum Abschluss speichern nicht vergessen.
5 Fehler, die du beim Erstellen eines Menüs vermeiden solltest
1. Das Menü hat zu viele Links
Wenn das horizontale Hauptmenü zu viele Menüeinträge hat, wird es unübersichtlich für deine Besucher. Denn die Leser haben keine Zeit zu raten, wo genau was sein könnte… Ein anderer Punkt ist die geringe Aufmerksamkeit für Details: Die Besucher wollen sich auf die Inhalte konzentrieren. Bedienelemente wie Menüpunkte sollten deshalb schnell verstanden werden. Es gibt Untersuchungen, wonach bis zu 7 Links noch gut in Erinnerung bleiben. Je besser Elemente im Gedächtnis bleiben, desto schneller kann sich die Besucherin durch die Website navigieren: Sie muss nicht ständig suchen und überlegen.
2. Die Navigationsleiste läuft zu breit
Manchmal sehe ich horizontale Navigationen, die zwar eine übersichtliche Anzahl an Links haben, aber zu breit laufen. Zu breit laufende Menüs sind natürlich genauso problematisch. Passieren kann das, wenn für die Links im Menü Wörter gewählt werden, die einfach zu lang sind. Bei kleinen Monitoren wie Tablets in der Queransicht oder Notebooks reicht dann der Platz nicht mehr aus – das Menü erhält einen Umbruch. In einem Menü mit Umbruch kann man schlimmstenfalls nicht mehr navigieren, weil sich die Links überlagern oder weil das Submenü nicht mehr angeklickt werden kann. Deshalb: Die Website auch immer auf kleinen Displays ausprobieren.
3. Unwichtige Links im Hauptmenü
Klar, das Impressum ist wichtig. Aber nicht für deine Besucher. Jedenfalls in der Regel. Das Impressum und andere rechtliche Angaben wie der Datenschutzhinweis sind gesetzliche Vorgaben. Es sind Seiten, die die meisten Besucher eher selten bis gar nicht besuchen. Warum also sollten ausgerechnet gesetztliche Pflichtangaben im Hauptmenü stehen? Schließlich ist dort am wenigsten Platz. Mein Tipp: Stell solche Links ganz nach unten. In die unterste Footerleiste.
4. Die Schrift der Links ist schlecht zu lesen
Zu kleine Schrift oder ein schlechter Kontrast: Wenn die Schrift im Hauptmenü nur undeutlich gelesen werden kann, dann muss mehr Zeit investiert werden, um die einzelnen Seiten zu finden. Die Besucher werden unnötig aufgehalten und springen unter Umständen entnervt ab. Mach es deinen Lesern so einfach wie möglich, deine Seiten zu finden. Ein wichtiger Schritt dahin ist eine gut lesbare Navigation.
5. Stumme Links: Menüpunkte, die nichts aussagen
Anbahnung, Mag ich, Katzenliebe… Was mag sich wohl hinter diesen Menüpunkten verbergen? Schwachpunkte eines Menüs sind Linkeinträge (Menüpunkte), die man nicht versteht. Mach es auch hier deinen Besuchern so einfach wie möglich. Lass sie nicht raten, sondern wähle „sprechende“ Links. Gut sind Begriffe, bei denen ohne zu überlegen sofort klar ist, welche Seiten man dahinter findet. „Über mich“? Klar, hier schreibt jemand über sich, was ihn oder sie ausmacht oder ihr Werdegang. „Kontakt“? Versteht sich von selbst, was dort zu finden ist. Auch wenn’s mal langweilig wirkt – du tust deinen Besuchern einen Riesengefallen, wenn du dich an anderer Stelle kreativ austobst.
von ConstanzeStraub | Mai 5, 2021 | WordPress, Allgemein, Anleitungen
WordPress umziehen: Der Umzug deiner Website in konkreten Schritten
Wer hat davor keinen Horror: ein Umzug.
Warum mit WordPress umziehen? Meistens ist der Grund ein schnellerer oder günstigerer Hoster. Zum Glück ist WordPress ein CMS, mit dem ein Umzug nicht schwer ist. Voraussetzung ist, dass man dabei Schritt für Schritt vorgeht und sich Notizen macht.
In dieser Anleitung zeige ich dir, wie ich mit WordPress umziehe. Denn es gibt mehrere Möglichkeiten: Du kannst den Umzug auch mit einem Plugin vereinfachen, dann entfallen einige der folgenden Schritte.
Ich mache die Umzüge dennoch manuell, so habe ich das Gefühl, alles im Griff zu haben.
Unser letzter Umzug ist noch nicht lange her: September 2025. Anders als unser Umzug 2020 (der ausgerechnet während der Pandemie und ein Tag vor Weihnachten stattfand), ging dieses mal alles schneller. Warum? Weil wir besser geplant haben.
So klappt der Umzug deiner WordPress-Website
In dem Fall, den ich hier beschreibe, möchtest du deinen Hoster wechseln. Gründe dafür gibt es genug: Du bist mit der Leistung deines alten Hosters nicht mehr zufrieden, du findest einen Hoster mit besserer WordPress-Unterstützung – was auch immer… Und wie in der neuen Wohnung die Möbel aufgestellt werden müssen, brauchst du auch beim neuen Hoster dieselbe Einrichtung: Datenbank und FTP-Zugang müssen angelegt werden, deine Website muss auf den neuen Webspace kopiert werden.
Zur Beruhigung: Mit WordPress umziehen ist kein Hexenwerk.
Bevor es losgeht ein Hinweis:
Bestimmt hast du vor dem Umzug deinen Auth-Code vom alten Hoster erhalten. Was das ist? Diesen Code brauchst du, um deine Domain beim neuen Hoster registrieren zu lassen. Mit dem Code weist du dich als rechtmäßiger Inhaber deiner Domain aus. Du gibst diesen Code bei deinem neuen Hoster an und der Umzug der Domain wird vom Hoster veranlasst.
Ist das soweit geklärt, kann nun dein WordPress umziehen.
Im Prinzip gibt es 2 Möglichkeiten: manuell oder mit einem Plugin. Ich zeige dir hier ausführlich die manuelle Variante. Wie du den Umzug von WordPress mit einem Tool wie Duplicator machst, schreibe ich in einem neuen Post.
WordPress-Umzug manuell
Ich selber mache wie gesagt meine WordPress-Umzüge immer manuell. Das hat mehrere Gründe.
- hab ich so die Übersicht, was ich getan habe
- muss ich auch mit einem Plugin so einiges beachten
- läuft etwas mit der manuellen Installation schief, kann ich immer alles wiederholen
- manchmal hakt der Umzug auch mit einem Plugin (z.B. wenn die Datenbank sehr groß ist)
Läuft alles glatt, brauchst du nicht mehr als 60 Minuten für den manuellen Umzug (inkl. Download- und Upload-Zeit). Und sollte doch irgendwas nicht hinhauen – dann machst du eben alles nochmal. Überhaupt kein Problem. Denn vor dem Umzug sicherst du deine Datenbank und die WordPress-Installation auf deinem Rechner. So hast du die volle Kontrolle und die Welt kann ruhig untergehen.
Hier in kurzen Stichworten die einzelnen Schritte:
- Vom alten Hoster Datenbank exportieren und auf deinen Rechner sichern
- Vom alten Hoster per FTP die WordPress-Dateien downloaden (auf deinen Rechner)
- Auf dem neuen Hoster eine Datenbank anlegen
- In die neu angelegte Datenbank die gesicherte Datenbank vom alten Hoster importieren
- Ein FTP-Zugang auf deinem neuen Hoster anlegen
- Eine Datei deiner WordPress-Site anpassen
- Deine WordPress-Website per FTP auf neuen Hoster hochladen
Du siehst: Mit WordPress umziehen sieht recht übersichtlich aus. Wenn man Schritt für Schritt vorgeht ist der manuelle Umzug auch für unroutinierte WordPress-Anwender gut machbar. Auch ich hab mal als Greenhorn angefangen – und fand es nicht schwierig.
Drei Vorraussetzungen brauchst du, um loszulegen:
- ein Ftp-Zugang zum alten Hoster
- Zugriff auf phpMyAdmin für die Datenbank
- und – natürlich – einen neuen Hoster mit Zugang
Los gehts, lass uns starten:
WordPress umziehen – Schritt 1: Datenbank sichern
Wahrscheinlich erzähl ich dir nichts Neues, der Vollständigkeit halber erwähne ich’s: WordPress funktioniert nur mit einer Datenbank. Alles aus deinem Content (Seiten, Beiträge, Benutzerdaten und vieles mehr) sowie wichtige Einstellungen werden in der Datenbank gespeichert. Das heißt: Wenn du mit deinem WordPress umziehen möchtest, muss die Datenbank mit. Leider.
Aber keine Sorge: Das ist in der Regel simpel. Für Änderungen an der Datenbank, für die Sicherung, den Import, Export und vieles mehr stellen die Hoster ein Tool bereit: phpMyAdmin.
In diesem Fall brauchst du die Funkion -> Datenbank exportieren. Über die Benutzeroberfläche deines Hosters wählst du deine Datenbank aus, klickst auf phpMyAdmin, es öffnet sich die Tabellenansicht der Datenbank. Hier klickst du oben im horizontalen Menü den Tab „Export“. Du musst nur darauf achten, dass die Tabellen der Datenbank ausgewählt sind (das kleine Plus-Zeichen aktivieren). Dann ein Klick auf „Exportieren“. Hier wählst du „Schnell“ aus. Das richtige Exportformat ist meist vorausgewählt: „SQL“. Du klickst auf „OK“ und schon wird eine Datenbank auf deinen Rechner geladen. Das ist wichtig: Die Datenbank muss auf deinen Rechner! Nur so kannst du sie in die noch leere Datenbank deines neuen Hoster importieren.
Auf deinem Rechner wirst du nun eine Datei mit der Endung .sql finden. Meistens trägt diese Datei den Namen der Datenbank. Also zum Beispiel db123456.sql.
WordPress umziehen – Schritt 2: Deine WordPress-Dateien sichern
Wenn du mit WordPress umziehen möchtest, brauchst du natürlich eine Datenstraße, auf der sämtliche Dateien deiner WordPress-Installation zum anderen Hoster geschifft werden. Ein FTP-Programm ist für so einen Transport eine geniale Sache. Falls du das noch nicht hast, weil deine WordPress-Website nicht von dir erstellt wurde oder weil dein WordPress vorinstalliert war, dann holst du als erstes dieses Programm. Gute FTP-Programme sind FileZilla oder CyberDuck. Ich arbeite mit FileZilla. Den FileZilla Client kannst du kostenlos downloaden (https://filezilla-project.org/). Achtung: „Client“, nicht „Server“ laden.
Wenn du in deinem FileZilla alles eingerichtet hast, kannst du dich auf dein Webspace (von deinem alten Hoster) einwählen. Finde das Verzeichnis (den „Ordner“), in dem deine WordPress-Installation liegt. Öffne das Verzeichnis, wähle alle Dateien darin aus und kopiere sie auf deinen Rechner in einen Ordner. Dazu klickst du mit der rechten Maustaste auf die ausgewählten Dateien, es öffnet sich ein Kontextfenster und du klickst hier auf „Herunterladen“. Nun werden alle deine WordPress-Dateien auf deinen Rechner kopiert. Vorher hast du natürlich einen Ordner auf deinem Rechner angelegt, in den du deine WordPress-Dateien speicherst, damit alle Dateien schön zusammen bleiben.
Jetzt nur noch etwa Geduld, denn das Herunterladen der Dateien kann etwas dauern.
WordPress umziehen – Schritt 3: Eine neue Datenbank anlegen
Auf dem neuen Hoster muss nun eine neue Datenbank erstellt werden. Später übernimmst du zwar die Daten deiner alten, gespeicherten Datenbank. Dennoch muss zuvor ein Grundgerüst einer Datenbank erstellt werden. Das findest du in der technischen Administration deines Hosters unter dem Menüpunkt „Datenbanken“. Hier „Datenbank hinzufügen“ (oder „Datenbank erstellen“, wie auch immer der Menüpunkt heißt) und der weiteren Anweisung folgen. Hier erhältst du den Datenbanknamen und Datenbankbenutzer (kann manchmal auch selbst vergeben werden), ein eigenes Passwort für die Datenbank vergibst du selber. Die Serverbezeichnung (Host) erfährst du von deinem Hoster. Häufig lautet der Hostname einfach „localhost“.
Alle Daten gut notieren!
Tipp: Alles per Copy & Paste in eine Excel-Tabelle speichern.
WordPress umziehen – Schritt 4: Datenbank des alten Hoster importieren
Da wir eh in der Datenbank sind, können wir auch gleich die alte Datenbank importieren. Und das ist genauso einfach wie der Export: Diesmal klickst du – Überraschung – im Menü oben auf „Import“. In dem folgenden Fenster wählst du deine sql-Datei aus, die du in Schritt 2 auf deinen Rechner gespeichert hast. Wenn du sie ausgewählt hast, klickst du auf „importieren“. Damit lädst du deinen Datenbank-Dump hoch (Dump = die importierte Datei deiner Datenbank). Beim Import kannst du die Standardeinstellungen belassen (es sei denn, du hast beim Export deiner Datenbank die Einstellungen geändert – was in der Regel nicht nötig ist).
Ein Hinweis, bevor du dein WordPress umziehen willst: Wenn deine Website sehr groß ist und damit auch deine Datenbank, kann es sein, dass der Import vorzeitig abbricht. Das liegt an der geringen PHP-Laufzeit. Das ist aber kein Problem: Dann nimmst du für den Import das Plugin MySQLDumper. Damit lässt sich das Problem der Laufzeit umgehen.
WordPress umziehen – Schritt 5: Einen FTP-Zugang auf deinem neuen Hoster einrichten
Falls noch nicht geschehen, brauchst du natürlich auch einen Zugang für deinem neuen Webspace. Das machst du genauso wie das Einrichten deiner Datenbank im technischen Bereich deines Kundenzugangs. Wie gehabt die Daten deines FTP-Zugangs anlegen, sauber kopieren und den Zugang in deinem FTP-Client (FileZilla) eintragen.
WordPress umziehen – Schritt 6: Deine WordPress-Dateien anpassen
Damit dein WordPress mit der neuen Datenbank kommunizieren kann, muss eine Datei in deinem WordPress-Ordner angepasst werden. Diese Datei ist die wp-config.php. Auch dies ist einfacher als man denken mag.
Finde also in dem Ordner, in den du deine WordPress-Dateien gespeichert hast, folgende Datei:
wp-config.php.
Diese Datei öffnest du mit einem einfachen Texteditor. Achtung: Auf keinen Fall mit einem Schreibprogramm wie Word, OpenOffice oder Page öffnen! Denn diese Programme verändern die wp-config.php-Datei automatisch.
Auf Windows gibt es dafür den Texteditor, auf dem Mac eignet sich das Programm „TextEdit“. Sehr gut geeignet sind Programme wie „CotEditor“.
Ich mache von der wp-config.php immer eine Kopie und speichere sie in einem anderen Ordner ab. So kann ich auf das Original immer ganz schnell zugreifen, wenn ich mich vertippt habe.
Also, folgendes machst du:
Öffne die Datei wp-config.php. Hier änderst du die folgenden Zeilen:
define(‚DB_NAME‘,’meinDatenbankname‘);
define(‚DB_USER‘,’meinDatenbankbenutzer‘);
define(‚DB_PASSWORD‘,’meinDatenbankPasswort‘);
define(‚DB_HOST‘,’localhost‘)
Zwischen den Hochkommata setzt du deine notierten Daten ein.
„localhost“ brauchst du nur ändern, wenn dein Hoster eine andere Hostbezeichnung hat für den Datenbankhost (DB_HOST).
Die Hochkommata am Anfang und Ende der geänderten Bezeichnungen darfst du nicht ändern oder löschen, denn sie sind Teile der Programmierung. Das ist auch einer der Gründe, warum du kein Schreibprogramm verwenden darfst. Denn die könnten die Hochkommata in Anführungszeichen ändern.
Und damit wäre die wp-config.php fehlerhaft.
WordPress umziehen – Schritt 7: WordPress auf den neuen Hoster hochladen
Jetzt kommt der letzte Schritt: Das Kopieren deiner WordPressdateien auf deinen neuen Webspace. Das machst du, indem du dich per FTP einwählst und dich mit deinem neuen Webspave verbindest. Falls du für dein WordPress ein Verzeichnis angelegt hast auf deinem Webspace, wählst du das Verzeichnis aus und öffnest es. Hier hinein lädst du sämtliche WordPress-Datein inkl. der geänderten wp-config.php. Du kannst auch alles in das sogannte Root-Verzeichnis laden. Das ist das oberste Verzeichnis, das du auf deinem Webspace anklicken kannst. Mein Tipp: Erstelle dir lieber ein Verzeichnis, in dem dein WordPress liegt. Dann hast du es später einfacher. Du must dann nur noch auf deinem Hoster angeben, in welches Verzeichnis deine Domain verweisen soll. Das war’s schon.
Damit ist der Umzug deiner Website mit WordPress fertig. Mit WordPress umziehen ist einfacher, als vermutet, wenn du Schritt für Schritt vorgehst.
Du kannst deine Website jetzt genauso weiter bearbeiten wie bisher.
von ConstanzeStraub | März 2, 2021 | WordPress, Allgemein
HTML oder WordPress? Die Vorteile eines CMS.
Eine persönliche Erfahrung
Alles begann vor 15 Jahren
Als ich mich vor knapp 20 Jahren als Designerin selbständig gemacht habe, stand das Internet noch in den Kinderschuhen. Die Zeit des Word Wide Web vor 20 Jahren ist kein Vergleich zu den heutigen modernen Techniken. Mit Websites tolle Sachen machen? Verglichen mit heutigen Möglichkeiten war die Technik damals reichlich eingeschränkt.
Es war die Hippie-Zeit des Internets: jung, verspielt, nervös, kreativ und auch schlampig.
Aufbruchstimmung im Internet
Nach 2 Jahren meiner Selbständigkeit ist mir klar geworden: Um Kunden zu zeigen, was ich mache, brauche ich „irgendwas“ im Internet. Nur so kann ich ohne Umwege und mit geringen Kosten meine Arbeiten präsentieren. Eine Vorstellung hatte ich auch: Die Website sollte einigermaßen seriös daherkommen. Keine lustig bunte Flashseite mit laufenden Zeichenfiguren. Wie es damals häufig zu finden war: Jede Agentur, die besonders kreativ sein wollte, hatte ein sogenanntes Flashintro vor den eigentlichen Webseiten vorgeschaltet.
Glaub mir: Der Bau einer Website war damals ein steiniger Weg. Als ich damit angefangen hab, waren Systeme wie WordPress neu und unausgereift, kompliziert und unverständlich. WordPress wurde ja erst 2003 entwickelt.
Spitze Klammern und kein Ende
Eine kleine Abhandlung über HTML gefällig?
Wenn du dran bleibst, erfährst du ein paar Hintergründe. Und merkst: Wie gut, das es WordPress gibt…
Nur eins vorweg: Egal, ob du eine reine HTML-Website hast oder ob du in einem CMS wie WordPress arbeitest: Am Anfang steht immer das Website Konzept. Hier habe ich ausführlich beschrieben, welche 9 Punkte mir für ein Konzept wichtig sind:
Also: Ich hatte null Ahnung, wie man eine Website macht. Was ich irgendwann herausbekommen hab: Eine Website besteht aus HTML-Dateien. Also hab ich einen VHS-Kurs besucht. Der Kurs war ein Witz. Zwar ist HTML leicht zu lernen. Trotzdem war ich damals frustriert. Enttäuscht, weil in dem, was der Dozent uns an die Tafel malte und was wir dann in den Rechner übertragen haben, nicht mal in Ansätzen und mit viel Fantasie eine „Website“ zu erkennen war. Jedenfalls nicht das, was ich schon mal irgendwo im Internet gesehen hab. Alles war viel zu abstrakt. Buchstaben zwischen spitzen Klammern sollten eine Website sein? Wo ist das Grafische? Wo die Gestaltung?
Vielleicht hätte mir der 2. Teil des Kurses die Augen geöffnet. Aber ich war erstmal genervt. Das Thema HTML und Websites landete erstmal zu den Akten. War mir zu blöd. Zu unkreativ.
HTML und GoLive
Wer mich kennt weiß: Wenn ich mir etwas in den Kopf gesetzt hab, dann will ich es haben. Oder wissen. Eine Form von Ehrgeiz, den ich seit Kindesbeinen nie abgelegt hab: Ich will alles selber machen. Ob Wände tapezieren, Türen streichen, Laminat und Teppich verlegen, Ledertaschen nähen, Schreibtische bauen, Schränke abschleifen oder Westen stricken: Alles schon gemacht. Und immer fast perfekt. Also: Auch jetzt wollte ich mich selber durchbeißen.
Ich hab mich auf den Hosenboden gesetzt. Und hab HTML gelernt, was das Zeug hält. Irgendwann bin ich auf ein einfach zu bedienendes Programm gestoßen: GoLive von Adobe. GoLive war (das Programm gibt es nicht mehr) ein Programm, mit dem man sehr intuitiv und einfach per Drag and Drop modulartig Webseiten erstellen und bearbeiten kann. Hier ein Textmodul schieben, dort ein Bildmodul schieben – schon sah das Ganze nach etwas aus.
Meine erste selbst gestrickte Website wurde geboren. Und ich konnte Bilder meiner Design-Arbeiten im Internet präsentieren. Okay, das Ganze war wirklich sehr simpel gestrickt. Aber ich war online!
Der erste Website-Auftrag
Irgendwann kam der erste Auftrag, eine Website zu machen. Ein guter Freund von mir ist als Versicherungsmakler selbständig und wollte eine Website haben. Das war ein tolle Gelegenheit für mich, tiefer in die Materie HTML einzusteigen. Es folgten weitere Aufträge zu Websites. Und nun wollte ich’s wissen. Ich las immer mehr, knobelte an Fehlern, probierte und verwarf – bis die Websites einigermaßen passabel waren. Für damalige Verhältnisse.
Über die Jahre hab ich reihenweise Bücher über HTML und CSS verschlungen: Bücher des Amerikaners Eric A. Meyer über CSS, „Bulletproof Webdesign“ von Dan Cederholm, das Online-Standardwerk von Stefan Münz „self html“ und die Bücher und Onlinereferenzen von Ulrike Häßler und viele andere Bücher. Und mittlerweile ist mit mir auch das Internet schlauer geworden: Immer umfangreicheres Wissen konnte ich direkt aus dem Internet saugen.
HTML 5 und CSS 3: responsives Webdesign
HTML und CSS entwickelten sich im Laufe der Jahre weiter. Nach HTML 4 kam HTML 5, nach CSS 2 kam CSS 3. Tolle Features wurden möglich: Websites konnten endlich „responsiv“ codiert werden. Responsiv heißt: Die Elemente der Website passen sich der Displaygröße an. So kann man z.B. den Schriften je nach Ausgabegerät größere oder kleinere Größen zuweisen. Eine Überschrift ist auf dem Monitor 1 cm hoch und deshalb zu groß für Smartphones? Kein Problem: Man schreibt einen Befehl der dafür sorgt, dass dieselbe Überschrift auf einem Smartphone kleiner dargestellt wird. Damit kein unschöner Umbruch entsteht.
Bilder und Textblöcke sollen auf dem Monitor nebeneinander stehen und auf dem Smartphone untereinander? Kein Problem: Wieder schreibt man eine passende Anweisung. Und voila: Auf dem Display des Smartphones rutscht das Bild unter den Text (oder umgekehrt, je nach Angabe).
Diese Technik war auch bitter nötig. Denn längst waren die ersten Smartphones auf dem Markt. Und immer mehr Menschen gingen mit Smartphone ins Internet. Wer die Entwicklung kennt weiß: Längst schon ist das Smartphone eine Eierlegendewollmilchsau – die Funktion „Telefon“ spielt fast nur noch eine Nebenrolle…
HTML 4, HTML 5, CSS – reicht das für eine Website?
Alles fein und schön. Aber irgendwann reichte reines HTML nicht mehr.
PHP für interaktive Elemente
Irgendwann wollten immer mehr Kunden ihre Websites selber ändern, Texte selber einsetzen. Oder sie erwarteten Features, die mit normalen HTML-Codierungen so nicht umsetzbar waren. Oft haben meine Kunden nachträglich Kontaktformulare gewünscht. Die aber kann man mit simplen HTML nicht umsetzen. Damit ein Kontaktformular im Browser des Besuchers abgesendet werden kann, braucht man ein Script, das den Versandt des Formulars an eine Mailadresse ausführt. Das wusste ich: Kontaktformulare oder andere interaktive Elemente einer Website werden in der Regel mit der Programmiersprache PHP ausgeführt.
Ein anders Problem war: Wollte ich Änderungen an einer Website machen, ging das nur auf dem Rechner, auf dem ich die nötigen Programme installiert hatte. Das hat mich abhängig vom Ort gemacht.
Meine Fragen waren also:
Will ich umfangreiche Webprojekte an einen Programmierer weitergeben? Oder kann ich das Programmieren lernen? Die Antwort war, richtig geraten: Super, wieder was Neues! Wo ist das nächste PHP-Lehrbuch? Wie lerne ich JavaScript? Gesagt getan, Bücher und DVDs bestellt…
Aber irgendwie war meine Lust schnell dahin. Der Grund war wahrscheinlich ganz simpel: Ich bin durch und durch Grafikerin und ich arbeite vor allem visuell. Und PHP ist eine Sprache. Das bedeutet: Man hat zuerst mal einen großen Haufen Zeichen und Buchstaben, die man in einem sinnvollen Kontext zusammenfügt. Man sieht also erstmal nix Grafisches… Außerdem war PHP für mich doch etwas komplexer als HTML. Zu komplex, um es „mal eben“ schnell und nebenbei zu lernen und in absehbarer Zeit parallel Aufträge damit umzusetzen.
Learning by Doing war mir in diesem Fall zu riskant. Also musste ich mir etwas anderes überlegen.
PHP plus HTML: Ein CMS war die Antwort
So, und nun kannst du alles, was ich oben über HTML geschrieben habe, getrost vergessen.
Okay, fast. Denn auch mit einem CMS wird dir HTML hin und wieder über den Weg laufen. Jedenfalls ein bisschen.
Ein Content-Management-System wäre die Lösung. Ein CMS. Erste Erfahrung mit einem CMS hatte ich 2007 mit Joomla. Damals hab ich für einen Kunden eine Website mit integriertem Shop erstellt. Joomla ist wie WordPress ein sogenanntes Content-Management-Sytem (CMS). Joomla war damals sehr sperrig, umständlich und wenig schön. Die Arbeit mit Joomla war holperig und hat keinen Spaß gemacht.
Acht Jahre später, 2015, hab ich den Relaunch der Website vom BBK Lüneburg übernommen. Hier war von Anfang an klar: Die konnte ich nicht mit HTML codieren. Denn die Seite sollte auch von KollegInnen editiert werden können. Und die sahen in HTML lediglich 4 große Buchstaben. Als musste ein CMS her. Diesmal wollte ich auf keinen Fall Joomla nehmen, mein Trauma… Ich hab mich für WordPress entschieden. WordPress war inzwischen sehr ausgereift, hat eine breite Community – überall findet man im Internet WordPress-Foren.
DIVI von Elegant Themes
Ich hab ein gutes Theme gefunden, das Divi der amerikanischen Firma Elegant Themes. Divi ist ein Theme und Pagebuilder in einem. Zufällig hab ich entdeckt, dass der Designer Marco Linke Child-Themes zum Divi entwickelt. Child-Themes sind ein Teil des Themes und enthalten Layout-Einstellungen. Diese Child-Themes sind einfach, übersichtlich und klar, ohne überflüssigen Schnickschnack. Dennoch kann man sie gut auf die Bedürfnisse seiner Website einstellen. Das finde ich sehr gut, denn die meisten Themes sind viel zu überladen. Und schnell macht man den Fehler, ein Layout zu übernehmen, das überhaupt nicht zum eigenen Angebot passt.
Das Gute am Divi: Es gibt fertige Module wie Kontaktformulare, Galerien, Slider, Bestellbuttons, Infotexte und vieles mehr. Die man einfach per Klick einsetzen kann. Die Themes sind von Haus aus responsiv, was ich besonders wichtig finde. Spannend ist: Ich kann die Website in einer Frontend-Ansicht bearbeiten. Das heißt: Ich sehe die zu bearbeitende Website-Oberfläche so, wie ich die Website als Besucher der Website sehe. In dieser WYSIWYG-Ansicht ist alles sehr easy (WYSIWYG = What you see is what you get = was du siehst ist das, was du erhältst).
Damals stellenweise etwas holperig, ist der Pagebuilder Divi mittlerweile richtig gut geworden. Ohne HTML-Kenntnisse lassen sich spielend leicht professionelle Websites erstellen. Erfreulicherweise programmieren die Divi-Entwickler für jede WordPress-Version ein Update zum Divi. Das ist aus verschiedenen Gründen wichtig: Aus Gründen der Sicherheit (WordPress wird gern mal gehackt) und natürlich, weil WordPress selber regelmäßig Neuerungen erhält.
Was ist ein Content-Management-System?
Vielleicht fange ich mal anders an: Was ist nun der Unterschied zwischen HTML und einem CMS wie WordPress? Denn auch die Inhalte in WordPress werden in HTML ausgegeben, sonst könnte der Browser die Website nicht anzeigen (jedenfalls nicht so, wie sich der Websitebetreiber das gedacht hat…).
Also:
CMS oder HTML – Was ist der Unterschied?
Ganz kurz: HTML-Seiten sind statische Seiten. Dagegen werden Seiten in einem CMS wie WordPress dynamisch aus einer Datenbank generiert. Das heißt: HTML-Seiten sind quasi „physisch“ vorhanden. Quasi, da natürliche eine digitale Datei anders als ein Blatt Papier nicht „physisch“ vorhanden ist. Man kann sie nicht anfassen.
Aber sie ist zu vergleichen mit anderen Dateien, die du von deinem Rechner kennst. Du kennst ja sicher Word-Dateien. Genauso ist auch eine HTML-Datei, die man selber bearbeiten und speichern kann. Diese Datei hat nur eine andere Endung: statt „doc“ oder „docx“ eben „html“. In fast jedem Textprogramm kannst du eine Seite auch als html-Datei abspeichern. Und darin nach Belieben deine Texte schreiben.
Damit der Internet-Browser (das Programm, mit du Internetseiten sichtbar machst), deine Inhalte lesen kann, werden die Elemente in den html-Dateien besonders ausgezeichnet. Diese Auszeichnungen nennt man „Tags“. Darum nennt sich HTML auch „Auszeichnungssprache“ (es ist keine Programmierung). Ein Element erhält am Anfang ein Tag und am Ende, das sogenannte schließende Tag. Und das sieht dann so aus:
Dies ist ein Absatz Nummer 1
Dies ist ein weiterer Absatz
Dies ist eine Überschrift
Für jedes Element gibt es eigene Tags. Formulare heißen
von ConstanzeStraub | Dez. 11, 2020 | Design, Startseite, Text, WordPress
Website-Texte lesbar gestalten, damit Besucher gern lesen
Egal womit du unterwegs bist: WordPress, Joomla, Typo 3 oder Baukastensysteme wie Jimdo, Squarespace oder Wix: Jedes System stellt unterschiedliche Anforderungen. Aber eine Arbeit musst du überall machen: Du musst dir Gedanken darüber machen, wie du deine Website richtig gestalten kannst. Richtig heißt: lesbar und verständlich.
Als Webdesignerin bewege ich mich in diesem Artikel in erster Linie im System WordPress. Aber die hier erwähnten Fehler werden mit jedem System gemacht.
Wenn du eine Website baust, bist du als Texter, Designer und Techniker unterwegs. Wenn du mit WordPress und einem guten Premium-Theme wie dem Divi arbeitest, dann nimmt dir das Theme viele Arbeiten ab. Ein professionelles Theme unterstützt dich in Design und Technik.
Egal, womit du deine Website erstellst: Viele der unten genannten Gestaltungsprobleme entstehen, weil vorab kein Website-Konzept entwickelt wurde.
Ein bisschen gesunder Menschenverstand, Logik und Einfühlungsvermögen ist trotzdem nicht verkehrt. Häufig beobachte ich auf Websites dieselben Fehler in der Gestaltung. Die schlimmsten Fehler sind aus meiner Sicht mangelnde Lesbarkeit der Texte. Damit du auf deiner Website diese Fehler vermeidest, hab ich diesen Blogpost geschrieben.
Mach es besser. Ich zeige dir hier, wie du deine Website-Texte richtig gestalten kannst, damit deine Besucher deine Texte gern lesen.
Fehler 1
Schlechte Lesbarkeit der Website-Texte durch zu breite Zeilen
Viel zu breite Textblöcke ist ein häufig zu beobachtendes Phänomen. Warum so viele Websitebetreiber diesen Fehler machen ist mir ein Rätsel. Breit laufende Zeilen lesen sich einfach extrem anstrengend. Ich bekomme davon Kopfschmerzen. Probier mal: Nimm ein normal großes Lineal (30 cm).
Tipp: DinA-4-Blatt quer vor dem Monitor
Falls du das nicht hast: Halte ein DinA4-Blatt quer vor deinen Augen. In dem Abstand, den du vor einem Monitor einnimmst. Also ca. 50 cm. Und nun wandere mit deinen Augen die gesamte Kante des Lineals oder des Blatts entlang: Von links, nach rechts, wieder zurück nach links, wieder nach rechts. Hin und her, von Ecke zu Ecke. Ein paar mal.
Das ist Schwerstarbeit für deine Augen. Das tut weh. Ich bekomme davon Kopfschmerzen. Jetzt wirst du einwenden: Okay, aber ich kann von links nacht rechts auch den Kopf bewegen. Klar. Beim Zuschauen eines Tennisspiels ist das normal. Da bewegt man den Kopf. Aber: Das macht keiner vor dem Monitor.
Es gibt verschiedene Kniffe, wie du dich an eine ideale Breite deiner Texte hältst. Eine einfache Möglichkeit ist: Lass den Text nicht breiter laufen als 15 – 25 cm. Abhängig von der Auflösung deines Displays. Natürlich ist dieses Hilfsmittel relativ. Relativ zu der Auflösung deines Notebook-Displays, von der Schriftgröße und dem Schrifttyp. Aber als grobe Richtung hilft diese Angabe.
Eine andere Empfehlung ist, die Texte nicht breiter laufen zu lassen als 800 Pixel. Aber dieser Tipp hat 2 Haken: Der 1. Haken: Pixel ist nicht gleich Pixel. Die Pixel eines Displays mit einer hohen Auflösung sind kleiner als die Pixel eines Displays, dessen Auflösung weniger groß sind. Das heißt: 800 Pixel sind nicht gleich 800 Pixel. Auf dem einen Display sind 800 Pixel 20 cm breit, auf einem anderen Display sind 800 Pixel 18 cm breit. Und 2 cm mehr oder weniger machen für die Lesbarkeit eines Textblocks viel aus!
Textbreite ist abhängig von Schriftgröße und Schriftart
Der 2. Haken: Die Breite eines Elements in responsiv programmierten Themes – wozu auch professionelle Premium-Themes von WordPress gehören – geben die Breite auch in Prozent an. Und selbst wenn die Breite eines Elements in Pixel angegeben ist – siehe oben. Eine sinnvolle Empfehlung ist die Anzahl der Zeichen in einer Zeile.
Meine Empfehlung: Nimm 70 bis 80 Zeichen (ohne Leerzeichen) in einer Zeile. Wobei dieser Wert wieder abhängig ist von der Schriftgröße und der Schriftart. Je größer die Schrift, desto weniger Zeichen. Je schlanker der Schriftschnitt, desto mehr Zeichen. Letztlich ist alles relativ. Behalt deshalb die Lauflänge in cm im Auge. Also gefühlt 18 – 25 cm ist ein guter Wert.
Fehler 2
Textwüsten: Die Textblöcke haben zu wenig Absätze
Ein wesentliches Element, wenn du deine Website-Texte richtig gestalten möchtest, ist der Absatz. Oder besser: die Absätze.
Leider wird häufig zu wenig auf dieses wichtige Element geachtet. Dabei nehmen die Texte einen Großteil der Fläche auf den Seiten ein. Wenn man von Foto-Websites absieht. Fehlende Absätze sind einer der Fehler: Häufig sieht man auf schlecht strukturierten Webseiten riesige Textblöcke ohne Gliederungen, mit wenig Absätzen. Die berüchtigten Textwüsten. Die Absatzlänge ist ein wichtiges Kriterium, wenn man eine Website richtig gestalten will.
Warum? Weil zu lange Absätze die Seite unübersichtlich machen. Mach es besser. Gliedere deine Texte in kurze, leicht verdauliche Happen. Plane viele Absätze ein. Mit höchstens 3 bis 5 Zeilen. Das Lesen am Rechner ist sehr anstrengend. Wenn du möchtest, dass deine Leser deine Seite nicht fluchtartig verlassen, dann strukturiere deine Texte. Setze viele Absätze, baue Listen ein, setze Grafiken in den Text. Da gibt’s viele Möglichkeiten. Sei kreativ. Gut sind Listen:
- Listen bringen Abwechslung
- Listen sind gut für das SEO
- Listen lockern Texte auf
- Listen lassen sich prima lesen
- Listen bleiben super im Gedächtnis
Fehler 3
Schriften, die das Lesen der Website-Texte erschweren
Wie du ohne Arial, Tahoma oder Times schöne und lesbare Texte gestaltest
Vorbei die Zeit, als Websites mit der winzigen Auswahl von 3 bis 4 Schriften unterwegs waren. Damals musste man die Schriften für seine Website nehmen, von denen man ausgehen konnte, dass die auch auf dem Rechner des Websitebesuchers vorhanden sind.
Google Fonts
Nutzt du Google-Fonts? Oder hast du schon mal davon gehört? Ein super Tool. Nie war es so einfach wie heute, wirklich schöne und dennoch lesbare Schriften auf seiner Website zu nutzen. Die Auswahl an schönen Schriften ist fast grenzenlos. Aber wer die Wahl hat, hat die Qual.
Die meisten Websitebetreiber sind keine Designer. Und wissen eben nicht, welche Schriften zusammen harmonieren und welche nicht. Das ist allerdings noch das kleinere Problem. Das größte Problem ist: Viele Websiteinhaber nehmen Schriften, die in Fließtexten nur sehr schwer zu lesen sind.
Tipp: Auf Schriftschnitte achten
Beispiel: Es gibt Schriften, die sehr schlank gestaltet sind. Ich finde solche Schriften schick, sie sehen meist edel aus. Wie die Condensed-Schnitte mancher Schrifttypen. Die Schrift hier im Beispiel haben Condensed-Schrift. Sie ist schmal und schlank geschnitten. Aber: Im Fließtext eingesetzt, also in längeren Texten, sind solche Schriften eine Katastrophe. Besonders ältere Augen ab 50 haben größte Schwierigkeiten, solche Schriften zu lesen. Wir hier im Beispiel eine Helvetica Schlank.
Ebenso problematisch: Schriftschnitte, die sehr fein gestaltet wurden. Sie sehen edel aus, sind aber auf Displays anders als im Print ungünstig zu lesen.
Zum Stichwort Google Fonts ein wichtiger Tipp: Setze Google Fonts DSGVO-konform ein! Was das bedeutet und welche Auswirkungen es haben kann, wenn du die Google Fonts falsch anwendest, habe ich in diesem Artikel beschrieben. Dort liest du auch, wie du die Google Fonts richtig einsetzt.
Eine andere Problemschrift: Script-Schriften und Serifen
Script-Schriften sind Schriften, die aussehen wie von Hand geschrieben. Sie haben diesen menschlichen Touch, wirken nahbar und authentisch, bringen die emotionale Note in den Text, den Human Touch. Und zu vielen Branchen passen sie wunderbar. Zum Beispiel zu DIY-Angeboten.
Ich mag Script-Schriften. Aber: Sie sind oft miserabel lesbar. Kann man leider nicht anders sagen. Neulich ist mir genau das passiert: Eine wunderschön schnörkelige, weit geschwungene Schrift als Überschrift auf einer Website. Aber: Ich konnte einfach nicht auf dem ersten Blick erkennen, ob es sich beim f um ein f oder um ein s handelt. Ich kam ins Stocken. Ich musste mehrmals lesen. Es war ein s.
Ungünstig, wenn man 5 Sekunden braucht, um überhaupt die Schrift entziffern zu können. Und dann weitere wertvolle Sekunden um zu erfassen, welches Produkt die werte Dame bietet. (Sorry an dieser Stelle, aber Scriptschriften sieht man zu 99,9 Prozent bei AnbieterInnen). Daher meine Empfehlung: Sei vorsichtig im Gebrauch von Scriptschriften.
Serifen-Schriften sind ebenfalls Schriften, die im Fließtext oft nur schlecht lesbar sind, Ich sehe immer noch Websites mit Serifen-Schriften im Fließtext. Das Problem: In Überschriften, also relativ groß eingestellt und in groß eingestellten Fließtexten sind Serifen gut lesbar. Im „normalen“ Fließtext aber wird die Lesbarkeit schwieriger, da die Auf- und Abstriche (die „Schenkel“) der einzelnen Buchstaben unterschiedlich stark sind. Anders als auf physischen Seiten (Papier) sind sie auf Displays schwerer zu lesen, wenn sie zu klein sind. Im Gegensatz zu Serifen-Schriften haben Grotesk-Schriften nahezu identische Breiten der Ab- und Aufstriche (Grotesk: So nennt man Schriften ohne Serifen, wie etwa Arial oder Helvetica),
Fehler 4
Formatierungen der Texte, die das Lesen erschweren
Unnötige Formatierungen sind genauso schlimm. Wenn du deine Website richtig gestalten möchtest, kannst du auch auf diesen Punkt achten.Was verstehe ich unter „unnötigen Formatierungen“? Auf einer Website mit Rezepten hab ich neulich einen Text lesen müssen, der in 6 längeren Absätzen mit Kursivschrift geschrieben wurde. Ich musste 3 mal lesen, um den Text erfassen zu können. Im längeren Fließtext ist Kursivschrift das reinste Augenpulver.
Fehler 5
Website-Texte mit zu kleiner Schrift und ungünstigem Zeilenabstand
Du merkst: Zu Schriften gibt es viel zu schreiben.
Leider machen sich die wenigsten wirklich Gedanken um diesen so wichtigen Punkt. Wichtig ist der Inhalt – alles andere zeigt sich schon. Aber: Was nützt das schönste Layout der Website, die tollsten Farben, die briliantesten Bilder, der hilfreichste Inhalt – wenn ich Probleme habe, die Schrift zu lesen? Wenn du deine Website-Texte richtig gestalten möchtest, achtest du auch auf die Schriftgröße und den Zeilenabstand.
Häufig sehe ich auf Websites zu kleine Schrift und / oder zu enge Zeilenabstände. Das ist echt eine Herausforderung für jeden Leser. Und wenn du möchtest, dass wirklich alle Altersgruppen deine Inhalte sehen, dann lass auch mal ältere Augen deine Texte lesen. Die werden mit der Lesbarkeit nämlich weit mehr Probleme haben als deine 20 Jahre jüngeren Leser und Leserinnen.
Auch ein falscher Zeilenabstand kann die Lesbarkeit beeinflussen. Ist der Zeilenabstand zu gering, wird das Lesen anstrengend. Ist der Zeilenabstand zu weit, besteht die Gefahr, dass sich dein Leser auf deiner Website verliert. Und es muss unnötig gescrollt werden.
Fehler 6
Komplizierte Sätze in Website-Texten, die die Lesbarkeit vermindern
Schachtelsätze und Fremdwörter ade: Einfachheit schlägt Kompliziertheit
Zugegeben: Jetzt hab ich mich sehr weit aus dem Fenster gehängt: Denn der Inhalt hat nicht wirklich etwas mit der Gestaltung der Website zu tun. Aber: Mit der Formulierung deiner Texte kannst du dazu beitragen, wie gern die Besucher deine Texte lesen. Durch zu komplizierten Satzbau kannst du das Lesen erschweren. Je einfacher die Texte zu lesen sind, desto besser für deine Website, weil deine Besucher dann länger auf deiner Website bleiben. Und das ist nebenbei bemerkt gut für das SEO.
Auf dem PC oder Smartphone lesen ist anstrengend für die Augen. Und: Texte im Internet werden eher gescannt als ausführlich gelesen, anders als Bücher. Und wenn du in einfachen Worten und kurzen Sätzen schreibst, machst du es deinen Lesern leichter. Du wirkst nicht schlauer oder professioneller, wenn du Thomas-Mann-Schachtelsätze baust oder Fachbegriffe wie ein Wissenschaftler anwendest.
Wenn du komplizierte Sätze bildest, passiert nur eins: Du wirst nicht verstanden. Worauf musst du also achten?
- Einfachheit: Kurze Sätze, kurze Wörter, überflüssige Fachbegriffe vermeiden
- Syntax: Pro Satz sollte nur ein Gedanke ausgedrückt werden. Das Wesentliche steht am am Anfang des Satzes.
- Prägnanz: viele Verben und die Anwendung von Metaphern machen den Text lebendig (und leichter verständlich)
Übrigens gibt es zur Ermittlung der Lesefreundlichkeit sogar eine wissenschaftliche Herangehensweise.
Der Flesch Reading Ease
Hast du schon mal was von Flesch Reading Ease gehört? Der Flesch Reading Ease (FRE) wird für die Lesbarkeit von Texten angewendet. Dazu wird der FRE aus verschiedenen Faktoren berechnet. Unter anderem die oben genannten. Der Grad der Lesbarkeit wird mit einem Index ausgedrückt. Diesen Index kannst du sogar überprüfen lassen.
Gib hier deinen Text ein und du erhältst den Index: fleschindex.de/berechnen
Ein hilfreiches Buch zu dem Thema ist das Buch „Deutsch für junge Profis“ von Wolf Schneider. Lesenswert auch „Das Leben und das Schreiben“ von Stephen King. Wie, DER Stephen King? Der mit „The Shining“ oder „Carrie“? Genau. Dass ich Horrofilm-Fan bin kann ich nicht gerade sagen. Das Buch empfehle ich trotzdem gern.
Fehler 7
Zu wenig Kontrast der Website-Texte
Ungünstige Kontraste wirken sich besonders bei den Texten negativ auf die Lesbarkeit aus. Beispiel: Wenn die Farbe der Schrift auf deiner Website ein heller Grauton ist und der Text auf weißem Grund steht, dann ist der Kontrast zu gering. Besonders ältere Augen haben Schwierigkeiten, solche Texte zu lesen.
Genauso dramatisch sind bestimmte Farbkombinationen: gelbe Schrift auf rotem Grund. Hellblau auf Dunkelblau.
Egal, welche Zielgruppe du mit deiner Website ansprichst, ob junge Eltern oder Senioren: Du weißt nie, wie gut die Augen deiner Leser sind. Egal ob jung oder alt. Deshalb achte immer darauf, dass die Kontraste ausreichend sind. Du musst es deinen Leser ja nicht unnötig schwer machen. Auch wenn es megaschick aussieht… Kontraste und wie gut die Lesbarkeit ist, kann man übrigens gut mit entsprechenden Online-Tools checken.
Fehler 8
Zu viele unterschiedliche Farben
Die Übersicht und damit die Lesbarkeit wird verringert
Wie häufig hab ich das gesehen: Websites, die aussehen wie zugeklebte Litfasssäulen. Hier ein Bild, da eine Grafik, viele unterschiedliche Farben: knallbunt und überladen waren die Websites.
Die Elemente einer Website haben zwei Aufgaben:
- die Leser informieren und
- die Leser beim Lesen führen.
Form follows function: Die Inhalte sollten immer der Maßstab sein für die Gestaltung. Das betrifft Texte, Grafiken, Fotos, Farben, Schriften, Weißräume – alle Gestaltungsmerkmale einer Website. Farben: Wenig Akzentfarben sind sinnvoll. Farbliche Akzente helfen beim Lesen und strukturieren die Seite. Biete Abwechslung und mach mit sparsam und klug eingesetzten Akzentfarben das Lesen angenehmer.
Wenn du zu viel Bilder und Farben einsetzt, dann ermüdet das Auge schnell, der Leser ist in Nullkommanix von der Reizüberflutung übersättigt und hat wenig Lust, weiterzulesen. Außerdem führt zu viel Bunt schnell dazu, dass der Leser das Wesentliche aus den Augen verliert. Du möchtest ja, dass deine Leser deine Texte lesen. Dein Produkt kaufen. Zu viel unterschiedliche Farben lenken dabei ab. Manchmal ist weniger mehr…
Fehler 9
Fehlender Weißraum lässt deine Seiten unruhig wirken
Jeder kennt die Start-Seite von Google: Minimalistisch, pur, reduziert. Ein weißes, ziemlich leeres Feld. In der Mitte das Suchfeld, in das man sein Suchbegriff eingeben kann. Mehr nicht. Jeder weiß sofort, was er/sie dort auf der Seite machen soll: ein Suchbegriff eingeben. Nichts lenkt vom eigentlichen Inhalt ab. Keine Werbung links, keine nervigen Banner, keine Links.
Alle weiteren Produkte von Google findet man – unauffällig und nicht störend – in der oberen rechten Ecke. Die gesamte Seite wirkt sehr aufgeräumt und klar. Das ist kein Zufall. Der Besucher der Seite soll sich voll und ganz auf seine Suche konzentrieren. Nichts soll ihn ablenken. Kein Link soll ihn auf eine andere Seite locken. Und das Suchfeld ist in der Mitte des Viewports, damit der sofort beim Öffnen der Seite zu sehen ist.
Weißraum sorgt für Luft, Kontext, Ruhe, Fokussierung
Erklärung: Viewport ist der sichtbare Bereich innerhalb deines Browserfensters, den du siehst, ohne scrollen zu müssen. Natürlich werden deine Seiten nicht so weiß sein, so leer. Du möchtest ja Inhalte zeigen, deine Besucher sollen wissen, wie du helfen kannst, was du anbietest. Aber: Wenn du deine Seite zupflasterst wie ein Litfaßsäule, dann wissen deine Leser nicht, wo sie anfangen sollen.
Nichts gegen Litfaßsäulen. Ich finde, Herr Ernst Litfaß hatte damals eine tolle Idee mit seiner Säule. Sogar im Zeitalter des Internets ist eine Säule zum Anbringen von Nachrichten eine tolle Sache. Litfaßsäulen beleben Innenstädte. Nicht selten lese ich beim Warten auf eine S-Bahn an der Litfaßsäule und schau mir die Poster an.
Leider denken viele Websitebetreiber, dass ihre Website dieselbe Aufgabe hat wie ein Litfaßsäule. Ein Grafikelement, ein Banner, eine Foto, ein Textblock neben dem nächsten.
Was fehlt ist der Weißraum. Was ist Weißraum?
Weißraum bezeichnet den Raum zwischen den einzelnen Elementen einer grafischen Gestaltung. Also der Raum zwischen 2 oder mehreren Textblöcken, der Raum zwischen dem Menü und dem Text, der Raum zwischen Fotos und Textblöcken und so weiter.
Genauso gibt es Beziehungen zwischen Text-Bild, Bild-Rand etc. Der sogenannte Weißraum ist wichtig für die Wirkung von Text und Bild.
Weißraum bringt also zusätzliche Aussagen. Eine gute Lesbarkeit einer grafischen Oberfläche (die lesbare Fläche eine Webseite ist auch eine grafische Oberfläche) wird durch den Weißraum gefördert. Der Weißraum hat mehrere Aufgaben:
- Weißraum sorgt für Aufgeräumtheit,
- Weißraum führt den Blick der Leser
- Weißraum trennt die einzelnen Bereiche einer Webseite
- Weißraum sorgt dafür, dass sich das Auge beim Lesen immer wieder ausruhen kann
Mein Tipp also: Versuche, Weißraum in deine Seiten zu integrieren. Sei sparsam mit grafischen Elementen oder Fotos. Und gliedere Texte in einzelne Abschnitte. Auch so entsteht der wichtige Weißraum.
Konnte ich dir mit meinen Tipps helfen? Fallen dir weitere haarsträubende Textsünden auf Websites auf? Dann schreib hier im Kommentar.
Du bist unsicher, ob deine Website gut lesbar ist?
Im Website-Sprint analysieren wir gemeinsam eine Seite deiner Website und verbessern:
- Textstruktur
- Schrift und Layout
- Lesbarkeit und Nutzerführung
→ Website-Sprint ansehen
FAQ zu: Wie gestalte ich Website-Texte lesbar
von ConstanzeStraub | Dez. 1, 2020 | Allgemein, Anleitungen, WordPress
Eine Website bauen ist einfacher als du denkst.
Diese Tipps helfen dir, dein Business online zu stellen
Du möchtest deine Website selber machen.
Du weißt, dass du mit einer Website noch mehr Kunden gewinnt.
Noch mehr Reichweite aufbaust.
Super, eine gute Idee.
Wenn du noch grübelst: Das schaff ich nie, ich bin technisch unbegabt…
Vergiß deine Glaubenssätze.
Was ich vor 15 Jahren dachte:
Eine Website selber machen? Nie im Leben! Ist mir viel zu technisch…
In dieselbe Posaune pustete mein ehemaliger Chef aus der Werbeagentur. Er und sein Partner hatten die Agentur an den Nagel gehängt. Ich wurde arbeitslos und mein Chef hat in seiner Wohnung allein weitergemacht.
Tja, wohl eins der ersten Home-Offices.
Kurze Zeit später hab ich ihn nach seiner Website gefragt: „Ich brauch keine“, so seine Antwort.
Okay, dann brauch ich sowas auch nicht. Schließlich stand das Internet noch in den Kinderschuhen. So hab ich mich in meiner bequemen Verweigerungshaltung ausgeruht.
Aber irgendwie mussten Kunden her.
Also hab ich mich einige Zeit später bei einem VHS-Kurs angemeldet: HTML für Anfänger. Ich hab Sachen gelernt wie HTML und CSS und viele Buchstaben in spitzen Klammern. Alles böhmische Dörfer für mich, ich war genervt.
Wo ist das denn bitte schön kreativ?
Hartnäckig wie ich bin hab ich unzählige Fachbücher durchstöbert. Las auf schlauen Internetseiten (das Internet wurde mit mir nicht nur älter, sondern auch schlauer) und bald war sie online: meine 1. Website.
Grauenhaft. Aus heutiger Sicht.
Mach es einfacher als ich und bau spielerisch deine Website selber
Nie war es so einfach wie heute, eine eigene Website selber zu machen! Du brauchst keine HTML-Kenntnisse (wie ich damals), du musst nichts programmieren.
Heute gibt es solche Systeme wie WordPress.
Was ist WordPress?
Einfach gesagt ist WordPress ein Haufen von Dateien, in die nette Menschen Programmierzeilen geschrieben haben, damit andere nette Menschen ohne Programmierkenntnisse daraus eine eigene Website bauen können. Bei WordPress ist die Programmiersprache PHP.
PHP kann man lernen und es ist nicht soooo schwierig. Da das aber kaum jemand möchte, wurde das System so gebaut, dass du dich im System anmelden kannst, um dort deine Inhalte zu verbreiten (Texte, Bilder und Videos, deine Dateien eben).
Viel brauchst du nicht für deine eigene Website: Du brauchst vor allem ein PC (oder ein Notebook), ein Internetzugang und ein Provider bzw. Hoster. Ein Hoster ist die Firma, die die Dateien deiner Website auf einem Rechner (Server) speichert und veröffentlicht, also im Internet für alle erreichbar macht.
Dann brauchst du natürlich die Software WordPress, ein gutes Theme und ein Programm, mit dem du deine Dateien auf deinen Hoster hochladen kannst. Das ist alles.
Du bekommst jetzt Schweißperlen auf der Stirn? Immer mit der Ruhe – schließlich fährst du Auto, ohne zu wissen, wie du den Motor austauschen kannst… Lies weiter, ich erkläre alles Schritt für Schritt.
Die verdammte Angst vor der Technik – alles Mumpitz
Schritt 1
Hoster suchen
Am besten wählst du einen Hoster, der für WordPress geeignet ist. Denn nicht jeder bringt alle sinnvollen Voraussetzungen mit. Zu dem Thema gibt es reichlich Empfehlungen und unterschiedliche Meinungen, die ich in meinem Kurs und dem Workshop ausführlich erläutere. Ich mache es hier kurz:
Mein Hoster ist allinkl.
Viele Webautoren empfehlen allinkl wegen des super Preis-Leistung Verhältnis und dem kundenfreundlichen Support.
Schritt 2
Domain überlegen
Überlege dir eine sinnvolle Domain. Ob du deinen eigenen Namen nimmst oder einen Fantasienamen bleibt dir überlassen. Meine Grafikdesign-Seite heißt consenza-design. Manche Marketingexperten raten dazu, einen Kunstnamen zu wählen, andere wiederum dazu, den eigenen Namen zu nehmen.
Darauf kann ich an dieser Stelle nicht eingehen. Ist sicher Geschmacksache.
Update 2022: Heute würde ich auf jeden Fall den Eigennamen wählen.
Welche Domainendung?
Als Domainendung nehme ich grundsätzlich de. Natürlich ist auch com möglich, für de gibt es aber einige gute Gründe. Da ich in Deutschland lebe, werden wahrscheinlich die meisten davon ausgehen, dass ich eine de-Domain habe. Und eine Länderdomain ist vertrauenswürdiger als .net oder .info oder was auch immer.
Wenn du Müller oder Schröder heißt: Nimm auf keinen Fall eine Domain mit Umlauten. Also bitte mueller. Oder schroeder. Seit 2002 sind Umlaute zwar möglich – trotzdem sieht man sie selten. Nicht ohne Grund: Umlautdomains haben einige Nachteile – technische, psychologische und marketingstrategische Nachteile.
Okay, weiter:
Schritt 3
Datenbank, Subdomain und FTP-Zugang anlegen
Vorweg: allinkl bietet wie viele andere WordPress-Hoster die sogenannte 1-Klick-Installation von WordPress an. Das heißt: Die Installation funkioniert quasi automatisch. Meine Empfehlung: Mach die Installation manuell. Dann lernst du von Anfang an, wie alles läuft (später wirst du eh auf deine Dateien manuell zugreifen müssen). Du siehst, welche Dateien WordPress umfasst. Du weißt, was alles in deiner manuellen Installation enthalten ist. Es kann auch sein, dass du später mal die ein oder andere Datei öffnen musst. Dann hast du schon mal einen Blick dafür.
Weiter mit allinkl: einloggen. Leg dir hier eine Datenbank an, eine Subdomain und einen FTP-Zugang. Alle Daten (Benutzername, Passwörter, vom Provider vorgegebene Daten etc.) schön ordentlich aufschreiben. Und ich meine ORDENTLICH!
Wenn man beim Notieren der Daten schludert, verliert man schnell die Übersicht. Ergebnis: Frust.
Hab ich selbst erlebt. Aus meiner eigenen Erfahrung weiß ich: Wenn du hier nicht gewissenhaft bist, passieren schnell Fehler. Eher als dir lieb ist liest du deine schnellen Skizzen falsch ab und zack – eine Fehlermeldung. Dann kommt dieses doofe weiße Fenster von WordPress mit dem gefühlten Mittelfinger…
Oder alles war auf einem kleinen Zettel notiert. Der natürlich, kennt man ja, sich irgendwann selbständig macht.
Und unter das Sofa flattert… Das Geschrei ist groß…
Datenbank anlegen
Datenbank, uuuh, was ist das denn nun wieder…
Hier werden einfach gesagt alle Informationen gespeichert, also alles, was du in deiner WordPress-Website schreibst und tust. Ohne Datenbank kein WordPress.
Keine Sorge: Das Anlegen der Datenbank ist kinderleicht.
Die Datenbank befindet sich bei allinkl in der technischen Verwaltung. Im sogenannten KAS. Wie die Bezeichnungen bei anderen Hostern sind ist meist unterschiedlich. Manchmal muss man etwas suchen, dann könnte dieser Punkt im Bereich „Hosting“ oder „Webspace“ liegen. Einfach etwas schauen. Hast du den Link „Datenbank“ gefunden, gehst du einfach auf „Datenbank anlegen“ oder „neue Datenbank“ (je nach Hoster). Dort erhältst du meist vom Hoster den Datenbanknamen.
Das Passwort vergibst du selber. Speichern, fertig.
Datenbankname, Benutzername und Passwort gut notieren, das brauchst du nachher, wenn du Datenbank und WordPress verbindest (die eigentliche Installation von WordPress).
Und was ist nun eine Datenbank?
Stell dir eine Datenbank vor wie ein Regal voller Bücher. Und immer, wenn jemand eine deiner Seiten auf deiner Website besucht, greift er oder sie quasi ins Regal, holt sich ein Buch raus und liest darin…
Subdomain anlegen
Warum Subdomain?
Ich installiere mein WordPress immer auf eine Subdomain und leite dann später auf die richtige Domain weiter. Auf der Subdomain kann ich in Ruhe alles ausprobieren, ohne eine Baustellenseite vorzuschalten, was ich lästig finde.
Wie gesagt, das ist meine Vorgehensweise, du kannst es selbstverständlich auch mit einer Baustelle machen und direkt auf deiner richtigen Domain alles installieren. Besucher sehen dann nur eine Platzhalterseite. Was du an der Website machst, siehst hier nur du.
Was ist eine Subdomain?
Ein Subdomain ist ein zusätzliches Verzeichnis (Speicherplatz) auf deinem Webspace. Sie ist ein Teil der Domain, wird von Google aber als eigenständige URL betrachtet (darum sollte man bei einer Subdomain immer überlegen, ob sie aus SEO-Gründen sinnvoll ist). Eine eigenständige URL ist zum Beispiel sinnvoll, wenn ein Shop von der Website ausgegliedert werden soll.
Eine Subdomain erkennst du daran, dass vor der Domain (vor dem 1. Punkt von links gelesen) eine weitere Bezeichnung steht (die du frei wählen kannst).
Beispiele:
shop.meinedomain.de
angebot.meinedomain.de
kurs.meinedomain.de.
FTP-Zugang anlegen
Warum FTP-Zugang?
Einen FTP-Zugang brauchst du, um deine WordPress-Dateien auf deinen Webspace bei allinkl hochzuladen. Wie das Hochladen geht, erkläre ich in Schritt 4. Den FTP-Zugang richtest du ebenso wie Datenbank und Subdomain bei deinem Hoster ein. Das ist ebenso einfach wie das Anlegen einer Datenbank.
Diese Schritte sind deine Grundlagen für die WordPress-Installation. Sei hier bitte gewissenhaft und notiere alle Zugangsdaten, Benutzernamen, Passwörter usw. gut lesbar. Siehe oben.
Mein Tipp:
Leg dir ein Dokument an, meinetwegen Word oder Excel oder eine Google-Tabelle (kann ich sehr empfehlen). Und tipp hier all deine Daten rein. Dann hast du sie immer griffbereit und kannst per Copy & Paste deine Daten während des Installationsprozesses eingeben. So gibts kein Geschrei, wenn wegen eines blöden Tippfehlers irgendwas nicht klappt. Oder wenn sich der Notizzettel in Luft aufgelöst hat…
Schritt 4
FTP-Programm einrichten
Du brauchst ein Programm, mit dem du dich auf dein Webspace einloggst, damit du deine Daten hochladen kannst.
Es gibt verschiedene FTP-Programme. Gute sind FileZilla und Cyberduck. Ich nutze FileZilla. Den gibts kostenlos für Windows und Mac.
Wenn du das Programm auf deinem Rechner installiert hast, öffnest du das Programm. Unter >Datei >Servermanager öffnet sich ein Fenster – der Servermanager eben. Hier klickst du links auf >Neuer Server. Du legst also einen Server an. Im Feld rechts tippst du die Daten ein, die du von deinem Hoster erhalten hast bzw. dein Passwort, dass du wahrscheinlich selber erstellt hast.
Schritt 5
WordPress herunterladen und Dateien auf Webspace laden
Nun ist WordPress an der Reihe. Hol dir die aktuellste Version direkt von wordpress.org (hier die deutsche Seite). Bitte nicht WordPress.com, das ist eine andere Geschichte. Ist jetzt nicht wichtig, erwähn ich nur der Vollständigkeit halber.
Lad dir also dein WordPress runter.
Endpacke die gezippte Datei.
WordPress installieren ist wirklich einfach und auch für Einsteiger kein Problem. Ganz ehrlich: Das größte Problem ist immer die eigene Einstellung. Das häufigste Hindernis, etwas anzugehen, was wir nicht gewohnt sind, ist die eigene Angst vor etwas Neuem.
Kopfkino eben.
Ich weiß, wovon ich spreche: Jahrelang habe ich mich mit Blockaden herumgequält. Bis es eines Tages bei mir „Pling“ machte. Von einer Minute zu anderen wurde mir klar, dass ich die Blockade über Jahre selber aufgebaut hab. Aber das ist ein anderes Thema, wenn du Lust hast mehr zu lesen: Darüber schreibe ich bestimmt ein Artikel.
Nun öffnest du dein FTP-Programm und stellst die Verbindung zu deinem Hoster her (hier: allinkl). Oben links kannst du den Server auswählen, gehst auf „Verbinden“, nun siehst du im Fenster unten rechts das Ordnerverzeichnis von deinem Webspace. Nun machst du folgendes:
du wählst auf der rechten Seite des Fensters den Ordner aus, der den Namen deiner angelegten Subdomain hat
auf der linken Seite vom FileZilla-Fenster wählst du dein WordPress-Ordner aus, klickst ihn an, damit du die Dateien darin siehst, wählst alle Dateien darin aus und klickst „hochladen“ an (im Kontextmenü, das sich mit der rechten Maustaste öffnet). Achte darauf, dass du alle Dateien auswählst.
Die Dateien werden hochgeladen, das dauert jetzt ein paar Minuten, je nach Schnelligkeit deiner Internetverbindung.
Schritt 6
WordPress installieren
Die WordPress-Dateien sind hochgeladen. Damit ist WordPress aber noch nicht fertig installiert. Nun muss die Verbindung zur Datenbank hergestellt werden.
WordPress ist berühmt für seine einfache Installation. Denn du wirst Schritt für Schritt durch den Prozess geleitet. Alles, was du jetzt tun musst: stur deine Zugangsdaten eintragen, die du bei allinkl erhalten bzw. gewählt hast. Und wenn du keinen Tippfehler machst, sollte dies ganz einfach klappen.
gib den Namen deiner Subdomain im Browser ein (also z.B. test.majameier.de)
Hinter dem .de gib ein Schrägstrich ein (Slash: /), anschließend „admin“. Falls du den wordpress-Ordner direkt hochgeladen hast, ohne ihn zu öffnen, muss du noch „wordpress“ eintippen. Also „test.majameier.de/wordpress/admin.
es öffnet sich das selbsterklärende Fenster, in denen du deine Daten eingibst. Jetzt wird dir auch klar, warum ich dir empfohlen habe, alles fein säuberlich in einem Dokument zu notieren 😉
War alles erfolgreich, gratuliert dir WordPress und du kannst dich mit einem selbstgewählten Passwort einloggen.
Schritt 7
Theme installieren
Damit WordPress für dich anwendbar ist, brauchst du noch ein Theme. Ein Theme ist quasi Werkzeugkasten und schicke Vitrine in einem. Beides macht deine WordPressinstallation erst zu dem, was du später siehst: zu einer schicken und funktionsfähigen Website mit allem Zipp und Zapp.
Mein Tipp: Such dir ein Premium-Theme.
Der Nachteil: Es gibt tausende Themes. Wer die Wahl hat, hat die Qual. Die meisten gibt es kostenlos. Investiere ein paar Euro und nimm ein Premiumtheme. Diese kostenpflichtigen Themes werden regelmäßig gewartet und erhalten ständig Updates. Das ist wichtig, damit deine Website immer auf dem neuesten technischen Stand ist. Das betrifft vor allem die Sicherheit deiner Website.
Außerdem gibt es Themes mit einem sogenannten PageBuilder. Diese Builder erleichtern dir den Bau deiner Website erheblich, weil du auf der Oberfläche deiner Website arbeiten kannst. Du siehts also live während der Eingabe, was sich auf deiner Website ändert.
Klare Empfehlung: Das Thema Divi
Ich nutze das bekannte Theme Divi von Elegante Themes, ein bekannter US-amerikanischer Themehersteller. Das Theme ist technisch ausgereift und hervorragend, arbeitet mit allen wichtigen Plugins (Erweiterungen) zusammen und macht deine Website damit enorm leistungsfähig.
Aber das beste: Der Bau deiner Website wird damit zum Kinderspiel.
Fertige Layoutvorlagen bietet das Theme ausserdem, du kannst also sofort loslegen.
Ein Wort zum „sofort loslegen“: Der Aufbau einer Website erfordert schon einige Vorüberlegungen. Es ist sinnvoll, schon um sich nicht zu verzetteln, sich vor dem Bau einer Website ein Konzept zu machen. Das spart jede Menge Zeit und Nerven.
Ich spreche aus Erfahrung.
Schau hier. Lies meine Anleitung, wie du ganz unkompliziert ein Konzept für deine Website erstellst.
Wenn du bis hierhin gelesen hast, bist du schon ein ganzes Stück weiter. Hau rein und vergiss nicht:
Es gibt nix Gutes, ausser man tut es.
Falls du noch mehr Hilfe brauchst: Ich biete ein Workshop an, in dem ich mit dir zusammen WordPress und das Theme installiere. Außerdem bauen wir darin das Grundgerüst deiner Startseite. Schau hier:
