Der Streifen-Abschnitt mit Animation

Diese komplette Webseite hat ein Design ohne einen Header, Siderbar und Footer. Wir haben also nur eine feststehende Navigation, die ganz oben ist und gleich danach fängt der Inhaltsbereich an. Wir möchten dir zeigen, wie man mit so einem "einfachen" Design ganz moderne Webseiten gestalten kann. Vor allem kann man mit den neuen Möglichkeiten Webseiten erstellen, die auf jeder Seite anders gestaltet sind.

Der Header, den du oben siehst, ist ein Streifen-Content mit der neuen Animation. Damit dieser Content auch wirklich direkt an die Navigation anschließt musst du zwingend im Design unter dem Punkt "Elemente" den Außenabstand für Contents auf 0 Pixel setzen. Wenn du das nicht machst, dann hat der Streifen und jeder andere Inhalt zum Rand hin einen Abstand.

Oben siehst du den Bereich, wo man diese Einstellungen vornimmt. Bearbeite dein Design, klicke auf Elemente (1) und dann stelle alle Header (2) aus und ebenso die beiden Sidebars. Unter Einstellungen (3) kannst du dann den Außenabstand der Contents auf 0 px stellen, dass ist der Abstand, den Inhalte zum äußeren Rand des Inhaltsbereichs haben. Außerdem kannst du den Zwischenabstand der Contents auch auf 0 px stellen. Das erleichert dir die Plazierung von mehreren Inhalten untereinander ohne Abstand. Mit dem Abstands-Content kannst du dann beliebige Freiräume schaffen. Für den Effekt, einen Inhalt als Header zu nutzen ist dass aber nicht notwendig.

Möchtest du die gleiche Gestaltung auf mehrere Seiten haben, dann kannst du entweder den Streifen-Content kopieren, in die Ablage legen und dann auf die Seiten kopieren oder wenn du neu anfängst, einfach die Seite kopieren.

Da der Header jetzt aus einem Inhaltselement besteht, ist er immer nur auf der Seite zu sehen, auf dem der Content ist. Das bringt eine Menge Vorteile mit sich und den Nachteil, dass du dieses Element, wenn du es denn möchtest, auch auf alle anderen Seiten kopieren musst. Das Gute ist, Bilder brauchst du nur einmal hochladen, da alle Bilder in der Verwaltung gespeichert und beliebig oft verwendet werden können.

Die Vorteile sind klar und verständlich:

a) Du kannst beliebige Seiten auch ohne Header machen

b) Du kannst auf jeder Seite ein anderes Headerbild einbauen

c) Du kannst beliebig hohe Header auf den Seiten verwenden
d) Du kannst verschiedene Inhaltselemente als Header benutzen
e) Für den Footer gilt das selbe.

Der einzige Nachteil ist, dass du keine Sidebars verwenden kannst. Möchtest du auf einigen Seiten aber so etwas wie eine Sidebar haben, kannst du dafür jederzeit Spalten nutzen.

Ausführliche Infos zum Streifen selbst und allgemeine Anregungen auf unserer Hilfeseite.

Wenn man die Toolbar aufruft, indem man mit der Maus über einen Inhalt fährt dann findet man ganz rechts ein Zahnrad. Damit ruft man die Optionen für Inhaltselemente auf. Da dieser Dialog einheitlich für alle Inhalte ist haben auch alle Inhalte die neue Funktion "Breite ausdehnen".

Hier nochmal eine kurze Erklärung für diese Optionen. Das ist wichtig, wenn man die neue Funktion sinnvoll nutzen will. Ein Inhalt wie Texte, Bilder usw. wird immer in einem sogenannten Div eingebunden, dass ist quasi der Bereich, in dem man die Inhalte einbindet.

So ein Bereich ist rechteckig und hat

a) einen Rahmen (1). Man kann für alle 4 Seiten einen Rahmen getrennt einstellen. Ist die Rahmenstärke 0 px dann ist der Rahmen an dieser Seite unsichtbar. Alle Rahmen haben eine Farbe. Die Überschrift über diesen Text habe ich mit einem schwarzen Rahmen versehen und man sieht, jede Seite hat eine andere Rahmenstärke. Der Rahmen wird nach innen aufgebaut und drückt den Inhalt dann entsprechend weg.

b) einen Innenabstand (2). Wenn man den Innenabstand auf 0 px setzt, dann wird der Inhalt bis an den Rand laufen. Man sieht das deutlich an der linken Seite. Ich habe dort absichtlich 0 px eingestellt, die Schrift fängt direkt am Rahmen an. Rechts habe ich 20 px eingetragen. Daher ist dort ein Abstand zum Rand

c) eine Hintergrundfarbe (2). Damit man das gut sehen kann, habe ich den Hintergrund mit einem hellen Grün hinterlegt. Die Hintergrundfarbe füllt immer den gesamten Bereich aus.

d) Jeder Inhalt hat eine Sprungmarke (4). Das ist eine eindeutige ID. Damit kann man direkt zu einem Inhalt verlinken. Ausführliche Infos gibt es in unserer Hilfe und in unserem Blog.

Wichtig: Normalerweise werden die Werte für Rahmen und Hintergrund von einer zentralen Stelle aus gesteuert. Du findest diesen Dialog aktuell unter "Design" und dann "Designeinstellungen". Wie du oben im Bild sehen kannst, ist dann die Option "Werte von Layout übernehmen" aktiv und die Eingabefelder sind deaktiviert. 

Hinweis: Nachfolgend einige "Beispielinhalte", um die neue Streifenfunktion zu demonstrieren und ganz am Schluss dieser Seite erklären wir dir noch, wie du einen Footer "simulieren" kannst. Auf den anderen Seiten  stellen wir weitere Funktionen vor und zeigen dir Beispiele, wie man diese umsetzen kann.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said 

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on ther named Duden flows by their place and supplies it with put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day howeOn her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text sh small line of blind text by the name of Lorem Ipsum deut the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around

Der unter diesem Text angezeigte "Footer" ist diesmal kein Footer. Wir haben statt dessen den HTML-Content direkt auf die Seite platziert, den Footer ausgeschaltet und lediglich eine maximale Breite für das Element angegeben. Im "richtigen" Footer wurde die Breite durch die Seitenbreite begrenzt und der Streifen hinter dem Footer hat dann den Farbhintergrund über den gesamten Browser geliefert. Jetzt macht der Inhalt das selbst. Wir haben die neue Funktion angeschaltet und den Hintergrund auf blaue Farbe gesetzt. Dank der max. Breite zentrieren sich jetzt die Inhalte wie bisher. 

Möchtest du den Footer auch auf anderen Seiten anzeigen, musst du das Inhaltselement einfach nur in die Zwischenablage kopieren und dann auf die entsprechenden Seiten einfügen. Wenn alle Seiten einen Footer haben sollen, der identisch ist, dann sollte man lieber den Footer im Design aktivieren und verwenden.