Pro Web Bootstrap 3 Layout

Endlich erhältlich, das neue und erste responsive Layout für Siquando Pro Web von KARO Webdesign & Entwicklung. Das Template auf Basis von Bootstrap v3.2.0 bietet Ihnen dank der verschiedenen Absatzbereiche in Siquando Pro Web noch mehr gestalterische Freiheit. Die kinderleicht zu konfigurierende Slideshow, Google Fonts, Parallax Scrolling Effekte und die durchdachten Einstellungsmöglichkeiten lassen Ihre Webseiten individueller erscheinen als je zuvor, und das mit nur wenigen Klicks, ohne HTML-Kenntnisse.

Eine Beispiel-Demo des Layouts finden Sie unter http://bootstrap.siquando-designs.de und eine ausführliche Beschreibung aller Template-Features finden Sie hier .

Nicht nur optisch spricht Einiges für das neue Layout. Seit dem 21.04. präsentiert Google Smartphone Nutzer Seiten, die für kleine Bildschirme und Touch-Geräten optimiert sind. Mit dem Bootstrap 3 Layout gestalten Sie Ihre Website „Mobile Friendly“ ohne eine „Mobile Site“ (in Siquando Pro Web unter Datei / Website-Eigenschaften / Mobile Site) erstellen zu müssen.

Sie vermeiden nicht nur doppelten Content (SEO) sondern sparen auch noch eine Menge wertvolle Zeit.

Beachten Sie bitte die Lizenzbestimmungen . Eine Webmasterlizenz für das Pro Web Bootstrap 3 Layout inklusive Layout können Sie hier erwerben.

• „Boxed” Layout verwenden (anstatt „Wide” Layout): wenn diese Option aktiviert wird erstreckt sich das Layout über eine maximale Breite von 1170px (eine Anleitung zum Befüllen des restlichen Bereiches mit einem [wiederholendem] Hintergrundbild finden Sie hier )
• Absatzbereich in gleicher Breite: Ist diese Option aktiviert haben die Absatzbereiche Links, Inhalt und Rechts die gleiche Breite. Sind alle Bereiche sichtbar ist das Verältnis daher 33.33% - 33.33% - 33.33% oder bei 2 Bereichen 50% zu 50%. Ist bei dieser Opzion hingegen kein Häkchen gesetzt ist das Verhältnis 3-6-3 bei allen sichtbaren Bereichen oder 3-9 bzw. 9-3 bei nur einer sichtbaren „Sidebar”
• Absatzbereich „Oben” oberhalb des Sliders (Galerie) oder Eyecatchers: Ist diese Option nicht aktiviert wird der Absatzbereich „Oben” unter der Slideshow angezeigt, ist sie aktiviert erfolgt die Darstellung über der Slideshow oder dem Eyecatcher-Bild
• Absatzbereiche Oben, Mitte (Links, Mitte und Rechts) und Unten mit Schatteneffekt
• Absatzbereiche Oben, Mitte (Links, Inhalt und Rechts) und Unten durch Linien (Rahmen) trennen
• Absatzbereich „Links” nach rechts neben dem Inhalt verschieben
• „Sie sind hier”-Navigation darstellen
• Social-Icons im Footer anzeigen: Sie können die Anzeige der Social-Icons an dieser Stelle komplett deaktivieren. Die Icons selber sind in den Sprachressourcen genauer konfigurierbar.
• „nach Oben”-Scroller anzeigen
• Slider (und Eyecatcher) mit 100% Breite darstellen: Wird diese Einstellung deaktiviert wird die Slideshow „nur” mit einer Breite von 1140px angezeigt.
• Slider: Links-Rechts Navigation (Direction Nav) anzeigen
• Bilder mit Lazy Load (jQuery Variante) später laden
• Browser-Zooming aktivieren: Das Meta-Element „viewport” erhält zusätzlich die Anweisung maximum-scale=1, user-scalable:no so dass der Besucher die Seite nicht mehr Zoomen kann.

• Suchfeld darstellen
• Startseite in Navigation aufnehmen: Ist ein Häkchen gesetzt wird die Startseite in der oberen Navigation dargestellt
• Menü über die komplette Breite (100%) anzeigen: bei Deaktivierung liegt das Menü über dem Slider oder über dem Absatzbereich „Top ”
• Menü fixieren: Die Navigationsleiste ist bei Aktivierung immer sichtbar.
• Menü invertieren: Wenn das Menü invertiert wird, erhält die Navigationsleiste eine andere Farbe. Eine Übersicht über die Farben der normalen und invertierten Navigationsleiste finden Sie auf bootswatch.com , bei der Variante Simplex wäre das Standardmenü weiß und die invertierte Menü-Variante rot.
• Menü beim Darüberfahren öffnen: In der Bootstrap-Navigationsleiste ist es üblich die tieferliegende Ebene erst mit einem Klick darauf zu öffnen. Dies verhindert dass die erste Ebene nicht ignoriert wird, denn die erste Ebene wird einmalig in der zweiten Hierarchie wiederholt. Dies erhöht im Übrigen auch die Navigierbarkeit auf Smartphones und/oder Tablets. Dennoch können Sie dieses Verhalten unterdrücken, wodurch die Navigationsleiste wie ein übliches Dropdown-Menü reagiert ohne den Fokus auf mobile Geräte zu verlieren.
• Menü unterhalb des Eyecatchers anzeigen

• Hintergrundfarbe der Absatzbereiche „Oben”, „Unten” und des Hauptbereiches mit Inhalt, Links und Rechts, sowie des Footers
• Absatzbereich „Oben”: Schriftfarbe, Schriftfarbe der Überschrift, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren
• Absatzbereich „Unten”: Schriftfarbe, Schriftfarbe der Überschrift, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren
• Footer: Schriftfarbe, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren
• Registerkarten: Hintergrundfarbe der Register-Container
• Akkordeon: Farbe der Links, Farbe der Links beim Darüberfahren
• Navigation: Hintergrundfarbe der Leiste und der aktiven Menüpunkte: Diese Einstellung wird erst aktiv wenn der Farbwert nicht „123456” ist. Ist sie auf dem Standardwert „123456” eingestellt wird die vordefinierte Farbe der gewählten Variante verwendet.
• Brotkrumen-Navigation: Farbe der Schrift (wie „Sie sind hier:”) und der Trennungszeichen, Farbe der Links, Farbe der Links beim Darüberfahren und Hintergrundfarbe (Farbwert 123456 deaktiviert wieder)
• Slider: Farbe der Schrift in der Slideshow
• Text-Markierung (selection): Schrift- und Hintergrundfarbe der markierten Schrift

Diese Frage kann ganz klar mit JEIN beantwortet werden. Leider können nicht alle Absatztypen in Ihrer Darstellungsbreite dynamisch der Browserbreite angepasst werden. Zu diesen Standard-Absatztypen gehören 3D Karussell, flexible Bildmatrix, Imagemap, Infobox und animierte Infobox. Das soll aber nicht heißen dass diese Absätze das Layout auf kleinen Bildschirmen zerstören, bei diesen Absätzen muss der Besucher lediglich horizontal scrollen. Das gesamte Layout bleibt also gut lesbar. Außerdem können Sie pro Absatz einstellen, ob dieser auf mobilen Geräten sichtbar sein soll.