Layoutvorlage 7210

Das Layout 7210 ist derzeit in 6 Variationen verfügbar und unterstützt drei verschiedene Bildgrößen. Es besteht aus einer zweigeteilten Navigation mit der Hauptnavigation oben und einer zusätzlichen Navigation rechts oder links. Die Blog-Navigation und die Sidebar-Elemente sind unterhalb der seitlichen Navigation untergebracht. Die Gesamtbreite beträgt 1000 Pixel, davon werden 250 Pixel für die Sidebar/Navigation verwendet und 750 Pixel für den Inhalt der Webseite. Das Konzept kommt von CSS Templates. Aus diesem Grund gibt es unterhalb der Webseite zwei Copyrightzeilen, die nicht ausgeblendet werden können. Das Layout verwendet CSS3 Funktionen (Farbverläufe) um zu simulieren, dass der Bereich der seitlichen Navigation und des Inhalts gleichhoch erscheinen, unabhängig vom Inhalt der beiden Bereiche. Diese Funktion ist nur aktiv im aktuellen Firefox, Chrome und Safari. Alle anderen Browser unterstützen kein CSS3 so dass Sidebar und Inhalt nur jeweils so hoch sind, wie der Inhalt selbst. Man hat aber die Möglichkeit, zusätzlich ein Bild einzuladen um diesen Effekt für alle Browser zu simulieren.

Das Layout 7210 besticht durch eine Vielzahl an Anpassungsmöglichkeiten. Nachfolgend ein paar Beispiele um zu zeigen, welche Möglichkeiten vorhanden sind.

Originalversion: Obwohl das Hauptbild 1000 Pixel breit ist, wird der rechte Teil von einer farbigen Fläche überdeckt. Der Hintergrund ist dunkelgrau, die Navigation und der Footer heben sich in schwarz leicht ab. Links und rechts vom Bild befindet sich eine cremefarbige Fläche. Da die Seite im Firefox angezeigt wird, ist die Spalte mit der Sidebar und seitlichen Navigation genauso hoch wie der Inhalt der Webseite. Im Explorer würde die rechte Spalte mit der Sidebar kürzer sein, da der Inhalt nach dem Zähler aufhört.

Variation 1: Wir haben das Design leicht verändert. Die Fläche über den Hauptbild haben wir durchsichtig gemacht (Farbe gelöscht) und an dieser Stelle ein Bild eingeladen, ein durchsichtiges png. Du könntest dort zum Beispiel ein Logo einbauen. Das Bild haben wir zentriert. Zusätzlich haben wir die Farbe der Navigation auf grün geändert. Das war auch schon alles. Das Hauptbild ist jetzt komplett sichtbar und das Logo gibt dem ganzen einen zusätzlichen Touche.

Variation 2: Hier sind wir etwas radikaler vorgegangen. Wir haben die Farbe der Hauptnavigation (Nr. 2), die Sonderfarbe Nr. 5 und den Hintergrung einheitlich grün eingefärbt. Dabei haben wir den gleichen Farbton benutzt wie in der Navigation, die somit mit dem Hintergrund verschmilzt. Nur die Sidebar und der Inhalt bleiben weiss. Dann haben wir für das Hauptbild eine durchsichtige Kachel eingeladen und wie in Variation 1 die Fläche über dem Hauptbild durchsichtig gemacht (Farbe Nr. 4). Statt einem Logo haben wir ein Bild bei Bild 3 hochgeladen und zwar in der vollen Größe, die möglich ist (230 x 350 Pixel). Das ganze wirkt nun etwas offener und die Schrift der Headline steht nicht mehr auf einem Bild sondern frei im Raum. Wenn man die Sidebar und den Inhalt ebenfalls in grün anlegt (es reicht, die Farben zu löschen damit der Hintergrund durchscheint) wird die Seite noch offener. In Variation 4 kann man sehen, dass man in diesem Fall auch mit einem dezenten Hintergrund arbeiten kann.

Variation 3: Diese Version nutzt das Bild 2 um über die ganze Breite der Seite eine Farbfläche oder wie hier ein Muster zu erzeugen. Wir haben den Hintergrund, die Hauptnavigation und die Sonderfarbe Nr. 5 auf Schwarz gesetzt, damit die Holzmaserung gut zur Geltung kommt. Das kleine Bild rechts haben wir gelassen, das Hauptbild wieder "unsichtbar"gemacht durch Verwendung einer durchsichtigen Kachel. Besonders gut kommt das Design auf großen Bildschirmen rüber, da die Holzleiste über den ganzen Bildschirm geht und so als tragende Fläche wahrgenommen wird.

