Pro Web Vertika Layout Anleitung

Pro Web Vertika - responsive Layoutpräsentation

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.

Geschwindigkeits-, Text- und weitere Spracheinstellungen

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>

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

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

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.

Einstellungen über „benutzerdefinierte Tags”

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:

  • karo-fade-nav” gibt den Transparenzwert der Navigation erster Ebene an. Der Standardwert ist 90. Bei einem Wert von 100 wird keine Transparenz hinzugefügt, bei 0 hingegen wäre die Farbe völlig transparent bzw. durchsichtig.
  • karo-fade-subnav” gibt den Transparenzwert der Untermenüs der Navigation an. Der Standardwert ist 90. Bei einem Wert von 100 wird keine Transparenz hinzugefügt, bei 0 hingegen wäre die Farbe völlig transparent bzw. durchsichtig.
  • karo-fade-sidebarleft” verändert die Hintergrund-Transparenz des Absatzbereiches „Links”.
  • karo-fade-logo” gibt den Transparenzwert der Hintergrundfarbe des Logo-Bereiches an. Standardmäßig ist die Farbe nicht transparent.
  • karo-padding-logo” gibt den Abstand des Logos innerhalb des Logobereiches von oben und unten in Pixel an. Die Angabe erfolgt ohne „px”. Der Standardwert ist 50.
  • karo-scrollspy-animation” animiert beim Scrollen per animate.css die neu sichtbaren Absätze. Die möglichen Werte entnehmen Sie bitte der Seite https://daneden.github.io/animate.css/

„particles.js” für animierten Hintergrund

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