NEU: SG AI – DEIN AI ASSISTANT FÜR TYPO3 - SEO, (BILD-)TEXTE, BILDER & MEHR!
Website-Konfiguration
Das Modul Website-Konfiguration ist unser Design-Konfigurator, der es Ihnen erlaubt Logo, Farben, Schriften und Schriftgröße Ihrer Onlinepräsenz ohne Programmierkenntnisse 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 Änderungen speichern sichern Sie Ihre Einstellungen. Das müssen Sie immer machen, wenn Sie sehen möchten, wie die Änderung im Frontend wirkt.
Hinweis: Beim Verlassen des Moduls, wird kein Hinweis zum Speichern gezeigt! Speichern Sie stets, um Änderungen zu sichern.
Der Button Konfiguration zurücksetzen setzt alle Einstellungen auf den Standardwert zurück. Zum Betrachten der Seite in einem neuen Fenster, klicken Sie auf Vorschau in neuem Fenster öffnen .
Im Drop-Down Menü unter Voreinstellung finden Sie drei Farb-Sets: Dark, Default und Ocean. Keine ist die Standard-Einstellung und wird automatisch ausgewählt, sobald Sie Änderungen in einer Voreinstellung vorgenommen haben. Somit lassen sich die Voreinstellungen nicht ändern, jedoch individuell anpassen.
Die Screenshots zeigen die Standard-Farbeinstellungen und die verschiedenen Modi unserer Website-Base.
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.
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.
Vordergrund – Text
Der Text wird auf dem Haupthintergrund platziert. Für eine gute Lesbarkeit muss der Text einen ausreichenden Kontrast zum Hintergrund haben.
Primärer (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.
Primärer (Akzent) Vordergrund – Text
Wählen Sie hier eine Farbe für den primären Akzent-Vordergrund, also den Text der über dem Marken repräsentierenden, primären (Akzent) Hintergrund.
Sekundärer (Akzent) Hintergrund
Auch die Marken repräsentierende Hintergrundfarbe für Akzent-Elemente, wie das eines Badges, bestimmen Sie selbst.
Sekundärer (Akzent) Vordergrund – Text über sekundären (Akzent) Hintergrund
Die Farbe des Textes solcher Elemente können Sie ebenso einstellen.
Ü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 & Link-Hintergrund (Hover)
Links können (zusätzlich) mit dem Mouse-Over-Effekt kenntlich gemacht werden. Dafür stellen Sie diese beiden Farben ein.
Rand
Legen Sie hier die Randfarbe fest, z. B. für Zitate.
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.
Grundfarben
Body Farbe ist die Farbe des HTML-Körpers hinter dem Inhalt. Diese Farbe ist nur bei höheren Auflösungen sichtbar.
Farben im Inhaltsbereich
Wählen Sie die Farbpalette für den Inhaltsbereich im Frontend aus. Box-Schatten-Farbe ist die Farbe der Box-Schatten im gesamten Seiteninhalt.
Für beste Ergebnisse wählen Sie eine dunkle Farbe.
Farben der oberen Leiste
Wählen Sie eine Farbpalette für die obere Leiste aus. Die obere Leiste ist die Zeile, in der sich das Logo befindet.
Farben für die Navigation
Farbpalette
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.
Hintergrundfarbe
Hier legen Sie die Hintergrundfarbe fest, die für die Navigations-/Menüleiste verwendet wird.
Hintergrund-Deckkraft
Die Navigationsleiste ist immer zu sehen, egal wie weit User:innen nach unten scrollen. 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 Farben
Farbpalette
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.
Hintergrundfarbe
Wählen Sie hier eine Hintergrundfarbe für das Mega Menü.
Hintergrund-Deckkraft
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 Farben
Wählen Sie hier die Farbpalette 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.
Bereich-Farben
Dunkle Farbpalette
Wählen Sie hier das Color Set, das für alle dunklen Bereiche sowie für die Fußzeile gelten soll.
Helle Farbpalette
Bestimmten Sie das Farbset für helle Bereiche, Job-Detailseiten und die Breadcrumb Navigation. Letzteres ist die Linkleiste über dem Inhalt, die User:innen zeigt, wo er sich hierarchisch gerade auf einer Seite befindet.
Farben der Komponenten
Farbpalette
Hier entscheiden Sie über die Farben von den meisten Komponenten, z. B. Karten, Teaser, Tabs, Akkordeons oder den Twitter-Stream.
Slider Overlay Farbe
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-Hintergrund Farbe
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.
Button-, Box-, Alert-, Label- & Badge-Farben
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-Form-Einstellungen
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.
Spezielle Textfarben
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: Stummtext Farbe, Primäre (Akzent) Textfarbe, Erfolg Textfarbe, Info Textfarbe, Warnung Textfarbe, Gefahr Textfarbe – 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.
Head
Hier ist es möglich, einen individuellen HTML-Code für den Head einzutragen. Der Head enthält unter anderem Metadaten und Informationen zur Darstellung der Seite, wird jedoch nicht im Frontend, also der Website angezeigt.
Quellen für Schriftarten
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.
Schriftarten
Kopie-Schriftart
Wählen Sie die Schriftart, die für normalen Text verwendet werden soll.
Überschrift-Schriftart
Wählen Sie die Schriftart, die für Überschriften verwendet werden soll.
Schriftgrößen
Basis Schriftgröße
Geben Sie die Schriftgröße für normalen Text ein.
H1, H2, H3, H4, H5, H6 Schriftgrößen
Bestimmen Sie, wie groß die jeweiligen Überschriften sein sollen.
Dimensionierung
Standard-Element-Abstand
Tragen Sie ein, wie groß der Abstand zwischen Inhaltselementen sein soll.
Vertikaler Innenabstand
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.
Horizontaler Innenabstand
Definieren Sie den horizontalen inneren Abstand für Elemente in Basisgröße. Das betrifft beispielsweise Buttons, die dadurch in der Breite verändert werden.
Vertikaler Innenabstand [lg], [sm], [xs] & Horizontaler Innenabstand [lg], [sm], [xs]
Definieren Sie den vertikalen und horizontalen inneren Abstand für große [lg], kleine [sm] und extra kleine [xs] Elemente.
Basis-Konfiguration – Titel der Seite
Der Seitentitel, den Sie hier angeben, wird im Browser-Tab immer nach dem Titel der Unterseite angehangen, z. B. Demo – Website-Base.
API-Schlüssel
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, Vimeo oder Google Maps.
Social Media-Konten
Wenn Sie User:innen ermöglichen möchten, Inhalte über Social Media zu teilen, können Sie das hier konfigurieren. Sie haben die Möglichkeit Facebook, X (ehemals Twitter), WhatsApp, Mail, Telegram, Xing & LinkedIn zu aktivieren.
In diesem Reiter passen Sie das Backend Ihrer Seite an.
Basis-Konfiguration
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.
Legen Sie in diesem Tab benutzerdefinierte CSS-Stylesheets und Java-Script an.
Sie wollen mehr zu unserer Website-Base wissen?
Alle Informationen zu den verfügbaren Editionen finden Sie auf der Webseite für unsere TYPO3 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.
