Update nun für alle online

Nachdem wir letzte Woche das Update für alle kostenlosen Seiten online gestellt haben, folgt heute das Update für alle Kaufversionen. Wie versprochen erklären wir heute weitere Teile des Updates.

Die neue Linkliste kurz erklärt

Neu: Da die Linkliste sehr viele Optionen enthält und die Vorschau, die gleichzeitig zum Bearbeiten der Liste dient, je nach Inhalt ziemlich hoch werden kann, ist der Dialog flexibel aufgebaut. Hast du einen breiten, großen Bildschirm, dann bricht der Dialog um und zeigt den ersten Teil inkl. der Vorschau links und die Einstellungsmöglichkeiten rechts. Das erleichtert die Erstellung einer Liste und du hast alle Optionen im Blickfeld.

1) In diesem Bereich füllst du die Linkliste mit Leben. Dazu hast du 4 Elemente, die du anlegen kannst. Das geht auf zwei Arten. Entweder klickst du einfach auf den entsprechenden Button (2 bis 5) oder du ziehst den Button mit der Maus in die Vorschau an die gewünschte Stelle.

Folgende Elemente stehen zur Verfügung

2) Überschrift. So kannst du die Liste gut strukturieren.

3) Verlinkung. Du kannst interne Links zu Seiten, externe Links oder Email-Adressen angeben.

4) Linie. Damit kannst du Bereiche unterteilen.

5) Abstandselement. Zum Gestalten der Liste.

Die Vorschau (6) dient gleichzeitig zum Anlegen und Bearbeiten der Elemente. Ähnlich wie im Formular. Wenn du mit der Maus über ein Element fährst dann erscheint rechts ein Menü zum Bearbeiten und Löschen. Klickst du mit der Maus auf ein Element kannst du es per Drag&Drop verschieben. Wie du am Beispiel sehen kannst, ist es außerdem möglich, verschiedene Icons zu nutzen. Dazu unten mehr.

7) Wie beim Counter haben wir auch hier ein paar Vorlagen mitgeliefert, die du natürlich beliebig anpassen kannst. Aktuell sind es 11 Vorlagen.

Das Design der Liste.

Man muss unterscheiden zwischen dem Umfeld, in dem deine Links platziert werden und den Links selbst. Das Umfeld nennen wir hier Listenbox. Die Box selbst kann von einem Rahmen umgeben sein.

8) Die Listenbox hat mehrere Optionen

a) Maximale Breite. Die Liste versucht immer die hier angegebene Breite zu erreichen. Wie alle Inhalte ist auch die Liste dynamisch. Ist die Spalte, in der die Liste erscheint, schmaler so wird natürlich auch die Listenbox nur so breit angezeigt wie möglich.

b) Innenabstand. Hier legst du fest, wie viel Abstand zwischen dem Rand und den Elementen sein soll.

c) Rundung. Natürlich kann die Box auch abgerundete Ecken haben.

d) Hintergrundfarbe. Damit wird die gesamte Box mit einer Farbe hinterlegt. Diese kann zusätzlich eine Transparenz haben.

e) Zwischenabstand. Der Abstand zwischen den einzelnen Elementen.

9) Rahmen. Um die Box kannst du einen Rahmen legen der die üblichen Optionen hat.

Kommen wir nun zum Design der Elemente.

Ein Link besteht immer aus zwei Zuständen. Neben der normalen Ansicht möchte man noch, dass sich der Link optisch verändert, wenn man mit der Maus über einen Link fährt. Besucher sind es gewohnt, dass sich Links so verhalten. Man nennt dies auch Hover.

A) Schrift. Du kannst alle aktuell bei uns verfügbaren Google-Fonts nutzen. Außerdem kann du einen Einzug (links) festlegen.

B) Stil. Du kannst die Schrift zusätzlich mit einem Stl versehen (Fett, Unterstrichen oder beides)

