Business Agency Portal

Das B01 Template konfigurieren

Die Template Einstellungen erreichen Sie im Backend Ihrer Seite unter Erweiterungen Templates. Dort klicken Sie auf den Stil des Templates, welcher zum Einsatz kommt.

Details

In diesem Reiter sind einige Basisinformationen und Links zum Template angegeben.

Erweitert

Dieser Reiter beinhaltet wesentliche Konfigurationsoptionen des Templates.

LESS Compile

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.

Development Mode

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.

Designvariationen

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.

Kontrast

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.

  • Primärfarbe
  • Sekundärfarbe
  • Tertiärfarbe
  • Quartärfarbe
  • Hauptmenüfarbe
  • Hintergrundfarbe
  • Topmenüfarbe

Überschriften Schriftart

Die Schriftart bei allen Überschriften und Menüs

Überschriften Schriftgröße

Die relative Schriftgröße bei allen Überschriften und Menüs

Fließtext Schriftart

Die Schriftart für normalen Fließtext

Fließtext Schriftgröße

Die relative Schriftgröße für normalen Fließtext

Lokale Schriftarten

Sie können die verwendeten Schriftarten auch lokal im Verzeichnis ./less/fonts ablegen und von dort verwenden.


Hauptmenü Aufbau

In welcher Reihenfolge sollen die Elemente im Hauptmenü aufgebaut werden.

Hauptmenü fixiert

Wenn aktiv bleibt das Hauptmenü beim bewegen durch die Seite oben fixiert und schnell erreichbar.

Hauptmenü Transparenz

Das Hauptmenü kann einen eigenen Bereich erhalten oder transparent über einem Bereich (z.B. das Hero Modul) liegen.

Kontrast

Je nach Hintergrundfarbe einstellbar.

Hauptmenü Animationen

Eine Animation mit welcher sich Untermenüs einblenden.

Hauptmenü Position

Wie sind Untermenüs zu dem überlegendem Menüpunkt ausgerichtet.

Einblendverzögerung

Mit welcher Verzögerung blenden sich Untermenüs ein.

Ausblendverzögerung

Mit welcher Verzögerung blenden sich Untermenüs aus.

Animationsdauer

Wie lange dauern die Hauptmenü Animationen.

Dropbar

Wenn aktiv erscheinen Untermenüs im Dropbar Modus.

Ausrichtung

Die Ausrichtung der Untermenüs im Dropbar Modus.

Dropbar Mode

Die Einblendvariante des Dropbar Modus.

Sektionen

Im Reiter Sektionen können verschiedene Sektionen der Webseite von Struktur und Gestaltung her individualisiert werden.

Toolbar Container

Die Breite des Toolbar Containers.

Kontrast

Je nach Hintergrundfarbe einstellbar.


Headerbar Container

Die Breite des Headerbar (Hauptmenü) Containers.

Kontrast

Je nach Hintergrundfarbe einstellbar.


Content Container

Die Breite des Content Containers.

Content Inverse

Ein vom Hauptkontrast abweichender Kontrast.


Hero Container

Die Breite des Hero Containers.

Hero Layout

Falls mehrere Module in dieser Position erscheinen sollen, so werden diese nebeneinander oder übereinander geladen.

Hero Grid Size

Der Abstand falls mehrere Module geladen wurden.

Hero Section

in welcher Farbvariante soll Sektion erscheinen.

Hero Section Padding

Der vertikale Abstand zum Sektionen darüber und darunter.

Kontrast

Ein vom Hauptkontrast abweichender Kontrast.

Hero Section Extra

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.

6 mos ago