Klicken und bearbeiten

Tags: Updatepage4FunktionenContent | Kommentare: 5 | Views: 12943

Dienstag 18.April 2017

blog-134

 

Zusätzliche Bearbeitungsoption für Texte

 
Einfach in einen Text klicken und ihn dann direkt bearbeiten. Hört sich gut an. Wie immer steckt der Teufel im Detail. Wir haben lange überlegt, wie wir auf der einen Seite die Bedienung vereinfachen können und auf der anderen Seite weiterhin die Optionen zur Verfügung stellen, die page4 so einzigartig machen. Es gibt viele Möglichkeiten, solche Funktionen einzubauen. Wir haben uns verschiedene Systeme angesehen und die jeweiligen Vor- und Nachteile verglichen. Und uns dann entschlossen, einen eigenen Weg zu gehen.
 
Einen ersten Vorgeschmack diesbezüglich haben wir ja bereits mit dem „Abstandselement“ geliefert. Da bei diesem Element lediglich die Höhe eingegeben werden muss, haben wir auf einen Dialog verzichtet und nach dem Anlegen kann man mit der Maus einfach die Höhe bestimmen. Das geht schnell und intuitiv. Es spart Zeit und macht Spaß.
 
Im „Streifen-Content“ haben wir diese Technik mit einem Dialog kombiniert. Um den Streifen zu konfigurieren, klickt man wie bisher auf den Bearbeitungsstift und kann dann im Dialog bequem alle Einstellungen vornehmen. Gleichzeitig erscheint ein Anfasser, wenn man die Maus in das Element bewegt. Diesen Anfasser kann man benutzen, um die Höhe des Streifens zu bestimmen. So kann man sehr leicht und in Echtzeit den Streifen auf der Seite anpassen und hat weiterhin den Dialog für alle Optionen zur Verfügung.
 
Mit dem heutigen Update erweitern wir die wichtigen Inhalte "Überschrift" und "Text" mit einer neuen Funktion.
 

 

Überschriften bearbeiten

 

Ab sofort kann man, wenn man eingeloggt ist, mit der Maus in eine Überschrift klicken und diese dann live direkt bearbeiten. Also einfach klicken und schreiben. Sobald man den Abschnitt verlässt, werden die vorgenommenen Änderungen gespeichert. Beim Speichern wird oben im Fenster kurz durch ein entsprechender Hinweis eingeblendet. Das geschieht quasi in Echtzeit. Um die Überschrift zu gestalten, klickt man wie gewohnt auf den Stift und kann dann dort im Dialog die hinterlegten Formate H1 bis H4 auswählen und außerdem festlegen, wie die Überschrift ausgerichtet werden soll. Für die neue Funktion haben wir die Ansicht leerer Überschriften verändert. Ab sofort wird eine leere Überschrift mit einem Text in der jeweiligen Formatierung angezeigt. Damit man sofort sieht, dass es sich um ein leeres Element handelt, wird die jeweilige Schriftfarbe transparent angezeigt. Leere Überschriften sind nur im Admin-Modus sichtbar. Diese Änderung ermöglicht es, dass du ganz einfach eine neue Überschrift von der Palette auf die Seite ziehen kannst und dann sofort in diese leere Überschrift klickst, um deinen Text einzugeben.
 
Kleiner Tipp: Möchtest du eine zweizeilige Überschrift und selbst bestimmen, wo die neue Zeile beginnt, dann kannst du einen sogenannten weichen Zeilenumbruch verwenden. Halte dabei die Umschalttaste für Großbuchstaben gedrückt und klicke dann auf die Returntaste, also die Zeilenumbruchtaste.
 

 

Texte bearbeiten


Für Texte haben wir die gleiche Technik eingebaut. Ein leerer Textabschnitt wird jetzt auch mit einem "Mustertext" angezeigt, und wenn du in den Text klickst, kannst du den Inhalt direkt bearbeiten. Beim Text kannst du ganz normale Zeilenumbrüche verwenden. Dabei entstehen dann "richtige" Absätze, die im Dialog mit den Absatzformaten belegt werden können. Verwendest du einen "weichen" Zeilenumbruch wie oben beschrieben, entsteht zwar eine neue Zeile, aber kein neuer Absatz. Also genauso, wie du es auch im Editor gewohnt bist, wenn du den Dialog öffnest.
 
Hast du im Text eine Tabelle eingefügt, kannst du die Tabelle auch direkt dort bearbeiten und Text hinzufügen. Du klickst dazu einfach in die jeweilige Zelle und schreibst dann deinen Text sofort hinein. Mit den Pfeiltasten kannst du in die nächste Zelle "springen", sofern sich der Cursor am Ende des Textes befindet. Das funktioniert in alle Richtungen.
 
Hast du eine Liste bzw. Aufzählung eingefügt, kannst du diese natürlich auch bearbeiten. Bei Listen spielen "weiche" Zeilenumbrüche - wie oben beschrieben - eine große Rolle. Mit einem normalen Zeilenumbruch erzeugst du einen neuen Listeneintrag. Mit einem weichen Zeilenumbruch bleibst du im gleichen Eintrag und es wird nur eine neue Zeile angefangen. Auch diese Funktion ist identisch mit der bisherigen Funktion direkt im Dialog.
 
Bilder im Text
Es gibt aktuell zwei Möglichkeiten, Bilder in einen Text einzufügen. Entweder nutzt du die von uns zur Verfügung gestellte Option, links oder rechts ein Bild einzufügen. Oder du nutzt die vom Texteditor im Menü zur Verfügung gestellte Möglichkeit, Bilder einzufügen. Auf die vom Editor bereitgestellte Option, Bilder einzufügen, haben wir keinen direkten Einfluss. Solche Bilder können im neuen Direkt-Editor angefasst und vergrößert und verkleinert sowie verschoben werden. Dabei ist das Verschieben sehr eingeschränkt, weil das Bild im Textfluss verankert wird und man keine Möglichkeiten der Kontrolle hat. Bilder, die über die von uns zur Verfügung gestellte Funktion eingebunden werden, können aktuell nicht direkt bearbeitet werden. Das ist aber zu einem späteren Zeitpunkt vorgesehen.
 


Was du wissen solltest


Die neue Funktion ermöglicht es euch, in einen Text zu klicken und dann sofort den Text zu bearbeiten. Das bedeutet aber logischerweise, dass eingebaute Verlinkungen im Admin Modus nicht mehr aufgerufen werden können. Klickst du auf einen Link in deinem Text, dann wird der Cursor angezeigt und du kannst den Text bearbeiten, aber nicht den Link aufrufen. Um einen Link zu testen, musst du deine Seite ab sofort im ausgeloggten Zustand betrachten. Das kannst du in einem weiteren Browserfenster oder einem zusätzlichen Browser ganz leicht machen. Es gibt aktuell keine technische Möglichkeit, das anders zu realisieren, es sei denn, wir hätten zum Aufrufen der Editierfunktion spezielle Tastenkombinationen verwendet. Damit behindert man aber die leichte und schnelle Bedienung.
 

 

Einige kleine Tipps


Du kannst, wenn du dich im editierten Text befindest, mit den Standardfunktionen deines Computers ausgewählte Texte formatieren. Mit der Tastenkombination STRG & B machst du den Text fett, mit STRG & I stellst du ihn kursiv. Bei einem Mac nimmst du anstelle der STRG Taste die Befehls-Taste. Diese vom System zur Verfügung gestellte Funktion ist cool, denn du kannst damit ganz bequem und easy einzelne Textstellen formatieren. Einfach klicken, selektieren und die Tastenkombination anwenden. Fertig. Die Standardfunktionen um Texte zu formatieren sind für Überschriften deaktiviert.
 

 

Unterschiede zu anderen Systemen

 

Wir verzichten bewusst darauf, im Direktmodus zusätzliche Menüs anzuzeigen, um damit Optionen auszuwählen, mit denen man Überschriften und Texte formatieren kann. Solche Menüs lenken unserer Meinung nach ab und überfrachten die Direktbearbeitung. Es ist aus unserer Sicht viel besser, den Bearbeitungsstift zu nutzen und den Dialog aufzurufen, wenn man eine Überschrift oder einen Text formatieren will. Bei allen von uns getesteten Systemen hat uns ein zusätzliches Menü nicht überzeugt. Die Mitbewerber gehen hauptsächlich so vor, weil sie keine eigenen Dialoge anbieten. Dann macht es durchaus Sinn. Unser Ziel ist es aber, euch weiterhin die vielfältigen Optionen anzubieten, die man nur mit Dialogen einbauen kann und die direkte Bearbeitung von Texten als Option zur Verfügung zu stellen, um schnelle Korrekturen usw. zu erleichtern.
 

 

Ausblick


Wir werden jetzt nach und nach überall dort, wo es sinnvoll ist, eine direkte Bearbeitung einbauen. Bei manchen Inhalten geht das relativ leicht. Bei anderen ist das nur schwer oder gar nicht möglich. Die nächste Funktion, die wir in diesem Zusammenhang neu gestalten, ist die Bearbeitung von Bildern. Wir haben dazu bereits gute Ideen, müssen aber vor der Konkretisierung dieser Pläne noch einige andere, schon länger geplante Umbauten vornehmen.

Außerdem haben wir einige neue Contents in Arbeit, die bald in die Testphase gehen. Bis demnächst also.
 
Manfred F. Schreyer
page4 Ltd.

 

Unsere neue Designverwaltung

Tags: Updatepage4FunktionenDesign | Kommentare: 5 | Views: 2112

Montag 19.Dezember 2016

 

Neu und einzigartig!

 

Mit dem heutigen Update gehen wir einen weiteren Schritt in Richtung "Design Webbaukasten". Kein mir bekanntes System bietet im Designbereich die Möglichkeiten, die page4 hat. Und kein Hompagebaukasten hat eine Design-Verwaltung. Ab heute ist das anders. Als erstes und meines Wissens nach einziges System hat page4 nun einen Bereich, in dem ihr Designvorlagen ablegen, kopieren, konvertieren und vor allem im Hintergrund bearbeiten könnt. Um die wichtigsten Funktionen einmal in einem Satz vorzustellen. Was genau für Vorteile die Verwaltung für Designvorlagen hat und was man damit anfangen kann, zeige ich euch gleich.

 

Wichtig ist, diese Funktion steht nur Kaufversionen zur Verfügung. Kostenlose Versionen haben keine Designverwaltung und können die daraus resultierenden Vorteile auch nicht nutzen. Wir bitten dafür um Verständnis. Wir finanzieren uns nur über unsere Kaufversionen. Wer page4 liebt und bisher nur eine kostenlose Version hat, sollte vielleicht mal über ein Upgrade nachdenken.

 

Schon ab 16,5 Cent pro Tag bekommt ihr fantastische Funktionen und gleichzeitig hilft ihr uns dabei, page4 noch besser zu machen. Oder anders ausgedrückt, page4 kostet in der Lightversion nur 5 Euro im Monat inkl. eigener Domain und, unter anderem, der einzigartigen Designverwaltung.

 

Aber nun genug Eigenwerbung. Lasst mich euch zeigen, was unser Entwicklerteam auf den Weg gebracht hat.

 

Die Designverwaltung

 

Du findest diese Verwaltung (2) zukünftig als erstes im Menü "Design" (1), noch über dem Punkt "Design auswählen oder bearbeiten". Wer eine Kaufversion hat, der kennt das Diskettensymbol bereits. Bisher konnte man über diesen Eintrag nur das aktuelle Design abspeichern. Jetzt findet ihr darunter die neue Designverwaltung.

 

 

Sobald du auf den Punkt "Designverwaltung" (2) klickst, öffnet sich der Dialog der Designverwaltung. Wir haben diesen Dialog ähnlich gestaltet wie in unserem Blogmodul. Zum einen hast du dann sehr viel Platz. Und zum anderen können wir den Dialog sehr leicht erweitern und wir planen, noch einige Ideen für die Designverwaltung umzusetzen.

 

 

Folgende Möglichkeiten stehen dir aktuell in der Designverwaltung zur Verfügung:

 

1) Eigene Designs = Nehmen wir an, du hast noch nie ein Design abgespeichert und öffnest die Designverwaltung und du hast immer nur unsere neuen editierbaren Vorlagen genutzt bzw. dein aktuelles Design ist so eine Vorlage. Dann hast du nur den Bereich "Eigene Designs" und dort findest du dann nur das aktuell von dir verwendete Design, grün unterlegt und rechts als "Aktives Hauptdesign" (4) bezeichnet. Das aktive Hauptdesign ist immer das Design, mit dem deine Webseite aktuell deinen Besuchern gezeigt wird.

 

A) Klassik Ablage = Dieser Bereich ist nur sichtbar, wenn du aktuell ein altes Design benutzt oder in der Vergangenheit mindestens ein altes Design abgespeichert hast. Ansonsten ist dieser Bereich nicht sichtbar. Löscht du alle dort enthaltenden Vorlagen, wird die Ablage ebenfalls unsichtbar. Unten siehst du einen Auschnitt aus dieser Ablage.

 

 

Was kann man mit Designvorlagen machen, die in der Klassik Ablage gespeichert sind?

 

Konvertieren (1)

Du kannst eine alte Designvorlage jetzt einfach in der Ablage konvertieren. Klickst du auf "Konvertieren", dann erzeugt das System eine Kopie des Designs, konvertiert diese Vorlage in ein editierbares Design und legt dieses Design dann in die Ablage "Eigene Designs" ab. Im oberen Bild habe ich das konvertierte Design mit der Nummer (8) markiert. Du siehst, dass der Name automatisch angelegt wird. Vorne steht "Konvertiert:" und dahinter der Originalname. So siehst du sofort, woher dieses Design kommt. Diese Aktion wird komplett im Hintergrund ausgeführt. Bei Kaufversionen, die noch ein altes Design haben, haben wir daher im Hauptmenü "Design" den Menüpunkt "Konvertieren" entfernt. Damit konnte man zwar sein Design konvertieren, war aber gezwungen, mehr oder weniger live das Design umzubauen und sobald man auf speichern geklickt hat, war das neue Design online. Jetzt kann man komplett im Hintergrund seine alte Vorlage konvertieren und bearbeiten. Kostenlose Versionen haben weiterhin den Menüeintrag, da sie keine Designverwaltung haben.

 

Als aktives Hauptdesign setzen

Natürlich kannst du ein altes Design weiterhin benutzen und als aktiv setzen. Wir empfehlen dir aber dringend, auf eine neue Vorlage umzusteigen. Die alten Vorlagen sind nicht mehr zeitgemäß und vor allem für mobile Ansicht nicht optimiert.

 

Umbenennen

Du kannst alle gespeicherten Designvorlagen frei benennen. Das geht auch mit alten Designvorlagen.

 

Kopieren

Du kannst alle gespeicherten Designvorlagen kopieren und diese Funktion steht auch alten Vorlagen zur Verfügung.

 

Löschen

Solange das Design kein aktives Hauptdesign ist, kannst du es natürlich aus der Verwaltung löschen. Ein einmal gelöschtes Design kann nicht wieder hergestellt werden.

 

Wie du vielleicht bemerkt hast, kann man ein altes Klassik-Design nicht bearbeiten. Das geht deshalb nicht, weil die gesamte Struktur anders ist. Um ein Klassik-Design im Design-Editor zu bearbeiten, muss es konvertiert werden. Existiert ein Konverter, dann sieht das Ergebnis normalerweise fast genauso aus wie die Originalvorlage. Bei einigen alten Vorlagen gibt es keinen Konverter. Dann legen wir ein Basisdesign an. Allerdings bist du nicht mehr gezwungen, dein aktuelles altes Design zu konvertieren um auf ein neues Design umzusteigen. Du kannst in der Designverwaltung ein neues Design anlegen und dass dann in Ruhe im Hintergrund bearbeiten und wenn es fertig ist, als neues aktives Hauptdesign verwenden.

 

 

Was kann man mit der Ablage "Eigene Designs" machen?

 

Die nachfolgenden Zahlen beziehen sich auf das obere Bild (Eigene Designs).

 

Neues Design anlegen (2)

Wenn du diese Funktion benutzt, wird ein neues Design angelegt und zwar mit minimalen Einstellungen. Wir haben alle Elemente ausgeblendet und alle Bereiche auf neutral gesetzt, so dass wirklich ein "leeres" Design erzeugt wird. Der Vorteil besteht darin, dass du sofort anfangen kannst zu gestalten, ohne erst alle Werte "zu neutralisieren". Möchtest du mit einer von unseren Vorlagen starten, so kannst du natürlich jederzeit mit einem Klick eine Vorlage auswählen und das neutrale Design überschreiben.

 

Als aktives Hauptdesign setzen (6)

Wie auch in der Klassik Ablage musst du in der Lage sein, jede deiner gespeicherten Designvorlagen als aktives Hauptdesign zu setzen. Du fährst dazu mit der Maus über ein gespeichertes Design und klickst dann in der Werkzeugleiste auf "Als aktives Hauptdesign setzen". Dann passiert folgendes: Der Eintrag wird grün hinterlegt. Rechts oben wechselt die Info von "Nicht verwendet" zu "Aktives Hauptdesign". Einige Menüpunkte aus der Werkzeugleiste (wie der Papierkorb) werden ausgeblendet und sehr wichtig: Deine Webseite wird jetzt mit diesem Design angezeigt.

 

Umbenennen (5)

Das Umbenennen einer Designvorlage dient lediglich dazu, dir die Möglichkeit zu geben, deine Vorlagen mit Namen zu versehen, die dir die Verwaltung erleichtern. Ansonsten hat das Ändern der Bezeichnung keine Auswirkung. Alle Einträge werden alphabetisch sortiert. Die Namensänderung sorgt für eine Umsortierung.

 

Nicht verwendet (3)

