Bootstrap Pro v2 Layout

Auch erhältlich, das responsive Layout „Bootstrap Pro v2“ für Siquando Pro Web 2 von KARO Webdesign & Entwicklung. Das Template auf Basis des Bootstrap Frameworks bietet Ihnen dank der neuen Optionen in Siquando Pro Web 2 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 https://probs.siquando-designs.de und eine ausführliche Beschreibung aller Template-Features finden Sie auf der Hilfeseite des Designs .

Mit dem Bootstrap Pro v2 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 Bootstrap Pro v2 Layout inklusive Layout können Sie hier erwerben.

Siquando Pro Web 2 bietet neben Einstellungen wie Bilder, Farben und Checkboxen deutlich mehr Optionsarten gegenüber der ersten Version. So sind nun endlich auch Auswahlboxen, Slider, Text und weitere Optionen möglich. Das macht Pro Web 2 um Einiges attraktiver.

In Version 2 des Layouts können Sie nun die Gesamtbreite Ihrer Webseite oder auch die Breitenverhältnisse der Absatzbereiche bestimmen. Zusätzlich können Sie BBCode interpretieren lassen und das DropDown-Menü farblich anpassen.

Google Fonts Schriften können genau dort angegeben werden wo Sie sie vermuten, in den Designoptionen. Um die Optionen übersichtlich zu halten, haben die Icons nun einen eigenen Reiter erhalten. Sie können dort 6 eigene Icons mit jeweils dem Icon, dem Link, seinem Tooltip und Verweis konfigurieren. Zusätzlich gibt es weitere vorkonfigurierte Optionen für Facebook, Flickr, Google Plus, Dribble, Digg, Instagram, LinkedIn, Pinterest, Reddit, Spotify, Skype, Soundcloud, Tumblr, Twitter, YouTube, Vimeo, VK und XING.

Weitere „erweiterte Eigenschaften” sind verschiedene Trennzeichen (für die Brotkrumen- und Infoseitennavigation), sowie Geschwindigkeitsangaben für die Parallax-Effekte, dem Slider oder auch dem „nach Oben”-Button.

Auch das Copyright im Footer (Absatzbereich „Unten”) kann als Text angegeben werden, hier ist sogar HTML möglich. In der Demo ist bspw. der nachfolgende Quellttext angegeben

<i class="fa fa-copyright" aria-hidden="true"></i> 2017 Bootstrap Pro v2 by KARO / 

• „maximale Breite aller Absatzbereiche“: für die Breite des Layouts können Sie nun einen Wert zwischen 940 und 1540 Pixel wählen
• Breitenverhältnis der Absatzbereiche: für den linken und rechten Absatzbereich können Sie nun ein Seitenverhältnis wählen (2-8-2 / 3-6-3 / 4-4-4), dabei können Sie auch 4zu4zu4 wählen (wird dabei nur der linke oder rechte Absatzbereich angezeigt wird das Verhältnis dann 6zu6)
• die Geschwindigkeitsangaben können nun deutlich komfortabler per Slider angegeben werden
• auf Wunsch kann die Umwandlung von BBCode aktiviert werden
• „Boxed” Layout verwenden (anstatt „Wide” Layout): wenn diese Option aktiviert wird erstreckt sich das Layout über die von Ihnen angegebenen maximalen Breite, die Hintergrundfarben der verschiedenen Absatzbereich sich dann nicht mehr über 100% der Browserfensterbreite sichtbar (eine Anleitung zum Befüllen des restlichen Bereiches mit einem [wiederholendem] Hintergrundbild finden Sie hier )
• 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
• 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
• 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.

• 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 die Farbe nicht „123456”, ist sie „123456” (was der Standardwert ist) wird die vordefinierte Farbe der gewählten Variante verwendet
• Navigation (DropDown): Hintergrundfarbe, Schriftfarbe, Schriftfarbe beim Darüberfahren, Hintergrundfarbe beim Darüberfahren, Schriftfarbe der aktuellen Seite, Hintergrundfarbe der aktuellen Seite
• 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

• Startseite in Navigation aufnehmen: Ist ein Häkchen gesetzt wird die Startseite in der oberen Navigation dargestellt
• Suchfeld darstellen
• Menü über die komplette Breite (100%) anzeigen: bei Deaktivierung liegt das Menü über dem Slider oder über dem Absatzbereich „Top”
• Maximale Breite der Seite übernehmen (nur wirksam bei 100% Breite)
• 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
• Menü mit Schatteneffekt
• Menüfarben aus dem Reiter „Farben“ verwenden: Aktivieren Sie diese Option, damit die Farbangaben im Register Farben wirksam werden. Deaktivieren Sie diese Option werden vorkonfigurierte Werte der Variante verwendet (unter bootswatch.com finden Sie Beispiele der Varianten)
• Schriftgröße der Elemente im DropDown-Menü (in Pixel)

• Slider (und Eyecatcher) mit 100% Breite darstellen: Wird diese Einstellung deaktiviert wird die Slideshow „nur” mit der von Ihnen eingestellten Breite angezeigt.
• Parallaktischer Rolleffekt: mögliche Werte sind 0 bis 100, bei dem Minimalwert von 0 scrollt hier jedoch das Bild normal mit, bei einem Wert von 100 hingegen ist es fixiert
• Slider (und Eyecatcher) beim Erreichen der oberen Browserkante fixieren
• Links-Rechts Navigation (Direction Nav) anzeigen
• Slider (und Eyecatcher) mit Schatten anzeigen (wenn die Breite NICHT 100% ist)
• „Scrollen Sie nach unten“ anzeigen
• Wenn im Ordner keine Galerie definiert wurde, übergeordneten Ordner, dann Eyecatcher verwenden
• Anzeigedauer der Sliderelemente