Vertika Pro Layout - Hilfe und Anleitung

Herzlichen Glückwunsch zur Installation des Pro Web 3 Layouts "Vertika Pro v3".

Weitere Informationen finden Sie übrigens auch in der Hilfe des Layouts im "Design bearbeiten"-Dialog (Tastenkombination Umschalt+F12) per Klick auf das Hilfe-Symbol unten links.

Bildhöhen und -breiten

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 gleichzeitig die von Ihnen eingestellte Gesamtbreite des Designs.
Ist die Option deaktiviert, was die Standardeinstellung ist, ist die optimale Breite des Eyecatchers die Gesamtbreite des Layouts (Standard 1170) minus der Breite des linken Bereiches (300), im Ausgangszustand daher 870 Pixel breit.

Um eine optimale Darstellung aller Bilder, auf allen Ausgabengeräten zu gewährleisten, sollten die Bilder immer mindestes eine Breite von 768 Pixel besitzen.

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.

Einstellung der Farben

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:

  • Hintergrundfarben: Website, Absatzbereich "Oben , Hauptbereich, Absatzbereich "Unten , Kopf- und Fußbalken, Logobereich, Absatzbereich "Links

  • Navigation: Hintergrundfarbe des Hauptmenüs, Hintergrundfarbe des Untermenüs, Schriftfarbe des Untermenüs, Schriftfarbe des Untermenüs beim Darüberfahren mit der Maus und jetzt neu in Version 2 zusätzlich Schrift- und Hintergrundfarbe des aktiven Elementes

  • Absatzbereich "Links : Schriftfarbe, Schriftfarbe der Überschrift, Schriftfarbe der Links, Schriftfarbe der Links beim Darüberfahren

  • Kopfbalken: Schriftfarbe, 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 mit der Maus

  • Fußbalken: Schriftfarbe, Schriftfarbe der Links und Schriftfarbe der Links beim Darüberfahren

  • Slider (bzw. Eyecatcher): Farbe der Schrift in der Slideshow, Farbe der Links, Farbe der Kontroll-Elemente

  • Brotkrumen-Navigation: Farbe der Links, Farbe der Links beim Darüberfahren, Hintergrundfarbe

  • Aufmacher: Hintergrundfarbe des Aufmachers "Bild, Kurztext, Überschrift

  • Registerkarten: Hintergrundfarbe der Register-Container

  • Akkordeon: Farbe der Links und Farbe der Links beim Darüberfahren

  • Text-Markierung (selection): Farbe der Schrift und Hintergrundfarbe des Markierungsbereiches

Layoutregister Optionen

  • Maximale Breite des Layouts (in Pixel)

  • Maximale Breite des linken Bereiches (in Pixel): dieser Wert wird von der maximalen Breite des Layous abgezogen und ergibt dann die Breite der Absatzbereichen Oben, Inhaltsbereich (plus Rechts), sowie Unten

  • Hintergrund mit particles.js animieren (Schnee u.v.m.)

  • Absatzbereiche Inhalt und Rechts in der gleichen Breite darstellen (1-1 oder 3-1)

  • Absatzbereich "Links" auf mobilen Geräten (schmaler als 768px) ausblenden

  • Absatzbereiche Oben, Mitte (Inhalt und Rechts) und Unten mit Schatteneffekt an der oberen Kante

  • Absatzbereiche Oben, Mitte (Inhalt und Rechts) und Unten mit Unterkanten-Schatten

  • Absatzbereiche Oben, Mitte (Inhalt und Rechts) und Unten durch Linien (Rahmen) trennen

  • Wenn der linke Bereich höher als der Hauptbereich ist, Inhalt automatisch erhöhen

  • "nach Oben"-Scroller anzeigen

  • Social-Icons in Kopfbalken anzeigen (Konfiguration in den Sprachressourcen)

  • Bilder mit Lazy Load (jQuery Variante) später laden

  • Lazy Load Geschwindigkeit in Millisekunden

  • Aufmacher mit Kurztext als Box (Thumbnail) darstellen

  • BB-Code interpretieren

  • Browser-Zooming aktivieren aktivieren Sie diese Option werden einige notwendige Resourcen von externen Quellen geladen, die den Ladeprozess Ihrer Seite beschleunigen können.[br]html5shiv.min.js und respond.min.js werden von https://oss.maxcdn.com/ geladen. Shariff und Cookieconsent-Dateien werden von https://cdnjs.cloudflare.com/

  • CDN's (Content Delivery Networks) wenn möglich verwenden:

  • fast 70 verschiedene Overlaybilder für die Bereiche: kompletter Hintergrund, Kopfzeile, Absatzbereich Oben, Absatzbereich Hauptcontainer, Absatzbereich Unten und dem Footer

  • Debugging-Informationen ausgeben

  • Hinweis: die Option "Hintergrund mit schwarzen Pünktchen überdecken" wurde in Version 3 entfernt, und durch die Funktion "Overlay-Bilder" ersetzt

