Die eigene Homepage mit page4

 

Neue Benutzeroberfläche bei den Dialogen ab Mai 2014

Mit dem neuen Update im Mai 2014 wurden sämtliche Dialoge, die beim Anlegen von neuen Inhalten verwendet werden, überarbeitet. Das bisherige Karteikartensystem wurde durch völlig neue Dialoge ersetzt. Da das Update extrem umfangreich ist, haben wir nachfolgend eine ausführliche Beschreibung der wichtigsten Veränderungen vorbereitet, die Dir helfen sollen, möglichst schnell die neuen Funktionen zu nutzen. Auf wenn es im ersten Eindruck natürlich völlig neu aussieht ist die Bedienung unserer Ansicht nach noch einfacher geworden und wir haben die Weichen gestellt, um schneller neue Funktionen einbauen zu können. Viel Spaß damit.

Dialoge bis Mai 2014 mit Karteikarten

Der hier gezeigte Dialog, um Texte und Texte mit Bildern anzulegen, hatte bisher drei Karteikarten. Die erste Karteikarte diente dazu, den Text anzulegen, auf der zweiten Karteikarte waren alle Optionen, um ein Bild einzubinden und die dritte Karteikarte war das sogenannte "Designpanel", welches jeder Dialog hatte und womit man den Hintergrund eines Abschnittes sowie die Umrandung und die Abstände einstellen konnte.

 

In den neuen Dialogen ist das nun komplett anders aufgebaut. Aus den bisherigen Karteikarten werden Abschnitte, die untereinander angelegt sind. Ein Teil der Abschnitte kann man auf- und zuklappen. Die "Hauptoptionen" sind immer aufgeklappt. Durch das Aufklappen wird der Dialog natürlich höher und man kann dann sehr einfach und schnell zu den einzelnen Optionen scrollen und hat alles gut im Blick. Vor allem ist es möglich, die Bedien-Elemente größer und überschaubarer zu gestalten, da mehr Platz zur Verfügung steht. Außerdem lassen sich die meisten Einstellungen nun auch auf einem Tablet viel leichter bedienen, auch wenn weiterhin bestimmte Optionen auf einem Touchscreen nicht möglich sind. Die nachfolgenden Bilder zeigen sehr deutlich die alte und die neue Benutzeroberfläche.

 

Das Designpanel ist in den Dialogen nicht mehr vorhanden, sondern wird direkt über die Toolbar aufgerufen.

 

Dazu gibt es ein neues Tool, ein Zahnrad:

  

Klickt man auf das Zahnrad, öffnet sich ein neuer Dialog, mit dem man genau die Einstellungen vornehmen kann, die vorher auf der jeweiligen Karteikarte des Abschnitts vorgenommen wurden. Auch diese Einstellungen werden von den globalen Designeinstellungen weiterhin vorgegeben und können manuell überschrieben werden.

Karteikarte Texteingabe bis Mai 2014

Karteikarte Bild anheften bis Mai 2014

Karteikarte Design-Einstellungen bis Mai 2014

Neuer Dialog Texteditor mit Bild ab Mai 2014 komplett aufgeklappt

Neuer Dialog Designeinstellungen ab Mai 2014 direkt über die Toolbar aufzurufen (Zahnrad)

Neue Version vom Texteditor Tiny MCE

Wie unschwer zu erkennen ist, hat sich das Aussehen der Bedien-Elemente vom Text-Editor ebenfalls geändert. Wir haben mit dem Update Mai 2014 eine aktuelle Version vom Tiny MCE eingebunden, die weiterhin die gleichen Optionen bietet, aber eine neue Oberfläche hat und etwas anders aufgebaut ist. Die Möglichkeit, über ein Icon direkt Text in den Editor zu kopieren, haben wir ausgeblendet, da diese Funktion leider nur mit dem Internet-Explorer funktioniert hat und daher alle User, die andere Browser verwenden, immer wieder nachgefragt haben, warum diese Möglichkeit nicht funktioniert.

Alte Version vom Tiny MCE bis Mai 2014 (Premiumversion)

