1. Startseite »
  2. Magazin »
  3. Anleitungen »
  4. Wix »
  5. So nutzt Du die Mobile-Ansicht (Editor)

Wix: So nutzt Du die Mobile-Ansicht (Editor)

Wix Header Wix Header Wix Header

Heutzutage nutzen immer mehr Menschen ihre mobilen Endgeräte (Smartphones wie iPhones oder ähnliches), um in Internet zu surfen. Laut Statista nutzten bereits im Jahr 2014 rund 55 Prozent der Deutschen das Internet mobil – der Trend nimmt weiter zu. Das hat natürlich auch Auswirkungen auf das Design von Websites. Denn das Nutzerverhalten eines Internetnutzers auf einem mobilen Endgerät weicht ab von den Gewohnheiten eines Internetnutzers am Desktop-PC. Das ist vor allem der Größe des Bildschirmes geschuldet.


Doch was bedeutet das für Website-Betreiber? Wenn sie mithalten wollen mit diesem Trend und dem mobilen Nutzer das Surfen so angenehm wie möglich machen wollen, dann sollten sie ihre Websites „responsive“ (englisch für „reagierend“) gestalten. Das heißt, der Aufbau und das Aussehen sollten sich dem Endgerät des Nutzers anpassen oder anders gesagt: Dieselbe Website sieht auf dem Desktop-PC anders aus als auf einem Smartphone oder einem Tablet. Mit was für einem Endgerät der Nutzer surft, das erkennt die Website im Hintergrund von alleine.


Eine Website so zu bauen, dass sie „responsive“ ist, obliegt in der Regel professionellen Webdesignern. Doch fast alle guten Homepage-Baukästen bieten mittlerweile responsive Designs kostenfrei an.       


Auch bei Wix ist es möglich, eine Website zu gestalten, die sich dem Endgerät des Nutzers anpasst – ganz ohne Vorkenntnisse im Webdesign. Und das Beste: Man kann sich sogar im Bearbeitungsmodus (also im sogenannten „Editor“) während der Gestaltung seiner Seite anschauen, wie die mobile Website aussieht. Das geht über die Funktion „mobile Ansicht“. Wie Du diese nutzt, das erfährst Du in diesem Artikel.  

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

Hinweis: Die mobile Ansicht einer Wix-Website erscheint nur auf Smartphones. Auf Tablets und iPads wird die Desktop-Website angezeigt.

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 Registrierung bei Wix

Id 722 01 Registrieren Id 722 01 Registrieren Id 722 01 Registrieren

Wenn Du Dich bereits bei Wix registriert und eine Website eingerichtet hast, dann kannst Du diesen ersten Schritt überspringen. Falls nicht: So geht die Registrierung bei Wix: Gehe auf www.wix.com und klicke auf den „Anmelde“-Button in der Ecke rechts oben. Es öffnet sich ein neues Anmelde-Fenster. Klicke hier auf den Link „Registrieren“. Du brauchst nur Deine E-Mailadresse einzugeben, ein geeignetes und sicheres Passwort zu wählen und dann auf „Registrieren“ klicken.

Hinweis: Es ist auch möglich, sich über einen Facebook- oder Google-Account bei Wix zu registrieren. Das setzt natürlich voraus, dass Du Dich bereits bei einer diesen Diensten angemeldet hast.


2 Website erstellen

Id 722 02 Willkommen Id 722 02 Willkommen Id 722 02 Willkommen

Nach Deiner erfolgreichen Registrierung bei Wix öffnet sich ein Fenster mit einem blauen Button in der Mitte namens „Website erstellen“. Per Klick kommst Du in den Bereich, wo Du Dir zunächst eine Homepage-Vorlage auswählen musst. Du hast hier unterschiedliche Kategorien zur Auswahl, wie zum Beispiel Fotografie, Musik, Design etc.

Id 722 03 Designvorlagen Id 722 03 Designvorlagen Id 722 03 Designvorlagen

Rechts neben der Auswahl-Spalte siehst du mehrere Kacheln. Das sind die Design-Vorlagen. Wenn Du mit der Maus über eine solche Vorlage fährst, hast Du die Möglichkeit auf den Button „Bearbeiten“ oder „Ansehen“ zu klicken.  Wähle Dir eine Vorlage aus und klicke auf „Bearbeiten“.

Hinweis: Keine Sorge, falls Du Dir nicht ganz sicher bist mit Deiner Auswahl: Du hast auch hinterher jeder Zeit die Möglichkeit, das Design wieder zu ändern, solltest Du es Dir doch wieder anders überlegen.  


3 Bearbeitungsmodus

Id 722 04 Bearbeitungsmodus Id 722 04 Bearbeitungsmodus Id 722 04 Bearbeitungsmodus

Nach der Auswahl der Designvorlage befindest Du Dich nun im Editor (sozusagen der Bearbeitungsmodus). Hier kannst Du jetzt Deine Website so gestalten, wie sie Dir am besten gefällt. Du kannst das in der normalen Ansicht tun (Desktop-PC), die voreingestellt ist, aber auch in der mobilen Ansicht.

Id 722 05 Smartphone Symbol Id 722 05 Smartphone Symbol Id 722 05 Smartphone Symbol

Dafür musst Du in der Navigationszeile ganz oben auf das „Smartphone“-Symbol klicken.


4 Editor-Ansicht wechseln

Id 722 06 Ansichtswechsel Id 722 06 Ansichtswechsel Id 722 06 Ansichtswechsel

Per Klick auf das Smartphone-Symbol öffnet sich ein Feld, wo Du die Möglichkeit hast, zwischen der Editor-Ansicht zu wechseln. Die Desktop-Ansicht ist in der Regel voreingestellt. In diesem Feld kannst Du auch die mobile Version Deiner Website deaktivieren. In diesem Fall würde deine Website auf dem mobilen Endgerät so aussehen, wie auf dem Desktop-PC.

Achtung: Das Deaktivieren der mobil-optimierten Ansicht kann das Interesse und die Zufriedenheit deiner mobilen Webseitenbesucher schmälern. Da auch Google mittlerweile responsive Websites in der Google-Suche bevorzugt behandelt, könnte die Deaktivierung dieser Funktion auch den Besucherzahlen Deiner Website schaden.


5 Mobile Ansicht

Id 722 07 Mobile Ansicht Id 722 07 Mobile Ansicht Id 722 07 Mobile Ansicht

Sobald Du in dem geöffneten Feld auf den Link „Mobile Ansicht“ klickst, öffnet sich Deine Website in einem virtuellen iPhone. Jetzt siehst Du sozusagen eins zu eins, wie Deine Website auf dem Smartphone aussieht, und kannst dennoch weiter an der Website Veränderungen vornehmen. Wenn Du zufrieden mit dem Ergebnis bist (nutze hierfür die Vorschau-Möglichkeit über den „Vorschau“-Button), klickst Du auf den „Speichern“-Button oben recht in der Navigations-Zeile.

Achtung: Die Desktop-Website und die Mobile-Website sind nicht zwei getrennte Websites sondern nur verschiedene Ansichten. Wenn Du also Änderungen an der Desktop-Website vornimmst, werden diese Deine Mobile-Website beeinflussen und andersrum.


Der Autor
Soeren Theussig Soeren Theussig Soeren Theussig
Sören Theussig
Ich arbeite seit 2012 als (fester und freier) Online- und Social-Media-Redakteur und verfasse Artikel über innovative Technologien und Web-Trends.