Als Wix Partner wurden wir im März 2020 zur Betaphase eines neuen, vielversprechenden Editors aus dem Hause Wix eingeladen. Zusätzlich zum klassischen Wix-Editor, mit dem wir schon seit vielen Jahren Websites für unsere Kunden erstellen, gibt es mit dem Editor X nun ein weiteres WYSIWYG-Tool („what you see is what you get“) um eine professionelle Homepage zu erstellen.
In diesem Blogartikel möchten wir Ihnen ein paar interessante Features von Editor X und unsere persönlichen Erfahrungen damit näherbringen. Auf unserer Seite www.wixpert.design sehen Sie den Editor X und seine Power in Action!
Und eines vorweg: Die bequeme Drag-and-Drop-Funktion wird auch im Editor X beibehalten. So wird die Brücke zwischen Website Coding und Website Design nach wie vor hervorragend geschlagen.
100 % Responsiveness (endlich!)
Das Thema Responsiveness wird im klassischen Wix Editor noch etwas stiefmütterlich behandelt. Ja, zwar sind alle Wix Websites voll sichtbar und funktionsfähig auf Desktops, Tablets sowie Smartphones. Der Content ist auf Handywebsites entsprechend kleiner dargestellt und frei anordenbar. Auch die Textgröße auf Handywebsites kann im klassischen Wix Editor auf die kleinere Handy-Bildschirmgröße angepasst werden. Um eine Website nicht zu überladen, können beliebige Elemente auf der Handyversion auch einfach ausgeblendet werden.
Der neue Editor X hat hier allerdings wesentlich mehr zu bieten: Der gesamte Content (Bilder, Videos, Texte usw.) kann für jede beliebige Bildschirmgröße (auch pixelgenau!) adaptiert werden. Die Textgröße kann optional in eine Textgrößen-Bandbreite formatiert werden. Will heißen: Auf dem Desktop hat der Text zum Beispiel eine Größe von 30 px, auf dem iPad Pro 28 px, auf dem iPad 25 px, auf dem iPad mini 22 px, auf dem iPhone 18 px. Diese Bandbreite wird einmal eingestellt und die Textgröße wird automatisch an die entsprechende Bildschirmgröße angepasst.
Design per Breakpoint
Editor X ermöglicht es, jeden Breakpoint unterschiedlich zu designen. Ein Breakpoint definiert die Größe eines Bildschirms. Die Klassiker sind Desktop, Tablet und Smartphone. Doch auch andere Bildschirmgrößen können pixelgenau gelayoutet werden. Dies ermöglicht ein Maximum an Flexibilität und Responsiveness.
In der Praxis heißt das zum Beispiel: Ein wichtiger Button ist auf der Desktop-Version rot, auf dem Tablet grün, auf dem Smartphone gelb. Im klassischen Wix Editor können Elemente in der Handyversion verkleinert/vergrößert und versteckt werden. Will heißen: Möchte ich etwas nur am Handy anzeigen, habe ich mit dem klassischen Wix Editor ein Problem. Mit Editor X kann ich Elemente beliebig designen, einfärben, anzeigen oder verstecken, egal welcher Breakpoint bzw. welche Bildschirmgröße.
Docking
Was auf den ersten Blick wie ein Breakdance-Move klingt, ist eine weitere äußerst praktische Funktion im Editor X - das Docking. Im klassischen Wix Editor können Elemente an Bildschirmecken fixiert („angepinnt“) werden.
Das Docking im Editor X geht in eine ähnliche Richtung und ermöglicht es Elemente an anderen Elementen (oder auch am Bildschirmrand) anhand von prozentuellem Abstand oder Pixel-Abstand auszurichten. Natürlich wird auch jeder Breakpoint, also jede Bildschirmgröße, hier mitgenommen. Dies ermöglicht ein rundum harmonisches Website-Erlebnis auf jeder erdenklichen Bildschirmgröße. Wie praktisch!
Fokus auf Bildteile
Editor X erlaubt das Definieren bestimmter Teile eines Bildes oder Videos, die immer sichtbar sein müssen. Denken Sie an ein Werbefoto mit einem Model, das eine Armbanduhr trägt. Die Website bewirbt diese Armbanduhr. Natürlich ist diese Uhr in den seltensten Fällen exakt zentriert im Bild. Wenn das Foto gezoomt wird oder auf kleineren Bildschirmen lediglich ein bestimmter Ausschnitt zu sehen sein soll, können Sie über den Editor X definieren, welche Stelle des Bildes ganz konkret immer zu sehen sein muss. So ist die gewünschte Armbanduhr immer im Fokus des Betrachters und wandert nicht aus der Bildfläche hinaus. Ein sehr cleveres Feature!
Fixed, fluent oder sticky?
Sämtliche Elemente können in Editor X als fixiert, fließend („fluent“) oder „sticky“ gestaltet werden. Dies beschreibt das Verhalten eines Elements beim Scrollen auf der Seite. Soll ein bestimmtes Foto an einer bestimmten Stelle fixiert werden oder soll es quasi mit dem Scrollen mitfließen? Wenn es mitfließen soll, wie soll es mitfließen? Bis zum Ende oder nur bis zu einer bestimmten Stelle? Hier eröffnen sich uns als Wix Website Designer tolle neue Möglichkeiten das Website-Erlebnis für den User entsprechend zu optimieren.
Auf unserer Seite wixpert.design sehen Sie den Astronauten mit einem „sticky“ Scroll-Effekt:
CSS Grids
CSS ist natürlich kein neuer Begriff im Webdesign-Kosmos. Jedoch ist er neu im Wix-Kosmos. Editor X ermöglicht es mit CSS Grids zu arbeiten, also eine Gestaltungsfläche in eine Tabelle mit Spalten und Zeilen einzuteilen um so für noch mehr Flexibilität und Modularität im Design zu sorgen. Das kommt auch den unterschiedlichen Bildschirmgrößen bzw. Breakpoints zugute. Wieder ein Punkt für 100 % Responsiveness.
Die Kinderkrankheiten
Wie so vieles "Neue" in der IT-Welt, hat auch Editor X mit einigen Kinderkrankheiten zu kämpfen. Einige wenige Features funktionieren im Live-Modus noch nicht 100%ig wie erwartet bzw. wie es eigentlich sein sollte.
Ein weiteres Minus: einige Funktionen, die man aus dem klassischen Wix-Umfeld kennt, sind in Editor X noch nicht integriert. Vor allem beim Thema Mehrsprachigkeit ist das ein großes Manko. Nur mit extra Zeit- und Kostenaufwand ist es aktuell möglich (Stand: 24. April 2021) eine Website in mehreren Sprachen zu erstellen.
Das Wix Developer Team arbeite jedoch "auf Hochtouren" um diese Kinderkrankheiten und fehlende Features entsprechend in Editor X zu integrieren. Und auch wenn die Performance noch nicht 100%ig ausgereift ist und einige Dinge noch technischer Nachbesserung bedürfen, ist der Editor X ein sehr starkes Tool um grandiose Websites zu erstellen.
Natürlich bietet Editor X noch viele weitere bahnbrechende Features. In diesem Blogartikel haben Sie jedoch die Features kennengelernt, die wir ganz besonders toll finden.
Lust auf eine Website mit Editor X? Buchen Sie hier Ihr kostenloses Erstgespräch um Ihr Website-Projekt zu starten: