Editor X - Die wichtigsten Funktionen in 5 Minuten erklärt

Hallo und herzlich Willkommen zu meinem neuen Blogartikel!

Heute schreibe ich über einige unscheinbare, jedoch trotzdem unheimlich wichtige Funktionen, die es bei dem Editor X von WIX gibt und wie du damit deine Website noch um einiges mehr verbessern und perfektionieren kannst.

Diese Funktionen sind besonders wichtig und daher werde ich sie heute mit dir durchgehen und dir näher bringen. Um diese Funktionen geht es:

1. Inspector Panel

2. Master Funktionen

3. Theme Manager

4. Layer Panel

5. WIX App Market

Ich werde auf jeden Punkt genau eingehen, da diese ausschlaggebend für eine richtig aufgebaute und funktionierende Website sind.

Deshalb lass uns gleich starten und die erste Funktion entdecken!

Das Inspector Panel - Die Übersicht über alles!

Über dieses Panel kannst du alles steuern, was mit deinem Element zu tun hat.

An oberster Stelle siehst du, in welchem Element du dich gerade befindest und kannst gegebenenfalls ein anderes Element wie beispielsweise die Section selbst auswählen.

Direkt darunter findest du die verschiedensten Ausrichtungsmöglichkeiten für das Element, welches du ausgewählt hast. Ich habe dir hier eine genaue Auflistung der Ausrichtungsmöglichkeiten erstellt, aus welchen du wählen kannst.

• Align to left (Linksbündig)

• Align to Center (Mittig angeordnet)

• Align to right (rechtsbündig)

• Align to top (oben angeordnet)

• Align to Middle (zentriert)

• Align to Bottom (unten angeordnet)

• Distribute horizontally (waagrecht verteilt)

• Distribute vertically (vertikal verteilt)

Nun kannst du spezifischer auf dein Element eingehen, denn nun geht es an die direkten Einstellungen deines Elements.

Wenn du nun an der Höhe oder Breite etwas verändern möchtest, kannst du dies im Inspector Panel tun. Dabei kannst du aus verschiedenen Einheiten auswählen. Die optimale Einheit variiert je nach Element. Hier findest du nun die Auflistung der verschiedenen Einheiten:

Percentage (%)

Wählst du beispielsweise 80% Width, so hat dein Element immer 80% der gesamten Bildschirmbreite zur Verfügung. Wählst du nur 20%, so hat dein Element eben nur 20% Bildschirmbreite zur Verfügung. Die Prozent sind eine Fluid Unit und können auch nur mit der Fluid Funktion verwendet werden.

Pixel (px)

Wählst du Pixel als deine Einheit, bleibt das Element immer in der gleichen Größe, egal wie groß oder klein der Bildschirm wird.

Viewport Height (vh)

Setzt du die Viewport Height eines Elements auf 100 vh , stellst du sicher, dass das Element immer die volle Höhe deiner Viewports (also deiner Bildschirmhöhe) nutzt. 1 vh ist soviel wie 1% der Viewport Height.

Viewport Width (vw)

Die Viewport Width basiert auf dem gleichen Prinzip wie die Viewport Height, nur das es hierbei um die Breite anstatt der Höhe geht.

Fix oder Min/Max

Des Weiteren kannst du bei deinem Element auch eine fixe Höhe und Breite einstellen, was bedeutet, dass dein Element immer die gleiche Größe hat, unabhängig von der Bildschirmgröße.

Oder du sagst den Element, es soll eine Minimum oder Maximum Höhe oder Breite haben.Dies sagt deinem Element, dass es zumindest oder maximal diese Maße haben soll. Du lässt dem Element jedoch trotzdem die Freiheit, sich im Rahmen dieser Einstellung weiter anzupassen.

Fixed und Fluid - Wo ist da der Unterschied?

Nicht zu vergessen und auch essenziell für die korrekte Funktionsweise der Website ist die Auswahl zwischen Fixed und Fluid. Fixed sorgt dafür, dass das Element immer an der selben Stelle in der gleichen Größe bleibt, während Fluid dem Element ermöglicht, sich zu bewegen und anzupassen.

Bei Bildern kannst du zusätzlich noch "Scale proportionally" auswählen, bei welchem die Höhe und Breite des Elements in einem gewissen Rahmen bleibt, wenn die Größe angepasst wird.

Die Position - Wo kommt was hin?

Im Bereich Position kannst du die Position deines Elements noch genauer justieren und genau an deine Bedürfnisse anpassen. Auch hier hast du verschiedene Varianten, dein Element zu platzieren und so einzustellen, dass es sich verhält wie du es möchtest.

Docking - Wo hält sich das Element fest?

Mit Docking kannst du dem Element genau vorgeben, wo in deiner Section es sich festhalten soll. Dockst du es beispielsweise am oberen Rand deiner Section an und stellst einen Abstand von 15% ein, so wird dein Element immer einen Abstand von 15% beibehalten. Somit rutscht das Element nicht nach oben, nutzt jedoch den Platz nach unten mehr aus.

Den genauen Abstand kannst du hierbei mit Margin einstellen.

Auch hier hast du wieder die Qual der Wahl. Sollen es Prozent oder Pixel sein?

Mit dem Padding kannst du beispielweise deiner Section noch einen weiteren Platzhalter hinzufügen, wenn du den Abstand zum Section-Rand noch weiter vergößern möchtest.