Neue Version vom Tiny MCE ab Mai 2014 (kostenlose Version)

Teilweise neue Vorschauen bei den Dialogen

Bei den alten Dialogen gab es eine feste Größe unabhängig davon, wie viel Einstellungen für den jeweiligen Content-Typ vorgesehen waren. Der nachfolgende Dialog zum Anlegen einer Überschrift macht das deutlich. Mit den neuen Dialogen haben wir angefangen, den möglichen Platz sinnvoll zu nutzen und die ersten Vorschauen eingebaut, so dass man schon beim Erstellen der Inhalte live sehen kann, welche Auswirkungen bestimmte Einstellungen haben. Am Beispiel des Überschriften-Contents sieht man dass sehr gut. Im neuen Dialog gibt es jetzt eine Vorschau, so dass man sofort sieht, wie die Formatierung der 4 möglichen Überschriften-Vorlagen aussieht. Zusätzlich haben wir das Eingabefeld erweitert, so dass man jetzt viel leichter mehrzeilige Überschriften anlegen kann.

Alter Überschriften-Abschnitt bis Mai 2014

Neuer Überschriften-Abschnitt ab Mai 2014 mit Vorschau und mehrzeiliger Eingabe

Zusätzliches Icon bei der Bildauswahl

Bisher war es so, dass man beim Klicken auf das Ordnersymbol zur Bildauswahl in die Bildverwaltung gelangt ist und dort dann zwei Optionen hatte. Entweder man wählte ein Bild aus dem vorhandenen Archiv aus oder man klickte auf einen Button, um ein Bild von der Festplatte hochzuladen. Nachdem man das Bild hochgeladen hatte, erschien es ausgewählt in der Verwaltung und konnte dann übernommen werden.

Jetzt gibt es ein zusätzliches Icon, ein blaues Symbol mit einen Pfeil. Klickt man auf den Ordner, kommt man in die neu gestaltete Bildverwaltung und kann dort ein Bild auswählen. Die Möglichkeit, von dort aus ein Bild hochzuladen, gibt es nicht mehr. Dazu dient nun das neue Symbol. Möchte man ein Bild von der eigenen Festplatte hochladen, klickt man auf das blaue Symbol und erhält sofort den Dialog zum Hochladen eines Bildes. Das geht schneller und einfacher als wie bisher über die Bildverwaltung.

Das rote Kreuz, um ein Bild aus dem Content zu entfernen wurde lediglich durch einen Papierkorb ersetzt, hat aber weiterhin die gleiche Funktion.

Die neue Bildverwaltung wird weiter unter noch vorgestellt.

Alte Bildauswahl bis Mai 2014 mit zwei Icons

Neue Bildauswahl ab Mai 2014 mit drei Icons

Der Videocontent (Externes Video) enthält jetzt Links zu den Portalen

Im alten Content waren lediglich 4 Portal angezeigt, obwohl wir inzwischen viel mehr Portale unterstützen. Im neuen Content sind nun alle Portale, die unterstützt werden, als Icons aufgelistet. Mit einem Klick kommt man zum entsprechenden Portal, um ein Video auszuzwählen.

Der (X)HTML-Abschnitt ist nun mit einer eindeutigen ID-Nummer versehen

Aus Sicherheitsgründen wird HTML-Code im Admin-Modus nicht angezeigt. Statt dessen blenden wir einen Infotext ein, der Dir zeigt, dass der HTML-Abschnitt nicht leer ist. Wenn Du viele HMTL-Codes auf einer Seite eingebaut hast, ist es sehr schwierig, zu wissen, welcher Inhalt hinter welchem Abschnitt liegt, da alle Abschnitte im Admin-Modus gleich aussehen. Die neuen ID-Nummern werden auch beim Bearbeiten angezeigt (oberhalb des Inhaltes). Wenn Du also zum Beispiel den Code mit der ID 294 bearbeitest, sieht Du auf einen Blick, wo dieser Code genau platziert ist. Das erleichtert die Fehlersuche und Bearbeitung der Abschnitte ungemein.