Bis auf das aktive Hauptdesign bekommen alle gespeicherten Designvorlagen aktuell die Markierung "nicht verwendet". Nicht verwendete Designvorlagen können beliebig bearbeitet oder gelöscht werden, ohne dass deine Besucher etwas davon bemerken. Sobald die Designverwaltung in der Lage ist, einzelnen Seiten unterschiedliche Designvorlagen zuzuweisen kannst du anhand dieser Markierung sofort alle Designs erkennen, die nicht verwendet werden.

 

Einige Anmerkungen

 

Unter dem Punkt (B) siehst du den Hinweis, dass das aktive Hauptdesign auf 14 Seiten verwendet wird. Da es aktuell nur ein Design für alle Seiten gibt, wirst du beim aktiven Hauptdesign immer die Gesamtanzahl der Seiten deiner Homepage sehen. Sobald die Verwaltung in der Lage ist, Designvorlagen auf beliebige Seiten anzuwenden, bekommt diese Anzeige einen Sinn. Nehmen wir an, du hast 50 Seiten und verwendest für 3 Seiten ein zweites Design, dann ist das aktive Hauptdesign natürlich nur noch auf 47 Seiten aktiv. Bei dem zweiten Design steht dann "Auf 3 Seiten verwendet". Löscht du ein Design, welches von Seiten benutzt wird, dann wird wieder das Hauptdesign verwendet. Es wird also niemals passieren, dass Seiten kein Design haben. Aber diese Dinge musst du erst beachten, wenn wir die Verwaltung erweitert haben.

 

WICHTIG: Bisher ist es so: Du öffnest den Design-Editor und wählst ein anderes Design aus und speicherst es ab. In dem Moment ist das bisherige Design weg und wird durch das neue Design ersetzt. Es besteht keine Möglichkeit, dass alte Design wieder einzuladen. Wir müssten dazu ein Backup vom vorherigen Tag hochladen.

 

Mit der neuen Verwaltung verhält es sich ähnlich. Öffnest du direkt über das Menü den Design-Editor und wählst dann ein neues Design aus und speicherst es ab, überschreibst du das aktive Hauptdesign durch das neue Design. Und zwar auch in der Verwaltung.

 

Gehst du zuerst in die Verwaltung und bearbeitest von dort aus das aktive Hauptdesign und während der Bearbeitung wählst du ein neues Design und speicherst dann das Design ab, überschreibst du ebenfalls das bisherige Hauptdesign. Dieser Schritt kann nicht rückgängig gemacht werden. Wir empfehlen dir, dass aktuelle Hauptdesign einfach zu kopieren, bevor du es direkt bearbeitest. So kannst du im Zweifel immer wieder auf die Kopie zurückgreifen.

 

Im Moment bekommst du mit der Designverwaltung vor allem ein Werkzeug, um auf einfache Weise von einem alten Design auf eine neue Vorlage umzusteigen oder um beliebig viele Designvorlagen selbst zu erstellen und im Hintergrund zu gestalten. Sobald die Verwaltung in der Lage ist, Designvorlagen beliebigen Seiten zuzuweisen kannst du deine Homepage noch individueller gestalten. Die Möglichkeiten sind extrem vielfältig.

 

Hier eine kleine Auswahl an Ideen. Du kannst diese Ideen bereits jetzt vorbereiten und wenn die zusätzlichen Optionen online sind, mit einem Klick aktivieren.

 

1) Du möchtest auf einigen Seiten kein Hintergrundbild.

2) Du möchtest auf jeder Seite 10 andere Bilder im Hintergrund, im Header usw. als Slideshow.

3) Du möchtest einige Seiten ohne Sidebar oder mit zwei Sidebars.

4) Du möchtest auf einigen Seiten keinen Header haben.

5) Du möchtest auf einigen Seiten keinen Footer haben.

6) Du möchtest auf jeder Seite unterschiedliche Hintergrundbilder haben.

7) und vieles mehr.

 

Aus meiner Sicht ist dies Update eines der wichtigsten Updates der letzten 2 Jahre. Wer wirklich individuelle Webseiten gestalten will und keine Lust auf Wordpress und Co. hat und auch nicht selbst programmieren will, der bekommt jetzt mit page4 einzigartige Funktionen zur Gestaltung und das zu einem sehr guten Preis. Zusammen mit der neuen Seitenverwaltung, die eine enge Verbindung zum Designverwaltung haben wird, bietet das neue Update extrem viele Optionen und vor allem ermöglicht es allen Usern einer Kaufversion, die Gestaltungsarbeiten komplett unsichtbar im Hintergrund vorzunehmen. Das gibt es aktuell meines Wissens bei keinem einzigen Webbaukasten weltweit. Zumindest kenne ich kein System mit diesen Optionen.

 

Wir freuen uns wirklich, wenn ihr einen Kommentar hinterlässt und uns eure Meinung sagt. Vor allem sind wir an Ideen und Wünsche interessiert, denn wir entwickeln page4 für unsere User und neue Funktionen machen nur Sinn, wenn sie für Kunden und User einen Mehrwert bieten.

 

Viel Spaß beim Gestalten und Ausprobieren und nochmal: Wer jetzt noch eine alte Designvorlage nutzt sollte die Gelegenheit ergreifen und umsteigen. So einfach war es noch nie.

 

Bis demnächst

Manfred F. Schreyer

page4 - der Design Webbaukasten

 

 

 

PS: Du hast noch keine page4 Webseite? Dann nutze jetzt unser Weihnachtsangebot und spare im ersten Jahr richtig Geld.

 

 

PPS: Nicht vergessen, hinterlasse einen Kommentar (hier oder auf unserer Facebook Seite) und die Adresse deiner Webseite und du hast die Chance, eine Premiumversion dauerhaft kostenlos zu nutzen. Es lohnt sich.

Tipp 11: Einfach mal kopieren

Tags: UpdateTippspage4Funktionen | Kommentare: 4 | Views: 994

Freitag 16.Dezember 2016

 

Kopieren geht schneller

 

Warum etwas erneut machen, wenn es bereits fertig ist und nur noch angepasst werden muss? Einfach kopieren und bearbeiten geht viel schneller. Insbesondere, wenn es sich um ganze Seiten einer Homepage handelt. So eine Seite besteht ja nicht nur aus Inhalten. Es steckt auch jede Menge Gestaltungsarbeit dahinter. Man muss die Abstände optimieren, Spalten anlegen und vieles mehr. Wenn die Seite perfekt ist, eignet sie sich vielleicht als Vorlage für eine neue Seite, die nur andere Inhalte bekommt.

 

Mit page4 ist es sehr leicht, Seiten zu kopieren, Inhalte zu kopieren und dabei viel Zeit zu sparen. Dazu haben wir heute einige Tipps und Anregungen und einen Ausblick auf die Zukunft für euch.

 

 

Seiten kopieren

 

Seiten werden bei page4 im Seitenmanager verwaltet. Diese Verwaltung findest du, indem du ganz oben im Hauptmenü auf den Punkt "Seiten" klickst. Es öffnet sich der nachfolgende Dialog. In diesem Dialog sind alle Seiten aufgelistet, die deine Homepage hat. Seiten können Inhalte enthalten, mit einem Namen in der Navigation angezeigt werden, damit man sich als Besucher die Seite ansehen kann und letztlich enthalten Seiten alle Informationen darüber, was passieren soll, wenn die Seite in der Navigation angeklickt wird.

 

In der Seitenverwaltung, wie der Seitenmanager zukünftig genannt wird, bearbeitest du nicht die Inhalte, die auf der Seite sind, sondern nur Dinge, welche die Seite als Ganzes betreffen. Dazu gehört neben dem Namen der Seite auch die Möglichkeit, eine Seite zu kopieren. Das geht ganz leicht. Nachfolgend zeigen wir dir den aktuellen Dialog vom Seitenmanager, so wie du ihn kennst. Und wir zeigen dir einen Ausblick, wie der Seitenmanager im kommenden Jahr aussehen wird, sobald wir alle Arbeiten daran abgeschlossen haben.

 

 

Der aktuelle Seitenmanager

 

 

Der Seitenmanager (1) ist ein Vollscreen-Dialog und zeigt auf der linken Seite alle Seiten an, die es in deiner Homepage gibt. Daneben enthält der Seitenmanager Werkzeuge, mit denen du Seiten anlegen, löschen und kopieren kannst. Um eine Seite zu kopieren, bewegst du die Maus zu der "Masterseite", die du kopieren willst und klickst auf die Seite, um sie zu markieren. Dann hast du zwei Optionen. Entweder nimmst du das blaue Symbol in der Werkzeugleiste neben der Seite rechts (im Seitenbaum). Oder du nimmst das ganz rechte Seitensymbol (2) auf der rechten Seite und klickst darauf, um die Seite zu kopieren. Die Seite wird immer unter die Originalseite im Baum angelegt und vor dem Namen wird "Kopie von" angehängt. Nach dem Kopieren solltest du den Namen anpassen und die Seite, wenn nötig, an den vorgesehenen Platz schieben. Alle Aktionen werden direkt ausgeführt und gespeichert. Nach dem Schließen des Dialogs kannst du zu der Seite gehen und die Inhalte anpassen.

 

Wichtiger Hinweis

Kopierte Seiten sind sofort für deine Besucher sichtbar. Du solltest diese Seite daher erstmal auf "unsichtbar" schalten, indem du den Dialog zum Bearbeiten der Seite aufrufst und die entsprechende Option markierst. So kannst du in Ruhe die neuen Inhalte einbauen und wenn die Seite fertig ist, kannst du sie mit einem Klick für alle sichtbar machen.

 

 

Die geplante neue Seitenverwaltung

 

 

Die neue Seitenverwaltung sieht dem Blogmodul ähnlich und ist auch ein Vollscreen-Dialog. Die Schrift wird etwas größer sein und die Werkzeigleiste im Seitenbaum erscheint nur noch bei der aktiven Seite bzw. wenn du mit der Maus über einen Seiteneintrag fährst. Dadurch wird der Dialog gerade bei vielen Seiten um einiges schneller als der alte Dialog. Auch hier wirst du wie gehabt eine Seite mit dem blauen Symbol kopieren können. Der rechte Bereich ist verschwunden. Dafür hast du alle Funktionen oberhalb vom Seitenbaum und auch dort eine Funktion zum Kopieren der ausgewählten Seite. Es ändert sich für dich also sehr wenig, was die grundsätzliche Bedienung betrifft.

 

 

Seitenvorlagen in 2017

 

 

Weil bald Weihnachten ist, möchte ich euch noch einen kleinen Blick in die Zukunft zeigen. Wenn man eine neue Seite anlegt, dann hat man aktuell ein "leeres Blatt Papier". Mit der oben erklärten Funktion, eine Seite zu kopieren, kann man sich viel Arbeit ersparen.

 

Manchmal ist es aber gar nicht so einfach, die gewünschten Inhalte gut strukturiert anzulegen. Dafür gibt es irgendwann im kommenden Jahr eine ganz tolle, neue Funktion. Die sogenannten Seitenvorlagen. Wenn du eine neue Seite anlegst, wird diese nicht sofort im Seitenbaum angelegt. Es öffnet sich vielmehr der Dialog zum Bearbeiten der Seite, wo du den Namen festlegst und einiges mehr. Dort wird die Standardseitenvorlage angezeigt, eine leere, einspaltige Seite.

 

Klickst du nun auf diese Seitenvorlage, öffnest sich der oben angezeigte Dialog und du kannst aus einer umfangreichen Sammlung an Beispielseiten die für dich passende Vorlage auswählen, indem du einfach darauf klickst. Die Vorlage wird geladen und im Dialog "Neue Seite anlegen" kannst du dann gleich alles eintragen, was benötigt wird, zum Beispiel die Seite, wenn gewünscht unsichtbar schalten.

 

Mit dem Klick auf "Anlegen" wird die Seite nun angelegt und enthält dann Beispielbilder und Blindtext, angeordnet wie in der Vorschau dargestellt. Jetzt brauchst du nur noch die Bilder austauschen, die Texte überschreiben und fertig ist eine perfekt organisierte Seite, die du natürlich jederzeit beliebig anpassen kannst.

 

Wie gesagt, dass ist aktuell nicht mögllich. Es wird aber im Frühjahr 2017 kommen, soviel ist bereits sicher. Mit vielen weiteren tollen Funktionen. Jetzt erstmal viel Spaß beim Kopieren und Zeitsparen. Wie man Inhalte kopiert, findest du ausführlich in unserer Online-Hilfe erklärt.

 

Bis demnächst

Manfred F. Schreyer

page4 - der Design Webbaukasten

 

 

PS: Du hast noch keine page4 Webseite? Dann nutze jetzt unser Weihnachtsangebot und spare im ersten Jahr richtig Geld.

 

 

PPS: Nicht vergessen, hinterlasse einen Kommentar (hier oder auf unserer Facebook Seite) und die Adresse deiner Webseite und du hast die Chance, eine Premiumversion dauerhaft kostenlos zu nutzen. Es lohnt sich.

Tipp 9: Strukturen im Design

Tags: page4FunktionenDesign | Kommentare: 1 | Views: 647

Dienstag 13.Dezember 2016

 

Anordnung ist alles

 

Unsere Design-Vorlagen bestehen aus einer HTML-Datei, welche die Struktur der Elemente bestimmt und den CSS-Anweisungen, die du als User über die Dialoge bestimmst. Mit den im Design-Editor hinterlegten Strukturen kannst du mit einem Klick das gesamte HTML deines Designs austauschen und damit eine Umplatzierung aller Elemente veranlassen.

 

Unsere aktuellen Strukturen

 

Die wirklich einzige Beschränkung in unseren Designvorlagen besteht im Moment darin, das wir "nur" 4 Strukturen haben und damit allerdings rund 80 bis 90% der gängigen Gestaltungsmöglichkeiten einer Webseite abdecken.

 

Struktur 1

Eine der Hauptstrukturen. Der Header- und Fussbereich der Webseite geht immer über die gesamte Breite und der Inhaltsbereich und die Sidebars sind zwischen dem Header und Footer eingebaut und zusammen so breit wie der Header bzw. Footer.

 

Struktur 2

Bei dieser Struktur werden die Sidebars ganz nach außen platziert und die Header, Footer und der Inhalt zwischen den beiden Sidebars eingesetzt. Die obere "Kante" vom Header schließt mit den oberen "Kanten" der beiden Sidebars ab. Der Inhalt, die Footer und die Header sind immer gleich breit.

 

Struktur 3

Wie Struktur 1 mit der Ergänzung, dass alle Elemente innerhalb von Streifen angelegt sind, die immer über den gesamten Browser ausgedehnt werden. Jeder Header, jeder Footer, die Navigation und der Inhalt "liegen" innerhalb eines Streifens. Die Sidebars liegen im selben Streifen wie der Inhalt. Man kann jeden Außenbereich, so nennen wir die Streifen, frei gestalten.

 

Struktur 4

Die Struktur 4 lässt alles weg, was nicht gebraucht wird. Es ist letztlich die Struktur 3 aber ohne die Sidebars. Geht man auf Elemente, kann man auch keine Sidebars anschalten. Man kann aber jederzeit zur Struktur 3 wechseln, wenn man doch eine Sidebar haben möchte.

 

 

Was bewirken die Strukturen?

 

Wie du in der Zeichnung oben sehen kannst, sind die einzelnen Bereiche einer Webseite farbig gekennzeichnet. Grün ist der Header und der Footer, gelb die Sidebars, blau der Inhalt und rot ist die Navigation. Bei den Streifen-Strukturen 3 und 4 gibt es noch hellgrüne Bereiche, dass sind die Streifen unter dem Header und Footer, hellblaue Bereiche kennzeichnen die Streifen, in denen der Inhalt und die Sidebars eingebettet sind und hellrote Bereiche markieren den Außenbereich (Streifen) der Navigation.

 

Spielen wir einige Optionen durch.

 

Hast du ein Design mit der Struktur 1 und schaltest auf Struktur 3 um, dann verändert sich an der Platzierung deiner Bereiche gar nichts. Es tauchen lediglich im Außenbereich deiner Webseite die Streifen auf. Wenn diese Streifen Inhalte enthalten wie eine Slideshow, Hintergrundbilder, Hintergrundfarben oder Linien usw. dann werden diese jetzt angezeigt. Aber keine Sorge, mit wenigen Mausklicks kannst du alle Einstellungen, die du nicht brauchst auf Neutral setzen. Wir überarbeiten aktuell alle Designvorlagen und sorgen dafür, dass nicht benutzte Elemente beim nachträglichen Einblenden nicht stören.

 

Schaltest du von der Struktur 1 auf die Struktur 4 um, dann erscheinen ebenfalls die Streifen. Aber gleichzeitig werden die Sidebars ausgeblendet, da diese hier nicht vorgesehen sind. Inhalte gehen natürlich nicht verloren.

 

Steigst du von Struktur 1 auf Struktur 2 um, dann passiert etwas mehr. Benutzt du zwei Sidebars und ist die Breite deiner Webseite auf 1.100 px eingestellt und jede Sidebar ist 250 px breit, dann geschieht folgendes: Beide Sidebars rutschen nach außen und fangen ganz oben am Bildschirmrand an und nehmen weiterhin wie bisher jeweils 250 px links und rechts ein. Der Header, eine horizontale Navigation und auch der Footer bleiben wo sie sind, können jetzt aber nicht mehr die gesamte Breite von 1.100 px beanspruchen. Es stehen nur noch 600 px für die Breite zur Verfügung. Soviel, wie auch für den Inhaltsbereich, der ebenfalls bleibt, wo er ist und weiterhin die selbe Breite hat. Hast die die Sidebars so eingestellt, dass sie sich auf die volle Höhe ausdehnen sollen, dann sind beide Sidebars nun so hoch wie die Header, die Navigation, der Inhalt und die Footer zusammen an Platz in der Höhe einnehmen.

 

