Das Modul Website Configuration ist unser Design-Konfigurator, der es Ihnen erlaubt Logo, Farben, Schriften und Schriftgröße Ihrer Onlinepräsenz ohne Programmierkenntnisse oder Adminrechte anzupassen.

Mit dem Design-Konfigurator passen Sie Ihre Seite problemlos farblich an das Corporate Design an. Sie erstellen dafür verschiedene Farbsets und wenden diese an. Sollte sich Schriftart, Farben und/oder Logo des Unternehmens ändern, lässt sich das Design unkompliziert aktualisieren, ohne dass Inhalte verloren gehen.

Bei Klick auf das Modul gelangen Sie zu einer Ansicht mit fünf Reitern, die weiter unten näher vorgestellt werden. Über den Reitern sehen Sie Optionen, die immer zur Verfügung stehen.

Mit dem blauen Button Save Changes speichern Sie Ihre Einstellungen. Das müssen Sie immer machen, wenn Sie sehen möchten, wie die Änderung im Frontend wirkt. Wenn Sie das Modul verlassen, wird kein Hinweis zum Speichern gezeigt! Um Änderungen zu sichern, sollten Sie immer wieder zwischendurch speichern.

Der Button Reset Configuration setzt alle Einstellungen auf den Standardwert zurück. Zum Betrachten der Seite in einem neuen Fenster, klicken Sie auf Open Preview in new Window. Beim Speichern von Änderungen wird sich dieses automatisch schließen.

Im Drop-Down Menü von Preset finden Sie drei Farb-Sets: Dark, Default und Ocean. None wird automatisch ausgewählt, sobald Sie Anpassungen an dem Design vornehmen. Das bedeutet, dass die vorhandenen Vorlagen nie geändert werden. Unten sehen Sie das Dark Theme und die Standardeinstellung, das Default Theme, gegenübergestellt.

Reiter Color Sets

Color Sets ermöglichen es eine ganz individuelle Zusammenstellung von Farben. In diesem Tab sehen Sie 10 Color Sets. Sie müssen jedoch nicht alle davon nutzen und anpassen. Denn im Reiter Design stellen Sie dann ein, welches Color Set, Sie wo anwenden möchten. Theoretisch wäre es also möglich nur ein Color Set zu nutzen. Bevor Sie die Sets einstellen, sollten Sie sich am besten vorher mit dem Reiter Design vertraut machen!

Jedes Color Set hat 11 Farben, die eingestellt werden können. Bei Klick auf ein Farbfeld erscheint an der Seite ein Fenster zum Konfigurieren der Farbe. Sie müssen nur eine Farbe aus der Farbpalette aussuchen oder einen Farbcode eingeben. Wir zeigen Ihnen nun welches Feld, welche Änderungen im Frontend bewirkt.

Background – Hintergrund

Sie sehen in den Screenshots, dass es sich bei dieser Farbeinstellung um den Haupthintergrund handelt. Zum Vergleich sehen Sie noch einmal die Seite in der Standardeinstellung.

Foreground – Text

Der Text wird auf dem Haupthintergrund platziert. Für eine gute Lesbarkeit muss der Text einen ausreichenden Kontrast zum Hintergrund haben.

Primary (Accent) Background – Erster Akzent-Hintergrund

Manche Inhaltselemente haben Titel oder Zeilen, die besonders hervorgehoben werden, z. B. Cards (Kartenelemente). Die Hintergrundfarbe dafür stellen Sie hier ein. Damit solche Elemente wirken können, ist ein Kontrast zum Haupthintergrund von Vorteil. Im einfachsten Fall stellen Sie hier die Haupttextfarbe ein und im Folgenden wählen Sie die Text-Farbe die Haupthintergrundfarbe. Sie kehren also die Farben um.

Primary (Accent) Foreground – Text über ersten Akzent-Hintergrund

Wählen Sie hier eine Farbe für den ersten Akzent-Hintergrund.

Secondary (Accent) Background – Zweiter Akzent-Hintergrund

Auch die Farbe fakultativer Elemente, wie das eines Badges, bestimmen Sie selbst.

Secondary (Accent) Foreground – Text über zweiten Akzent-Hintergrund

Der Text solcher fakultativer Elemente können Sie ebenso einstellen.

Headline – Überschrift

Die Überschriftfarbe wird hier separat vom Text gewählt.

Link

Links werden oft zur einfacheren Erkennung in einer anderen Farbe als der Rest des Textes dargestellt. Bestimmen Sie hier die Farbe ihrer Links.