Die Bildauswahl bei Galerien ist komplett überarbeitet und neu

Auch bei der Bildauswahl für Galerie und Diashow hat man jetzt die direkte Auswahl aus dem Bildarchiv oder das direkte Hochladen von der eigenen Festplatte. Während man bisher die Reihenfolge der Bilder mühsam mit Pfeiltasten Schritt für Schritt verändern musste, kann man dass ab sofort ganz einfach mit der Maus und drag&drop machen. Außerdem werden alle Bilder in einer Vorschau angezeigt, so dass man nicht mehr den Bildnamen anklicken muss, um eine Vorschau zu erhalten. Klickt man auf die Vorschau, öffnet sich nun ein Dialog, um eine Bildbeschreibung einzugeben. Der Dialog erweitert sich automatisch nach unten, wenn man mehr Bilder hochlädt, als in eine Reihe angezeigt werden können. Mit einem Klick auf das rote Kreuz können eingebundene Bilder gelöscht werden. Da durch das Löschen lediglich die Verknüpfung mit der Galerie entfernt wird und das Bild weiterhin im Archiv verbleibt, erfolgt keine Abfrage beim Entfernen eines Bildes aus der Galerie.

Die Nummerierung der Bilder zeigt die Reihenfolge an, mit der die Bilder auf der Webseite angezeigt werden. Verschiebt man ein Bild in diesem Dialog an eine andere Position, wird neu durchnummeriert. Durch die Vorschau kann man so in sekundenschnelle bestimmen, welche Bildfolge angezeigt werden soll. Diese Bidauswahl ist für alle Galerien identisch.

Alte Diashow mit Bildauswahl bis Mai 2014

Neue Diashow mit Bildauswahl ab Mai 2014

RSS-Feed jetzt mit Live-Vorschau

Bisher musste man jedesmal speichern und den Dialog verlassen, um zu sehen, was der ausgewählte RSS-Feed anzeigt und wie die Gestaltung aussieht. Mit dem neuen RSS-Feed siehst Du sofort live im Bearbeitungsdialog, was der gewählte Feed anzeigt und Änderungen an Farbe und Schrift wird sofort live angezeigt.

Der neue RSS-Feed (komplett aufgeklappt) mit Live-Vorschau

Der Tabellen-Content wurde optisch verbessert und technisch überarbeitet

Das Erstellen und Bearbeiten einer Tabelle ist nun sowohl optisch als auch in der Bedienung stärker an eine Tabellenkalkulation angelehnt. Die Zeilen sind nun nummeriert und die Spalten mit Buchstaben versehen. Ein Klick auf die Nummer wählt alle Spalten in der entsprechenden Zeile aus. Ein Klick ein einen Buchstaben alle Zeilen in der entsprechenden Spalte. Die gesamte Tabelle wird ausgewählt, indem man links oben in das Feld klickt, welches Spalten und Zeilen miteinander verbindet.

Es können beliebig viele Zeilen und Spalten angelegt werden. Ab einer bestimmten Anzahl zeigt der Dialog Scrollbalken an und man muss diese benutzen, um die Zellen bearbeiten zu können. Passt die Tabelle aufgrund der Inhalte allerdings nicht mehr auf die Seite, wird die Tabelle am rechten Rand der Webseite abgeschnitten bzw. ausgeblendet. Das ist notwendig, um zu verhindern, dass zu große Elemente das Design kaputt machen.

Alte Tabelle bis Mai 2014

Neue Tabelle ab Mai 2014 optisch an eine Tabellenkalkulation angepasst

Sitemap jetzt auch mit alphabetischer Anzeige der Seiten

So oft wird man eine Übersicht (Sitemap) seiner Seiten sicher nicht anlegen. Trotzdem haben wir diesen Content überarbeitet und bieten Dir ab sofort die Möglichkeit, Deine Seiten auch in alphabetischer Reihenfolge anstatt als Baum anzeigen zu lassen.

Ein komplett neues Kontaktformular erlaubt nun beliebige Felder