Hinweis: Das Ändern der Struktur ist völlig ungefährlich und hat keinerlei Auswirkungen auf deine Daten. Mit einem Klick bist du wieder bei der alten Struktur und alles ist wie es war, falls du die neue Struktur nicht verwenden willst.

 

Wie kann man erkennen, ob das Design eine Streifenstruktur hat?

Wenn du im Design-Editor bist und außerhalb deiner Webseite aktive Flächen hast, mit denen du den Außenbereich bearbeiten kannst, dann hast du ein Streifendesign. Klickst du im normalen Bereich deiner Seite auf einen Bereich, dann taucht im Dialog ein "Außenbereich" auf und zeigt dir, dass du Streifen hast und diese bearbeiten kannst. Und natürlich siehst du dass dann, wenn der Außenbereich mit Inhalt versehen ist.

 

Kleiner Ausblick für 2017 und ein paar Anmerkungen

Einige Designvorlagen von Mitbewerbern haben HTML-Strukturen, die wir aktuell nicht abbilden können. Das liegt daran, dass unsere Kollegen ihre Designvorlagen programmieren und dann nur bestimmte Optionen für den entsprechenden Baukasten freischalten, die der User ändern kann.

 

Bei page4 werden dagegen alle Designvorlagen mit den vorhandenen Tools erstellt. Wir haben lediglich die Basis programmiert und steuern die meisten Parameter über die Dialoge von page4. Im einfachsten Fall besteht ein Design aus einer weissen Fläche, die zweigeteilt ist. In der einen Fläche ist die Navigation eingebunden und in der anderen Fläche der Inhalt deiner Webseite. Mit dem Design-Editor kannst du aus dieser weissen Flächen nur mit den Werkzeugen von page4 eine Webseite gestalten und unendlich viele Variationen ausprobieren. 

 

Unsere Liste mit Funktionen, Ideen und Wünschen ist extrem lang und jeden Tag, wo wir programmieren, mit Kunden reden oder diskutieren wird die Liste länger. Auf dieser Liste steht auch, dass wir weitere Strukturen zur Verfügung stellen wollen. Wir gehen davon aus, im kommenden Jahr wird dass der Fall sein. Neue Strukturen bedeuten völlig neue Gestaltungsmöglichkeiten. Je nach Struktur kannst du die Elemente deiner Seite völlig anders anordnen, vielleicht auch überlappen lassen und vieles mehr. Lass dich einfach überraschen und falls du ein tolles Webdesign siehst dann informiere uns einfach. Wir schauen uns gerne an, wie dieses Design aufgebaut ist und überlegen uns, ob und wie man das in page4 umsetzen kann.

 

Bis demnächst

Manfred F. Schreyer

page4 - der Design-Webbaukasten

 

 

 

PS: Du hast noch keine page4 Webseite? Dann nutze jetzt unser Weihnachtsangebot und spare im ersten Jahr richtig Geld.

 

PPS: Nicht vergessen, hinterlasse einen Kommentar (hier oder auf unserer Facebook Seite) und die Adresse deiner Webseite und du hast die Chance, eine Premiumversion dauerhaft kostenlos zu nutzen. Es lohnt sich.

Tipp 7: Navigationstemplates

Tags: page4FunktionenNavigationDesign | Kommentare: 2 | Views: 1122

Freitag 9.Dezember 2016

 

Vielfalt ist Trumpf

 

Bei den meisten anderen Webbaukasten besteht das Design unter anderem aus der Navigation, die an einer bestimmten Stelle fest eingebunden ist. Möchtest du, dass die Navigation an einer anderen Stelle platziert wird, also zum Beispiel nicht über sondern unter dem Header oder in  der Sidebar, dann musst du zwingend ein neues Design wählen. Solche Veränderungen sind bei den uns bekannten Systemen der Mitbewerber nicht möglich.

Natürlich kannst du bei so einer Navigation je nach System wahrscheinlich die Schrift, Schriftgröße, Schriftfarbe und Hintergrundfarbe einstellen und meist auch, wie die Navigation aussehen soll, wenn du mit der Maus über die Navigation gehst (Hover). Einige Systeme erlauben den Schriftstyle (Normal, Fett oder Kursiv) zu beeinflussen oder ob die Zeichen alle in Versalien oder Kleinbuchstaben angezeigt werden sollen. Und vielleicht noch die Zentrierung der Navigation. Bis auf die Veränderung der Schrift (also den Style oder wie die Zeichen angezeigt werden) kann page4 all das natürlich auch. Und noch viel mehr.

 

 

Navigationstemplate für die Zukunft

 

So wie es Strukturen gibt, die man auf jedes Design anwenden kann gibt es bei page4 auch Templates, die man auf eine Navigation anwenden kann. Der größte Vorteil besteht zum einen darin, dass man die Auswahl der Templates beliebig erweitern kann, was wir im kommenden Jahr fest eingeplant haben. Zum anderen ist das Aussehen der Navigation nicht mehr abhängig von einem gewählten Design. Jedes Design kann jedes Navigationstemplate nutzen. Aus Kompatibilitätsgründen gab es in der ersten Version vor allem alle Navigationen der alten Vorlagen als neue Templates. Inzwischen haben wir ein paar neue Templates hinzugefügt und werden wie gesagt, im kommenden Jahr mehr Zeit in diesen Bereich investieren. Es gibt unseres Wissens nach keinen anderen Baukasten, der die Möglichkeit bietet, das Aussehen der Navigation durch Templates zu verändern. Daneben gibt es noch einige Optionen zusätzlich.

 

 

Wenn du im Design-Editor den Bereich Navigation aufrufst, siehst du links diese Einstellungen zur Navigation. Rechts, nicht im Bild kannst du alle Farben für bis zu drei Ebenen einrichten. Betrachten wir die Punkte im Einzelnen.

 

 

1) Position wählen

 

 

Hier siehst du eine unserer Designvorlagen. Standardmäßig ist die Navigation unter dem Header angeordnet (1). Du kannst die Position der Navigation aber jederzeit verändern. Punkt (2) zeigt die Navigation innerhalb des Headers und zwar am unteren Rand. Der Hintergrund wird dann durchsichtig und es scheint das Headerbild durch. Punkt (3) zeigt die Navigation weiterhin im Header aber am oberen Rand. Und (4) zeigt die Navigation, wie sie über dem Header angeordnet wird. Außerdem kannst du die Navigation jederzeit in eine Sidebar verschieben und dann wechselt das Template automatisch zu einer vertikalen Version. Über die Optionen (3 im obenen Bild) kannst du außerdem die Position der Navigation innerhalb des Headers verändern indem du an allen 4 Seiten Abstände bestimmst.

Hast du mehrere Header, erhöht sich die Anzahl der Positionen für die Navigation. Zusätzlich kannst du auch die beiden Sidebars nutzen, um dort die Navigation oder auch nur die Unterseiten anzuzeigen.

 

 

2) Template wählen

 

 

Hier sind einmal 8 verschiedene Templates, die wir ausgewählt haben. Dabei haben wir lediglich das Template geändert aber alles andere wie Schrift, Farbe usw. unverändert gelassen. Es gibt natürlich noch mehr Templates. Außerdem sind die Templates für vertikale und horizontale Navigationen natürlich unterschiedlich. Wie gesagt, sind aktuell vor allem die Navigationen als Templates hinterlegt, die wir in unseren alten Vorlagen verwendet haben, damit jeder, der ein altes Template benutzt, kompatibel zu diesen neuen Templates ist und wenn das alte Design in ein neues Design convertiert wird, dass dann die Navigation weiterhin so ausieht wie gewohnt.

 

Man kann gut sehen, dass die Navigationstemplates extrem viel Möglichkeiten bieten. Vor allem bist du nicht mehr darauf angewiesen, dein ganzes Design zu wechseln, wenn du gerne eine andere Art von Navigation haben möchtest. Andere Anbieter müssten für diese 8 Navigationen jetzt 8 Designvorlagen zur Verfügung stellen. Wenn man das Template nur mit der Option, die Navigation zu platzieren kombiniert, kommst du bei den 4 oben angegebenen Variationen schon auf 32 Designvorlagen, die nötig wären, um diese Möglichkeiten anzubieten. Dabei ist oben ja nur die Position der Navigation dargestellt, die mögllich sind, wenn man einen Header einblendet. Und die Position der Navigation in der Sidebar ist noch gar nicht berücksichtigt.

 

 

3) Vielfalt - mehr als 3.200 Designvariatonen nur mit diesen wenigen Optionen und unseren aktuellen Designvorlagen möglich

 

Aktuell haben wir rund 100 Designvorlagen, die wir zur Verfügung stellen. Bei jeder dieser 100 Vorlagen kannst du natürlich eine der acht oben gezeigten Templates verwenden (und natürlich auch die, welche wir hier nicht zeigen) und die Position deiner Navigation mind. für 4 verschiedene Stellen selbst auswählen. Konkret bedeutet das, nur mit diesen beiden Möglichkeiten machst du aus den 100 Vorlagen bereits 3.200 verschiedene Variationen. Das verstehen wir unter Design-Vielfalt und Freiheit im Gestalten.

 

Ich hoffe, du hast einen kleinen Eindruck davon bekommen, wie komfortabel, nämlich mit einem Klick, du das Design deiner Navigation anpassen kannst und wie viele zusätzliche Variationen du damit bei einem Design erzeugen kannst. Achte darauf, die Farben und Schriften für eine Navigation so zu gestalten, dass deine Besucher gerne durch deine Webseite navigieren und dass alles übersichtlich und gut auffindbar wird.

 

Viel Spaß beim Ausprobieren. Falls du eine Webseite im Internet findest mit einer interessanten Navigation und du diese Navigation vielleicht auch mal in page4 nutzen möchtest, schick uns einfach den Link zu der Webseite. Wir schauen uns an, ob man das umsetzen kann und werden es, wenn möglich, bei weiteren Updates im Bereich der Navigation berücksichtigen.

 

Bis demnächst
Manfred F. Schreyer

page4 Ltd.

 

 

PS: Lust auf page4 bekommen? Dann nutze unser Weihnachtsangebot und spare richtig Geld.

 

 

PPS: Nicht vergessen, hinterlasse einen Kommentar (hier oder auf unserer Facebook Seite) und die Adresse deiner Webseite und du hast die Chance, eine Premiumversion dauerhaft kostenlos zu nutzen. Es lohnt sich.

Tipp 6: Überschriften richtig nutzen

Tags: TippsSEOpage4Funktionen | Kommentare: 1 | Views: 4275

Donnerstag 8.Dezember 2016

 

So strukturierst du deine Texte

 

Überschriften sind neben Bilder der Blickfang deiner Seite. Sehr viele Besucher lesen zuerst deine Überschriften und nur, wenn sie dadurch gefesselt werden, lesen sie auch deine Texte. Es lohnt sich also, sich ein wenig mehr mit den Überschriften zu befassen. Überschriften sind bei page4 und vielen anderen Baukästen eigene Inhaltselemente. Obwohl Überschriften auch Texte sind, sollte man die Überschriften möglichst immer mit dem entsprechenden Content erstellen. Es gibt dafür mehrere Gründe.

 

Warum ein eigener Überschriften Content?

 

a) Überschriften werden über das Design deiner Webseite gestaltet. Es gibt 4 Formate für Überschriften. Die Gestaltung der 4 Formate ist im Design hinterlegt. Nur im Überschriften-Abschnitt kannst du mit einem Klick das entsprechende Format auswählen. Wenn du alle Überschriften so anlegst, brauchst du nur an einer Stelle, nämlich in den Design-Schriften Veränderungen vornehmen (Schriftfarbe, Schriftgröße usw.) und alle Überschriften auf allen Seiten werden automatisch angepasst.

b) Sind die Überschriften als eigener Abschnitt angelegt, kannst du diese Abschnitte beliebig und schnell auf der Seite umplatzieren, wenn das nötig tut. Sind die Überschriften dagegen zusammen mit dem Text in einem Textabschnitt eingebaut, dann musst du entweder immer den Text mit verschieben oder vor dem Verschieben die Überschrift in einen eigenen Abschnitt kopieren.

c) Google liebt es, wenn deine Texte klar strukturiert sind. Dabei berücksichtigt Google auch die HMTL Auszeichnungen. Wenn du mit dem Textabschnitt eine Überschrift anlegst, indem du einfach nur den Text im Text-Editor formatierst anstatt den entsprechenden Überschriften-Content zu nehmen, dann hat diese Überschrift für Google weiterhin das HTML Attribut "p" und wird als normaler Text bewertet und nicht als Überschrift. Überschriften haben dagegen das Attribut "h" abgeleitet von Headline und werden so auch von Google interpretiert.

 

 

Google liebt Überschriften

 

Aber nur, wenn du Überschriften richtig einsetzt. Im Link am Ende dieses Absatzes findest du mehr Informationen zu dem Thema. Hier nur ein paar wichtige Hinweise. Verwende, wenn möglich nur eine Überschrift "H1" auf jeder Seite und nutze für weitere Überschriften "H2" und "H3" zur Gestaltung. Normalerweise sollte eine Seite deiner Homepage auch nur ein Thema behandeln und um welches Thema es geht, erfährt der Besucher zuerst in der Hauptüberschrift. Diese sollte kurz und knackig sein und möglichst das Schlüsselwort (Keyword) enthalten, wodurch der Inhalt der Seite besonders gut beschrieben wird.

 

Achte darauf, dass die Überschriften auch in der Gestaltung entsprechend gewichtet sind. Die Hauptüberschrift "H1" sollte daher auch mit einer größeren Schrift dargestellt werden, als Überschriften zu Unterthemen. Wenn die Überschrift "H1" zum Beispiel mit 48 px dargestellt wird, passen 36 px gut für die "H2" Überschrift und 28 px für die Überschrift der dritten Ebene "H3". So sieht der Besucher sofort, welche Aussagen am wichtigsten sind. Die Schriftgröße ist immer abhängig von der gewählten Schrift und dem Fließtext. Außerdem sollte die Schriftfamilie mit dem Thema deiner Webseite zusammenpassen. Für eine Hochzeitsseite sind Schreibschriften sicher passender als für ein Betonwerk, um einmal zwei ganz krasse Gegensätze zu zeigen. Verwendest du eine Schreibschrift für die Überschriften, dann nehme eine ruhige schnörkellose Schrift wie Open Sans oder Lato für den Fließtext. So entsteht eine natürliche Spannung in der Gestaltung und gleichzeitig eine Harmonie der Gegensätze.

 

Mehr und ausführliche Informationen findest du auf der Webseite von Sistrix unter dem Stichwort "Welche Überschriften sind (SEO) relevant?" und in unserer Onlinehilfe zum Thema Überschriften.

 

Kleiner Tipp: Es sieht immer gut aus, wenn zwischen Überschrift und nachfolgendem Text weniger Abstand ist als zwischen dem Ende eines Textes und der dann folgenden Überschrift, die zum nächsten Absatz gehört. Du kannst das entweder über unseren Abstands-Content regeln und zwischen den einzelnen Bereichen damit zusätzlichen Abstand schaffen oder du benutzt die Optionen eines Abschnitts und setzt den Innenabstand einer Überschrift so, dass oben mehr Abstand ist als unten. Damit alle Abstände identisch sind, kopiere einfach die Überschriften oder die Abstände.

 

Bis demnächst

Manfred F. Schreyer

page4 - der Design-Webbaukasten

 

 

 

 

PS: Du hast noch keine page4 Webseite? Dann nutze jetzt unser Weihnachtsangebot und spare im ersten Jahr richtig Geld.

 

PPS: Nicht vergessen, hinterlasse einen Kommentar (hier oder auf unserer Facebook Seite) und die Adresse deiner Webseite und du hast die Chance, eine Premiumversion dauerhaft kostenlos zu nutzen. Es lohnt sich.

 

 

Tipp 5: Abgerundete Ecken

Tags: Tippspage4FunktionenDesign | Kommentare: 1 | Views: 619

Mittwoch 7.Dezember 2016

 

Eine wirklich runde Sache

 

Mit page4 hast du alle Freiheiten in der Gestaltung. Besonders gut zeigt sich dass bei dem Thema "abgerundete Ecken". Wie bei allen Gestaltungselementen sollte man es nicht übertreiben und nur sparsam einsetzen. Betrachte Gestaltungselemente wie ein besonderes Gewürz, dass einem perfekten Menue das gewisse Etwas verleiht und ein gutes Restaurant von einem Sterne-Restaurant unterscheidet. Richtig eingesetzt, kannst du mit page4 außergewöhnliche Webseiten gestalten.

 

Abgerundete Ecken im Design-Editor

Eine Webseite besteht aus verschiedenen Bereichen. Da ist zum einen der wichtigste Bereich, der Inhaltsbereich. Hier werden alle Inhalte eingebaut, also Texte, Bilder, Videos usw. Dann gibt es die Sidebars, die Header, die Footer, den Navigationsbereich und, falls du eine Streifenstruktur verwendest, die Außenbereiche. Jede dieser Bereiche kann unter anderem abgerundete Ecken bekommen. Eine abgerundete Ecke definiert sich durch den Grad der Abrundung - bei 0 px ist keine Rundung vorhanden, bei 99 px entsteht eine sehr große Rundung. Der zweite Parameter besteht darin, zu bestimmen, welche der vier Ecken eines Bereiches abgerundet werden soll. Mit page4 sind alle Kombinationen möglich.

 

Nachfolgend der Dialog aus dem Design-Editor, mit dem du per Klick bestimmst, welche Ecken eine Abrundung bekommen.

 

 