C) Icon. Eine neue Funktion, die wir auch bei anderen Inhalten einbauen werden. Wir stellen dir eine Anzahl von Icons zur Auswahl zur Verfügung. Die drei Symbole von der Icon-Auswahl bedeuten folgendes:

a) Eine Vorschau, welches Icon du gewählt hast.

b) Den Auswähler um den Dialog zu öffnen, indem du ein icon wählen kannst.

c) Einen Papierkorb, um die Auswahl zu löschen.

Dahinter ist noch die übliche Farbauswahl um einem Icon eine Farbe zu geben und du kannst bestimmen, welchen Abstand das Icon zur Schrift haben soll. Wenn du an dieser Stelle ein Icon wählst, gilt es für alle Links in der Liste. Du kannst dann in der Vorschau selbst jedem Link auf Wunsch ein individuelles Icon geben.

Der Hover-Effekt

D) Wie der Link aussehen soll, wenn du mit der Maus den Link berührst, legst du hier fest. Neben dem Schriftstil (Fett, Unterstrichen usw.) kannst du noch die Schriftfarbe ändern. Schriftgröße und Schriftart sind immer identisch mit dem Normalzustand.

Die Überschriften

Löscht du hier Optionen wie Schriftfamilie oder Farben mit dem Papierkorb so werden immer die im Design hinterlegten Werte für den Fliesstext verwendet. Ansonsten hast du folgende Optionen.

E) Schriftfamilie und Farbe. Einstellungen wie üblich.

F) Hintergrund. Mit Abstand legst du fest, wie viel Abstand zwischen dem Hintergrundrand und der Schrift sein soll. Je größer der Wert, umso höher wird die Unterlegung der Schrift mit einer Fläche. Ausrichtung bestimmt, ob die Überschrift links, rechts oder mittig angeordnet sein soll. Und der Hintergrund kann natürlich noch eine Farbe und Transparenz haben.

Die Linien

Alle Linien in einer Liste haben das gleiche Aussehen, welches du hier festlegen kannst.

G) Die Linien können eine Höhe, eine Farbe und eine Transparenz haben.

Auch wenn die Linkliste sehr umfangreich ist, wirst du sehr schnell deine eigene Liste erstellen können. Wofür man eine Linkliste verwenden kann, zeigen wir dir in den nächsten Wochen in diesem Blog. Nachfolgend noch einige Detail zu den neuen Funktionen in diesem Update.

Icons satt

Icons sind eine schöne Möglichkeit, die Webseite aufzulockern. Wir verwenden für die Icons, die wir dir zur Verfügung stellen, eine spezielle Schrift. Das hat den Vorteil, dass du jedes Icon in jeder beliebigen Größe darstellen kannst und in jeder Farbe. Wir haben bereits neue Inhaltselemente in Arbeit, die unsere neuen Icons benutzen werden.

Nachfolgend eine Übersicht aller aktuell vorhandenen Icons zur Verwendung in der Linkliste und in allen Inhaltselementen, die Icons anbieten.

Die neuen Dialoge zur Linkauswahl

Wenn du in der Linkliste einen neuen Link anlegen oder bearbeiten willst, klickst du auf den Bearbeitungsstift, der erscheint, wenn du mit der Maus über ein Element fährst. Es öffnet sich folgender Dialog:

 Dazu ein paar Anmerkungen

