Die Template Einstellungen erreichen Sie im Backend Ihrer Seite unter Erweiterungen Templates. Dort klicken Sie auf den Stil des Templates, welcher zum Einsatz kommt.
In diesem Reiter sind einige Basisinformationen und Links zum Template angegeben.
Dieser Reiter beinhaltet wesentliche Konfigurationsoptionen des Templates.
Diese Schaltfläche kompiliert aus den konfigurierten Einstellungen neues CSS. Jedes Mal wenn Sie also z.B. eine Farbe ändern, müssen Sie das Template speichern und einmalig diese Schaltfläche betätigen.
Falls Sie an einer Individualisierung des Templates arbeiten und auch eigene LESS Variationen benutzen, können Sie den Development Mode aktivieren. Dabei wird bei jedem Aufruf der Seite neues CSS kompiliert.
Natürlich sollten Sie bei einer professionellen Individualisierung des Templates ein Node Modul wie Gulp oder Webpack verwenden. Solch ein Modul beobachtet alle relevanten Ressourcen, kompiliert bei jeder Änderung neues CSS und aktualisiert automatisch die Seite, was zu maximal effizienter Arbeit führt. Das B01 Template bietet hierfür alle Voraussetzungen. Die Datei ./less/master.less liegt zum Einstieg der Kompilierung bereit.
Im Verzeichnis ./less/variations liegen ein paar LESS Dateien, welche dem Design verschiedenen Variationen verleihen. Diese können miteinander kombiniert werden um so z.B. eine dunkle Variation mit abgerundeten Ecken zu erreichen.
Natürlich können Sie hier auch eine eigene LESS Variation ablegen.
Falls Ihr Design eher dunkel ist, sollten Sie einen hellen Kontrast wählen. Diese EInstellung gilt global, kann jedoch mit Kontrasteinstellungen an einzelnen Sektionen variiert werden.
Die folgenden Farben werden verwendet und verschiedenen Elemente der Seite farblich zu variieren. Natürlich können Sie diese Farben auch in Ihrer LESS Variation nutzen.
In welcher Reihenfolge sollen die Elemente im Hauptmenü aufgebaut werden.
Wenn aktiv bleibt das Hauptmenü beim bewegen durch die Seite oben fixiert und schnell erreichbar.
Das Hauptmenü kann einen eigenen Bereich erhalten oder transparent über einem Bereich (z.B. das Hero Modul) liegen.
Je nach Hintergrundfarbe einstellbar.
Eine Animation mit welcher sich Untermenüs einblenden.
Wie sind Untermenüs zu dem überlegendem Menüpunkt ausgerichtet.
Mit welcher Verzögerung blenden sich Untermenüs ein.
Mit welcher Verzögerung blenden sich Untermenüs aus.
Wie lange dauern die Hauptmenü Animationen.
Wenn aktiv erscheinen Untermenüs im Dropbar Modus.
Die Ausrichtung der Untermenüs im Dropbar Modus.
Die Einblendvariante des Dropbar Modus.
Im Reiter Sektionen können verschiedene Sektionen der Webseite von Struktur und Gestaltung her individualisiert werden.
Die Breite des Toolbar Containers.
Je nach Hintergrundfarbe einstellbar.
Die Breite des Headerbar (Hauptmenü) Containers.
Je nach Hintergrundfarbe einstellbar.
Die Breite des Content Containers.
Ein vom Hauptkontrast abweichender Kontrast.
Die Breite des Hero Containers.
Falls mehrere Module in dieser Position erscheinen sollen, so werden diese nebeneinander oder übereinander geladen.
Der Abstand falls mehrere Module geladen wurden.
in welcher Farbvariante soll Sektion erscheinen.
Der vertikale Abstand zum Sektionen darüber und darunter.
Ein vom Hauptkontrast abweichender Kontrast.
Hier können spezielle Konfigfurationsdaten angegeben werden, mit denen Erscheinung und Verhalten der Sektion bzw. der Elemente darin beeinflusst werden. Um dies auskosten zu können sollten Sie sich mit dem UIkit Framework auskennen.
Hiermit können Sie z.B. dem Hintergrundbild der Sektion eine Parallaxbewegung beim Scrollen geben. Zusätzlich blenden die einzelnen Elementer der Slideshow von unten nach oben zeitversetzt ein sobald die Slideshow das Sichtfeld des Benutzers erreicht:
b01-parallax="bgy: 300" b01-scrollspy="target: .b01-slider-items > li; cls: b01-animation-fast b01-animation-slide-bottom b01-animation-fade; delay: 100"
Die gleichen Optionen können für jede der möglichen Sektionen, vom Top-A bis Bottom-F, konfiguriert werden.
Sie können die verwendeten Schriftarten direkt vom Google Server laden oder die Schriftarten DSGVO-konform lokal ablegen und von dort verwenden.
Die Schriftart bei allen Überschriften und Menüs
Die Farbe bei allen Überschriften und Menüs
Die relative Schriftgröße bei allen Überschriften und Menüs
Mögliche Variationen der Schriftart
Die Schriftart für normalen Fließtext
Die relative Schriftgröße für normalen Fließtext
Mögliche Variationen der Schriftart