Bisher konnte man nur aus einer bestimmten, festgelegten Anzahl von Feldern auswählen und diese auch nicht verändern. Pflichtfelder waren gar nicht möglich. Wir haben lange nach einer vernünftigen, einfachen Bedienung gesucht, um mehr zu ermöglichen. Mit den neuen Dialogen und der Erfahrung, die wir mit der Spaltenfunktion für page4 gesammelt haben, ist ein komplett neues Kontaktformular entstanden, welches auf der einen Seite weiterhin sehr leicht zu bedienen ist und auf der anderen Seite extrem viele Möglichkeiten bietet. Aber schaut selbst und probiert es einfach mal aus.

Altes Kontaktformular bis Mai 2014

Neues Kontaktformular ab 2014 mit vielen neuen Möglichkeiten

Bedienung des neuen Kontaktformulars

Während bei den oben gezeigten Veränderungen die neue Bedienung ziemlich deutlich durch die Bilder erkennbar ist, möchten wir Dir hier das Kontaktformular etwas genauer erklären.

 

Optionen: Hier stellst Du ein, wie breit das Formular sein soll, welchen Abstand die einzelnen Elemente haben sollen und wo Du gerne das Label positionieren möchtest. Standardmäßig ist das Label links angeordnet und die Felder rechts davon, so wie das auf dem Bild oben in der Vorschau im Bereich "Felder" zu sehen ist. Du kannst das Label natürlich auch gerne rechts, oben oder unten platzieren. Dadurch sind unterschiedlich gestaltete Formulare möglich. Zusätzlich kannst Du angeben, wie viel Platz das Label von der Gesamtbreite einnehmen soll. Passt der Text vom Label nicht in diese Breite, wird ein Zeilenumbruch durchgeführt, sofern dass möglich ist.

 

Neben diesen Optionen kannst Du noch die gesamte Schrift für das Formular einstellen. Und zwar die Schriftart, die Schriftgröße und die Schriftfarbe. Für die Eingabefelder kannst Du eine eigene Schriftfarbe wählen und natürlich den Hintergrund der Felder farbig anpassen.

 

Unter Allgemein hinterlegst Du eine Emailadresse, an die die Nachricht verschickt werden soll. Die Spracheinstellung sorgt dafür, dass die Meldungen zum Formular in der jeweiligen Sprache angezeigt werden.

 

Der wichtigste Bereich, um Dein Kontaktformular zu gestalten ist der Bereich Felder. Du siehst dort eine Vorschau Deines Formulars. Die Vorschau wird in Originalgröße angezeigt und Du kannst Formulare anlegen, die max. 800 px breit sind. Ist das Formular breiter als die Seite, auf der es angelegt wurde, wird das Formular vom Design abgeschnitten. Wenn Du eine Kaufversion hast, kennst Du sicher die Möglichkeit, Spalten anzulegen. Die Bedienung beim Kontaktformular ist ähnlich. Wenn Du mit der Maus über ein Element fährst, wird es von einer gestrichelten Linie umrandet und eine Toolbar erscheint rechts oberhalb des Elementes. Mit dieser Toolbar kannst Du das Element bearbeiten, es löschen oder ein neues Element hinzufügen.

Bedien-Elemente des neuen Kontaktformulars

Neue Felder anlegen

Wenn Du ein neues Element anlegst, erscheint ein neuer Dialog mit einer Vielzahl an Möglichkeiten. Hier ein kurzer Überblick über die Möglichkeiten, ein neues Element anzulegen.

 

1) Du kannst aus verschiedenen Typen wählen und jederzeit den Typ ändern. Überschrift: Hiermit kannst Du formatierten Text innerhalb des Formulares platzieren. Linie: Du kannst einzelne Bereich durch Linien aufteilen und strukturieren. Texteingabe: Es können beliebig viele Felder angelegt werden, in denen der Besucher Text eingeben kann. Über die Angabe der Reihen (5) entscheidest Du, ob es ein einzeiliges oder mehrzeiliges Textfeld werden soll. Einzelauswahl: Du kannst Comboboxen, auch Aufklappmenü genannt anlegen mit beliebig vielen Einträgen. Ebenso sind beliebig viele Radiobuttons möglich. Beide Elemente haben gemeinsam, dass man immer nur genau einen Eintrag auswählen kann. Kontrollkästchen: Auch Checkboxen genannt. Du kannst beliebig viele Kontrollkästen anlegen. Der Besucher kann beliebig vieler der vorhandenen Kontrollkästchen markieren.

 

