So kannst Du Deine Homepage bei 1&1 Ionos bearbeiten

1Und1 Header 1Und1 Header 1Und1 Header

Nachdem Du Deine 1&1 Ionos MyWebsite eingerichtet hast, willst Du sicherlich möglichst rasch damit beginnen, diese auch zu bearbeiten. Diese Anleitung macht Dich mit den wichtigsten Funktionen des 1&1 MyWebsite Editors, dem Homepage-Baukasten von 1&1 Ionos, vertraut. Ausgehend von Deinem ersten Besuch im Bearbeitungsbereich erklären wir Dir, wie Du auf Deiner Website Texte und Bilder einfügst, eine neue Seite erstellst oder eine Design-Vorlage auswählst.


Wenn Du Dich grundlegend mit der Funktionsweise des MyWebsite Editor auskennst, wird es sehr einfach für Dich, auch kompliziertere Spezialfunktionen wie beispielsweise Social Media Buttons, Anmeldeformulare oder einen Online-Shop in Deine 1&1-Website zu integrieren. Die jeweiligen Spezialanleitungen dafür findest Du ebenfalls bei uns.


Bei dieser Anleitung wird vorausgesetzt, dass Du bereits ein Nutzerkonto bei 1und1 hast und dass Du eine Website mit einer Design-Vorlage eingerichtet hast, die Du jetzt bearbeiten und gestalten kannst. Wie Du das machst, erfährst Du in der Anleitung „1und1 Ionos: So richtest Du eine Homepage ein

Aufwand im Überblick:
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Einfach
Zeitaufwand
ab 30 Minuten

1 Anmelden und in den MyWebsite-Editor gehen

Id 516 Bild 21 Id 516 Bild 21 Id 516 Bild 21

Gehe in den 1&1 MyWebsite-Editor, um Deine Website zu bearbeiten. Dazu musst Du Dich mit Deinen Zugangsdaten im 1&1 Ionos Control Center anmelden und – falls er nicht bereits ausgewählt sein sollte – den Vertrag markieren, dessen Homepage Du bearbeiten möchtest. Ist dies geschehen, kannst Du in der linken Seitenleiste den Link „1&1 MyWebsite“ innerhalb der Rubrik „Meine Produkte“ anklicken. Daraufhin öffnet sich die Seite „Ihre 1&1 MyWebsite verwalten und bearbeiten“. Von hier gelangst Du mit einem Klick auf den Button „1&1 MyWebsite bearbeiten“ in den MyWebsite-Editor. Hier kannst Du Deine Website gestalten und bearbeiten.


2 Die „Under Construction“-Seite und der Startassistent

Beim erstmaligen Start findest Du im MyWebsite-Editor ein vorinstalliertes Layout vor, das zu Deiner Branche passt und bereits einige Seiten sowie passende Platzhalter-Fotos und Texte enthält. Die Branche und damit die Layout-Vorlage hast Du bereits bei der Einrichtung Deiner Website gewählt. Für unser Beispiel haben wir die Branche „Spedition“ ausgesucht. Wie Du das Layout änderst, erfährst Du in Punkt 5. „Die Layout-Vorlage“ austauschen. Bei Deinen ersten Schritten im MyWebsite-Editor wirst Du zunächst von zwei Dingen begrüßt:

Id 516 Bild 30 Id 516 Bild 30 Id 516 Bild 30

Zum einen erscheint eine Meldung, dass Du gleich zu Beginn die Möglichkeit hast, Deine „Under Construction“-Seite zu individualisieren. Die Under-Construction-Seite wurde beim Einrichten Deiner Homepage automatisch angelegt. Sie informiert die Besucher Deiner Website darüber, dass hier zurzeit an einer neuen Internetpräsenz gearbeitet wird. Du kannst auf dieser Platzhalter-Seite bestimmte Informationen anzeigen lassen, zum Beispiel Deine Telefonnummer oder eine Nachricht, wann Deine Homepage in etwa online gehen wird. Dies geschieht ganz einfach, indem Du die Schieberegler bei den entsprechenden Optionen an- bzw. wieder ausschaltest. Die entsprechenden Angaben dazu hast Du bereits beim Einrichten Deiner Homepage gemacht.

Id 516 Bild 2 Id 516 Bild 2 Id 516 Bild 2

Zum anderen macht Dich am Anfang eine Meldung auf den Startassistenten in der rechten Seitenleiste aufmerksam. Falls Du das erste Mal mit dem MyWebsite-Editor arbeitest, empfiehlt es sich, den Startassistenten aufzurufen. Du findest dort umfangreiche Audio- und Video-Anleitungen, die Dir den Einstieg in die Arbeit mit dem Editor erleichtern.


3 Dein Logo einfügen

Id 516 Bild 4 Id 516 Bild 4 Id 516 Bild 4

Das Logo und das Titelbild sind zentrale Elemente der meisten Homepages. Im oberen Bereich, nahe der Navigationsleiste, findest Du die Bearbeitungsmöglichkeit für Dein Logo. Fahre mit der Maus über das Logo-Symbol und klicke anschließend auf „Logo bearbeiten“. In dem sich nun öffnenden Fenster kannst Du Dein eigenes Logo von Deinem PC hochladen, indem Du auf das Kästchen mit dem +-Zeichen und der Beschriftung „Hinzufügen“ klickst. Direkt unterhalb der Schaltfläche „Hinzufügen“ findest Du das Eingabefeld für den Alternativtext. Fülle es unbedingt aus.

Id 516 Bild 5 Neu Id 516 Bild 5 Neu Id 516 Bild 5 Neu

Falls Du noch kein eigenes Logo besitzen solltest, kannst Du in diesem Fenster entweder den 1&1 Logo Service in Anspruch nehmen (rechte Spalte) oder den Schiebeschalter von „Bild“ auf „Text“ umstellen (oben). Außerdem kannst du hier Feinheiten wie die Ausrichtung und Abstände Deines Logos steuern.

Hinweis: Zu jedem Bild und jedem Logo auf einer Website sollte ein Alternativtext beigefügt werden. Dies hat mehrere Gründe: 1) Suchmaschinen können mit Bildern nur wenig anfangen. Wer mit Alternativtexten arbeitet, macht es Suchmaschinen einfacher und erhöht seine Chancen, gefunden zu werden. 2) Alternativtexte tragen wesentlich dazu bei, eine Website – speziell für Blinde – barrierefrei zu gestalten. 3) Werden Bilder aus irgendeinem Grund auf der Website nicht geöffnet, dient der Alternativtext als Ersatz. Alternativtexte können somit entscheidend dazu beitragen, dass eine Website in den Suchergebnissen bei Google & Co besser abschneidet.


4 Das Titelbild anpassen

Direkt unterhalb der Navigation und des Logos findest Du das Titelbild. Wenn Du mit der Maus darüberfährst, erscheint der Schriftzug „Kopfbereich bearbeiten“. Wenn Du hier darauf klickst, öffnet sich der nebenstehend abgebildete Bearbeitungsbereich. Du kannst hier eigene Bilder über die Schaltfläche „Hinzufügen“ hochladen oder bereits vorhandene Bilder mit einem Klick auf das kleine „X“ in der unteren rechten Ecke des jeweiligen Bildes löschen.


Außerdem kannst Du festlegen, ob der Kopfbereich auf allen Seiten Deiner Homepage angezeigt werden soll, oder nur auf der, die Du gerade bearbeitest. Weiterhin stehen Dir hier und in dem Bereich „Erweitert“ diverse Schieberegler zur Verfügung, mit denen Du beispielsweise die Größe oder Schärfe der Bilder steuern kannst. Vergiss bei Bildern den Alternativtext nicht. Die Schaltflächen „Erweitert“ und „Alternativtext“ findest Du ganz links direkt unter „Titelbild anpassen“.

Id 516 Bild 19 Id 516 Bild 19 Id 516 Bild 19

Bisher haben wir uns die Registerkarte „Titelbild“ näher angeschaut. Falls Du keine Titelbilder verwenden möchtest, kannst Du hier, wie beim Logo auch, auf reinen Text umstellen, indem Du auf die Registerkarte „Titel“ gleich daneben klickst.


5 Farben, Schriften und Hintergrund

Id 516 Bild 16 Id 516 Bild 16 Id 516 Bild 16