Wie du siehst, kannst du aus 16 Varianten auswählen. Eine Variante davon erzeugt allerdings keine einzige abgerundete Ecke (2). Wenn du die 16 verschiedenen Möglichkeiten nimmt, einem Bereich abgerundete Ecken zu geben und dann überlegst, dass du in Normalfall wenigstens einen Header, eine Navigation und einen Inhaltsbereich hast und zusätzlich noch bestimmen kannst, dass die Rundung einen Wert zwischen 1 und 99 px annehmen kann, dann wird deutlich, wie viele verschiedene Variationen du damit allein erzeugen kannst. Ich kenne keinen anderen Webbaukasten, der so viele Optionen nur für abgerundete Ecken anbietet, von den anderen Möglichkeiten ganz abgesehen.

 

Damit du aus den Optionen schöne Webseiten machst, halte dich am besten an den Grundsatz, dass viele Optionen nur das i Tüpfelchen sind, das besondere Gewürz. Zuviel ist selten gut. Eine Gegenüberstellung soll das verdeutlichen.

 

Design 1 - Phoebe

Hier ein Beispieldesign aus unserer Auswahl mit Inhalten gefüllt aber ansonsten unverändert gelassen. Es wurden nur zwei Ecken abgerundet und zwar bewusst zwei sich gegenüberstehende Ecken von zwei Bereichen, dem Inhalt und der Sidebar. Da nur eine Ecke jeweils abgerundet wird kann man durchaus auch mal einen großen Radius von 70 px verwenden. Man muss nur darauf achten, dass der Inhalt etwas mehr Abstand zum oberen Rand bekommt, da ansonsten nicht abgerundeter Inhalte über die Abrundung hinausragt. Der Bildschirm wurde soweit verkleinert dass man die gesamte Seite sieht, um einen besseren Eindruck zu bekommen.

 

 

Design 2 - Phoebe angepasst und mit runden Ecken überfrachtet und eindeutig verschlechtert...

 

Wir haben das Design der Seite anschließend etwas angepasst. Zum einen haben wir noch einen Header eingeblendet und dann alle Bereiche mit runden Ecken versehen. Zusätzlich hat jeder Bereich eine unterschiedliche Rundungsgröße bekommen und um das ganze noch weiter zu verschlechtern haben wir auch noch die Border unterschiedlich stark gemacht. Und für Border um den Header eine andere Farbe gewählt. So sieht das veränderte Design nun aus:

 

 

Wenn man jetzt noch die anderen Rahmen mit einer unterschiedlichen Farbe versehen und Schatten einbauen würde, ist der Supergau in der Gestaltung nahezu perfekt. So ein Design hat nichts mehr mit Gestaltung zu tun. Du solltest immer darauf achten, dass ein Konzept zu erkennen ist und eine gerade Linie den Betrachter führt. Dann bist du auf dem richtigen Weg. Nutze einfach unsere Vorlagen und passe diese vorsichtig an. Oder wähle irgendein Design, setze dann alles auf "Null", lösche alle verwendeten Bilder und Farben und starte dein ganz persönliches Design. Alles ist möglich, aber lange nicht alles sieht gut aus.

 

Ich hoffe, man kann durch diese Gegenüberstellung zwei Dinge sehen.

Zum einen ist weniger mehr und man sollte sparsam mit Effekten umgehen und zum anderen kann man sehen, jedes Design von uns kann beliebig angepasst werden. Man hätte noch die Breiten ändern, Linien an einigen Seiten wegnehmen und Slideshows einbauen können. Theoretisch und praktisch kannst du aus jeder Vorlage jede andere Vorlage zum Leben erwecken, indem du einfach die entsprechenden Parameter veränderst.

 

Das macht page4 so einzigartig. Unser Weg ist weg von starren, fest programmierten Designvorlagen hin zu einem Design-Baukastensystem, mit dem der User alles selbst machen kann. Wir sind überzeugt, dass unsere User in der Lage sind, mit den vielen Möglichkeiten verantwortungsvoll umzugehen und einen Sinn für Schönheit entwickeln, wenn sie page4 nutzen. Die einfache Benutzung öffnet Freiräume und erlaubt es, ein Auge fürs Gestalten zu entwickeln.

 

Du brauchst etwas Hilfe beim Design?

Wir bieten jedem User an, uns zu kontakten, wenn wir einen Blick auf das entworfene Design riskieren sollen und wir sind gerne bereit, dabei zu helfen, Fehler zu vermeiden und korrigierend einzugreifen. Für Kunden einer Kaufversion ist dieser Service aktuell kostenlos. Wir bitten nur um etwas Geduld, da wir uns natürlich Zeit nehmen müssen, deine Seite zu besuchen und uns dabei überlegen, wie wir mit wenigen Handgriffen etwas verbessern können. Benutzt du noch ein altes Design, dann helfen wir dir gerne auf das neue System umzusteigen. Meist geht dass einfach und so gut, dass die Seite danach fast identisch in der alten Gestaltung ist. Bei einigen älteren Spezialdesigns muss man leider einen Schnitt machen und neu gestalten, da wir die dort verwendetet Technik mit hinterlegten Grafiken nicht mehr unterstützen.

 

Du hast Lust bekommen, dir eine eigene Seite mit page4 zu erstellen? Dann nutze unsere kostenlosen Versionen oder nimm gleich den aktuellen Weihnachtsrabatt mit, es lohnt sich.

 

Bis demnächst

Manfred F. Schreyer

page4 - der Design-Webbaukasten

 

 

 

PS: Nicht vergessen, hinterlasse einen Kommentar (hier oder auf unserer Facebook Seite) und die Adresse deiner Webseite und du hast die Chance, eine Premiumversion dauerhaft kostenlos zu nutzen. Es lohnt sich.

 

Tipp 4: Aliasnamen nutzen

Tags: Tippspage4Funktionen | Kommentare: 8 | Views: 958

Dienstag 6.Dezember 2016

 

Google wird es lieben

 

Wenn du in page4 eine neue Seite anlegst, dann bekommt diese Seite eine einzigartige ID und wenn du keinen Aliasnamen für die Seite anlegst, dann wird die Seite im Browser mit der ID und ".html" angezeigt. Dieser Link ist, solange die Seite existiert, immer korrekt, egal, welchen Namen du für die Seite vergibst.

 

Bei der Erstellung der Beispielseiten für unseren Streifencontent war ich so begeistert von der neuen Funktion, dass ich beim Anlegen der Seiten nicht darauf geachtet habe, einen Aliasnamen zu vergeben. Wenn du den Link http://strips.features.page4.com/180.html aufrufst, dann kommst du zu einer Seite, die in der Navigation den Namen "Mehr Streifen" hat. Wie du im Link und oben im Browser sehen kannst, wird aber nur die Seiten-ID angezeigt. Besser wäre es gewesen, einen Aliasnamen "mehr-streifen" zu vergeben, dann würde im Link nun statt "180.html" der viel bessere Begriff "mehr-streifen.html" stehen. Natürlich könnte ich jederzeit nachträglich einen Aliasnamen vergeben und wenn jemand den Link mit der ID verwendet, würde er trotzdem auf die Seite kommen und im Browser wird dann auch der Aliasname gezeigt. Ich habe das aber nicht gemacht, damit du ein gutes Beispiel hast, wie eine Verlinkt mit einer Seiten-ID aussieht. Allein dieses Beispiel sollte dir verdeutlichen, wie wichtig Aliasnamen sind. Für Google und auch für deine Besucher. Außerdem zeigt das obige Beispiel unserer Musterseite, dass der Name einer Seite in der Navigation angezeigt wird, aber keinen Einfluss auf den Link der Seite hat.

 

Google mag es nicht, wenn es im Netz auf Seiten trifft, die einen Link haben, der ohne Aussagekraft ist. Wenn Google eine Seite findet, die zum Beispiel "software-zum-erstellen-von-webseiten.html" heisst, dann kann Google daraus Schlüsse ziehen, worum es bei dieser Seite geht und den Link bewerten und bei Suchanfragen berücksichtigen. Für dich ist es gut, wenn Google die Linknamen deiner Seiten mag. Daher solltest du in jedem Fall für jede Seite auch automatisch gleich einen Aliasnamen anlegen.

 

 

So kannst du den Aliasnamen vergeben

 

Rufe den Seitenmanager auf und klicke auf eine Seite im Seitenbaum, um diese zu bearbeiten. Es öffnet sich folgender Dialog:

 

 

Das Feld für den Aliasnamen ist mit einer (3) markiert. Wenn kein Alias vergeben ist, steht dort ein Hilfetext. Ein Aliasname darf nur aus Buchstaben, Zahlen und Bindestrichen bestehen, Sonderzeichen sind nicht erlaubt und werden gelöscht oder wenn möglich umgewandelt (ä in ae). Du kannst zwar Groß- und Kleinbuchstaben verwenden, aber das System wandelt beim Speichern alles in Kleinbuchstaben um.

Hinweis: In wenigen Wochen gibt es einen neuen Seitenmanager, der dann ähnlich wie der neue Blog aussieht. Die Funktionen sind identisch und du wirst genauso schnell damit zurechtkommen. Der Aliasname wird dann "Seiten URL" heissen. Damit ist besser zu sehen, welchen Zweck der Aliasnamen hat. Und die Dialoge werden im neuen Seitenmanager anders aussehen.

 

Wichtig: Die Startseite hat immer das Alias "index.html" und dieses kann auch nicht überschrieben werden. Bei page4 ist die Startseite immer die von dir markierte Seite, unabhängig davon, wo diese Seite in der Navigation tatsächlich ist. Bei anderen Baukästen ist die Startseite öfter die, welche oben im Seitenbaum steht. Möchtest du bei so einem Baukasten eine neue Startseite haben, musst du die neue Seite im Seitenbaum erst ganz nach oben schieben. Bei page4 klickst du einfach auf die Seite und markierst diese mit einem weiteren Klick als Startseite. Das sorgt dafür, dass die neue Startseite den Aliasnamen "index.html" bekommt und die alte Startseite bekommt wieder die ID als Verlinkung. Es ist egal, wo die Startseite im Seitenbaum liegt.

 

Wichtig: Aliasnamen müssen einzigartig sein, da sie bei Verwendung eine Sprungmarke zu genau einer Seite sind. Es ist nicht möglich, zwei identische Aliasnamen in einer Homepage zu verwenden. Das System erkennt das und löscht den bereits existierenden Aliasnamen, wenn du eine weitere Seite mit dem selben Namen belegst und das abspeicherst.

 

Ebenfalls wichtig: Wenn du zu einer Seite verlinkst, indem du den Aliasnamen nimmst, dann sei dir dabei bewusst, dass eine Änderung des Aliasnamens dazu führt, dass dieser Link nicht mehr korrekt ist und dann automatisch zur Startseite weiterleitet. Wenn du den Aliasnamen löscht und einer anderen Seiten dann diesen Aliasnamen gibst, funktioniert der Link weiterhin, ruft aber die neue Seite auf, da diese nun den Aliasnamen hat. Bei der Seiten-Id kann es nicht passieren. So ein Link bleibt aktiv, solange die Seite selbst existiert. Löscht du die Seite, wird der Link ungültig. Da die Seiten-Ids für jede Webseite einzigartig sind, wirst du niemals mehr eine Seite anlegen können mit der Seiten-Id der gelöschten Seite.

 

Dies ist zwar nur ein kurzer Blog-Artikel aber mit einer wichtigen Botschaft. Lege für jede Seite einen Aliasnamen an, am besten gleich wenn du die Seite anlegst und benennst. Wenn du keine speziell entworfenen Aliasnamen nehmen willst, dann kopiere einfach den Namen der Seite auch in das Aliasfeld. Das System korrigiert diesen Namen und entfernt alle ungültigen Zeichen.

 

Weiterhin viel Erfolg mit deiner page4 Seite und wenn du zufrieden bist, empfehle uns gerne weiter

 

Bis demnächst

Manfred F. Schreyer

 

 

PS: Lust auf page4 bekommen? Dann nutze unser Weihnachtsangebot und spare richtig Geld.

 

 

PPS: Nicht vergessen, hinterlasse einen Kommentar (hier oder auf unserer Facebook Seite) und die Adresse deiner Webseite und du hast die Chance, eine Premiumversion dauerhaft kostenlos zu nutzen. Es lohnt sich.

 

Tipp 2: Mobile Seiten

Tags: Tippspage4MobilFunktionenDesign | Kommentare: 5 | Views: 646

Samstag 3.Dezember 2016

 

Überall die optimale Ansicht

 

Immer mehr User nutzen den Zugang zum Internet über mobile Geräte wie iPhone, iPad oder ähnliche Geräte von anderen Herstellern. Es wird daher immer wichtiger dafür zu sorgen, dass die eigene Homepage auch auf solchen Geräten perfekt funktioniert und vernünftig aussieht. Mit page4 setzt du auf genau den richtigen Baukasten. Unsere neuen Designvorlagen bzw. alle mit dem Design-Editor erstellten Webseiten sind responsive. Auch die Inhalte deiner Webseite sind responsive. Was genau bedeutet das?

 

Ausführliche Informationen findest du zum Beispiel bei Wikipedia oder bei Google. Der Begriff Responsive Webdesign bedeutet im weitesten Sinne "reagierendes Webdesign". Damit ist gemeint, dass sich die Webseite an die Bildschirmauflösung anpasst. Grundsätzlich sind Webseiten schon seit Anbeginn responsive, also fliessend. In der Vergangenheit hat man die Probleme der Darstellung einer Homepage auf ein Smartphone dadurch gelöst, dass es zwei Versionen der Webseite gab. Eine für Desktop-Geräte und eine zweite für mobile Geräte. Einige Webbaukästen machen das heute noch so. Es ist zwar nicht so, dass es zwei verschiedene Inhalte gibt, die dann parallel gepflegt werden müssen, sondern lediglich zwei Gestaltungen ein und derselben Seite. Aber auch das erfordert immer zusätzliche Arbeit und man muss bei jeder Änderung der Desktop-Version schauen, dass die mobile Variante noch richtig darstellt. Wenn man die Seiten komplett selbst programmiert, besteht der Vorteil von zwei getrennten Designs darin, dass man die mobile Ansicht optimal auf die Besucher abstimmen kann.

 

Mit dem Aufkommen von responsiven Systemen übertrug man die Anpassung an die Umgebung auf den Sourcecode, indem man Weichen einbaute, die genau bestimmten, wann die Webseite auf eine andere Variante der Darstellung umschalten sollte. Während man bei selbst programmierten Webseiten diesen "doppelten" Code weiterhin pflegen muss, übernimmt ein Baukasten die gesamte Arbeit.

 

Bei page4 muss man lediglich im Design die Option "Mobile Ansicht" aktivieren und schon passt sich die Seite einem mobilen Gerät an. Software ist ein fortlaufender Prozess und auch page4 ist noch lange nicht fertig und wird das wohl auch nie werden. Aktuell ist es so, dass wir lediglich einen Umschaltpunkt haben. Sobald der Bildschirm eine Breite von 480 px erreicht hat (zum Beispiel ein iPhone im Hochformat) schaltet das System auf mobilen Modus um. Im Querformat wird im Moment weiterhin die normale Webseite angezeigt. Im ersten Halbjahr 2017 wollen wir diesen Bereich für Kunden umfangreich ausbauen und variable Umschaltpunkte einbauen, die man zusätzlich visuell anzeigen lassen und selbst anpassen kann.

 

Was muss man bei einer mobilen Ansicht berücksichtigen?

 

Mehrere Spalten

Mit page4 kannst du mehrspaltige Inhalte anlegen. Es ist verständlich, dass bei einem Bildschirm mit der Breite von 480 px mehrspaltige Inhalte extrem schlecht zu lesen sind. Daher schaltet das System die Spalten aus und platziert alle Inhalte untereinander, um sicher zu stellen, dass die Schriftgröße lesbar bleibt. Das ist beabsichtigt und normal.

 

Sidebars

Außerdem kannst du mit page4 auf der linken oder/und der rechten Seite deiner Webseite sogenannte Sidebars anlegen. Der Inhalt dieser Sidebars wird auf allen Seiten angezeigt und ist eigentlich ideal, um wichtige Inhalte, die immer sichtbar sind, zu platzieren. Der Nachteil ist, dass bei einer mobilen Ansicht kein Platz für eine Sidebar ist. Diese wird daher einfach ausgeblendet. Wenn du Wert darauf legst, dass wichtige Inhalte auch mobil sichtbar sind, dann nutze den Footer 1. Dort kannst du ganz normal Inhalte wie bei einer Sidebar anlegen und der Footer bleibt auch in der mobilen Ansicht sichtbar.

 

Inhalte auf dem Header

Du kannst im Design-Editor Texte, Bilder und eine Galerie auf den Header platzieren und zwar per Drag&Drop. Dabei werden diese Inhalt absolut platziert, also an einer bestimmten Stelle. Aktuell ist es so, dass diese Inhalte in der mobilen Version deaktiviert werden.

 

Inhalte auf der Seite selbst

Die meisten Inhalte passen sich automatisch an die Spaltenbreite an. Wenn die gesamte Breite der Seite verringert wird, dann werden auch alle Inhalte angepasst. Wenn du externen Code über den HTML Abschnitt einbaust, musst du darauf achten, dass dort keine festen Breiten definiert sind. Ansonsten kann sich der Inhalt nicht automatisch anpassen. Tabellen haben gewisse Beschränkungen. Eine Spalte kann nie kleiner werden als das längste Wort in dieser Spalte, da keine automatische Trennung möglich ist. Die Gesamtbreite einer Tabelle kann daher unter Umständen breiter sein als der verfügbare Bildschirm. In diesem Fall würde die Tabelle entweder über die Seite nach rechts laufen oder abgeschnitten werden. Diese technische Einschränkung kann man nicht umgehen. Auch lange Wörter in Überschriften können nicht umbrochen werden, wenn das einzelne Wort breiter ist als der Bildschirm.

 

Abgesehen von den genannten Ausnahmen und einigen wenigen Sonderfällen sollten sich alle Inhalte, soweit es technisch möglich ist, an die Gesamtbreite deiner Seite anpassen. Du musst lediglich den mobilen Modus angeschaltet haben. Den findest du direkt im Menü, wenn du den Design-Editor aufrufst.

 

