Pro Web Bootstrap 3 Layout Anleitung

Herzlichen Glückwunsch zur Installation des Pro Web Bootstrap Layouts.

Eine ausführliche Beschreibung zu dem neuen Layout finden Sie auf Pro Web Bootstrap Layout, falls Ihnen eine bestimmte Einstellungsmöglichkeit fehlen sollte können Sie dort gerne ein Kommentar hinterlassen.

Einen Großteil der Einstellungen für dieses Layout finden Sie in den Sprachressourcen im Bereich "Allgemeine Sprachressourcen . Klicken Sie dafür bitte auf Datei ➔ Sprachressourcen und scrollen ziemlich weit nach unten. Dort finden Sie Einstellungen für das Copyright und den Social-Icons im Footer, sowie weitere Einstellungen für Geschwindigkeiten und Trennzeichen.

Bitte beachten Sie bei den verschiedenen Sprachressourcen die vorgegebenen Werte und Beschreibungen. Bei den Parallax-Geschwindigkeiten ist es bespielsweise wichtig einen Punkt als Dezimaltrennzeichen zu verwenden. Richtig wäre daher 0.66 und nicht funktionieren würde 0,66.

Auf der Demoseite lautet der HTML-Code im Übrigen wie folgt:

Des Öfteren wird die Frage gestellt was die optimale Bilddimensionen für die Galerie- und/oder Eyecatcherbilder sind. Um es kurz zu machen. Eine optimale Breite oder Höhe gibt es nicht, da die Bilder auf 100% Breite des Browserfensters skaliert werden. Dementsprechend wächst oder schrumpft auch die Höhe der hinzugefügten Bilder. Das Layout selber schreibt keine Höhe oder Breite vor.

Angenommen die Bilder haben eine Breite von 1920px und sind 400px hoch. Wenn das Browserfenster des Betrachters nun eine Breite von 960px besitzt (1920 geteilt durch 2) so wird das Bild mit einer Höhe von 200px (400 geteilt durch 2) dargestellt.

Tipp: Bedenken Sie dass nicht jeder Besucher Ihrer Seite über eine 100MBit-Leitung mit dem Internet verbunden ist und die Bilder geladen werden müssen, auch über mobile Datenverbindungen. Sie sollten daher immer versuchen einen guten Kompromiss aus Bildqualität und -größe zu finden. (Empfehlenswert halte ich daher Bilder von etwa 1500px Breite, da diese auch bei einer Fensterbreite von 1920px sauber dargestellt werden und die Dateigröße des Bildes nicht zu hoch ist.)

Weiterhin ist die maximale Höhe des Logo's in der Navigationsleiste 50px. Hier ist meine Empfehlung ein nicht zu breites PNG-Bild mit transparentem Hintergrund zu verwenden.

Die Einstellungen der Farben (unter Gestaltung ➔ Schriftformate oder per Tastenkombination Strg+F12) unterscheiden sich kaum zu den Einstellungen "normaler Layouts. Allerdings wird im Pro Web Bootstrap 3 Layout die Überschrift "H5 als Schrift des Menüs der ersten Ebene verwendet. Weitere Schrifteinstellungen finden Sie des Weiteren unter Gestaltung ➔ Design bearbeiten oder per Tastenkombination Umschalt+F12 im unter dem Karteireiter Farben. Dort können Sie die folgenden Farben (Empfehlung: speichern Sie diese Datei auf Ihrem PC) konfigurieren:

• Hintergrundfarbe der Absatzbereiche Oben, Unten und des Hauptbereiches mit Inhalt, Links und Rechts Schriftfarbe, Schriftfarbe der Überschrift, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren

• Footer: Schriftfarbe, Schriftfarbe der Überschrift, 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

• 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

Ab der Version 1.0.5 gibt es die Einstellung "Boxed Layout verwenden (anstatt "Wide Layout). Der komplette Inhalt Ihrer Webseite wird in einem "Container von 1170px Breite gepackt (Screenshot).

Im Farben-Register des Layouts finden Sie die Option Hintergrundfarbe der Website (nur bei "Boxed Layout sichtbar / 123456 deaktiviert), womit Sie sehr einfach eine Farbe bestimmen können.

Natürlich wäre es auch wünschenswert ein Hintergrundbild einzufügen, dabei ist es Geschmackssache ob sich dieses Bild wiederholen soll (background-pattern), oder ob es sich stets über die komplette Beite der Seite erstrecken soll.
Dafür klickbare Einstellungen bereitzustellen wäre zum heutigen Zeitpunkt sehr unübersichtlich, deshalb habe ich mich entschieden dafür lediglich eine Sprachressource "CSS-Code im "head -Bereich bereitzustellen. Mit der CSS-Eigenschaft "background können Sie relativ einfach Ihren eigenen Hintergrund bestimmen. Die Reihenfolge der Werte ist
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
[h3]wiederholendes Hintergrundbild[/h3]Wenn Sie in einer Suchmaschine wie Google nach "background pattern png suchen finden Sie sicherlich schnell ein hübsches Hintergrundbild was sich in allen Richtungen wiederholen lässt. Ich persönlich bervorzuge diese Variante, da die Bildgröße sehr klein gehalten werden kann. Die folgende Anweisung würde "background-pattern.png als wiederholendes Hintergrundbild mit der Hintergrundfarbe #AEA79F darstellen. Importiert wurde das Bild im Hauptordner "Bilder .[googlecode]@media (min-width: 768px) { body#body { background: #AEA79F url(/images/pictures/background-pattern.png) repeat center center; } }[/googlecode][h3]skalierendes, flächendeckendes und fixiertes Hintergrundbild[/h3]In diesem Beispiel wird das in Bilder importierte Hintergrundbild "background-full.jpg , falls notwendig skaliert. [googlecode]@media (min-width: 768px) { body#body { background: url(/images/pictures/background-full.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } }[/googlecode]

Pro Web Anleitung zur Erstellung eines Galerie Eyecatchers

Ab Version 1.1.1 gibt es die Option "Absatzbereiche "Oben und/oder "Unten mit particles.js animieren (Schnee u.v.m.) , womit Sie den Hintergrund der Bereiche Oben und Unten, oder jeweils einer der Bereiche mit Partikel-Effekten versehen können, eine Beispiel-Seite haben wir Ihnen unter im Bereich "Unten mit particles.js angelegt.

Was bewirkt diese Einstellung genau und wo können Sie die Partikel-Effekte anpassen?

Ist diese Option eingeschaltet wird das Script particles.js geladen und die Bereiche "Oben und "Unten mit einem zusätzlichen div-Container "#particles-top oder "#particles-footer im Hintergrund versehen, so dass dieser mit Partikel gefüllt werden kann. So weit, so gut, wirklich geholfen hat Ihnen diese Information allerdings nicht. Was Sie wissen müssen ist wie nun der Hintergrund animiert werden kann. Sie fügen einfach einen der folgenden Code-Beispiele (im Akkordeon) "Am Ende des <body>-Bereichs einer Seite, eines Ordners oder auch unter Datei [fa=long-arrow-right][/fa] Website-Eigenschaften ein:

Sie können auf vincentgarreau.com/particles.js/ auch eine eigene Konfiguration heruntergeladen werden (oben rechts durch ein Klick auf " Download current config (json) ). CONFIG.JSON ersetzen Sie bitte mit dessen Inhalt, wie im Beispiel innerhalb des Akkordeons.

[googlecode]<script type="text/javascript">
var partJSt = document.getElementById('particles-top');
if (typeof partJSt !== 'undefined' && partJSt !== null) {
particlesJS("particles-top", CONFIG.JSON );
}
</script>[/googlecode]