Das Inhaltselement Streifen (Strips)

Ein Element nur für User der Kaufversionen

Ein Musterstreifen zur Demonstration...

 

Der Dialog Streifen

Das neue Inhaltselement Streifen, verfügbar seit dem 13. Juli 2016 ist ein Element, welches einige Besonderheiten hat und erstmal auch ein Inhaltselement, welches man nicht für jedes Design oder Webseite nutzen sollte. Wir haben das bewusst in Kauf genommen, weil man mit diesem Element zwar einen Inhalt, ein Bild auf die Seite platziert aber mit diesem Inhalt gleichzeitig ein gestalterisches Element einfügt, welches nun mal nicht für jedes Design bzw. jede Struktur optimal ist. Wenn du das Element auf deine Seite einbindest und bemerkst, dass es nicht wirklich passend ist, kannst du es mit einem Klick wieder löschen oder einfach dein Design anpassen. Mit page4 kannst du ja im Gegensatz zu fast allen anderen Systemen aus jedem Design was du gewählt hast jedes andere Design selbst bauen weil du alle Parameter selbst anpassen kannst.

Schau dir in jedem Fall unsere Musterseiten an.

Wir haben extra zwei Seiten gebaut, damit du dir das neue Inhaltselement Streifen live ansehen kannst und einen Eindruck bekommst, welche Designmöglichkeiten dir damit offen stehen. Du findest die Seite unter der Adresse http://strips.features.page4.com und auf der Seite weitere Anregungen und Erklärungen. Wir haben eine Gestaltung mit einem schwarzen und mit einem weissen Hintergrund vorbereitet und du kannst mit einem Klick von der einer zur anderen Seite wechseln und so sehr schön sehen, wie dass mit unterschiedlichen Farben wirkt. Beide Seiten sind vom Inhalt identisch und haben nur unterschiedliche Farben für das Design bekommen.

Die Optionen

Wie du siehst, besteht der größte Teil vom Dialog aus einem Hilfetext. Dort findest du immer alle wichtigen Infos auf einen Blick. Die Optionen für den Streifen sind schnell erklärt.

1) Höhe = Wenn du den Streifen als "Mitscrollend" einstellst, dann kann das Element auch mit einer geringen Höhe gut aussehen. Da du keine Optionen hast, das Bild zum Beispiel zu kacheln oder zu platzieren (es wird immer mittig zentriert) musst du, wenn du das Element einfach nur als Streifen nutzen willst, das Bild so hochladen, dass es mindestens 2.560 px breit und mindestens drei bis viermal so hoch wie die von dir eingestellte Höhe. Warum erklären wir im nächsten Abschnitt. Wenn du den Streifen als mitlaufenden Hintergrund einsetzen willst, sollte das Bild so groß sein wie die von uns zur Verfügung gestellten Hintergrundbilder, also 2.560 x 1.440 Pixel. Damit ist sichergestellt, dass deine Webseite auch auf Monitoren mit sehr hoher Auflösung perfekt angezeigt wird.

2) Bild = Du hast die Möglichkeit, eines unserer Hintergrundbilder zu verwenden und du kannst natürlich auch eigene Bilder hochladen. Wenn du kein Bild auswählst oder ein gewähltes Bild löscht dann ist das alte Bild noch solange im Cache bis du die Seite neu aufrufst. Danach ist der Content nicht sichtbar, da ein Streifenelement ohne Bild vom System als leer angesehen und nicht dargestellt wird. Auch wenn du einen Rahmen definiert hat, gilt der Streifen als leer.

3) Rahmen = Du kannst den oberen und unteren Rand des Streifens mit einem Rand versehen und dabei alle bekannten Optionen nutzen inkl. der transparenten Farbe.

4) Stil = Mitscrollend bedeutet, du siehst immer den selben Bildausschnitt. Es entsteht der Eindruck eines normalen Bildes welches du einfach nur über den Rand hinaus anzeigen läßt. "Fixiert im Hintergrund" ist die Option, wofür das Inhaltselement ursprünglich gedacht war. Damit erzeugst du den Effekt von mehreren Hintergrundbildern über die du quasi die Seiteninhalte hinwegscrollst. Der Streifen platziert das eingeladene Bild auch wirklich in den Hintergrund und zwar über den gesamten Browser (Cover) und zeigt dann in der Höhe vom Streifen immer den Auschnitt über den du dich gerade bewegst. Alles außerhalb des Ausschnitts ist allerdings unsichtbar. Wenn du bei unserer Musterseite genau hinsiehst, dann erkennst du oberhalb und unterhalb vom Streifen das Originalhintergrundbild, welches du für das Design eingeladen hast. Je dunkler bzw. je undurchsichtiger der Bereich außerhalb deines Inhaltes ist um so weniger kann der Besucher erkennen, dass die zusätzlichen Hintergründe immer nur im Streifen sind.

5) Hilfe = Wichtige Infos findest du immer direkt im Inhaltselement.

Was passiert wenn...

Das Bild zwar breit genug aber die Höhe zu gering ist?

Bei der Option "Mitscrollend"?

