Herzlichen Glückwunsch zur Installation des Pro Web Vertika Layouts.Eine ausführliche Beschreibung zu dem neuen Layout finden Sie auf Pro Web Vertika 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 für das Copyright im Footer im Übrigen wie folgt:
<i class="fa fa-copyright" aria-hidden="true"></i> 2018 Pro Vertika Layout v1 by <a href="https://siquando-designs.de">KARO</a>
Wie auch in dem Bootstrap-Layout wird keine Höhe vorgegeben, allerdings ist es ratsam beim Gebrauch des Sliders, oder auch Galerie genannt, Bilder mit gleichen Dimensionen zu verwenden. Ist die Option „Slider (oder Eyecatcher) direkt unter dem Kopfbalken (und oberhalb des Menüs) anzeigen” aktiviert (Screenshot ) ist die optimale Breite 1170 Pixel. Ist die Option deaktiviert, was die Standardeinstellung ist, ist optimale Breite des Eyecatchers 870 Pixel.
Weiterhin ist die maximale Breite des Logo's oberhalb des Menüs 300px. Den Abstand des Logo's nach oben und unten können Sie im KARO - Dialgfenster einstellen.
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 Vertika 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:
Einen Großteil der Einstellungen für die Website finden Sie im „KARO“ - Dialogfenster. Um dort Einstellungen vorzunehmen wechseln Sie bitte in die Voransicht, falls Sie sich dort noch nicht befinden.Dort sollten Sie nun an der unteren, linken Kante die Schaltfläche mit Zahnradsymbol finden. Klicken Sie bitte mit der linken Maustaste 1x darauf, damit sich das „KARO“ - Dialogfenster öffnet.
Nachdem sich das „KARO“ - Dialogfenster geöffnet hat können Sie Einstellungen vornehmen. Neben der Überschrift der Einstellung finden Sie meist zusätzlich einen Infoschaltfläche. Mit einem Mausklick darauf wird Ihnen die Option genauer beschrieben, in einigen Fällen ist dort auch der Standardwert zum Kopieren hinterlegt. Unter „Google Maps Api Key erstellen” finden Sie des Weiteren weitere Hinweise zur Erstellung des Api Keys für die Google Karte als Eyecatcher.
Einige, wenige Einstellungen, wie Transparenzen oder Abstände, können Sie per „benutzerdefinerte Tag's” konfigurieren, diese werden natürlich nicht im HTML-Quelltext als Metatag's sichtbar sein. Um diese Tags zu konfigurieren klicken Sie bitte auf Datei, und anschließend auf Website-Eigenschaften. Ist Dialogfenster geöffnet können Sie nun durch einen Klick auf das grüne Pluszeichen weitere benutzerdefinierte Tags hinzufügen. Die folgenden Werte [Name (name) - Inhalt (content) Paare] sind zum jetzigen Zeitpunkt (Stand 01.09.2015) möglich:
Ab Version 1.0.3 ist es möglich den Hintergrund des HTML5 Layouts „Vertika” mit per Javascript erstellen Partikeln etwas in Bewegung zu bringen. Pünktlich zur Weihnachtszeit haben wir deshalb den Hintergrund der Demoseite mit einem Schneeeffekt versehen. Damit auch Sie diesen oder ähnliche Effekte hinzufügen können haben wir dem Layout eine weitere Einstellungsmöglichkeit hinzugefügt, und zwar „Hintergrund mit particles.js animieren (Schnee u.v.m.)”.Haben Sie diese Funktion aktiviert fügt das Layout einen weiteren Hintergrund-Container mit der ID „particles-js” hinzu und stellt die Datei particles.js bereit. Sie müssen jetzt nur noch unter Datei Website-Eigenschaften Reiter „HTML” bei Am Ende des <body>-Bereichs beispielsweise das folgende Script hinzufügen:
<script type="text/javascript">particlesJS("particles-js", { "particles": { "number": { "value": 300, "density": { "enable": true, "value_area": 1000 } }, "color": { "value": "#fff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 0.5, "random": true, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 10, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": false, "distance": 500, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 2.5, "direction": "bottom", "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": "bubble" }, "onclick": { "enable": true, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 0.5 } }, "bubble": { "distance": 400, "size": 4, "duration": 0.3, "opacity": 1, "speed": 3 }, "repulse": { "distance": 150, "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 weiter oben.
<script type="text/javascript">particlesJS("particles-js", 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
