Bootstrap Pro v2 Design Info und Hilfe

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.

Bildhöhen und -breiten

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.

Einstellung der Farben

Die Einstellungen der Farben (unter Gestaltung [fa=long-arrow-right][/fa] 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 [fa=long-arrow-right][/fa] 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

  • "Oben sowie "Unten jeweils: 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

  • 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

Hintergrund beim „boxed” Layout

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]

Layoutoptionen

  • "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)

  • "Boxed Layout verwenden (anstatt "Wide Layout): wenn diese Option aktiviert wird erstreckt sich das Layout über die von Ihnen angegebenen maximalen Breite, die Farben der verschiedenen Absatzbereich erstrecken sich dann nicht mehr über 100% der Browserfensterbreite

  • 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

  • Absatzbereich "Links" nach rechts verschieben: Aktivieren Sie diese Option, um 2 schmale Absatzbereich rechts anzeigen zu lassen. So können sich dann die folgenden Breitenverhältnisse ergeben: 8-2-2 oder 6-3-3

  • Absatzbereiche Oben, Mitte (Links, Mitte und Rechts) und Unten mit oberen Schatteneffekt

  • Absatzbereiche Oben, Mitte (Links, Mitte und Rechts) und Unten mit unteren Schatten

  • Social-Icons im Footer anzeigen (Konfiguration über eigenen Reiter): Sie können die Anzeige der Social-Icons an dieser Stelle komplett deaktivieren. Die Icons selber sind in den Sprachressourcen genauer konfigurierbar.

  • "Sie sind hier -Navigation darstellen

  • "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.

  • Google Schriften: Geben Sie dort einfach den Namen der Schrift an, das Design erledigt den Rest für Sie. Unter fonts.google.com finden Sie die möglichen Schriftarten. Möchten Sie zum Beispiel die Schriftart PT Sans verwenden, genügt es in das entsprechende Textfeld "PT Sans" einzugeben

  • Copyright: Das Copyright im Footer wird ab Version 2 im Register Optionen angegeben. Möglich ist auch HTML, auch für Icons. Hier ein Beispiel für das Copyright-Icon von Font Awesome: [code]<i class="fa fa-copyright" aria-hidden="true"></i>[/code]

  • Geschwindigkeit Parallax "Oben" und "Unten": Bei dem Minimalwert von 0 wäre das Hintergrundbild fixiert, bei einem Wert von 100 hingegen würde es normal mitscrollen

  • CSS-Klasse für den "Weiterlesen"-Link: Die angegebenen CSS-Klassen werden dem Link "Weiterlesen hinzugefügt (nutzen Sie Bootstrap-Klassen vergessen Sie bitte nicht "btn ). Standardmäßig sind die Klassen btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger und btn-link möglich. Außerdem kann durch btn-lg, btn-sm und btn-xs die Größe beeinflußt werden. Mehr dazu erfahren Sie auf der deutschen Seite des Bootstrap-Projektes: holdirbootstrap.de/css/#buttons-options oder auf der offiziellen Seite getbootstrap.com/css/#buttons-options

Pro Web Anleitung zur Erstellung eines Galerie Eyecatchers

„Oben” und/oder „Unten” mit particles.js animieren

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:

Script für Partikel im Bereich „Oben”