Variation 4: In dieser Variante haben wir das Thema aus Variation Nr. 3 noch besser rausgearbeitet. Wir haben auch das kleine Schmuckbild durch eine durchsichtige Fläche ersetzt, so daß nun lediglich die Holzmaserung zur Wirkung kommt. Das dunkle Holz wirkt besonders gut auf einer hellen Fläche, daher haben wir den Hintergrund mit einem Muster versehen. Damit dieses Muster über die gesamte Webseite sichtbar wird haben wir alle Farben gelöscht und damit alle Flächen durchsichtig gemacht. Die Headline "Herzlich willkommen" läßt sich leider nicht mittig stellen, da nur der Platz bis zum zweiten (jetzt unsichtbarem Bild) zur Verfügung steht, daher sollte man die Schrift weiter linksbündig halten. Wie im letzten Beispiel kann man natürlich auch hier noch die Navigation offener halten und alle Flächen durchsichtig gestalten.

Variation 5: Im letzten Beispiel möchten wir einmal zeigen, welche Möglichkeiten man hat, wenn man das Bild Nr. 4 (welches eigentlich dazu dient, optisch gleich hohe Flächen zu erzeugen) nutzt, um die Trennung zwischen Sidebar und Inhalt zu vertiefen. Wir haben uns ein eigenes Bild erstellt mit einem Ornament in grün. Da wir die Breite der Sidebar nicht verändern können und wir nicht wollten dass das Ornament zu stark unter dem Inhalt der Sidebar liegt, haben wir das Ornament fast komplett in den Bereich des Inhalts verlagert. Natürlich wollten wir auch verhindern, dass der Inhalt zu stark über dem Ornament liegt. Also sind wir auf das erste Icon Design gegangen, dort auf -> Designeinstellungen (letzter Eintrag) und dann auf -> Inhalts-Elemente (zweite Karteikarte). Hier haben wir den linken Innen-Abstand auf 140 Pixel gesetzt wodurch der gesamte Inhalt der Webseite erst 140 Pixel weiter rechts anfängt. So ist das Ornament sehr schön zu erkennen. Man muss allerdings darauf achten, dass man diese Einstellung nicht in einem Element überschreibt (oder bereits überschrieben hat) da dieses Element ansonsten die dort angegebenen Abstände nutzt und nicht die übergeordneten Werte. Damit man einen Eindruck bekommt, dass man schon mit dem Hauptbild die Webseite gestalten kann, haben wir die linke und rechte Seite des Bildes mit dem Ornament verziert und das Bild dann als durchsichtiges png abgespeichert. Mit etwas Phantasie kann man hier sicher noch viel schönere Effekte erzeugen und dem Hauptbild einen angemessenen Rahmen und eine entsprechende Form geben. Wie man die anderen Elemente entfernt und die Farben anpasst haben wir ja schon in den anderen Beispielen gezeigt.

Variation 6: Zum Schluss möchten wir noch zeigen, wie das Design in einem Browser aussieht, der kein CSS3 unterstützt. Das obige Original-Design wurde im Camino geöffnet. Man sieht deutlich, dass die Spalte mit der Sidebar und der seitlichen Navigation kürzer ist als die Spalte mit dem Inhalt. Das ist normalerweise aber nicht weiter tragisch, da fast alle uns bekannten Baukästen die mit Div-Elementen arbeiten, solche Designvorlagen anbieten und daher solche "Effekte" weit verbreitet sind. Trotzdem habt Ihr natürlich die Möglichkeit, über das Bild 4 optisch gleich hohe Spalten zu erzeugen, egal für welchen Browser. Wie das geht, in Kürze weiter unten in diesem Beitrag.

Wir hoffen, die Beispiele haben Euch ein paar Anregungen gegeben, um das Design an die eigenen Wünsche anzupassen. Wenn Ihr ein besonders gut gelungenes eigenes Design gestaltet hat, lasst es uns doch einfach mal wissen. Vielleicht kann man ja mal einen Artikel darüber verfassen und eine Auswahl der Seiten vorstellen. Damit das dann auch vergleichbar bleibt, solltet ihr nur das Design 7210 verwenden. Natürlich lassen sich viele unserer anderen Vorlagen genauso vielfältig verändern. Viel Spaß beim Probieren. Wer eine Kaufversion hat, kann die verschiedenen Varianten abspeichern und jederzeit wieder einladen..