Link-Hover

Links können (zusätzlich) mit dem Mouse-Over-Effekt kenntlich gemacht werden.

Border – Rand

Legen Sie hier die Randfarbe fest, z. B. für Zitate.

Reiter Design

Logo

Das Logo der Seite wird oben links über dem Menü erscheinen. Das Favicon ist in der Tab-Leiste Ihres Browsers sowie in den Lesezeichen links neben dem Seitennamen zu sehen. Es muss 16x16 Pixel groß sein.

Basic Colors

Body Color ist die Farbe des HTML-Körpers hinter dem Inhalt. Diese Farbe ist nur bei höheren Auflösungen sichtbar.

Content Area Colors

Wählen Sie das Color Set für den Inhaltsbereich im Frontend aus. Box Shadow Color ist die Farbe der Box-Schatten im gesamten Seiteninhalt.

Für beste Ergebnisse wählen Sie eine dunkle Farbe. Nehmen Sie Schwarz (#00000000), wenn Sie sich nicht sicher sind.

Top Bar Colors

Wählen Sie ein Color Set für die Top Bar aus. Die Top Bar ist die Zeile, in der sich das Logo befindet.

Navigation Colors

Color Set

Das ist die Farbe, die für die Navigations-/Menüleiste verwendet werden soll, mit Ausnahme der Hintergrundfarbe. Letztere wird im nächsten Feld festgelegt.

Background Color

Hier legen Sie die Hintergrundfarbe fest, die für die Navigations-/Menüleiste verwendet wird.

Background Opacity

Die Navigationsleiste ist immer zu sehen, egal wie weit ein User nach unten scrollt. Dabei überlappt die Leiste Inhalte, die sich im oberen Bereich der Seite befinden. Um die Navigationsleiste von den Inhalten abzugrenzen, kann hier eine Transparenz eingestellt werden. Gültige Werte sind im Bereich 0.0 - 1.0. Je niedriger der Wert, desto höher ist die Transparenz.

Megamenu Colors

Color Set

Das ist die Farbe, die für das Mega Menü verwendet werden soll, mit Ausnahme der Hintergrundfarbe. Die Hintergrundfarbe des Mega Menüs wird im nächsten Feld festgelegt.

Background Color

Wählen Sie hier eine Hintergrundfarbe für das Mega Menü.

Background Opacity

Da die Navigationsleiste immer zu sehen ist, kann auch das Mega Menü jederzeit aufgeklappt werden, sodass es über den Inhalten erscheint. Sie können an dieser Stelle über die Stärke der Transparenz entscheiden oder das Mega Menü intransparent lassen. Gültige Werte befinden sich im Bereich 0.0 - 1.0. Je niedriger der Wert, desto höher ist die Transparenz. Beim Wert 1.0 ist das Mega Menü intransparent.

Responsive Side Menu Colors

Wählen Sie hier das Color Set aus, das für das Menü in der mobilen Ansicht verwendet werden soll. Für ein einheitliches Bild der Website sollte es nicht zu sehr von den Farben der Navigationsleiste abweichen.

Component Colors

Color Set

Hier entscheiden Sie über die Farben von den meisten Komponenten, z. B. Karten, Teaser, Tabs, Akkordeons oder den Twitter-Stream.

Slider Overlay Color

Slider können mit einem Overlay angelegt werden, also einer transparenten Farbe, die über den Slider gelegt wird. Für beste Ergebnisse wählen Sie eine dunkle Farbe. Nehmen Sie Schwarz (#00000000), wenn Sie sich nicht sicher sind.

Lightbox Backdrop Color

Die Lightbox ist eine Art Bilder zu präsentieren, die bei unserer Website-Base ein Standard ist. Bei einem Klick auf ein Bild wird dieses vergrößert mittig auf der Seite dargestellt, während der Rest der Seite verdunkelt/abgedeckt wird. Die Farbe der Abdeckung wählen Sie hier.

Area Colors

Dark Color Set

Wählen Sie hier das Color Set, das für alle dunklen Bereiche sowie für die Fußzeile gelten soll.

Light Color Set

Bestimmten Sie das Farbset für helle Bereiche, Job-Detailseiten und die Breadcrumb Navigation. Letzteres ist die Linkleiste über dem Inhalt, die dem User zeigt, wo er sich hierarchisch gerade auf einer Seite befindet.

Button, Box, Alert, Label and Badge Colors

Die Website-Base erlaubt es, Inhalte vielfältig darzustellen, dafür werden z. B. Boxen, Buttons, Label und ähnliches verwendet. Immer wieder begegnen Ihnen dabei auch die Einstellungen: Default, Primary, Success, Info, Warning, Danger. In diesem Zusammenhang lohnt es sich mehrere Farbsets anzupassen, denn die Buttons und Boxen können sich nur dann farblich unterscheiden, wenn jeweils ein anderes Set gewählt wird. Im Color Set bestimmt die Hintergrundfarbe und die Textfarbe (Foreground) diese Elemente.

Button Shape Settings

Definieren Sie den Radius der Ecken von kleinen, großen und Standard-Buttons. Je höher die Zahl, desto abgerundeter sind die Ecken der Buttons.

Special Text Colors

Im Rich Text Editor (RTE) lassen sich andere Farben für den Text einstellen, als der Standard es vorsieht. Man hat sechs Farben zur Auswahl: Muted, Primary, Success, Info, Warning, Danger – Sie legen fest, welche Farben jeweils verwendet werden. Klicken Sie auf das Farbfeld und suchen in der eingeblendeten Farbpalette einfach die gewünschte Farbe aus oder tragen sie ein.

Font Sources

Alle Schriften, die Sie auf der Website verwenden möchten, müssen hier definiert werden. Sie können entweder einen Schriftnamen angeben oder einen Link zu einer gehosteten Schriftdatei einfügen (wie im Screenshot zu sehen). Um mehrere Schriften zu verwenden (z. B. für Unterscheidung von Text und Überschrift), müssen Sie hier mehrere Links/Namen einfügen.

Fonts

Copy Font
Wählen Sie die Schriftart, die für normalen Text verwendet werden soll.
Headline Font

Wählen Sie die Schriftart, die für Überschriften verwendet werden soll.

Font Sizing

Base Font size
Geben Sie die Schriftgröße für normalen Text ein.
H1, H2, H3, H4, H5, H6 Font size

Bestimmen Sie wie groß die jeweiligen Überschriften sein sollen.

Sizing

Default Element Distance
Tragen Sie ein, wie groß der Abstand zwischen Inhaltselementen sein soll.
Vertical inner distance

Definieren Sie den vertikalen inneren Abstand für Elemente in Basisgröße. Das betrifft beispielsweise Buttons, die dadurch in der Höhe verändert werden.

Horizontal inner distance

Definieren Sie den horizontalen inneren Abstand für Elemente in Basisgröße. Das betrifft beispielsweise Buttons, die dadurch in der Breite verändert werden.

Vertical inner distance [lg], [sm], [xs] & Horizontal inner distance [lg], [sm], [xs]

Definieren Sie den vertikalen und horizontalen inneren Abstand für große [lg], kleine [sm] und extra kleine [xs] Elemente.

Reiter Website Configuration

Basics – Page Title

Der Seitentitel, den Sie hier angeben, wird im Browser-Tab immer nach dem Titel der Unterseite angehangen z. B. Demo – Website-Base.

Analytics

Wenn Sie Google Analytics, Google Tag Manager oder Matomo nutzen, müssen Sie es hier aktivieren (Schalter ist grün) und die ID eingeben.

Social Media Accounts

Wenn Sie Usern ermöglichen möchten, Inhalte über Social Media zu teilen, können Sie das hier konfigurieren.

API Keys

APIs sind Schnittstellen für Anwendungen z. B. auf einer Website. Der API Key ermöglicht einen autorisierten Zugang zu den Tools – Sie brauchen diese vor allem für Google-Anwendungen wie ReCaptcha, YouTube oder Google Maps.

Reiter Backend Configuration

In diesem Reiter passen Sie das Backend Ihrer Seite an.

Basics

Legen Sie hier die E-Mail-Adresse und den Namen fest, die das System standardmäßig für den Versand von E-Mails verwenden soll.

Backend Login

Passen Sie hier die Seite zum Einloggen in das Backend an. Laden Sie dafür Ihr Logo und ein gewünschtes Hintergrundbild hoch und legen eine Highlight-Farbe fest.

Reiter Custom CSS and JavaScript

Legen Sie in diesem Tab benutzerdefinierte CSS-Stylesheets und Java-Script an.

Sie wollen mehr erfahren?

Alle Informationen zu den verfügbaren Angeboten finden Sie auf den Seiten unserer Website-Base. Sie haben die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder entscheiden sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates auf Sie zukommen werden.