Es gibt einige Elemente, die nicht auf allen mobilen Geräten funktionieren. Hast du noch eine Flash-Galerie in Gebrauch solltest du diese auf die neue Slideshow umstellen die ohne Flash funktioniert. Der Dateidownload benötigt zwar zum Hochladen der Datei noch Flash sollte aber im Mobilmodus funktionieren.

 

Die Navigation

Aktuell gibt es eine mobile Navigation die automatisch angezeigt wird, wenn die Bildschirmbreite 480 px oder kleiner ist. Diese lässt sich bequem auf mobilen Geräten bedienen. Du kannst allerdings das Aussehen der Navigation nicht selbst einstellen. Dass wird im Laufe des nächsten Jahres verfügbar sein.

Grundsätzlich solltest du darauf achten, dass deine Hauptnavigation nicht zu breit wird und zu viele Navigationspunkte hat. Wähle kurze, knackige Bezeichnungen und beschränke dich auf 5 bis 6 Hauptseiten und verschiebe alles andere auf die Unterseiten. Dann kannst du sicher sein, dass deine Seite auch auf mobilen Geräten im Querformat oder auf dem iPad - also auf Breiten über 480 px perfekt aussieht. Je größer die Schrift der Navigation ist und je mehr Platz du oben und unten einbaust, umso besser kann die Navigation auf einem mobilen Geräten bedient werden.

 

Das Thema "Responsive Webdesign" bleibt spannend und wird immer wichtiger. Wir wissen das und sind dabei page4 ständig zu verbessern und zu optimieren.

 

Bis demnächst

Manfred F. Schreyer

 

PS: Du hast noch keine page4 Webseite? Dann nutze jetzt unser Weihnachtsangebot und spare im ersten Jahr richtig Geld.

 

PPS. Du möchtest eine page4 Premiumversion gewinnen mit unbegrenzter kostenloser Nutzung? Dann hinterlasse in unserem Blog oder auf unserer Facebook-Seite einen Kommentar mit der Angabe deiner Webseite. MIt etwas Glück hast du im Januar deine kostenlose Premiumversion.

 

 

 

Tipp 1: Bilder in page4

Tags: Tippspage4FunktionenDesignBilder | Kommentare: 0 | Views: 785

Freitag 2.Dezember 2016

 

So nutzt du Bilder richtig

 

Bilder sind ein wichtiges Gestaltungselement jeder Webseite. Auch wenn die heutigen Internetleitungen schnell sind, sollte man darauf achten, dass Bilder optimiert werden, bevor man sie auf seiner Webseite benutzt. Wichtig ist außerdem die Tatsache, dass das Internet kein rechtsfreier Raum ist. Es ist also sehr wichtig, darauf zu achten, dass nur Bilder benutzt werden, bei denen die Eigentumsverhältnisse und Nutzungsrechte zu 100% klar sind. Sonst kann es richtig teuer werden. Nachfolgend einige Hinweise für die Nutzung von Bilder auf deiner Webseite.

 

1. Bilddatenbanken

Es gibt eine Vielzahl an Online-Datenbanken mit Millionen von Bildern. Wir nutzen zum Beispiel für unser Bildarchiv www.pixabay.com und www.stocksnap.com sowie eigene Bilder und haben daraus interessante Motive für euch rausgesucht. Obwohl die Nutzung der Bilder kostenlos ist, muss man zwingend darauf achten, welche Nutzungsbedingungen bei jedem einzelnen Bild vorgegeben sind. Es gibt Bilder, die man zwar kostenlos nutzen darf, aber nur für redaktionelle Zwecke. Andere darf man nicht für kommerzielle Projekte nutzen. Das steht dann entweder direkt beim Bild oder in den angegebenen Lizenzen. Dies gilt übrigens auch für gekaufte Bilder aus einer Online-Datenbanken. Je nach Lizenz unterliegt die Nutzung bestimmten Einschränkungen.

 

2. Lizenzvereinbarungen verstehen

Viele im Netz verfügbare Bilder unterliegen nicht einem normalen Copyright sondern der sogenannten Creative Commons (CC). Zum einen hilft dieses Lizenzmodell dabei hochwertige Bilder rechtssicher im Internet zu nutzen. Auf der anderen Seite gibt es doch sehr viele verschiedene Modelle dieser Lizenz und man sollte daher genau wissen, was man bei der jeweiligen Lizenz mit den Bildern machen darf und was nicht. In dem Artikel "Wie CreativeCommons richtig genutzt werden" bekommst du ausführliche Informationen dazu.

 

3. Rechtssicherheit bei der Bildnutzung

Es ist leider so, dass sich viele Betreiber einer Webseite nicht im Klaren darüber sind, unter welchen Bedingungen man fremde Fotos nutzen darf. Ebenso sind sich viele User auch nicht darüber im klaren, wie sie sich verhalten sollen, wenn die eigenen Bilder plötzlich auf fremden Webseiten auftauchen und dort benutzt werden. Auf der Internetseite www.internetrecht-rostock.de gibt es eine sehr ausführliche Darstellung im Bezug auf die Benutzung von Bildern für die eigene Webseite.

 

Hinweis: Obwohl wir natürlich diese Tipps mit größter Sorgfalt zusammengestellt haben, können wir keine Garantie auf die Richtigkeit übernehmen und in keinem Fall gelten diese Hinweise als verbindliche rechtliche Beratung. Im Zweifel sollte man immer einen Fachanwalt zu Rate ziehen.

 

4. Die richtige Bildgröße

Heutige Digitalkameras erzeugen inzwischen sehr hochauflösende Fotos und Videos. Je mehr Pixel ein Bild hat, umso größer ist auch die abgespeicherte Datei. Ein mit einer NIKON D500 gemachtes Bild in voller Auflösung hat zum Beispiel eine Größe von 5.568 x 3.712 Pixel und die Datei als JPG ist je nach Motiv und Kompression zwischen 10 und 20 MB groß. Solch ein Bild direkt für die Webseite hochzuladen ist wenig sinnvoll. Viele Webbaukästen erlauben zwar so große Dateien und sorgen damit vor allem dafür, dass der verfügbare Speicherplatz schnell voll wird. Zum Anzeigen auf einer Webseite ist das Bild aber viel zu groß. Zum einen würde das Laden des Bildes je nach Internetgeschwindigkeit mehrere Sekunden dauern und zum anderen haben selbst sehr große Bildschirme selten mehr Auflösung als 2.560 x 1.440 Pixel und man könnte das Bild niemals in Originalgröße anzeigen lassen, es würde in jedem Fall verkleinert. Möchtest du wissen, wie lange es dauert, zum Beispiel ein 1 MB großes Bild bei einer DSL 16.000 Leitung zu laden, dann kannst du den Download-Rechner von der Webseite "wieistmeineip" nutzen. Die Daten der Bilder werden "nacheinander" vom Server geladen, bevor sie in deinem Browser angezeigt werden können. Hast du 20 Bilder von je 1 MB Größe auf einer Seite und braucht deine Leitung pro Bild 0,5 Sekunden zum Laden, dann muss dein Besucher 10 Sekunden warten, bevor alle Bilder angezeigt werden können. Daran siehst du wie wichtig es ist, möglichst kleine Bilder zu laden. Ausführliche Infos findest du in unserer Online-Hilfe. Dauert es zu lange, bis deine Webseite komplett angezeigt wird, springt der Besucher ab und kommt nie wieder. Da du nie wissen kannst, wie schnell ein Besucher unterwegs ist, solltest du alles unternehmen, die von dir verwendeten Bilder zu optimieren. Also nur in der Größe hochladen, die benötigt wird und so optimal wie möglich komprimieren. Ein normales Foto sieht auch mit einer Kompression von 50% sehr gut aus. Nur Bilder mit glatten Farbverläufen können nicht so stark komprimiert werden. Einfach lieber einmal mehr probieren und dann erst auf die Webseite hochladen. Es lohnt sich wirklich. Wir haben alles unternommen, damit page4 sehr schnell ist. Nun kommt es vor allem darauf an, dass du die richtig optimierten Inhalte verwendest.

 

 

5. Bildverwaltung

Nutzt du einen Webbaukasten ohne Bildverwaltung, dann kennst du die nachfolgenden Probleme sicher zur Genüge. Möchtest du ein Bild an zwei oder mehr Stellen auf deiner Webseite einbauen, musst du es mehrmals hochladen. Möchtest du ein Bild, nachdem du es hochgeladen hast verlinken, dann musst du genau wissen, wo auf dem Server des Anbieters das Bild liegt bzw. welche Adresse das Bild genau hat. Außerdem weisst du niemals, ob das Bild in der Originalgröße hochgeladen wird und dann auch so bleibt oder ob der Anbieter das Bild verkleinert. Und löscht du das Inhaltselement, worin sich das hochgeladene Bild befindet, wird es mit gelöscht.

 

Mit einer Bildverwaltung hast du eine zentrale Stelle, an der du Zugriff auf alle Bilder hast. Du kannst bei page4 an jeder Stelle Bilder hochladen. Diese "landen" aber immer alle in der Bildverwaltung und zwar in der Größe, in der du die Bilder hochgeladen hast. Wir prüfen vor dem Hochladen die Dateigröße und erlauben im Interesse der Geschwindigkeit deiner Webseite bei kostenlosen Seiten max. 2 MB pro Bild und in der Kaufversion 3 MB pro Bild. Löscht du Bilder in einem Content oder löscht du den gesamten Content, in dem sich das Bild befand, wird niemals das Bild aus der Bildverwaltung gelöscht. So bist du immer auf der sicheren Seite.

 

Wenn du diese Tipps beachtest, dann hast du noch mehr Freude mit deiner page4 Webseite. Nutze die vielen verschiedenen Galerien und die Design-Optionen, um mit tollen Fotos die Besucher deiner page4 Webseite zu fesseln.

 

Bis demnächst
Manfred F. Schreyer

PS: Du hast noch gar keine page4 Webseite? Dann nutze jetzt unser Weihnachtsangebot und spare im ersten Jahr richtig Geld.

Slideshow Hintergrundbereich

Tags: UpdateToolsTippsFunktionenBilderDesign | Kommentare: 1 | Views: 1422

Donnerstag 17.November 2016

 

Der perfekte Augenblick...

 

Unser Webbaukasten page4 ist insbesondere für Fotografen und alle, die gerne Bilder veröffentlichen geeignet. Es gibt eine Vielzahl an verschiedenen Galerien. Man kann im Header eine Slideshow einbauen mit tollen Effekten. Es gibt eine Bildverwaltung, so dass man Bilder nur einmal hochladen muss und diese dann beliebig oft verwenden kann. Die intelligente Seitenverwaltung erlaubt bis zu 10 Ebenen und man kann bequem hunderte von Seiten managen und hat genug Platz für alle Bilder und genug Ebenen um mehrsprachige Seiten zu erstellen. Perfekt für Seiten, die den richtigen Moment einfangen und vorstellen wollen...

 

Unser Design-Editor erlaubt einzigartige und vor allem wirklich individuelle Gestaltungen völlig ohne Programmierung oder dass man dafür externe Fachleute bezahlen müsste. Mit page4 kann jeder Design-Experte werden. Beste Voraussetzungen also für ein optimales Umfeld für deine Fotos und deine Leidenschaften.

 

Mit dem heutigen Update dürften wir all die erfreuen, die Bilder lieben und die eingefangenen Momente gerne mit anderen teilen wollen. Versprochen.

 

 

 

Wechselbilder für den Hintergrund

 

Die Idee, im Hintergrund mehrere Bilder zu hinterlegen, die dann in Form einer Slideshow nacheinander gezeigt werden und dabei überblenden ist nicht neu. Viele unserer Mitbewerber haben diese Funktion schon eine ganze Weile. Das weiss jeder, der verschiedene Baukästen kennt. Wer page4 kennt weiss aber auch, dass wir immer ein Interesse haben, bekannte Funktionen zu optimieren, zu verbessern und überraschende Ideen hinzuzufügen. Es gibt nichts, was man nicht verbessern kann und Updates sind für uns immer eine Gelegenheit, Verbesserungen vorzustellen. Aufgrund unserer langen Erfahrung - den ersten Webbaukasten haben wir bereits 2004 auf den Markt gebracht - haben wir in den Tiefen von page4 eine Menge Ideen "versteckt" die wir nach und nach zum Leben erwecken. Ich freue mich, euch heute zeigen zu können, wie wir uns Wechselbilder für den Hintergrund vorstellen.

 

 

Der allgemeine Hintergrund

 

Das heutige Update ist für unsere Kaufversionen wesentlich umfangreicher als für die kostenlose Version. Da wir auch den Usern einer kostenlosen Version eine Freude machen wollten, haben wir den allgemeinen Hintergrund für alle Versionen identisch gemacht.

 

 

Wer ein neues editierbares Design benutzt und auf Design editieren klickt bekommt oben im Browser ein Menü angezeigt und kann dort unter anderem den Hintergrund (1) auswählen. Der Hintergrund ist die unterste Ebene deiner Webseite und dehnt sich grundsätzlich immer im gesamten Browser aus. Du kannst den Hintergrund mit einer Farbe belegen und ein Bild einbinden und angeben, wie das Bild skaliert wird, wie es ausgerichtet sein soll und ob es gekachelt werden soll, wenn es nötig ist. Außerdem kannst du angeben, ob das Bild fixiert ist oder mitscrollt, wenn du den Inhalt deiner Seite scrollst.

 

Bisher gab es zum Auswählen eines Bildes drei Icons. Eines zum Hochladen eines Bildes von deinem Computer, eines um ein Bild aus deiner Bildverwaltung zu laden und eines um auf unser Bildarchiv Zugriff zu haben. Und einen Papierkorb, um das verlinkte Bild zu löschen. Diese Icons gibt es im Hintergrundbereich nicht mehr. Es gibt nur noch zwei Icons (2). Einen Stift und den Papierkorb. Mit dem Papierkorb löscht du wie bisher die Verlinkung zu deinem Bild wobei du jetzt mit einem Klick alle hinterlegten Bilder entfernst. Aber keine Sorge, die Bilder sind weiterhin verfügbar, da immer nur die Verlinkung unterbrochen wird und die Bilder in der Bildverwaltung hinterlegt bleiben.

 

Mit dem Stift öffnest du nun einen neuen Dialog. Mit diesem Dialog kannst du bis zu 10 Bilder aussuchen, sortieren und hinterlegen. Sobald du mehr als ein Bild eingeladen hast wird die Angabe der Zeit (3) aktiv und die vorhandenen Bilder nacheinander in einer Endlosschleife angezeigt. Du kannst die Zeit für das Überblenden stufenlos von 3 bis 30 Sekunden einstellen.

 

 

Der neue Bildauswahl-Dialog

 

 

Hier siehst du den neuen Dialog zur Bildauswahl (1). Die Icons aus dem bisherigen Auswähler findest du nun oben im Dialog zusammen mit einem kleinen Text (2). Die Funktion ist wie bisher und öffnet entsprechende Dialoge um dir zu ermöglichen, die gewünschten Bilder einzubinden.

 

Der Dialog ist eine erste Version und daher sehr einfach gehalten. Du kannst hiermit bis zu 10 Bilder einladen. Die eingebundenen Bilder werden als Vorschau (3) angezeigt. Mit der Maus kannst du die Reihenfolge ändern und Bilder wieder löschen indem du auf das rote Kreuz klickst was erscheint, wenn du mit der Maus über ein Vorschaubild fährst. Mehr brauchst du nicht für die Slideshow.

 

Wir werden im Frühjahr 2017 den Dialog komplett überarbeiten. Sobald wir die geplanten zusätzlichen Funktionen eingebaut haben wird der Dialog ersetzt und dann auch in den Galerien eingebaut. Dann wirst du mit dem Dialog die Bildunterschriften der Galeriebilder verwalten, zusätzliche Bildquellen haben und vieles mehr. Außerdem wollen wir uns im nächsten Jahr auch dem Thema Video verstärkt widmen.

 

Wichtig: Du musst den Dialog mit dem Button "Übernehmen" schließen wenn du die Änderungen speichern willst. Klickst du auf "Abbrechen" gehen alle Änderungen verloren.

 

 

 

Mehr Funktionen für die Kaufversionen

 

Ein Design besteht aus mehr als einem Bereich und jeder Bereich hat auch einen Hintergrund. Daher kannst du mit dem Design-Editor von page4 jeden Bereich mit einer Hintergrundfarbe oder bzw. und einem Hintergrundbild versehen.

 

Es gibt viele Bereiche. Den allgemeinen Hintergrund haben wir weiter oben ja schon beschrieben. Daneben gibt es noch den Inhaltsbereich. Also der Bereich, wo alle Inhalte deiner Webseite eingebunden werden. Es gibt zwei Sidebars, eine linke und eine rechte Sidebar. Es gibt drei Header oben und drei Footer unten. Wenn du eine Streifenstruktur aktivierst, dann gibt es neben jedem Header, jedem Footer und dem Inhaltsbereich noch Außenbereiche, sogenannte Streifen, die links und rechts bis an den Rand des Browsers reichen.Wenn die Navigation nicht in einem Header platziert ist, hat auch die Navigation einen Bereich, der Optionen für den Hintergrund hat.

 

All diese Bereiche kannst du bearbeiten und mit einer Farbe, Rahmen, Effekte und auch mit einem Hintergrundbild belegen. Die meisten Bereiche kannst du ein- oder ausblenden. Du entscheidest das mit einem Mausklick.

 