2) Im Feld Bezeichnung wird die Label-Beschriftung eingetragen. Dieses Feld ist nur vorhanden, wenn ein Label möglich ist. Wie breit das Label sein soll, stellst Du direkt im Hauptdialog oben ein.

 

3) Defaulttext: Du kannst Deinen Besuchern die Eingabe erleichtern, indem Du in Textfeldern einen Hinweistext hinterlegst, der verschwindet, sobald der Besucher eigenen Text einträgt. Dieser Hinweistext wird immer aufgehellt dargestellt, so dass klar zu erkennen ist, dass es ein Hilfetext ist.

 

4) Pflichtfeld: Alle Felder, die so markiert sind, müssen ausgefüllt werden, damit das Formular verschickt werden kann. Optisch wird hinter dem Label ein Stern platziert. Werden Pflichtfelder nicht ausgefüllt, erscheint eine Warnmeldung beim Versenden und die nicht ausgefüllten Felder werden markiert dargestellt.

 

5) Reihen: Wie schon erwähnt, bestimmst Du damit, wie viele Zeilen ein Textfeld haben soll. Du kannst also jederzeit aus einem einzeiligen Textfeld eine mehrzeilige Textbox machen. Mit gerade mal einem Klick.

 

6) Breite: Damit legst Du fest, ob das Element über die gesamte verfügbare Breite dargestellt werden soll oder nur über einen Teil der Breite. Eingabefelder, wie zum Beispiel zur Eingabe einer PLZ können so verkürzt dargestellt werden, wenn man es möchte.

Anlegen eines Elements vom Typ Einzelauswahl

Der Begriff "Einzelauswahl" soll hier kurz etwas ausführlicher dargestellt werden. Wenn Du in einem Formular die Möglichkeit schaffen möchtest, aus einer Liste eine bestimmte Auswahl zu gestatten, dann brauchst Du ein Element vom Typ "Einzelauswahl". Das kann zum Beispiel ein Feedback-Formular sein, wo Du dem Besucher die Möglichkeit gibst, eine Bewertung abzugeben. Dazu könntest Du dann eine Liste erstellen, die 5 Einträge enthält (zum Beispiel 1 bis 5 Sterne) und der Besucher entscheidet dann, wie viele Sterne er Deinem Angebot geben möchte. Ein Element vom Typ Einzelauswahl bietet dem Besucher also immer nur die Möglichkeit, einen einzigen von beliebig vielen Punkten auszuwählen. Wie Du oben im Bild siehst, haben wir dort Radiobuttons angelegt und zwar 4 Buttons mit den Beschriftungen Option 1 bis Option 4. Du kannst jederzeit aus den Radiobuttons eine Combobox machen, ohne dass Du die Elemente dabei verlierst. Ebenso könntest Du auf Kontrollkästchen umschalten und die bereits angelegten Elemente (Option 1 bis 4) dazu nutzen, um Kontrollkästchen anzulegen.

Kontrollkästchen würde man nutzen, wenn der Besucher mehr als eine Auswahl treffen kann. Wenn Du zum Beispiel ein Formular anlegst, mit dem der Besucher Unterlagen zu Deinen Ferienwohnungen anfordern kann, dann legst Du eine Liste vom Typ Kontrollkästchen an und fügst für jede Ferienwohnung ein Element ein. Der Besucher kann nun alle die Ferienwohnungen anklicken, für die er sich interessiert. Es ist also eine Mehrfachauswahl möglich.