Wie du oben sehen kannst, wird das Bild gekachelt. Bei diesem Beispiel war das Bild 2.560 Pixel breit und 200 px hoch. Der Streifen selbst war auch 200 px hoch. Also erster Gedanke, sollte passen.

Auf meinem großen Bildschirm, der so eine hohe Auflösung hat, sieht das auch gut aus. Knapp aber ok. Was passiert aber wenn der Bildschirm nicht so breit ist?

Ich habe den Browser also auf einen zweiten Bildschirm mit der Auflösung 1.980 x 1.050 Pixel geöffnet und das Ergebnis ist im obigen Bild zu sehen. Die Lösung ist ganz einfach. Der Streifen hat den "Befehl" das Bild möglichst komplett anzuzeigen. Da jetzt der Browser nur noch 1.980 Pixel breit war wurde das Bild verkleinert. Es wird dabei nicht verzerrt. Aus diesem Grund ist das Bild dann auch nicht mehr 200 px hoch sondern nur noch 155 px. Der Streifen ist weiterhin 200 px hoch also muss das Bild gekachelt werden weil man ansonsten oben und unten einen leeren Raum hätte.

Um so etwas zu vermeiden hilft es meist, die Höhe mindestens 2 bis 3 mal höher zu halten als der Streifen selbst braucht.

Bei der Option "Fixiert im Hintergrund"?

Wir haben das selbe Bild in der gleichen Größe verwendet bei einem Streifen von 200 px höhe und haben nur die Option von "Mitscrollend" auf "Fixiert im Hintergrund" gesetzt. Du siehst, dass Motiv ist extrem vergrößert und unscharf geworden. Wieso? Wie erwähnt, bekommt das Bild vom Inhaltselement den Befehl, sich über den gesamten Bereich auszudehnen. Wenn du einen Streifen als "Mitscrollend" anlegst, dann ist das so eingestellt, dass das Bild ja lediglich die sichtbare Fläche vom Streifen ausfüllen muss, da sich der Auschnitt nicht ändert. Also ist der Befehl so definiert, dass sich das Bild immer an die Breite anpasst  und sich im Streifen zentriert und damit kein leerer Raum bleibt wird notfalls vertikal gekachelt. So wie im vorherigen Bild gezeigt. Wenn der Streifen aber nur ein Sichtfeld ist auf ein "richtiges Hintergrundbild und mit richtig ist gemeint, dass das Bild wirklich den gesamten Hintergrund ausfüllt, dann bekommt das Bild den Befehl, sich an den gesamten Hintergrund, den der Browser anbietet anzupassen. Zuerst wird die Breite "geprüft". Ist das Bild hoch genug um dann die gesamte Fläche auszufüllen, wird das Bild zentriert und angezeigt. Stellt das System fest, die Höhe füllt nicht den gesamten Hintergrund aus dann wird die Höhe als Basis genommen und soweit vergrößert bis die Fläche in der Höhe ausgefüllt ist. Logischerweise wird das Bild dann viel breiter und man sieht dann auch nur einen Auschnitt von der Breite aber der gesamte Hintergrund ist mit dem Bild bedeckt (gecovert). Wie du sehen kannst, musste das Bild aufgrund der geringen Höhe von nur 200 px um mehr als das 5fache vergrößert werden und ist daher zum einen sehr unscharf und der Auschnitt ist natürlich stark "herangezoomt". Wenn du so einen Effekt hast, dann lade bitte ein passendes Bild ein.

Wenn ich einen Rahmen anschalte und transparent mache?

Du kannst max. eine Linien- bzw. Rahmenstärke von 50 px angeben. Das ist so dick wie in dem Bild oben. Wie du siehst, werden die Linien nach innen aufgebaut und verdecken oder überdecken das Bild. Wir haben die Linie transparent gemacht, damit du das deutlich sehen kannst. Mit der richtigen Farbe und Transparenz kannst du damit schöne Effekte erzielen.

Wenn mein Bild zu klein ist?

Wenn dein Bild zu klein ist und damit ist nicht die Dateigröße gemeint sondern die Abmessung deines Bildes, also wie viele Pixel es breit und hoch ist, dann wird das Bild vom Inhaltselement soweit vergrößert dass es die Anforderungen erfüllt. Das bedeutet es wird je nach Bildschirmauflösung und je nachdem wie groß der Browser aufgezogen ist ständig an die Mindestgröße angepasst. Wie du im obigen Bild drastisch sehen kann, führt das zu Qualitätsverlusten. Wir haben für das obige Beispiel ein wirklich kleines Bild verwendet, damit deutlich wird, dass die Qualität leidet. Wichtig ist, wenn solche Effekte auftreten ist das kein Fehler von page4 sondern du hast einfach ein nicht passendes Bild benutzt. Du musst dir auch immer im Klaren sein, dass jeder deiner Besucher einen anderen Computer und Bildschirm und damit auch eine andere Auflösung vom Bildschirm als zu haben kann und wenn es bei dir perfekt ist, kann es für deine Besucher oder für einen Teil deiner Besucher ganz anders aussehen.