Mit dem neuen Update ändert sich einiges für diese Bereiche. Alle Dialoge, welche es ermöglichen, dass man ein Hintergrundbild einladen kann, haben jetzt den neuen Bildauswähler und erlauben dir in JEDEN Bereich im Hintergrund eine Slideshow einzubauen. Du kannst also jeden Header, jeden Footer, jede Sidebar, jeden Streifen und sogar die Navigation mit einer Slideshow im Hintergrund versehen. Allerdings solltest du jetzt nicht wahllos alle Bereiche umbauen. Das wäre viel zu viel des Guten. Man kann zwar alles gleichzeitig benutzen aber das sieht  bestimmt nicht gut aus. Weniger ist hier wirklich viel mehr.

 

Nachfolgend zeigen wir dir anhand des Dialoges, der erscheint, wenn du den Header 1 auswählst der Unterschied zwischen einer kostenlosen Version und einer Kaufversion. Für die kostenlose Version ändert sich nichts. Jede Kaufversion hat dagegen ab sofort den geänderten Bildauswähler und damit die Optionen für eine Slideshow im Hintergrund.

 

 

 Dialoge im Design-Editor bei einer kostenlosen Version

 

 

 

Dialoge im Design-Editor bei einer Kaufversion

 

 

 

Der Unterschied

In der kostenlosen Version kannst du wie bisher ein Bild in jeden Hintergrund eines Bereiches einbinden und das Werkzeug dazu sieht aus wie immer. Nur das Label hat sich leicht verändert. Dort steht jetzt "Bild(er)" statt wie früher "Bild". Hast du eine kostenlose Version, erkennst du an dem Label, dass du mit einer Kaufversion überall dort eine Slideshow einbauen könntest - vielleicht ein zusätzlicher Grund über ein Upgrade nachzudenken.

 

In allen Kaufversionen kannst du nun in jedem Bereich deiner Webseite wo du bisher ein Bild hinterlegen konntest nun bis zu 10 Bilder hinterlegen und diese nacheinander in beliebiger Geschwindigkeit als Slideshow anzeigen lassen. Du solltest diese Freiheit aber mit Bedacht nutzen. Der Sinn dieser Optionen ist nicht zwingend, dass du nun dein gesamtes Design mit Slideshows hinterlegst und deine Besucher gar nicht mehr wissen wohin sie schauen sollen weil ständig überall Bilder auftauchen und verschwinden.

 

Der Sinn besteht vielmehr darin, dass du völlige Freiheit hast, selbst zu entscheiden, wo du in dem Design deiner Webseite gerne eine perfekte Bildershow hinterlegen möchtest. Ob im Hintergrund der Seite, im Header 1, 2 oder 3 oder doch lieber im Footer. Ob in der linken oder rechten Sidebar oder sogar unter deinen Inhalten. Oder vielleicht doch lieber als Streifen, der über den gesamten Browser geht.

 

Du allein bestimmst, was dir gefällt. Und zwar mit jedem editierbaren Design und wo und wie oft du willst.

 

 

Unsere Musterseite für den Slider

 

Damit du eine kleine Hilfe hast, wie so etwas aussehen könnte, haben wir ein paar Seiten für dich vorbereitet und zeigen dir dort einige Bereiche, wo so ein Slider angelegt werden könnte. Auf den Seiten erklären wir die neue Funktionen noch etwas genauer und beschreiben wie wir die unterschiedlichen Slider gebaut haben. Beachte bitte, dass die Funktion im Design-Editor eingebaut ist und daher an das Design gebunden ist. Wechselt du das Design, gehen deine Hintergrundslider verloren. Normalerweise ist es bei page4 nicht zwingend notwendig, ein einmal erstelltes Design zu wechseln. Du kannst alle Designvorlagen selbst nachbauen ohne dazu dein aktuelles Design zu wechseln.

 

Auf den Beispielseiten sieht es so aus, als ob wir verschiedene Designvorlagen bzw. Designideen innerhalb einer Webseite verwenden. Dass ist nicht der Fall. Wir haben mehrere Accounts kopiert und dann in den einzelnen Accounts das Design entsprechend angepasst. Die Navigation verlinkt nicht zu Seiten sondern zu den entsprechenden Accounts. So entsteht der Eindruck als ob alles eine Webseite ist. Wir wollen im Laufe des kommenden Jahres die Funktion fertigstellen, die es ermöglicht, beliebige Seiten mit von dir erstellten und gespeicherten Designvorlagen zu verbinden. Dann kannst du in einer Webseite beliebig viele Designvorlagen nutzen. Dass wird aber noch etwas dauern.

 

Du findest die Seiten unter der Adresse bgslider-1.features.page4.com und wenn du oben die einzelnen Navigationspunkte anwählst dann zeigen wir dir verschiedene Beispiele wie man den Slider nutzen könnte.

 

Viel Spaß beim Ansehen, nachbauen und selbst probieren.

 

 

Dein page4 Team

Manfred F. Schreyer

Raumgestaltung

Tags: Updatepage4FunktionenContent | Kommentare: 9 | Views: 9224

Mittwoch 26.Oktober 2016

 

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.

Neue Galerien Teil 3

Tags: Updatepage4FunktionenContentBilder | Kommentare: 7 | Views: 4276

Dienstag 18.Oktober 2016

 

Das Karussell ist da

 

Heute dreht sich alles um die vorerst letzte Galerie, ein sogenanntes Karussel. Die Einstellungen sind ähnlich wie bei den anderen Galerien. In der Darstellung werden alle Vorschaubilder in einer Reihe angezeigt. Und zwar so viele gleichzeitig, wie Platz ist. Ist die Automatik eingeschaltet oder klickst du auf den Play-Button werden nacheinander weitere Bilder angezeigt indem links ein Bild verschwindet und rechts ein neues Bild auftaucht. Wie bei einem Karussell werden nacheinander alle Bilder gezeigt und dann beginnt die Galerie von vorne.

 

 

Die neue Diashow (Karussell)

 

Du hast viele Optionen, das Karussell anzupassen. Die Darstellung auf der Webseite hat zwei Variationen. Entweder stellst du den Bildwechsel auf "Manuell" und dann erscheinen unter der Bildreihe Bedienungselemente für deine Besucher oder du stellst auf "Automatik" und es wird nur die Bildreihe angezeigt und die Bilder werden automatisch "durchgeblättert".

 

 

 

 

 

So sieht der Dialog aus:

 

 

Die Bedienelemente erklären sich wie du es gewohnt bist von alleine. Dank der klar strukturierten Aufteilung und den einheitlichen Elementen solltest du sehr schnell damit zurecht kommen. Wie schon beim letzten mal erwähnt, ist es am einfachsten, du legst eine neue Galerie an, bindest die Bilder ein und wählst dann den Typ aus und speicherst den Content ab.

 

Nachfolgend einige Tipps

a) Die Galerie ist max. so breit wie die Spalte, in der sich die Galerie befindet und passt sich natürlich auch auf mobilen Geräten entsprechend an. Wenn deine Seite z.B. 1.000 Pixel breit ist, dann wird das Karussell max. 1.000 Pixel breit, auch wenn du größere Werte einstellst.

b) Die Bilder werden auf der Webseite immer so verkleinert dargestellt, dass der verfügbare Raum ausgefüllt wird. Du solltest daher entweder die Vorschaubilder quadratisch machen oder ein Seitenverhältnis wählen, welches den Orginalbildern entspricht.

 

Zum obigen Dialog noch einige Anmerkungen

1) Das Karussell wählst du oben im Plugin-Bereich aus. Mit diesem Update sind dann insgesamt 7 verschiedene Galerien verfügbar.

2) Die Wartezeit ist der Zeitraum, der vergeht, bis das nächste Bild angezeigt wird. Du hast drei Zeiteinstellungen zur Verfügung. Wenn du auf "Manuell" gestellt hast, wird diese Wartezeit erst aktiv, wenn du den "Playbutton" drückst.

3) Die Bilder können mit einem Rahmen versehen und die Ecken können abgerundet werden. Setze diese Optionen nur dezent ein, damit vor allem deine Bilder zur Wirkung kommen.

4) Der Schatten sollte nur aktiviert werden, wenn zwischen den Bildern genug Abstand eingestellt ist.

 

 

 

Vorschau

Mit diesem Update sind vorerst alle geplanten Galerien online gestellt und beim nächsten Mal gibt es in einem ganz anderen Bereich neue Funktionen. Da wir noch nicht wissen, welche dieser Funktionen zuerst online gehen, möchte ich hier auch diesmal nichts verraten. An der Galerie selbst werden wir auch weiterarbeiten. Es ist geplant, den Bereich, wo die Bilder für die Galerie eingebunden werden in einen eigenen Dialog zu verlagern den du über einen Button erreichen kannst. Dadurch kann man mehr Optionen anbieten und alles viel besser gestalten. Außerdem arbeiten wir an einer verbesserten Online-Hilfe direkt in der Software.

 

Nach dem Abschluss der Galerien-Serie würden wir natürlich gerne wissen wollen, welche Galerie euch am besten gefällt und was ihr euch für die Galerien noch wünscht. Hinterlasst dazu einfach einen oder mehrere Kommentare.

 

Schöne Grüße vom ganzen Team

Manfred F. Schreyer

page4 Ltd.

Neue Galerien Teil 2

Tags: Updatepage4FunktionenContentBilder | Kommentare: 1 | Views: 10950

Mittwoch 5.Oktober 2016

 

Neue Diashow online

 

Heute dreht sich alles um die sogenannte Diashow. In der Vergangenheit basierte diese Galerie auf Flash. Der Nachteil ist inzwischen, dass solche flashbasierten Galerien auf mobilen Geräten von Apple nicht funktionieren. Wir haben daher eine neue Diashow fertiggestellt, die ihr als Ersatz für die alte Classic-Diashow einsetzen könnt. Wir haben bewusst darauf verzichtet, die neue Diashow absolut identisch zu machen. Aufgrund der Vielzahl der Galerien kannst du bestimmte Funktionen besser mit einer anderen Variante abbilden. Die neue Diashow macht daher genau das, was man von einer Diashow erwartet und nicht mehr.

 

 

Die neue Diashow (Diashow)

 

Du hast viele Optionen, deine Diashow anzupassen. Zum Beispiel kannst du, wie an dem Bild unter dem Text gut zu erkennen, die Vorschaubilder in zwei Reihen und seitlich platzieren. Du kannst die Bilder im Gegensatz zur alten Galerie "ausfüllen" lassen. Damit vermeidest du unschöne Ränder und auch mit unterschiedlich großen Fotos sieht die Diashow perfekt aus.

 

 

 

Wie im unteren Bild zu erkennen, kannst du natürlich auch nur eine Reihe von Vorschaubildern anzeigen lassen und diese dann unterhalb der Diashow positionieren. Auf der Webseite selbst besteht die Diashow aus dem Hauptbild, der Leiste mit den Vorschaubildern und neben dieser Leiste befinden sich Pfeile um in der Bildersammlung zu blättern. Klickst du auf das Hauptbild, dann werden die Bilder im Vollbildmodus angezeigt inkl. der Vorschaubilder und mit zusätzlichen Bedienelementen.

 

 

 

So sieht der Dialog aus:

 

 

Die Bedienelemente erklären sich von alleine. Dank der klar strukturierten Aufteilung und den einheitlichen Elementen solltest du sehr schnell damit zurecht kommen. Wie schon beim letzten mal erwähnt, ist es am einfachsten, du legst eine neue Galerie an, bindest die Bilder ein und wählst dann den Typ aus und speicherst den Content ab.

 

Nachfolgend einige Tipps

a) Die Galerie ist max. so breit wie die Spalte, in der sich die Galerie befindet und passt sich natürlich auch auf mobilen Geräten entsprechend an. Wenn deine Seite z.B. 1.000 Pixel breit ist, dann wird die Diashow max. 1.000 Pixel breit, auch wenn du größere Werte einstellst.

b) Du solltest alle Bilder für eine Galerie immer im gleichen Seitenverhältnis oder noch besser in den gleichen Abmessungen hochladen. Außerdem sollten die Angaben in der Galerie so gewählt werden, dass zumindest auch dort das gleiche Seitenverhältnis eingestellt ist wie bei deinen Bildern. Nur dann werden deine Bilder optimal präsentiert.

c) Wenn du Ausfüllen einschaltest, dann wird jedes Bild so verkleinert oder vergrößert, dass die gesamte Fläche der Galerie ausgefüllt ist. Das führt dazu, dass Bilder, die ein anderes Seitenverhältnis haben nur ausschnittsweise gezeigt werden und Bilder, die zu klein sind, vergrößert werden und an Qualität verlieren.

 

 

 

 

Die alte Diashow (Classic Diashow)

 

Wenn du einen ganz neuen Account hast, kannst du diese Galerie nicht mehr auswählen. Es macht keinen Sinn, eine Galerie mit veralterter Technik weiter anlegen zu lassen. Du kannst alles, was die alte Classic Diashow macht mit den neuen Galerien abbilden.

Bist du schon länger bei uns und hast aber keine einzige Galerie vom Typ Diashow auf deiner Seite so kannst du ebenfalls keine neue Galerie "Classic Diashow" anlegen, da der Button zur Auswahl ausgeblendet ist.

Die Classic Diashow ist nur für User, die noch Diashow-Galerien auf der Basis von Flash auf ihrer Seite haben. Du hast zwei Möglichkeiten. Entweder willst du weiter solche Galerien benutzen mit dem Nachteil, dass die Galerien nicht auf jedem Gerät angezeigt werden können. Dann kannst du diese Galerien weiterhin bearbeiten. Oder du möchtest auf die neue Diashow oder eine andere Galerie umsteigen. Dann bearbeite einfach deine alte Diashow-Galerie und wähle einen anderen Typ aus und speichere den Content ab. Alle Bilder werden in die neue Galerie übernommen. Öffnest du diese Galerie erneut um sie zu bearbeiten ist der Punkt "Classic Diashow" allerdings ausgeblendet. Du kannst nicht mehr zurückstellen auf die alte Galerie.

 

In der Palette und im Dialog zum Anlegen von Inhaltselementen ist das Icon für die Diashow verschwunden. Bearbeitest du eine vorhandene alte Flash-Diashow öffnet sich der allgemeine Dialog für Galerien und zeigt dir weiterhin alle Optionen an.

 

So sieht die alte Diashow auf der Webseite aus. Passen Bilder von den Abmessungen nicht in die Diashow werden schwarze Ränder angezeigt.

 

 

 

Der Dialog für die alte Classic Diashow:

 

 

Die Bedienung entspricht der bisherigen Diashow und solange du nicht auf eine andere Galerie umschaltest und dies dann abspeicherst hast du weiterhin eine Flash-Diashow auf deiner Webseite.

 

 

Vorschau

Wir haben noch eine weitere Galerie für euch, die wir aber später vorstellen werden. Wie immer arbeiten wir an interessanten neuen Ideen. Welche wir davon demnächst online stellen werden kann ich aktuell noch nicht sagen. Lasst euch einfach überraschen.

 

Noch einmal der Hinweis an alle User einer kostenlosen Version. Wer viele Bilder verwendet, sollte vielleicht mal über ein Upgrade nachdenken. Mit der Kaufversion kann man beliebig viele Bilder gleichzeitig hochladen und so sehr einfach und schnell eine neue Galerie erstellen. Auch die neuen Funktionen, die wir planen werden nur teilweise für kostenlose Versionen zur Verfügung stehen. Es lohnt sich wirklich, ein paar Euro für eine Kaufversion und eine eigene Domain zu investieren.

 

Schöne Grüße vom ganzen Team

Manfred F. Schreyer

page4 Ltd.

Neue Galerien Teil 1

Tags: Updatepage4FunktionenContentBilder | Kommentare: 6 | Views: 4163

Mittwoch 28.September 2016

 

Zwei neue Galerien verfügbar

 

Ab heute kannst du deine Bilder noch besser präsentieren. Nachdem wir vor einer Weile die Galerien zu einem Content zusammengefasst und dir das sogenannte Mauerwerk vorgestellt haben gibt es heute die ersten Erweiterungen in Form von zwei neuen Galerien. Du kannst mit einem Klick zu den neuen Galerien wechseln.

 

Die Gitter Galerie (Gitter)

 

Deine Bilder werden in einem Gitter dargestellt. Alle Bilder haben die gleiche Größe und du entscheidest, in wie vielen Reihen die Bilder angezeigt werden. Im unteren Beispiel haben wir 2 Reihen eingestellt und aufgrund der Größe der Vorschaubilder passen immer 6 Bilder in einer Reihe. Da die Galerie mehr als 12 Bilder enthält werden unten Steuerelemente eingeblendet. Über diese Elemente kannst du die weiteren Bilder anzeigen lassen. Du kannst selbst entscheiden, ob deine Besucher nur diese Übersicht sehen oder mit einem Klick auf ein Bild in den Vollbildmodus wechseln dürfen.

 

 

 

Abgerundete Ecken für besondere Galerien

 

Du kannst die Bilder auch als Kreis anzeigen lassen. Dazu müssen die Bilder in jedem Fall quadratisch sein und die Rundung muss mind. so groß sein, wie die halbe Breite eines Bildes. Wenn du deine Bilder in dem Format 150 x 150 px anzeigst, musst die Rundung auf 75 px oder mehr eingestellt sein. Dann sieht deine Galerie wie folgt aus:

 

 

 

Natürlich betrifft das nur die Darstellung auf der Seite. Im Vollbildmodus werden die Bilder ganz normal angezeigt. Die Ansicht in der Vorschau ist immer so, dass das Bild soweit verkleinert wird, dass es komplett die Vorschau ausfüllt ohne verzerrt zu werden. Es wird also immer ein Auschnitt angezeigt, der mittig zentriert ist. Im oberen Beispiel ist ein Schatten hinter jedem Bild hinterlegt. Diesen Schatten kannst du an- oder ausschalten. Die Umrandung kannst du selbst bestimmen und Art, Stärke, Farbe und Transparenz vorgeben.

 

So sieht der Dialog aus:

 

 

 

