Freiräume nutzen

Im Zuge unserer doch sehr umfangreichen Umgestaltung des Seitenmanagers habe ich Vorlagen gestaltet, die man zukünftig beim Anlegen einer neuen Seite auswählen kann. Es wird dann keine leere Seite angelegt sondern eine Seite mit Blindtext, Bildern aus unserem Archiv und mehr. Du musst diese Inhalte dann einfach nur überschreiben und sparst eine Menge Arbeit. Dabei habe ich schmerzhaft eine Möglichkeit vermisst, größere Abstände zwischen einzelnen Elementen anzulegen. Aus diesem Grund habe ich mich mit meinem Team zusammengesetzt und über den schon lange geplanten "Abstands-Content" diskutiert. Nun ist es ja so, dass ein Inhaltselement, welches im Grunde aus keinem Inhalt sondern aus leerem Raum besteht nur eine einzige Option hat: Wie hoch ist dieses Element bzw. wie groß soll der Abstand werden. Ich habe dann einen Dialog mit Vorschau vorbereitet und der Option, in dieser Vorschau mit der Maus den Abstand durch Verschieben einzustellen und dann meinen Mitarbeitern freie Hand gegeben, dass kurzfristig umzusetzen.

Herausgekommen ist dann allerdings was ganz anderes. Der erste Content bzw. das erste Abschnittselement ohne Dialog. Mein Team wusste, dass ich am liebsten page4 so umbauen möchte, dass man einfache Dinge direkt auf der Seite editieren kann ohne einen Dialog aufrufen zu müssen. Da der Abstand ein sehr einfaches Element ist, hat mein Chefentwickler sich entschlossen, diesen Content zu nehmen und die Basis von page4 gleichzeitig so zu erweitern, dass wir zukünftig mehr solcher Funktionen einbauen können. Das bedeutet nicht, dass wir neue Inhalte ohne Dialog bauen wollen sondern dass wir bestehende Inhalte jetzt ganz einfach um Funktionen erweitern können, die man direkt auf der Seite ausführt. Es kommen also spannende Zeiten auf uns zu.

Im ersten Schritt werden wir allerdings nur zwei solcher Optionen vorstellen. Damit ihr schon mal Appetit auf mehr bekommt...

Der neue Abstands-Content

Der Abstands-Content macht nur eins: Er schafft Freiräume auf deiner Seite und hilft dir dabei, den Raum zur Gestaltung zu nutzen. Unten siehst du so einen Abstand im Admin-Modus. Wenn du ganz genau hinsiehst entdeckst du einen ganz leicht grauen Kasten zwischen dem Bild oben und der Überschrift unten. In der Besucheransicht ist dieser Bereich natürlich durchsichtig.

Wenn du nun die Maus über den Bereich bewegst erscheint die übliche Bearbeitungsleiste wie bei anderen Contents bzw. Abschnittsbereichen aber es fehlt der Stift zum Bearbeiten und es fehlen die Optionen.

 Den Stift brauchst du nicht. Am unteren Rand siehst du einen blauen Balken und in der Mitte sind zwei Pfeile und eine Pixelangabe. Sobald du mit der Maus über diesen Balken gehst ändert sich der Cursor und du kannst den Balken anfassen und nach oben oder unten verschieben. Beim Verschieben wird die Zahl ständig angepasst. Die Zahl sagt dir, wie hoch der Abstandscontent ist bzw. wie viel Freiraum du schaffst. Der minimale Abstand beträgt 20 px. Dann ist der Content so hoch wie der blaue Balken. Der maximale Abstand kann 500 px betragen. Dass ist schon eine ganze Menge Freiraum. Selbstverständlich kannst du das Abstandselement löschen, kopieren und verschieben und mit dem Pluszeichen jederzeit weitere Abstände hinzufügen.

Das Zahnrad für die Optionen brauchst du nicht. In den Optionen kannst du bei jedem anderen Content ja einstellen, wie viel Abstand vom Inhalt zum Rand sein soll, ob es einen Rahmen geben soll und eine Hintergrundfarbe. All diese Optionen machen bei einem Content, der nur Freiraum schaffen soll, keinerlei Sinn.

Sobald du den blauen Balken bewegst und dann die Maus nicht mehr gedrückt hältst wird der Content gespeichert. Bei jeder Speicherung wird oben am Browserrand kurz eine Meldung eingeblendet.

Nutze den Abstands-Content um "Ruhezonen" für deine Besucher zu schaffen. Wenn du Räume nutzt, um Inhalte zu trennen sorge dafür, dass die Räume einheitlich hoch sind. Du kannst natürlich beliebig viele Abstandselemente untereinander platzieren. Und natürlich auch in Spalten, in den Sidebars oder im Footer 1 einbauen.

Die neue Funktion im Streifen-Content

Wie oben in der Einleitung beschrieben haben wir die Basis von page4 erweitert und sind nun in der Lage, zusätzliche Funktionen zur Verfügung zu stellen. Für den Streifen-Content haben wir das bereits gemacht. Zum einen, weil der Content eine ähnliche Funktion wie der Abstands-Content hat - man kann eine bestimmte Höhe des Streifens angeben - und zum anderen um die neue Basisfunktion gleich einmal zu testen. Wir finden, der Test ist gelungen. Urteilt selbst.

Wenn du einen Streifen-Content anlegst kannst du diesen weiter wie bisher bearbeiten. Es hat sich nichts verändert. Du kannst die Höhe weiter im Dialog eintragen. Soabld der Content auf der Seite angelegt ist und du mit der Maus über den Content fährst siehst du allerdings den Unterschied zu früher. Es erscheint jetzt wie beim Abstands-Content unten ein blauer Balken und zeigt dir an, wie hoch dein Streifen ist.

Natürlich ist es nicht nur eine Anzeige. Du kannst jetzt den Balken anfassen und direkt auf der Webseite mit der Maus die Höhe vom Streifen einstellen. Das ist viel schöner und besser als den Dialog zu nutzen. Denn du siehst sofort auf der Seite, bei welcher Höhe der Streifen besonders gut zur Geltung kommt. Auch hier werden alle Veränderungen sofort gespeichert. Und wenn du den Dialog öffnest, dann sind dort natürlich die neuen Werte der Höhe eingetragen. Beim Streifen-Content gibt es auch weiterhin das Zahnrad für die Optionen. Mit den neuen Optionen fügen wir neue Funktionen hinzu ohne die bisherige Bedienung zu ändern.

Wir brauchen eure Ideen...

Schreibt uns doch einfach hier im Blog welche Funktionen euch besonders freuen würden. Welche Inhaltselemente möchtet ihr direkt auf der Seite editieren oder anpassen? Berücksichtigt bitte, dass ein Dialog Platz für vielfältige Einstellungen bietet während das Bearbeiten von Inhalten direkt auf der Seite vor allem schnell gehen soll. Geplant ist, dass wir ermöglichen, dass man Bilder mit der Maus direkt auf der Seite größer oder kleiner machen kann. Und dass man einfach in eine Überschrift klickt, um diese dann direkt auf der Seite zu verändern. Je mehr Ideen von euch kommen umso besser können wir page4 machen. Also traut euch ruhig. Wir werden dann sehen, welche Anregungen sich umsetzen lassen.

Schöne Grüße vom ganzen Team

Manfred F. Schreyer

page4 Ltd.