Im Anschluss findest du nun noch ein Bild des kompletten Inspector Panels, exakt so wie es im Editor X aussieht:

Master Functions - Einer für Alles

Auf WIX kannst du drei verschiedene Arten von Master einstellen:

• Header

• Footer

• Section

Header und Footer sind auf einer Website immer ein Master. Jedoch kann man auch eine Section zu einem Master ernennen.

Ein Master wird auf jeder Unterseite deiner Website angezeigt.

Ein sehr wichtiger Punkt hierbei ist auch folgendes:

Änderst du bei einem Element in deinem Master etwas, so wirkt sich dies auch auf alle anderen Unterseiten aus, die sich auf deiner Website befinden.

Ein kleines Beispiel:

Änderst du auf der Seite "Home" etwas im Footer, so wird dir dies auch auf der Seite "Über Mich" angezeigt.

Die Hierarchie deiner Elemente spielt hierbei eine wichtige Rolle. Das Layout deiner Elemente bleibt immer gleich, jedoch kannst du es auf den verschiedenen Breakpoints abändern. Beachte dabei die Cascading Rule, die wie folgt lautet:

Ändere ich auf Desktop im Footer etwas, wirkt sich das auch auf Tablet und Mobil aus.

Ändere ich auf Tablet etwas, wirkt sich das auf Mobil aus, auf Desktop aber nicht.

Ändere ich Mobil etwas, wirkt sich das weder auf Desktop noch Tablet aus.

Es ist jedoch auch kein Problem, wenn du nicht möchtest, dass der Footer auf jeder Seite angezeigt wird, denn du kannst auch auswählen, auf welchen Seiten du ihn angezeigt haben möchtest. Die Einstellung dazu findest du, indem du auf die 3 Punkte neben dem Footer klickst und danach auf "Show on..." klickst . Es wird dir eine Übersicht aller deiner Unterseiten gezeigt und nun kannst du auswählen, auf welchen Unterseiten du deinen Header oder Footer anzeigen möchtest.

Hier siehst du ein Bild des Master Panels im Editor X. In diesem werden dir alle Master, welche du auf dieser Seite erstellt und zugewiesen hast, angezeigt.

Der Theme Manager - Strukturierung deines Designs vor dem Start

Im Theme Manager kannst du dir bereits vor dem Beginn des Aufbaus deiner Website einige Dinge einstellen, welche dir nachher im Verlauf deiner Arbeit das Leben um einiges erleichtern.

Zur Auswahl stehen hier Typography und Colors.

Bei Typography kannst du die Schrift genau so einstellen wie du es möchtest.

Egal ob es sich hierbei um die Schriftgröße, Schriftfarbe oder ähnliches handelt. Oder soll die Schrift vielleicht Bold und Kursiv sein? Oder doch lieber unterstrichen? Alles kein Problem, hier kannst du es einstellen.

Bei Colors ist es genau das gleiche Prinzip. Du kannst dir bereits im Vorhinein festlegen, welche Farben du auf deiner Website verwenden möchtest und hast danach keine Probleme, jedes Mal aufs Neue die richtige Farbe zu finden!

Das Layer Panel - Alles auf einem Fleck

Kennst du es? Ein Element auf deiner Seite löst scheinbar einen Fehler aus, weil es zu lang ist und über den Rand deiner Seite hinaus geht, du siehst aber auf den ersten Blick den Fehler nicht. Das Layer Panel kann dir dabei helfen, den Fehler aufzuspüren und auch zu beheben.

Im Layer Panel findest du jede einzelne Section und jedes Element, welches sich auf dieser Seite befindet. Du kannst die Elemente Section für Section durchgehen und dabei nachschauen, ob sich der Fehler eventuell bei einem dieser Elemente befindet. Sollte der Fehler bei deinem ausgewählten Element nicht behoben sein kannst du einfach zum nächsten Element gehen.

Der WIX App Market - Auswahl ohne Ende

Im WIX App Market findest du verschiedene Plug-Ins, welche du auf deiner Website einbauen und die Performance verbessern kannst. Im Anschluss findest du eine Übersicht des WIX App Market Interfaces.

Um mehr über verschiedene Plug-Ins von WIX zu erfahren sieh dir doch meinen anderen Blogartikel an! In diesem Artikel gehe ich näher darauf ein, welche WIX Plug-Ins ich besonders hervorheben möchte und erkläre dir diese auch noch genauer!

Hier gehts zum Blogartikel --> https://www.rocketwm.com/post/wix-plug-ins-unsere-top-10

Mein Fazit

Editor X ist eine hervorragendes Tool, um seine Website aufzubauen und zu gestalten. Die verschiedenen Funktionen helfen dabei, die Seite funktional top aufzubauen und lässt sie dabei auch noch fantastisch aussehen.

Die Funktionselemente helfen dabei, die Übersichtlichkeit der Website zu gewährleisten und man kann seine Website haargenau nach den eigenen Bedürfnissen anpassen.

Ich kann jedem empfehlen, den Editor X von WIX zu nutzen, da es einfach um einiges übersichtlicher ist und man viel angenehmer damit arbeiten kann als mit anderen Plattformen, die ich bereits kennen gelernt habe.

Stöbere doch mal durch unsere anderen Blogartikel. Wir behandeln verschiedene Themen und ich bin mir sicher, dass auch einige Themen dabei sind, die auch dich interessieren könnten.

Weitere unserer Blogartikel findest du auf unserer Website in der Kategorie Blog!