Viele der Optionen kennst du bereits vom Mauerwerk. Dank der klar strukturierten Aufteilung und den einheitlichen Elementen solltest du sehr schnell damit zurecht kommen. Am einfachsten ist es, du legst eine neue Galerie an, bindest die Bilder ein und wählst dann den Typ aus und speicherst den Content ab. Die voreingestellten Werte sorgen in jedem Fall für ein professionelles Aussehen und können dann von dir ganz einfach an deine Bedürfnisse angepasst werden.

 

 

Die Slider Galerie (Slider)

 

Mit der neuen Slider Galerie bekommst du eine völlig neue Art der Galerie für deine Seiten. Am besten wirkt der Slider mit Bildern, die über die volle Breite deiner Seite gehen und nicht zu hoch sind. Beim Slider wird immer nur ein Bild zur Zeit auf der Seite angezeigt. Wenn du die Automatik einstellst, dann zeigt der Slider automatisch nacheinander alle Bilder an. Dabei kannst du wählen zwischen einer Überblendung der Bilder oder einem Verschiebe-Effekt. Die Steuerelemente dienen dazu, manuell durch die Galerie zu steppen. Die Punkte zeigen an, wie viele Bilder in der Galerie sind. Du solltest nicht zu viele Bilder hinterlegen. Im unteren Beispiel sind 36 Bilder eingebunden. Die Steuerelemente kannst du ausschalten. Wenn du keine Steuerelemente anzeigst, dann musst du zwingend die Automatik anschalten, damit alle Bilder nacheinander angezeigt werden, da der Besucher ohne diese Elemente nicht selbst die Bilder wechseln kann. Wichtig ist, dass alle Bilder die gleichen Abmessungen haben. Alternativ kannst du die Option "Ausfüllen" anschalten. Dann werden alle Bilder auf eine Größe gebracht und der Ausschnitt dann mittig angezeigt.

 

 

 

 

So sieht der Dialog für den Slider aus:

 

 

Eine ausführliche Anleitung gibt es hoffentlich bald auf unserer Online-Hilfe. Im Moment haben wir so viele neue Ideen in Arbeit, dass die Hilfe leider etwas zu kurz kommt. Aber wir bleiben am Ball. Die meisten unserer Dialoge sind zum Glück selbsterklärend. Viele Optionen kann man einfach ausprobieren und sieht dann sofort, was passiert. Im Zweifel nutze einfach die Standardeinstellungen. Also einfach einen neuen Content anlegen, Bilder hinzufügen, Galerie auswählen und speichern. Die Galerie wird mit den vorgegebenen Basiseinstellungen angezeigt. So hast du immer eine gut gestaltete Galerie. Zusätzlich kannst du jederzeit einzelne Werte an deine persönlichen Vorlieben anpassen.

 

 

Ein Wort zu unserem Konzept

Manche Baukasten werben damit, dass alles ganz einfach geht. Man klickt in den Text auf einer Seite und überschreibt dann den Text. Im ersten Moment eine coole Sache. Leider geizen solche Baukästen oft auch bei den Möglichkeiten, die Webseite zu designen. Andere Systeme erlauben alles. Du kannst Inhalte beliebig auf der Seite verschieben und hast unendliche viele Optionen, Animationen und was auch immer. Der Nachteil wird deutlich, wenn man klar strukturierte Seiten aufbauen will.

Mit page4 verbindest du beide Welten miteinander. Unser System ist sehr einfach zu bedienen. Inhalte auf die Seite ziehen und mit einem Klick den Bearbeitungsdialog öffnen geht sehr schnell und ist sehr leicht. Speichern und fertig. Ein Design auswählen, eigene Bilder und Farben einfügen, speichern und fertig. Auf der einen Seite sind wir also genauso komfortabel wie die Baukästen, die nur wenige Optionen bieten. Auf der anderen Seite kannst du über unsere Dialoge sehr viele sinnvolle Anpassungen vornehmen und so individuelle Webseiten gestalten. Bei unseren Galerien ist dieses Konzept perfekt umgesetzt. Klare Bedienung und schnelle Ergebnisse. Und unendliche Vielfalt.

 

Ausblick

Wie du bereits an der Bezeichnung dieses Blogartikels sehen kannst, folgt demnächst ein zweiter Teil zum Thema Galerie. Es gibt also in Kürze weitere Galerien für deine page4 Webseite. Ein wichtiges Thema ist dabei Flash. Unsere Diashow ist auf Flash aufgebaut und daher auf vielen mobilen Geräten nicht abspielbar. Außerdem planen viele Browserhersteller, Flash bald nicht mehr zu unterstützen. Wir werden daher bald eine Galerie vorstellen, die unsere Diaschow ersetzen soll. Die neue Galerie kann fast alles wie die Diashow und sieht ziemlich ähnlich aus. Wir haben uns daher entschlossen mit dem nächsten Update für die Galerie die alte Diashow zu entfernen und alle vorhandenen, auf der Diashow basierenden Galerien automatisch in die neue Galerie zu konvertieren. Nach dem Update mit dem Ersatz für die Diashow gibt es also keine flashbasierte Galerie mehr. Dieser Schritt ist notwendig und wir bitten schon jetzt um Verständnis dafür.

 

So, dass wär es für heute. Viel Spaß mit den neuen Galerien. Wer aktuell eine kostenlose Version hat und viele Bilder verwendet, sollte vielleicht mal über ein Upgrade nachdenken. Mit der Kaufversion kann man beliebig viele Bilder gleichzeitig hochladen und so sehr einfach und schnell eine neue Galerie erstellen.

 

Schöne Grüße vom ganzen Team

Manfred F. Schreyer

page4 Ltd.

 

 

PS: Unsere Galerie "Mauerwerk" hat übrigens mit dem Update auch eine Option "Schatten" bekommen. Einfach mal testen.

 

 

 

 

 

 

 

 

 

Inhalte gleichzeitig in linke und rechte Sidebar einbauen

Tags: Updatepage4FunktionenContent | Kommentare: 11 | Views: 2806

Mittwoch 14.September 2016

 

Mehr Platz für deine Inhalte

Ab sofort kannst du beide Seitenleisten (Sidebars) mit eigenem Inhalt füllen.

 

Bisher war es so, dass du entweder die linke oder die rechte Sidebar für eigene Inhalte nutzen konntest. Ab sofort kann man beide Sidebars für eigene Inhalte verwenden. Sobald du dich in deine Seite eingeloggt hast, erscheint jetzt auch in der bisher ungenutzten Sidebar eine leere Spalte, in die du Inhalte einfügen kannst.

 

 

So aktivierst du die Sidebars

 

Bevor wir auf weitere Details eingehen, nachfolgend eine Übersicht, wie du eine oder beide Sidebars aktivierst. Gehe auf "Design editieren" im Menü "Design" und klicke dann auf "Elemente". Du siehst einen Dialog wie unten angezeigt. Setzte die Schaltfläche unter "Sidebar links" auf "An" wenn du links eine Sidebar nutzen willst. Möchtest du auch die zweite Sidebar nutzen, dann schalte in der gleichen Weise auch die Sidebar rechts an. Wenn du das erste Mal eine Sidebar aktivierst kann es sein, dass du den Hintergrund usw. an dein Design anpassen musst, da evtl. noch die Einstellungen aus dem ursprünglichen Design vorhanden sind. Eine Sidebar verwendet immer eine feste Breite. Ebenso wie das gesamte Design. Wenn du zum ersten Mal eine Sidebar sichtbar machst, dann wird die Breite vom Inhalt verkleinert um Platz für die Sidebar zu schaffen.

 

 

 

Optionen für die Sidebar

 

Die Sidebar steht immer links und/oder rechts vom Inhalt. Du kannst den Abstand zwischen Inhalt und Sidebar auf 0 px setzen wenn du möchtest, dass beide Bereiche optisch zu einem Bereich verschmelzen oder einen Abstand einstellen, um die Sidebars klar vom Inhalt zu trennen. Normalerweise dehnt sich die Höhe der Sidebar nur soweit aus, wie benötigt. Je mehr Inhalte du in der Sidebar hast, umso höher wird sie. Du kannst mit einem Klick einstellen, dass die Höhe der Sidebar immer so hoch ist wie die Höhe vom Inhaltsbereich, unabhängig von den Inhalten in der Sidebar. Die Option findest du ebenfalls im Dialog "Elemente" ganz rechts (7). Du kannst diese Option für jede Sidebar getrennt einstellen.

 

 

Spalten für die Sidebar

Hast du eine Kaufversion, kannst du in der Sidebar Spalten einrichten. Wechsle einfach zum Spalteneditor und ziehe dann Spaltenelemente auf die Sidebar. Dir stehen alle Optionen zur Verfügung, die du auch auf der normalen Seite hast. Allerdings macht es nur selten Sinn, mehr als eine Spalte in der Sidebar anzulegen, da diese nur eine begrenzte Breite hat. Es bietet sich lediglich an, wenn man kleine Elemente wie Icons nebeneinander platzieren möchte.

 

 

Inhalte für die Sidebar

Du kannst alle Inhalte benutzen, die du auch auf der normalen Seite nutzt. Also Überschriften, Texte, Formulare, Linien, Social Media Elemente und mehr. Die Sidebar verhält sich wie ein normaler Inhaltsbereich mit einem Unterschied: Sie ist auf allen Seiten sichtbar und hat daher immer denselben Inhalt. Du solltest deshalb in der Sidebar vor allem die Informationen einbauen, die deine Besucher ständig im Blickfeld haben sollen.

 

 

Navigation/Blog-Navigation in der Sidebar

Mit page4 entscheidest du, wo die Navigation sein soll. Du kannst jederzeit die Haupt- oder nur die Unternavigation in eine der Sidebars verlegen. Das geht über den Design-Editor und ist mit einem Klick getan. Ebenso kannst du die Navigation vom Blog in der Sidebar anzeigen lassen. Die Einstellungen dazu nimmst du im Blog selbst vor. In welcher Sidebar die Blognavigation erscheinen soll, wird im Design-Editor unter Elemente festgelegt (4).

 

 

Hauptinhalte und Nebeninhalte

Unter dem Bereich "Aktionen" kannst du einstellen, wie die Inhalte in der Sidebar dargestellt werden sollen (5). Bisher war es so, dass du die Inhalte ausblenden (Aus) oder (Links) bzw. (Rechts) anzeigen lassen konntest. Mit den neuen Optionen ändern sich nicht die Einstellungen aber die Funktion dahinter. Das Ausschalten bleibt gleich. Steht der Schalter auf "Aus" werden keine Inhalte angezeigt. Mit den Schaltern "Links" bzw. "Rechts" legst du nun fest, wo die "Hauptinhalte" angezeigt werden. Stellst du den Schalter auf "Links" werden die Hauptinhalte links angezeigt und umgekehrt. Im Grunde ist es ein Spiegeln der Sidebar.

Was sind Hauptinhalte? Für alle User, die bereits Inhalte in einer Sidebar angelegt haben sind diese Inhalte für das System die "Hauptinhalte". Hast du zum Beispiel zwei Sidebars aktiviert, dann hast du vielleicht festgelegt, dass deine Inhalte in der rechten Sidebar angezeigt werden. Öffnest du nach dem Update den Design-Editor so ist im Bereich "Elemente" der Schalter für die Sidebarinhalte auf "Rechts" gestellt. Die "Hauptinhalte" der Sidebar werden also wie eingestellt, in der rechten Sidebar angezeigt. In der linken Sidebar sind noch keine Inhalte. Alle Inhalte, die du dort anlegst, sind dann die "Nebeninhalte". Klickst du nun im Bereich "Elemente" auf den Schalter "Links" dann tauscht das System die gesamten Inhalte beider Sidebars aus und deine "alten" Inhalte erscheinen nun in der linken Sidebar.

Ansonsten gelten immer die Inhalte der "aktivierten" Sidebar als Hauptinhalte.

 

Ausblick und Anmerkungen

Es gibt kaum ein System, welches Designvorlagen mit zwei Sidebars und zusätzlich einer unteren Sidebar (Footer) anbietet. Und kein System, wo du bei jedem Design selbst entscheiden kannst, welche dieser Bereiche sichtbar sein sollen. Kein anderes System bietet das Spiegeln eines Designs an und wir kennen auch kein System, wo du entscheiden kannst, ob sich die Sidebar ausdehnen soll oder nicht. Auch die Möglichkeit, selbst zu entscheiden, wo du die Navigation oder die Blognavigation haben möchtest, bietet kein anderes System. Natürlich sollte man wie immer, mit allen Funktionen sparsam umgehen. Entscheidend ist nicht, dass man alle Bereiche nutzt, sondern dass man frei entscheiden kann, welche Bereiche genutzt werden sollen. 

 

Die neuen Funktionen sind leider nicht mit alten Designvorlagen nutzbar. Es ist sehr leicht, auf ein neues Design umzusteigen. Vielleicht solltest du jetzt damit anfangen. Wenn du Hilfe brauchst, schicke uns eine Email und wir unterstützen dich dabei.

 

Auch das nächste Update dreht sich noch um diesen Bereich (Footer, Sidebar). Sobald das letzte Update dieser "Serie" veröffentlicht ist, werden wir uns anderen Bereichen zuwenden. Selbstverständlich haben wir natürlich schon neue interessante Funktionen in Vorbereitung. Die Seitenverwaltung bekommt zum Beispiel aktuell bereits einen neuen Dialog im "Fullscreen" Modus und bei der Gelegenheit einige nützliche Erweiterungen. Lasst euch überraschen.

 

Viel Spaß beim Ausprobieren. Je mehr Rückmeldungen wir bekommen (Kommentare, Anregungen, Wünsche) umso besser können wir die nächsten Schritte planen und page4 noch mehr optimieren. Also traut euch, wir freuen uns.

 

Manfred F. Schreyer und das page4 Team

Footer 1 als Sidebar nutzen

Tags: Updatepage4Funktionen | Kommentare: 11 | Views: 2281

Dienstag 6.September 2016

 

Alles im Blick

Mit dem neuen Footer eröffnen sich ganz neue Gestaltungsmöglichkeiten

 

Als wir unseren neuen Design-Editor veröffentlicht haben, kam öfter die Frage auf, wozu braucht man drei Header und drei Footer? Das heutige Update beantwortet einen wichtigen Aspekt dieser Frage. Um flexibel zu sein. Bei unseren alten Vorlagen konnte man nur wenige Designvorlagen mit einem Footer nutzen und man musste unter dem Menüpunkt "Optionen" HTML Code für den Footer einfügen, der dann im ausgeloggten Zustand angezeigt wurde. Mit unseren neuen Designvorlagen und dem Editor mussten wir einen Weg finden, kompatibel zu den alten Vorlagen zu bleiben. Daher haben wir den Footer 1 für die Bearbeitung gesperrt und den hinterlegten Code für den Fussbereich dann im Footer 1 angezeigt, sofern dieser sichtbar war.

 

Mit dem heutigen Update wird diese Sperre aufgehoben und was viel wichtiger ist: Wir erweitern die Funktion für den Footer 1, so dass dieser nun wie eine Sidebar genutzt werden kann. Die anderen beiden Footer haben weiterhin die bisherigen Funktionen die auch vom Kopfbereich (Header) bekannt sind. Wenn du mit dem Update deine Seite bearbeitest und bereits den Footer 1 nutzt wirst du nun dort ein ganz normales Inhaltselement HTML vorfinden, welches du wie gewohnt direkt bearbeiten kannst. In diesem Inhaltselement befindet sich dann der im Fussbreich (Optionen) hinterlegte Code.

 

 

So aktivierst du Footer 1

 

Bevor wir auf weitere Details eingehen, nachfolgend eine Übersicht, wie du den Footer 1 aktivierst. Gehe auf "Design editieren" im Menü "Design" und klicke dann auf "Elemente". Du siehst einen Dialog wie unten angezeigt. Setzte die Schaltfläche unter "Footer 1" auf "An" und der Footer wird sofort unterhalb deines Inhalts angezeigt. Je nach Struktur musst du dann noch bestimmte Einstellungen vornehmen, damit sich der Footer harmonisch in dein Design einfügt.

 

 

 

Optionen für den Footer

 

Mit der neuen Funktionalität ergibt sich bei den Funktionen eine kleine Änderung. Du kannst weiterhin eine Höhe einstellen. Allerdings ist die Höhe jetzt dynamisch. Wenn die Inhalte mehr Platz brauchen, dann dehnt sich der Footer in der Höhe aus. Die eingestellte Höhe ist daher nur noch die Minimalhöhe, die der Footer in jedem Fall einnimmt. Alle anderen Optionen wie Hintergrundbild, Hintergrundfarbe, Rahmen, Abrundungen usw. können wie bisher genutzt werden.

 

 

Spalten für den Footer

Hast du eine Kaufversion, kannst du im Footer Spalten einrichten. Wechsle einfach zum Spalteneditor und ziehe dann Spaltenelemente auf den Footer. Dir stehen alle Optionen zur Verfügung, die du auch auf der normalen Seite hast. Selbstverständlich ist auch der Footer responsive. Das bedeutet, in der mobilen Ansicht werden die Spalten aufgelöst und die Inhalte untereinander angezeigt.

 

 

Inhalte für den Footer

Du kannst alle Inhalte benutzen, die du auch auf der normalen Seite nutzt. Also Überschriften, Texte, Formulare, Linien, Social Media Elemente und mehr. Der Footer verhält sich wie ein normaler Inhaltsbereich mit einem Unterschied: Er ist wie die Sidebar auf allen Seiten sichtbar und hat daher immer denselben Inhalt. Du solltest daher in den neuen Footer vor allem die Informationen einbauen, die deine Besucher ständig im Blickfeld haben sollen. Mit der Linkliste ist es nun zum Beispiel sehr leicht möglich, im Footer quasi eine zusätzliche Navigation einzubauen damit Besucher schneller zu bestimmten Seiten geführt werden können. Als Nutzer einer Kaufversion kannst du so eine Navigation auch mehrspaltig anlegen, da du beliebig viele Linklisten einbauen kannst.

 

 

