1. Startseite »
  2. Magazin »
  3. Anleitungen »
  4. Wix »
  5. So richtest Du ein Responsive Template ein

Wix: So richtest Du ein Responsive Template ein

Wix Header Wix Header Wix Header

Responsives Design ist aus der modernen Web-Programmierung nicht mehr wegzudenken. Immerhin werden ca. 50 Prozent aller Websites von mobilen Endgeräten wie Smartphones aus aufgerufen. Unter responsivem Design versteht man genau diese Optimierung der Darstellung einer Homepage: Responsive Websiten sind sowohl auf großen PC-Monitoren als auch auf kleinen Smartphone-Bildschirmen ähnlich nutzerfreundlich zu bedienen. Die Templates, also die Design-Vorlagen, die bei Homepage-Baukästen eingesetzt werden, sind heutzutage im Regelfall bereits von Haus aus responsiv.


Doch obwohl die responsiven Templates Deine Homepage im Regelfall automatisch an die Größe des jeweiligen Displays oder Monitors anpassen, muss manchmal auch selbst Hand angelegt werden. Dies kann zum Beispiel der Fall sein, wenn einzelne Wörter des Inhalts zu lange sind, so dass sie auf einem Smartphone entweder über den Displayrand hinausragen oder automatisch so positioniert werden, dass hässliche Lücken im Text entstehen und das Design stören. Die Darstellung Deiner Website auf Desktop-Monitoren und mobilen Bildschirmen sollte also immer überprüft und gegebenenfalls von Hand angepasst werden.


Der erste Teil der folgenden Anleitung zeigt Dir, wie Du generell ein Template bei Wix.com für Deine Website einrichtest. Der zweite Teil behandelt das Umschalten des Website-Editors (Bearbeitungsbereich) zwischen der Desktop-Ansicht und der mobilen Ansicht. In der mobilen Ansicht siehst Du, wie Deine Homepage auf einem Smartphone oder Tablet dargestellt wird. Hier kannst Du ebenso wie in der Desktop-Ansicht Anpassungen vornehmen.

Ist das mit Wix möglich?
Ja
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Einfach
Zeitaufwand
10 Minuten

Möchtest du allgemeine Informationen zum “Website erstellen” lesen?

Hier findest du einen Leitfaden zum Thema “Website erstellen” und einen Vergleich von Homepage Baukästen, mit dessen Hilfe du im Handumdrehen den passenden Anbieter für dein Website-Vorhaben finden kannst. Einen umfangreichen Testbericht zu Wix gibt es hier.

1 Ein Template auswählen und einrichten

Id 685 Bild 6 Id 685 Bild 6 Id 685 Bild 6

Nachdem Du Dich bei Wix.com eingeloggt hast, musst Du auf den Button mit dem „+“-Zeichen in der rechten oberen Ecke klicken. Dadurch wird eine neue Website angelegt. Dies führt Dich anschließend zum nächsten Schritt, in dem Du ein Template auswählen und einrichten kannst.

Achtung: Leider ist es bei Wix.com nicht möglich, bei einem Entwurf oder einer fertigen Website ein zuvor gewähltes Template auszutauschen. Falls Du also mit einer neuen Vorlage experimentieren möchtest, musst Du wie hier beschrieben eine neue Website einrichten.

Id 685 Bild 7 Id 685 Bild 7 Id 685 Bild 7

Nachdem Du das „+“-Symbol angeklickt hast, befindest Du Dich im Bereich „Homepage Vorlage wählen“, wo Du Dir ein Template aussuchst. Du kannst entweder die Vorlagen nach Branchen und Themen wie beispielsweise „Blog“ oder „Gesundheit und Wellness“, oder nach Beliebtheit oder Neuzugängen filtern. Auch eine Suchfunktion steht hier zur Verfügung.

Id 685 Bild 8 Id 685 Bild 8 Id 685 Bild 8

Sobald Deine Maus über eines der Templates fährt, erscheinen die Buttons „Bearbeiten“ und „Ansehen“. Wenn Du bei dem Template Deiner Wahl auf „Bearbeiten“ klickst, gelangst Du in den Bearbeitungsbereich des Homepage-Baukastens, dem Website-Editor. Hier kannst Du die Vorlage entsprechend Deinen Vorstellungen anpassen und damit eine individuelle Website gestalten.


2 Die Ansicht zwischen Desktop- und mobiler Ansicht umschalten

Id 685 Bild 1 Id 685 Bild 1 Id 685 Bild 1

Um zu prüfen, ob Deine Homepage auch auf mobilen Endgeräten korrekt dargestellt wird, wechselst Du einfach zwischen der Desktop- und der mobilen Ansicht. Hierzu klickst Du auf den Button links neben „Speichern“ in der rechten oberen Ecke des Editors. Je nachdem, welche Ansicht gerade gewählt ist, zeigt der Button ein Smartphone oder einen Desktop-Monitor an. Ist gerade die Desktop-Ansicht aktiv, dann wird hier das Smartphone angezeigt und umgekehrt.

Id 685 Bild 2 Id 685 Bild 2 Id 685 Bild 2

In dem sich nun öffnenden Fenster wählst Du die gewünschte Darstellungsart aus. So kannst Du auch ohne zu Deinem Smartphone greifen zu müssen aus dem Baukasten heraus Deine Homepage für alle Endgeräte optimieren.

Achtung: Änderungen in der mobilen Ansicht haben Auswirkungen auf die Desktop-Ansicht und umgekehrt.


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.