[googlecode]<script type="text/javascript">
var partJSt = document.getElementById('particles-top');
if(typeof partJSt !== 'undefined' && partJSt !== null){
particlesJS("particles-top", {
[tab]"particles": {
[tab][tab]"number": {
[tab][tab][tab]"value": 80,
[tab][tab][tab]"density": {
[tab][tab][tab][tab]"enable": true,
[tab][tab][tab][tab]"value_area": 800
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"color": {
[tab][tab][tab]"value": "#ffffff"
[tab][tab]},
[tab][tab]"opacity": {
[tab][tab][tab]"value": 0.5,
[tab][tab][tab]"random": false,
[tab][tab][tab]"anim": {
[tab][tab][tab][tab]"enable": false,
[tab][tab][tab][tab]"speed": 1,
[tab][tab][tab][tab]"opacity_min": 0.1,
[tab][tab][tab][tab]"sync": false
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"size": {
[tab][tab][tab]"value": 3,
[tab][tab][tab]"random": true,
[tab][tab][tab]"anim": {
[tab][tab][tab]"enable": false,
[tab][tab][tab]"speed": 40,
[tab][tab][tab]"size_min": 0.1,
[tab][tab][tab]"sync": false
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"line_linked": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"distance": 150,
[tab][tab][tab]"color": "#ffffff",
[tab][tab][tab]"opacity": 0.4,
[tab][tab][tab]"width": 1
[tab][tab]},
[tab][tab]"move": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"speed": 2,
[tab][tab][tab]"direction": "none",
[tab][tab][tab]"random": false,
[tab][tab][tab]"straight": false,
[tab][tab][tab]"out_mode": "out",
[tab][tab][tab]"bounce": false,
[tab][tab][tab]"attract": {
[tab][tab][tab][tab]"enable": false,
[tab][tab][tab][tab]"rotateX": 600,
[tab][tab][tab][tab]"rotateY": 1200
[tab][tab][tab]}
[tab][tab]}
[tab]},
[tab]"interactivity": {
[tab][tab]"detect_on": "canvas",
[tab][tab]"events": {
[tab][tab][tab]"onhover": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"mode": "grab"
[tab][tab]},
[tab][tab]"onclick": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"mode": "push"
[tab][tab]},
[tab][tab]"resize": true
[tab][tab]},
[tab][tab]"modes": {
[tab][tab][tab]"grab": {
[tab][tab][tab][tab]"distance": 140,
[tab][tab][tab][tab]"line_linked": {
[tab][tab][tab][tab][tab]"opacity": 1
[tab][tab][tab][tab]}
[tab][tab][tab]},
[tab][tab][tab]"bubble": {
[tab][tab][tab][tab]"distance": 400,
[tab][tab][tab][tab]"size": 40,
[tab][tab][tab][tab]"duration": 2,
[tab][tab][tab][tab]"opacity": 8,
[tab][tab][tab][tab]"speed": 3
[tab][tab][tab]},
[tab][tab][tab]"repulse": {
[tab][tab][tab][tab]"distance": 200,
[tab][tab][tab][tab]"duration": 0.4
[tab][tab][tab]},
[tab][tab][tab]"push": {
[tab][tab][tab][tab]"particles_nb": 4
[tab][tab][tab]},
[tab][tab][tab]"remove": {
[tab][tab][tab][tab]"particles_nb": 2
[tab][tab][tab]}
[tab][tab]}
[tab]},
[tab]"retina_detect": true
});
}
</script>
[/googlecode]

Script für Partikel im Bereich „Unten”

[googlecode]<script type="text/javascript">
var partJSf = document.getElementById('particles-footer');
if(typeof partJSf !== 'undefined' && partJSf !== null){
particlesJS("particles-footer", {
[tab]"particles": {
[tab][tab]"number": {
[tab][tab][tab]"value": 80,
[tab][tab][tab]"density": {
[tab][tab][tab][tab]"enable": true,
[tab][tab][tab][tab]"value_area": 800
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"color": {
[tab][tab][tab]"value": "#ffffff"
[tab][tab]},
[tab][tab]"opacity": {
[tab][tab][tab]"value": 0.5,
[tab][tab][tab]"random": false,
[tab][tab][tab]"anim": {
[tab][tab][tab][tab]"enable": false,
[tab][tab][tab][tab]"speed": 1,
[tab][tab][tab][tab]"opacity_min": 0.1,
[tab][tab][tab][tab]"sync": false
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"size": {
[tab][tab][tab]"value": 3,
[tab][tab][tab]"random": true,
[tab][tab][tab]"anim": {
[tab][tab][tab]"enable": false,
[tab][tab][tab]"speed": 40,
[tab][tab][tab]"size_min": 0.1,
[tab][tab][tab]"sync": false
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"line_linked": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"distance": 150,
[tab][tab][tab]"color": "#ffffff",
[tab][tab][tab]"opacity": 0.4,
[tab][tab][tab]"width": 1
[tab][tab]},
[tab][tab]"move": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"speed": 2,
[tab][tab][tab]"direction": "none",
[tab][tab][tab]"random": false,
[tab][tab][tab]"straight": false,
[tab][tab][tab]"out_mode": "out",
[tab][tab][tab]"bounce": false,
[tab][tab][tab]"attract": {
[tab][tab][tab][tab]"enable": false,
[tab][tab][tab][tab]"rotateX": 600,
[tab][tab][tab][tab]"rotateY": 1200
[tab][tab][tab]}
[tab][tab]}
[tab]},
[tab]"interactivity": {
[tab][tab]"detect_on": "canvas",
[tab][tab]"events": {
[tab][tab][tab]"onhover": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"mode": "grab"
[tab][tab]},
[tab][tab]"onclick": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"mode": "push"
[tab][tab]},
[tab][tab]"resize": true
[tab][tab]},
[tab][tab]"modes": {
[tab][tab][tab]"grab": {
[tab][tab][tab][tab]"distance": 140,
[tab][tab][tab][tab]"line_linked": {
[tab][tab][tab][tab][tab]"opacity": 1
[tab][tab][tab][tab]}
[tab][tab][tab]},
[tab][tab][tab]"bubble": {
[tab][tab][tab][tab]"distance": 400,
[tab][tab][tab][tab]"size": 40,
[tab][tab][tab][tab]"duration": 2,
[tab][tab][tab][tab]"opacity": 8,
[tab][tab][tab][tab]"speed": 3
[tab][tab][tab]},
[tab][tab][tab]"repulse": {
[tab][tab][tab][tab]"distance": 200,
[tab][tab][tab][tab]"duration": 0.4
[tab][tab][tab]},
[tab][tab][tab]"push": {
[tab][tab][tab][tab]"particles_nb": 4
[tab][tab][tab]},
[tab][tab][tab]"remove": {
[tab][tab][tab][tab]"particles_nb": 2
[tab][tab][tab]}
[tab][tab]}
[tab]},
[tab]"retina_detect": true
});
}
</script>
[/googlecode]


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]

© siquando-designs.de by KARO Webdesign & Entwicklung

Direkt-Navigation öffnen oder schließen

Wir (KARO Webdesign & Entwicklung) verwenden Cookies um unsere Website zu optimieren und Ihnen das bestmögliche Online-Erlebnis zu bieten. Mit dem Klick auf „Erlauben“ erklären Sie sich damit einverstanden. Weiterführende Informationen erhalten Sie in unserer Datenschutzerklärung.