Footer und Sidebar flexibel nutzen

Mit page4 entscheidest du, welche Bereiche deine Webseite haben soll. Andere Systeme stellen dir verschiedene Designvorlagen vor. Bei einigen Vorlagen ist die Sidebar links, dann wieder rechts oder man verwendet eine Sidebar die unterhalb der Seite liegt, also als Footer. Mit page4 kannst du mit einem Klick beide Sidebars und die Footer ausschalten oder auch beliebig kombinierbar anschalten. Jede Vorlage ist dazu geeignet. Die einzige Begrenzung ist eventuell die Struktur, da wir zum Beispiel bei Struktur 4 absichtlich bestimmte Elemente entfernt haben. Da du aber jede Struktur auf jedes Design anwenden kannst, entsteht dadurch keine Einschränkung.

 

Hast du aktuell ein Design gebaut mit einer Sidebar rechts und möchtest nun zusätzlich einen Footer einbauen, der ebenfalls Inhalte anzeigen kann, dann aktivierst du wie oben gezeigt einfach Footer 1, stellst die Optionen (Farben, Linien usw.) so ein, dass sie zu deinem Design passen und schon hast du einen schönen Bereich unterhalb deiner Webseite um dort wichtige Informationen unterzubringen. Hat dein Footer eine Hintergrundfarbe und möchtest du, dass der Footer bis zum Rand des Browsern ausgedehnt wird dann kannst du in der Kaufversion unsere Copyright-Zeile und den Login-Link ausblenden.

 

Möchtest du einfach nur die Inhalte aus der bisherigen Sidebar in den Footer verlagern, aktivierst du den Footer wie beschrieben und verschiebst dann einfach alle Inhalte aus der Sidebar in den Footer. Anschließend blendest du die Sidebar einfach aus.

 

 

Ausblick und Anmerkungen

Mit dem neuen Footer, der sich nahtlos in die bisherige Bedienung einfügt, weil wir das von langer Hand geplant haben, kannst du nun auch alle Designvorlagen der Mitbewerber "nachbauen" die eine "Sidebar" als Footer nutzen - allerdings viel flexibler und mit mehr Möglichkeiten. Das ist aber nur der erste Schritt. Weitere Optionen für Sidebar und Footer sind bereits fertig und werden bald veröffentlicht. Wir sind natürlich immer darauf bedacht, unsere Kunden, die weiterhin alte Designvorlagen nutzen nicht im Regen stehen zu lassen. Daher müssen wir immer parallel arbeiten. Verwendest du noch eine alte Designvorlage, dann stehen dir diese Funktionen nicht zur Verfügung. Du kannst weiterhin unter dem Menü Optionen deinen HTML Code für den Fussbereich einbinden sofern du ein entsprechendes Design hast. Verwendest du ein neues Design ist dieser Bereich ausgeblendet, da er nicht mehr benötigt wird.

 

Es ist sehr leicht, auf ein neues Design umzusteigen. Vielleicht solltest du jetzt damit anfangen. Wenn du Hilfe brauchst, schicke uns eine Email und wir unterstützen dich dabei.

 

Viel Spaß beim Ausprobieren. Je mehr Rückmeldungen wir bekommen (Kommentare, Anregungen, Wünsche) umso besser können wir die nächsten Schritte planen und page4 noch mehr optimieren. Also traut euch, wir freuen uns.

 

Manfred F. Schreyer und das page4 Team

Neues page4 Blogmodul online

Tags: Updatepage4NewsFunktionenBlog | Kommentare: 17 | Views: 1745

Dienstag 2.August 2016

 

Stifte anspitzen und los gehts

 

Nun steht deiner Creativität nichts mehr im Weg. Ab sofort kannst du alles, was dich bewegt und was du gerne den Besuchern deiner page4 Webseite mitteilen möchtest in dein Online-Tagebuch schreiben und veröffentlichen. Auf deine interessanten Gedanken warten bestimmt schon eine ganze Menge Leser und dank dem neuen page4 Blog-Modul kannst du jetzt beliebig "auf Vorrat" schreiben und selbst bestimmen, wann deine Artikel automatisch online gehen sollen.

 

Auch für die privaten Gedanken sind wir "offen". Möchtest du nur für deine Familie oder deine Freunde schreiben, dann kannst du deinen Blog mit einem Passwort schützen. Das geht mit einem Mausklick und ist sofort aktiv.

 

Du bist schon sehr gespannt? Dann lass mich dir nur noch kurz zeigen, wo du den Blog findest und dann kannst du sofort anfangen und bald deinen ersten Blog-Artikel veröffentlichen.

 

 

 

Das Blog - das Online-Tagebuch bei page4

 

Du brauchst nur auf den Hauptmenü Eintrag "Blog" (1) klicken und bist sofort in der Verwaltung vom Blog. Die bisherigen Untermenüs wurden entfernt da sie nicht mehr notwendig waren. Alle Optionen findest du nun direkt in der Verwaltung.

 

Ausführliche Informationen, wie du das Blog aktivierst findest du ab sofort in unserer Onlinehilfe unter dem Stichwort Blog aktivieren.

 

Um zu diesen Einstellungen zu kommen, musst du nur unten links auf den grünen Eintrag "Einstellungen" klicken. Dort legst du auch alle Parameter für deinen Blog fest. Eine Erklärung zu den Einstellungen findest du ebenfalls in unserer Hilfe.

 

Einige wichtige Punkte vielleicht noch. Wir unterscheiden zwischen einem "Entwurf" und "Veröffentlicht" sowie "Geplant". Ein Entwurf ist immer unsichtbar für deine Besucher. Ein Artikel, der öffentlich ist bleibt solange ein geplanter Artikel, wie das eingetragene Datum noch nicht erreicht ist. Geplante Artikel sind also erst sichtbar, wenn das Veröffentlichungsdatum erreicht ist. Bis dahin werden diese Artikel in der Ablage "Geplant" aufgelistet und auch als "Geplant" markiert. Nur Artikel, die in der Ablage "Veröffentlicht" liegen sind auch sichtbar. Wenn du also einen Artikel fertig geschrieben hast und das Datum auf einen Termin in der Zukunft setzt, dann klicke auf "Öffentlich" und dein Artikel wird automatisch am geplanten Datum sichtbar.

 

Schlagwörter. Beim alten Blog wurden die Schlagwörter in einem Feld eingetragen und mit Kommas getrennt. Beim neuen System schreibst du ein Schlagwort in das dafür vorgesehene Feld und drückst auf "Return". Dann wird das Schlagwort in die Liste über dem Feld aufgenommen. Also bitte nicht mehrere Tags durch Komma getrennt dort eintragen.

 

 

Bilder im Blog. Ein weiterer wichtiger Punkt. Im alten Blog war noch der alte Tiny und die ganz alte Bildauswahl (1) . Dort konntest du direkt Bilder hochladen. Das haben wir aus gutem Grund geändert. Wenn du jetzt im Tiny auf Bild klickst, dann öffnet sich der vom Tiny bereitgestellte Dialog und dort ist jetzt eine Schaltfläche (2) eingebaut, mit der du direkt ein Bild von deinem Computer hochladen kannst. Wenn diese Schaltfläche nicht sichtbar ist bitte den Cache vom Browser löschen.

 

So, genug der Worte, jetzt viel Spaß beim Bloggen. Wie gesagt, ausführliche Anleitungen gibt es in der Online-Hilfe und vielleicht solltest du unseren alten Artikel "Richtig bloggen für mehr Besucher" noch einmal lesen.

 

 

Viel Spaß wünschen

Manfred F. Schreyer
und das gesamte page4 Team

Das neue Blogmodul

Tags: Updatepage4NewsFunktionenBlog | Kommentare: 3 | Views: 1597

Samstag 30.Juli 2016

 

Bloggen wie die Weltmeister

 

Mit unserem neuen Blogmodul wird Bloggen noch einfacher und macht noch mehr Spaß. Und auch das ist nur der Startschuss, denn wir wollen den Blog natürlich noch erweitern und noch weiter verbessern. Insbesondere auch im Frontend. Also neue Templates zur Darstellung der Artikel und der Navigation. Aber dazu mussten wir den ersten Schritt machen und der ist nun fertig.

 

In der ersten Augustwoche, wenn nichts dazwischenkommt vielleicht sogar schon am 1. August geht das neue Blogmodul online.

 

 

 

Das Verwaltungsfenster

 

Leider haben wir hier im Blog nur 740 px Breite zur Verfügung. Das Bild ist aber 1.950 px breit. Wie bei der Seitenverwaltung hast du also den gesamten Bildschirm zur Verfügung. Klicke auf das Bild, um es in der Originalgröße zu sehen. Du hast also sehr viel Platz und immer alles im Blick. Ausführliche Infos dazu möglichst bald in unserer Online-Hilfe.

 

Nachfolgend geben wir dir einen kleinen Überblick über die vielen Funktionen. Wie du siehst, gibt es sehr viele Markierungen auf dem Screenshot.

 

Links ist der Bereich wo du immer Zugriff auf alle Artikel, Kommentare und auf die Optionen hast. Rechts hast du je nach Auswahl unterschiedliche Optionen zur Verfügung.

 

1) Klickst du darauf, werden alle Einträge rechts angezeigt und zwar egal von welchem Typ. Also Entwürfe, Planungen und veröffentlichte Artikel. Hast du mehr als 200 Artikel geschrieben, werden nur die 200 neuesten Artikel angezeigt. Du kannst dann oben rechts (B) das Zeitfenster einschränken. Zum Beispiel könntest du angeben, nur alle Artikel anzuzeigen, die aus 2015 sind oder aus April 2016.

2) Hier sind alle veröffentlichten Artikel, also all die, welche für deine Besucher sichtbar sind.

3) Hier werden alle Entwürfe gesammelt. Jeder neue Artikel ist erstmal ein Entwurf. Das Datum spielt keine Rolle.

4) Geplante Artikel sind alle, die veröffentlicht sind aber ein Datum in der Zukunft haben. Diese werden dann vom System automatisch bei Erreichen des Datums veröffentlicht und damit sichtbar.

5) Du kannst Artikel als Empfohlen markieren. Solche Artikel werden hier abgelegt.

6) Alle gelöschten Artikel landen im Papierkorb. Du kannst sie jederzeit wieder aus dem Papierkorb holen. Erst wenn du den Papierkorb leerst, werden die Artikel darin unwiderruflich gelöscht.

7) Alle von dir angelegten Schlagwörter (Tags) werden hier aufgelistet.

8) Alle Kommentare landen in diesen beiden Ablagen. Im Bereich "Kommentare" sind alle freigegeben Kommentare und im Bereich "Warten auf Freigabe" all die, welche du manuell freischalten musst.

9) Im Bereich Optionen befinden sich alle Einstellungen für den Blog. Dazu klickst du auf diesen Eintrag und es öffnet sich ein Fenster, in dem du Zugriff auf alle Parameter für den Blog hast. Hier schaltest du den Blog aktiv, bestimmst, welche Navigationen angezeigt werden sollen, welches Template verwendet wird und vieles mehr.

 

A) Über den Artikeln befindet sich eine Informationszeile die sich automatisch aktualisiert.

B) Hier kannst du durch Zeiteingrenzung nur bestimmte Artikel anzeigen lassen.

C) Hiermit kannst du Schlagwörter suchen und es werden nur die Artikel angezeigt, die dieses Schlagwort haben. Das Tool ist interaktiv. Sobald du einen Buchstaben eingibst werden alle Tags angezeigt, die diesen Buchstaben enthalten. Du kannst die Suche dann weiter eingrenzen oder den gewünschten Tag aus der angezeigten Liste auswählen.

D) Mit diesem Tool kannst du im Titel eines Blogartikels suchen und dir die Ergebnisse anzeigen lassen. Im Artikel selbst kann nicht gesucht werden. Nur in der Titelzeile.

E) Mit einem Klick setzt du alle Optionen auf die Grundeinstellungen zurück.

F) Immer das erste gefundene Bild im Artikel wird hier als Vorschau angezeigt. Ist kein Bild vorhanden wird eine von uns hinterlegte Grafik angezeigt.

G) Die ersten Wörter von einem Artikel werden hier angezeigt, Zeilenumbrüche werden entfernt. So hast du einen schnellen Überblick um welchen Artikel es genau geht.

H) Jeder Artikel kann manuell auf Entwurf gesetzt werden. Ein bereits veröffentlichter Artikel wird dann wieder für Besucher unsichtbar.

I) Du kannst einen Artikel komplett kopieren.

J) Durch einen Doppelklick auf den Artikel kannst du den Texteditor aufrufen. Alternativ kannst du auch auf diesen Link klicken damit sich der Editor zum Bearbeiten öffnet.

K) Ein gelöschter Artikel wandert erstmal in den Papierkorb und bleibt solange verfügbar wie der Papierkorb nicht geleert wird.

L) Über diesen Link legst du einen komplett neuen leeren Artikel an.

 

Jeder Artikel hat links neben der Vorschau eine Auswahlbox. Du kannst mehrere Artikel gleichzeitig auswählen und dann bearbeiten, also löschen, kopieren usw. Ganz oben ist eine Auswahlbox "Alle auswählen". Hiermit kannst du mit einem Klick alle angezeigten Artikel auswählen. Ein erneuter Klick löscht die Auswahl wieder.

 

 

Der Editor zum Erstellen von Artikeln

 

 

Im neuen Blog-Modul ist jetzt auch der neue Tiny MCE integriert. Diesen kennst du ja bereits. Das Fenster und damit auch der Editor passt sich immer an die komplette Höhe des Browsers an. So hast du genug Platz zum Schreiben. In der Breite haben wir den Editor auf 1.000 px begrenzt. Oben (1) kannst du einen Titel eingeben. Ohne einen eigenen Titel kann der Artikel nicht gespeichert werden. Rechts sind die Optionen zum geschriebenen Blog-Artikel.

3) Bei der Zeit wird immer beim Anlegen des Artikels die aktuelle Zeit eingetragen. Möchtest du einen Artikel später veröffentlichen, kannst du die Zeit manuell überschreiben. Ist der Artikel als "Öffentlich" markiert wird er im Ordner "Geplant" ablegt und automatisch veröffentlicht.

4) Standardmäßig steht jeder Artikel auf "Entwurf". Damit soll verhindert werden, dass du aus Versehen einen unfertigen Artikel veröffentlichst. Klicke auf Veröffentlichen, sobald der Artikel fertig ist und sichtbar werden soll.

5) Du kannst Artikel "empfehlen" und in der Navigation empfohlene Artikel anzeigen lassen.

6) Hier werden alle Tags zum Artikel aufgelistet. Bewegst du die Maus über einen Tag kannst du mit einem dann erscheinenden "x" einen Tag entfernen. Der Tag wird nur vom Artikel entfernt und nicht gelöscht. Mehr zu Tags in der Hilfe.

7) Hier kannst du auf vorhandene Tags zugreifen oder neue Tags anlegen.

 

Wenn du auf Abbrechen klickst gehen alle Änderungen ohne Warnung verloren. Also bitte nur Abbrechen wenn du sicher bist ansonsten auf Speichern klicken um das Fenster zu schließen.

 

Nachfolgend noch kurz der Dialog für die Optionen. Eine einzelne Erklärung dazu spare ich mir hier. Du wirst das alles bald in der Onlinehilfe nachlesen können. Die meisten Optionen erklären sich aber von selbst.

 

 

 

 

Schlussbemerkungen

 

Ich hoffe, dir gefällt unser neues Blog-Modul genauso gut wie uns. Wir haben einige Wochen harter Arbeit investiert und mussten natürlich immer darauf achten, dass alles auch mit den von unseren Kunden bereits erzeugten Daten funktioniert. Zum Glück haben wir einen Kunden, der sehr fleissig ist und unseren Blog wirklich ausgiebig nutzt. Schau dir einfach mal die Seite http://www.hjkc.de/ an. Seit 2011 wurden dort knapp 7.000 Artikel veröffentlicht. Es lohnt sich wirklich aktiv zu werden. Fast 400.000 Besucher haben diese Seite seitdem aufgerufen und wenn man die Kommentare liest, stellt man fest, dass die Bekanntheit der Seite in den Kreisen die sich für dieses Thema interessieren sehr groß ist. Sogar Kosmonaten und Astronauten kennen diese Seite.

 

Google mag es wenn du auf deiner Seite regelmäßig News veröffentlichst. Nutze das Blog-Modul dafür. Das hat mehrere Vorteile. Im Gegensatz zu anderen Baukästen ist unser Blog ein richtiger Blog. Das bedeutet, du hast automatisch eine zeitbasierte Blognavigation in der alle Artikel eingeordnet werden. Du kannst verschiedenen Übersichten einblenden wie zum Beispiel "meist betrachtete Artikel". Unter jedem Artikel kannst du eine Socialshare Leiste anzeigen lassen und vieles mehr.

 

Wie gesagt, wir werden den Blog weiter ausbauen. Mit Funktionen, die du lieben wirst. Wir nutzen den Blog selbst und wollen natürlich in eigenem Interesse, dass dieses Tool immer besser wird.

 

Sobald das neue Blogmodul für alle verfügbar ist gibt es noch eine kleine Zusatzmeldung. Ich denke, diese Vorab-Ankündigung bietet dir die Möglichkeit, dich schon mal zu freuen und dich ein wenig mit dem neuen Blogsystem vertraut zu machen.

 

Eine kleine Sache noch. Wenn das neue Modul aktiv ist brauchst du nur noch auf den Menüeintrag Blog zu klicken um zu Blog zu kommen. Die ganzen Menü-Einträge gibt es dann nicht mehr.

 

Bis in Kürze

Manfred F. Schreyer
und das gesamte page4 Team

Blogarchiv