Als nächstes wenden wir uns dem Bereich „Style“ zu, wo Du unter anderem die Farben, die Schriftarten und den Hintergrund Deiner Website festlegen kannst. Klicke in der rechten Seitenleiste auf „Style“ (Nummer 1), sodass sich das Einstellungsfenster öffnet. Dieses ist in drei Registerkarten aufgeteilt: „Farben“, „Schriften“ und „Hintergrund“. Standardmäßig ist „Farben“ vorselektiert. (Nummer 2). Klicke auf „Anpassen“ unterhalb der empfohlenen Farbsets, um hier Einstellungen vorzunehmen.

In diesem Bereich siehst Du auch, warum wir zuerst das Logo und Titelbild eingefügt haben. Denn die Einstellung „Farben“ bietet Dir ein „Intelligentes Farbset“, basierend auf den Farben Deines Logos und Deines Titelbildes (Nummer 3). Mit einem einfachen Klick auf dieses Farbset passen sich die Farben der verschiedenen Bereiche Deiner Layout-Vorlage an.

Id 516 Bild 1 Id 516 Bild 1 Id 516 Bild 1

Unter der Registerkarte „Schriften“ sind alle Einstellungsmöglichkeiten versammelt, mit denen Du die Schriftarten und -größen im Fließtext und in den Überschriften steuern kannst. Wähle hierzu einfach „Anpassen“ unterhalb des von Dir gewählten Schrifttyps.

Id 516 Bild 3 Id 516 Bild 3 Id 516 Bild 3

Die Registerkarte „Hintergrund“ ermöglicht es Dir, ein Hintergrundbild hochzuladen und festzulegen oder andere Arten der Hintergrundgestaltung wie Farbverläufe oder Muster auszuwählen.


6 Die Layout-Vorlage austauschen

Id 516 Bild 6 Id 516 Bild 6 Id 516 Bild 6

Bisher verwendest Du das Layout, das automatisch zu Deiner Branche passend vorinstalliert war. Um es gegen eine Layout-Vorlage Deiner Wahl auszutauschen, klickst Du zuerst auf „Layout“ in der rechten Seitenleiste.

Id 516 Bild 11 Id 516 Bild 11 Id 516 Bild 11

Es öffnet sich in Fenster, in dem Du unterschiedlichste Layout-Vorlagen findest. Hier blätterst Du mit den Pfeilen links und rechts an den Seitenkanten vor und zurück (Nummer 1). Außerdem kannst Du den Suchfilter (Nummer 2) verwenden, um Deine Suche beispielsweise nach Layouts mit horizontaler oder vertikaler Navigation einzugrenzen. Um ein Layout für Deine Homepage zu verwenden, fährst Du mit der Maus einfach über die Vorschau der entsprechenden Vorlage und klickst auf „Auswählen“.


7 Neue Seiten anlegen, die Navigation verwalten

Id 516 Bild 7 Id 516 Bild 7 Id 516 Bild 7

Widmen wir uns nun den Seiten und mit ihnen dem Navigationsmenü Deiner Homepage. Klicke zunächst auf „Seiten verwalten“ in der rechten Seitenleiste.

Id 516 Bild 8 Id 516 Bild 8 Id 516 Bild 8

Es erscheint eine Übersicht, in deren linker Spalte Du all die Seiten findest, die standardmäßig bei der Einrichtung angelegt wurden. Um beim Beispiel unseres voreingestellten Speditions-Layouts zu bleiben, sind dies die Seiten „Startseite“, „Kontakt“, „Anfahrt“ und „Impressum“. Du kannst zum einen die Benennung dieser Seiten ändern, indem Du auf den Seitennamen klickst und diesen dann löschst und durch eine eigene ersetzt.

Zum anderen kannst Du auch die Reihenfolge der Seiten ändern, indem Du sie mit gedrückt gehaltener Maustaste an eine andere Position innerhalb der Liste ziehst. Die Liste entspricht dabei den Einträgen und der Reihenfolge in Deinem Navigationsmenü. Indem Du die Seitenstruktur anlegst, bestimmst Du also grundsätzlich auch das Navigationsmenü. Neue Seiten fügst Du hinzu, indem Du auf die blaue Schaltfläche „Seite hinzufügen“ unterhalb der Liste klickst und einen der Vorschläge aus der rechten Spalte mit gedrückt gehaltener Maustaste in die Liste ziehst. Dadurch wird automatisch diese Seite Deiner Homepage hinzugefügt und ein dazugehöriger Eintrag in der Navigation erstellt.