Wie Du im Bild siehst, sind bei den Elementen 5 Zeilen zu sehen. Vier davon enthalten bereits Text (Option 1 bis 4), die fünfte Zeile ist leer. Befindest Du dich in der vierten Zeile und hast deinen Text eingegeben, dann kannst Du entweder eine Zeilenschaltung (Return) vornehmen, um in die nächste Zeile zu kommen oder einfach in die nächste Zeile klicken. Das System legt dann automatisch eine weitere, leere Zeile an. Du kannst also beliebig viele Elemente erzeugen. Würdest Du im obigen Beispiel den Inhalt aus der Zeile 4 (Option 4) löschen und dann den Cursor aus diesem Feld nehmen, wird die unterste Zeile automatisch komplett gelöscht. Es ist also immer nur eine freie Zeile sichtbar. Einfach mal ausprobieren, es ist viel leichter als die Beschreibung vermuten läßt.

Komplett neue Bildauswahl um Bilder aus dem Archiv auszuwählen

Alte Bildauswahl bis Mai 2014 mit direkter Möglichkeit, Bilder von der Festplatte hochzuladen

Neue Bildauswahl mit mehr Optionen, Bilder aus der Verwaltung schnell zu finden

Wenn Du ein Bild auf Deine Webseite einbauen willst, dann kannst Du es direkt von der Festplatte in den Content laden und benutzen. Es wird aber immer in der Verwaltung gespeichert und nur mit dem Content verknüpft. Du kannst auch Bilder erst in die Bildverwaltung laden und dann später aus dieser Verwaltung Bilder einbinden. Wie oben dargestellt, gibt es nun ein zusätzliches Icon bei der Bildauswahl, welches direkt Bilder von Deiner Festplatte lädt und das bisherige Icons, welches nun nur noch Bilder aus der Bildverwaltung anzeigt. Wir haben diese Anzeige komplett überarbeitet und alle Optionen entfernt, die nur dafür da waren, zusätzlich Bilder von Deiner Festplatte hochzuladen. Durch die neuen Dialoge haben wir nun den Platz, Dir mehr Optionen zur Verfügung zu stellen. Du siehst nun zwar nur 10 Bilder gleichzeitig aus der Verwaltung, dafür aber jedes Bild direkt mit einer Vorschau (2). Du musst also nicht erst ein Bild anklicken, um Dir anzeigen zu lassen, wie es aussieht.

Unten siehst Du genau, wie viele Bilder zur Verfügung stehen (3) und rechts unten (4) kannst Du durch diese Ansicht blättern, um die nächsten 10 Bilder anzeigen zu lassen. Wie Du weisst, kann man in der Bildverwaltung Ordner anlegen und damit seine Bilder sortieren. Diese Ordner werden in der Liste direkt angezeigt. Du kannst in der Bildauswahl die Darstellung sortieren, indem Du oberhalb der Tabelle auf die Spaltenbezeichnung (5) klickst. Die Sortierung ist für den Bildnamen, das Format, den Ordner und die Dateigröße eingestellt. Klickst Du zum Beispiel auf den Bildnamen, wird die Liste von A bis Z sortiert. Klickst Du erneut auf den Namen, wird die Sortierung umgekehrt und von Z bis A angezeigt. Die Sortierung betrifft natürlilch alle vorhandenen Bilder und nicht nur die 10 angezeigten Bilder.

Außerdem kannst Du in der Bildauswahl suchen. Dazu gibt es rechts oben ein Suchfeld (1), welches eine Live-Suche bietet. Tippst Du zum Beispiel den Buchstaben i ein, werden sofort alle Bilder angezeigt, die im Namen ein "i" enthalten. Tippst Du nun einen zweiten Buchstaben, zum Beispiel ein "m" zusätzlich ein, werden nur noch die Bilder angezeigt, die die Buchstabenkombination "im" enthalten. So kannst Du sehr schnell das richtige Bild finden, wenn Du den Namen kennst.

Zum Vergleich haben wir die alte und die neue Bildauswahl untereinander dargestellt. Mit dem Update ist page4 noch besser geworden und das ist erst der Anfang.