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.
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:
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 istbackground: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
@media (min-width: 768px) { body#body { background: #AEA79F url(/images/pictures/background-pattern.png) repeat center center; } }
@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; } }
<i class="fa fa-copyright" aria-hidden="true"></i>
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 Website-Eigenschaften ein:
<script type="text/javascript">var partJSt = document.getElementById('particles-top');if(typeof partJSt !== 'undefined' && partJSt !== null){particlesJS("particles-top", { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 2, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true});}</script>
<script type="text/javascript">var partJSf = document.getElementById('particles-footer');if(typeof partJSf !== 'undefined' && partJSf !== null){particlesJS("particles-footer", { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 2, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "grab" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 140, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true});}</script>
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.
<script type="text/javascript">var partJSt = document.getElementById('particles-top');if (typeof partJSt !== 'undefined' && partJSt !== null) {particlesJS("particles-top", CONFIG.JSON );}</script>
KARO Webdesign & Entwicklung (siquando-designs.de) verwendet Cookies, um die Dienste ständig zu verbessern und bestimmte Features zu ermöglichen. Indem Sie hier fortfahren, stimmen Sie dieser Verwendung zu. Mehr erfahren