Id 516 Bild 9 Id 516 Bild 9 Id 516 Bild 9

Wenn Du durch einen Klick auf einen der Einträge eine Seite ausgewählt hast, kannst Du in der rechten Spalte diese Seite bearbeiten. Du kannst zum Beispiel festlegen, ob sie eine Seitenspalte besitzen oder in der Navigation ausgeblendet werden soll. Auch einen Passwortschutz kannst Du hier aktivieren oder die Seite komplett wieder löschen.


8 Text, Bilder und andere Elemente hinzufügen

Das Einfügen neuer Inhalts-Elemente ist eines der wichtigsten Funktionen in einem Homepage-Baukasten. Damit lassen sich bestehende Design-Vorlagen ganz entsprechend Deinen Vorstellungen gestalten.

Id 516 Bild 15 Id 516 Bild 15 Id 516 Bild 15

Zum Einfügen eines Inhalts-Elements klickst Du hierzu zunächst auf „Elemente einfügen“ in der rechten Seitenleiste (Nummer 1). In dem neuen Fenster erscheint zunächst die Rubrik „Grundlagen“, in der Du die wichtigsten allgemeinen Elemente wie Elemente für Text, Bilder oder für einen Button vorfindest (Nummer 2). Gehe einfach mit der Maus auf das Element Deiner Wahl und ziehe es an die Stelle auf Deiner Website, wo Du den Inhalt einfügen möchtest.

Sobald Du ein Element Deiner Seite hinzugefügt hast, kannst Du es mit Inhalten füllen, verschieben oder seine Größe ändern. Während Du in ein Text-Element relativ einfach Deinen Text hineinschreiben kannst, benötigst Du ein Bild-Element um Bilder auf Deine Website hochzuladen und zu positionieren. Zur Suche von weiteren Elementen scrollst Du einfach in diesem Bereich nach unten, sodass sich nach und nach die anderen Rubriken öffnen. Falls Du schon genau weißt, welches Element Du wo findest, kannst Du auch gleich die entsprechende Rubrik in der Liste (Nummer 3) anklicken.


9 Texte bearbeiten

Id 516 Bild 14 Id 516 Bild 14 Id 516 Bild 14

Wenn Du mit der Maus über ein Textfeld in Deiner Homepage fährst, wird es hervorgehoben und ein kleiner grauer Balken mit den am häufigsten verwendeten Bearbeitungsmöglichkeiten erscheint. Wenn Du diesen anklickst, öffnet sich ein Kontextmenü, in dem Du aus den Einträgen „Bearbeiten“, „Duplizieren“ und „Löschen“ wählen kannst. Mit „Nach oben“ beziehungsweise „Nach unten“ verschiebst Du das Element vor oder hinter die Nachbarelemente.

Id 516 Bild 18 Id 516 Bild 18 Id 516 Bild 18

Doppel-Klickst Du hingegen direkt in das Textfeld, so kannst Du den Text komplett durch einen eigenen ersetzen oder einzelne Passagen überarbeiten. Dazu öffnet sich eine Menüleiste mit verschiedenen Gestaltungsmöglichkeiten am oberen Rand des Editors. Speichere nach der Bearbeitung Deine Änderungen mit einem Klick auf den „Speichern“-Button ganz oben rechts in der Ecke des Editors.


Der Autor
Ferenc Nagy Magazin Ferenc Nagy Magazin Ferenc Nagy Magazin
Ferenc Nagy
Ich arbeite seit 2012 als Web Designer und Freier Autor. Zu meinen Arbeiten als Freier Autor mit Schwerpunkt IT zählen unter anderem die Aktualisierung und Überarbeitung der 13. Auflage von "Internet für Dummies" sowie diverse Fachartikel und Ratgeber für CHIP Online. Als Web Designer betreue ich in erster Linie Künstler, Blogger, Start Ups und gemeinnützige Vereine.