Menü - Optionen

  • Stil des Untermenüs: Menü nach rechts aufschieben oder zweite und dritte Ebene unterhalb des Elternelementes

  • "Sie sind hier -Navigation darstellen

  • Startseite in Navigation aufnehmen: Ist ein Häkchen gesetzt wird die Startseite in der oberen Navigation dargestellt

  • Suche in dem Kopfbalken anzeigen

  • Menü-Elemente zentrieren

  • vertikaler Abstand (in Pixel) der obersten Ordner

  • vertikaler Abstand (in Pixel) der tieferen Ebenen

  • Schriftgröße der tieferen Ebenen

  • Menü fixieren: Sobald das Menü die obere Kante des Browsers erreicht wird das Menü fixiert. Damit auch alle Absätze des Absatzbereiches "Links sichtbar sind wird die Fixierung rechtzeitig aufgehoben, das Menü scrollt dann wieder mit.

  • animate.css im Menü für den Admin verlinken: Um Ihnen die Auswahl eines animate-Effektes zu erleichtern, können Sie sich als Administrator der Seite in Siquando Pro Web den Link zur Vorschauseite anzeigen lassen. Besucher Ihrer Webseite sehen diesen Link auch bei aktivierter Option nicht.

Optionsregister „Header“

  • Innenabstand (20px) nach oben und unten beim Absatzbereich Oben entfernen (für Panorama-Absätze als Eyecatcher)

  • Beim Absatzbereich Oben (wenn möglich) Panorama erzwingen (für Panorama-Absätze als Eyecatcher)

  • 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

  • Slider (oder Eyecatcher) direkt unter dem Kopfbalken (und oberhalb des Menüs) anzeigen: ist diese Option aktiviert erstreckt sich der Slider über eine Breite von 1170 Pixel oberhalb des Menüs und dem eigentlichen Inhaltsbereich. Ist bei dieser Einstellung kein Häkchen gesetzt ist die Breite des Sliders bzw. Eyecatcherbildes 870 Pixel.

  • Slider: Links-Rechts Navigation (Direction Nav) anzeigen

  • Slider: "Scrollen Sie nach unten" anzeigen

  • Wenn im Ordner keine Galerie definiert wurde, übergeordneten Ordner, dann Eyecatcher verwenden

  • Video stummschalten

  • Video automatisch starten

Optionen per „KARO“ - Dialogfenster

Einstellungen in der Voransicht über das „KARO“ - Dialogfenster

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.

„particles.js” für animierten Hintergrund

E ist möglich den Hintergrund des HTML5 Layouts "Vertika Pro v2 per Javascript erstellten 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:
[googlecode]<script type="text/javascript">
particlesJS("particles-js", {
[tab]"particles": {
[tab][tab]"number": {
[tab][tab][tab]"value": 300,
[tab][tab][tab][tab]"density": {
[tab][tab][tab][tab][tab]"enable": true,
[tab][tab][tab][tab][tab]"value_area": 1000
[tab][tab][tab][tab]}
[tab][tab][tab]},
[tab][tab][tab]"color": {
[tab][tab][tab]"value": "#fff"
[tab][tab][tab]},
[tab][tab][tab]"shape": {
[tab][tab][tab][tab]"type": "circle",
[tab][tab][tab][tab]"stroke": {
[tab][tab][tab][tab][tab]"width": 0,
[tab][tab][tab][tab][tab]"color": "#000000"
[tab][tab][tab][tab]},
[tab][tab][tab]"polygon": {
[tab][tab][tab][tab]"nb_sides": 5
[tab][tab][tab]},
[tab][tab][tab]"image": {
[tab][tab][tab][tab]"src": "img/github.svg",
[tab][tab][tab][tab]"width": 100,
[tab][tab][tab][tab]"height": 100
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"opacity": {
[tab][tab][tab]"value": 0.5,
[tab][tab][tab]"random": true,
[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": 10,
[tab][tab][tab]"random": true,
[tab][tab][tab]"anim": {
[tab][tab][tab][tab]"enable": false,
[tab][tab][tab][tab]"speed": 40,
[tab][tab][tab][tab]"size_min": 0.1,
[tab][tab][tab][tab]"sync": false
[tab][tab][tab]}
[tab][tab]},
[tab][tab]"line_linked": {
[tab][tab][tab]"enable": false,
[tab][tab][tab]"distance": 500,
[tab][tab][tab]"color": "#ffffff",
[tab][tab][tab]"opacity": 0.4,
[tab][tab][tab]"width": 2
[tab][tab]},
[tab][tab]"move": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"speed": 2.5,
[tab][tab][tab]"direction": "bottom",
[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][tab]"enable": true,
[tab][tab][tab][tab]"mode": "bubble"
[tab][tab]},
[tab][tab]"onclick": {
[tab][tab][tab]"enable": true,
[tab][tab][tab]"mode": "repulse"
[tab][tab]},
[tab][tab][tab]"resize": true
[tab][tab]},
[tab][tab]"modes": {
[tab][tab][tab]"grab": {
[tab][tab][tab][tab]"distance": 400,
[tab][tab][tab][tab]"line_linked": {
[tab][tab][tab][tab][tab]"opacity": 0.5
[tab][tab][tab][tab]}
[tab][tab][tab]},
[tab][tab][tab]"bubble": {
[tab][tab][tab][tab]"distance": 400,
[tab][tab][tab][tab]"size": 4,
[tab][tab][tab][tab]"duration": 0.3,
[tab][tab][tab][tab]"opacity": 1,
[tab][tab][tab][tab]"speed": 3
[tab][tab][tab]},
[tab][tab][tab]"repulse": {
[tab][tab][tab][tab]"distance": 150,
[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 weiter oben.

[googlecode]<script type="text/javascript">
particlesJS("particles-js", 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 „Alle erlauben“ erklären Sie sich damit einverstanden. Weiterführende Informationen und die Möglichkeit, einzelne Cookies zuzulassen oder sie zu deaktivieren, erhalten Sie in unserer Datenschutzerklärung.