2) Jeder Link wird in der Liste mit einer Bezeichnung dargestellt. Du kannst dort entweder den kompletten Link wie "www.google.de" eintragen oder aber eine Erklärung wie "Suchmaschine Google". Lässt du dieses Feld frei, dann kannst du eine dynamische Seitenliste erzeugen. Ein interner Link ist immer ein Link zu einer bestehenden Seite und diese hat normalerweise auch einen Namen. Zum Beispiel "Impressum" oder "Bildergalerie". Wenn du nun einen internen Link auswählst wie zum Beispiel die Seite "Impressum" und das Feld für den Anzeigetext frei lässt und dann speicherst, dann setzt das System automatisch den Seitennamen, also Impressum als Anzeigenamen ein. Damit stellst du eine dynamische Verbindung zur Seite her. Wenn du jetzt die Seite Impressum verschiebst und/oder den Namen der Seite änderst, dann bekommt das die Linkliste mit und aktualisiert ebenfalls den Anzeigenamen und sorgt dafür, dass die Verlinkung weiterhin korrekt ist. Eine gute Möglichkeit, ein Seitenverzeichnis von Seiten darzustellen, die du nicht in der Navigation hast und die der Besucher trotzdem erreichen soll

3) Hier erscheint der Link, den du angelegt hast. Dieses Feld ist nicht dazu da, den Link reinzuschreiben sondern dient nur als Infofeld.

5) Mit dem blauen Icon kommst du zu einem weiteren Dialog, den wir unten noch kurz darstellen. Dort kannst du dann die Verlinkung festlegen und anschließend abspeichern. Nach dem Abspeichern erscheint der von dir gewählte Link in diesem Feld.

4) Das ist die Option, einzelne Links in der Liste mit einem eigenen Icon zu versehen. Wie schon erklärt besteht dieses Element aus Vorschau, Auswahl und Papierkorb.

Linkauswahl

Mit diesem Dialog kann man zukünftig Links auswählen. Wir werden diese Option nach und nach in alle Inhaltselemente einbauen, wo man Verlinkungen anlegen kann.

Auch hierzu noch ein paar Anmerkungen

2) Du kannst zwischen "interner Link" = Verlinkung zu einer bestehenden Seiten deiner Homepage, "Externer Link" = Verlinkung zu einer beliebigen anderen Webseite und "Mailadresse" = Verlinkung zu einer Email (öffnet ein Emailprogramm) wählen. Je nachdem, was du auswählst  stellt sich das Feld (3) zur Eingabe des Links anders da.

3) Bei einem internen Link hast du hier eine Auswahlliste, die es ermöglichst direkt eine Seite deiner Homepage auszuwählen. Ansonsten hast du ein Textfeld, wo du einen externen Link oder eine Email eintragen musst.

4) Normalerweise wird ein Link immer im gleichen Fenster geöffnet und der Besucher entscheidet durch eine Tastenkombination, ob er lieber ein neues Fenster möchte. Hier kannst du den Besucher quasi dazu zwingen, dass der Link immer in einem neuen Fenster erscheint indem du einfach" Neuer Tab/Neues Fenster" einstellst.

Mehrspaltige Sidebar

Ein Hinweis noch für alle Kaufkunden. Mit dem Update ist die Sidebar nicht nur ein Bereich geworden, in dem man nun ganz einfach alle Inhaltselemente anlegen kann. Zusätzlich kann die Sidebar nun auch Spalten benutzen. Wenn du in den Spaltenbearbeitungsmodus geht, kannst du jetzt Spalten auch in der Sidebar erzeugen. Das mag im ersten Moment angesicht der begrenzten Breite der Sidebar etwas überflüssig wirken. Es ist auch nur der erste Schritt. Wir wollen sobald es geht, Design-Strukturen anbieten, wo ein Sidebar-Bereich unter der Seite quais als Footer angelegt werden kann. Sobald das geht, machen Spalten Sinn. Denn dann kannst du viel leichter einen schönen Footer anlegen. Außerdem wird dann die Linkliste mehrere Spalten unterstützen und damit kann man dann selbst eine Seitennavigation im Footer anlegen und verwalten.

Wir haben noch eine Menge vor und freuen uns natürlich weiterhin über euer Feedback. Je mehr Anregungen, Wünsche, Lob und Kritik wir bekommen (gerne auch im Blog) um so besser können wr page4 für euch machen.

Gruß Manfred F. Schreyer und das Team von page4