Aktualisiert: 8. Apr.
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:
Inspector Panel
Master Funktionen
Theme Manager
Layer Panel
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.