Fairgate bietet Ihnen Out-of-the-box verschiedene Gestaltungsoptionen für Ihre Webseite.
Die Nutzung von eigenen CSS-Styles ist leider nicht möglich!
Themes
Für die Gestaltung Ihrer Webseite stellt Fairgate im Designbereich 4 Themes zur Verfügung. Die Nutzung eines eigenen Themes mit CSS oder HTML ist leider nicht möglich.
Im oberen Bereich sehen Sie die Themes-Vorlagen, die Sie verwenden und das Theme, dass aktiviert (also im Frontend sichtbar) ist. Sie können mit Klick auf das Dokumenten-Symbol jede Theme-Konfiguration duplizieren.
Wenn Sie mit dem Mauszeiger links über den Theme-Namen gehen, können Sie über das Stiftsymbol weitere Designeinstellungen des Themes vornehmen (bearbeiten).
Mit dem Lupensymbol können Sie eine Vorschau Ihrer aktuellen Webseite mit dem Design ansehen → es ist dabei nur eine Vorschau,
Besucher der Webseite sehen nach wie vor das aktivierte Theme.
Im unteren Bereich sehen Sie die verfügbaren Themes. Mit Klick auf “Verwenden” können Sie das Theme als Vorlage in den oberen Bereich hinzufügen und dieses dann nach Bedarf anpassen.
London
Dieses Design zeigt den Inhaltsbereich mit einer fixen Breite an. Die gesamte Seitenbreite wird damit nicht ausgenutzt. Das Hauptmenü befindet sich mittig im oberen Bereich, die Nebennavigation oben rechts.
In diesem Theme steht Ihnen die Option zur Verfügung, ein Headerbild oberhalb des Menüs zu platzieren.
Beispielwebseite:
Rio
Das Rio-Theme hat ebenfalls wie das London Theme eine fixe Inhaltsbreite. Das Hauptmenü befindet sich hier mit im Headerbereich, die Nebennavigation darüber.
Aktive Menüpunkte sind mit einem ellipsenförmigen Hintergrund gehighlightet.
In diesem Theme kann man auch ein Headerbild platzieren.
Beispielwebseite:
Vancouver
Das Vancouver-Theme bietet die Option, die volle Inhaltsbreite zu nutzen. In diesem Theme ist die Platzierung eines Headerbildes nicht möglich.
Beispielwebseite:
Sotschi
Das Sotschi-Theme liefert ein spezielles Hauptmenüband-Design sowie eine feste Inhaltsbreite. Ein individuelles Headerbild kann platziert werden.
Beispielwebseite:
Farbschema
Wurde ein Theme ausgewählt und aktiviert kann man anschliessend mit Klick auf das Stiftsymbol das Farbschema des Themes anpassen. Zudem kann man den Namen des Themes individuell setzen über
Für alle Themes gibt es vorgefertigte Standard Farbschemas. Je nach gewählten Theme kann man unterschiedliche Farben definieren.
Ein Standard Farbschema kann erst bearbeitet werden, wenn es kopiert wurde, oder man erstellt direkt ein neues:
Mit Klick auf können die gewünschten Farben eingestellt werden. Wenn Sie mit dem Mauszeiger links über die Titel gehen, erhalten Sie eine Erklärung, wo die Farbe Verwendung findet:
Mit Klick in das Feld für die Farbwerte können Sie eine Farbe über den Colorpicker wählen (Werte: RGBA, der Alphawert gibt die Transparenz an, wobei der Wert 0.0 eine vollständige Transparenz ergibt, der Wert 1.0 keine Transparenz):
Hintergrundbilder
Sie können der Webseite global (d.h. dann für jede Seite+Unterseite) ein oder mehrere (als Slider oder Zufallsbild) Hintergrundbilder hinzufügen.
Je nach Grösse und Qualität des Hintergrundbildes wählen Sie bitte entweder die Option Skaliert auf Vollbild oder Unveränderte Grösse:
Boxen / Container
CMS Seiten sind grundsätzlich in Container und Boxen aufgeteilt, wobei jeder Container mindestens eine Box enthält. Ein Container kann aus 1 bis 6 Boxen bestehen.
Wenn Sie eine Seitenspalte einbinden, nimmt diese im Design “schmal” die Breite einer Box ein, ansonsten die Breite von zwei Boxen:
In die jeweiligen Boxen können Sie per Drag & Drop die gewünschten CMS-Elemente ziehen und so Ihre Seiten gestalten:
Erweiterte Einstellungen
Boxen und Container können Sie grundsätzlich über die erweiterten Designeinstellungen mit einem individuellen Design (z.B. einer Umrahmung oder einem Hintergrundbild) ausstatten.
Wichtig: Die Designeinstellungen können Sie jeweils für Container und Boxen global oder lokal einstellen. Global bedeutet, dass das Design für alle Container und Boxen auf der Webseite gilt, lokal bedeutet, dass es nur für ausgewählte Container und Boxen gilt.
Navigieren Sie für die erweiterten Einstellungen zu CMS>Design. Bei Ihrem aktivierten Theme gehen Sie auf den Bearbeitungsstift und wechseln dann zum Menüreiter “Boxen/Container”:
Container
Um ein individuelles Containerdesign zu erstellen gehen Sie auf das Aktionsmenü und dann auf “Neues Template erstellen”:
Vergeben Sie einen Namen für das Template und wählen Sie den Typ “Container”. Den Anzeigebereich können Sie Lokal oder Global einstellen:
Wenn Sie nun den erstellten Container anhaken und über das Aktionsmenü auf “Template editieren” gehen, können Sie die individuellen Einstellungen vornehmen.
Wenn Sie nun wieder im CMS zu einer Seite wechseln, können Sie das zuvor angelegte individuelle Containerdesign anwählen, wenn Sie dieses als lokales Design erstellt haben.
Gehen Sie hierfür auf das Zahnrad-Symbol und wählen dann das gewünschte Container-Design aus:
In diesem Beispiel wurde ein Hintergrundbild für den Container festgelegt:
Boxen
Um ein individuelles Boxendesign zu erstellen gehen Sie auf das Aktionsmenü und dann auf “Neues Template erstellen”:
Vergeben Sie einen Namen für das Template und wählen Sie den Typ “Box”. Den Anzeigebereich können Sie Lokal oder Global einstellen:
Wenn Sie nun die erstellte Box anhaken und über das Aktionsmenü auf “Template editieren” gehen, können Sie die individuellen Einstellungen vornehmen.
Wenn Sie nun wieder im CMS zu einer Seite wechseln, können Sie das zuvor angelegte individuelle Boxendesign anwählen, wenn Sie dieses als lokales Design erstellt haben.
Gehen Sie hierfür auf das Zahnrad-Symbol und wählen dann das gewünschte Boxendesign aus:
In diesem Beispiel wurde eine Hintergrundfarbe für die Box erstellt:
Buttons
Unter den Designeinstellungen für Buttons können Sie Aussehen, Farbe, Grösse und Schriftarten von Standardbuttons individuell anpassen. Die Anpassungen greifen für den jeweils ausgewählten Button-Typ (Standard, Hervorgehoben, Erfolg, Info, Warnung, Gefahr und Link).
Einen Button fügen Sie dann auf einer Seite über das CMS-Element “Button” hinzu:
Tipp: Bilder verkleinern
Falls Sie Ihren Mitgliedern keine sehr grossen Bildern mit langen Downloadzeiten zumuten möchten, dann sollten Sie diese vor dem Hochladen auf Bildschirmgrösse (z.b. 1024×768 Pixel) verkleinern und bei JPG die Qualität senken (zwischen 70 -85%) , damit kriegen Sie leicht Bilder, die nicht mehr viele Megabyte gross sind. Grössen unter 200KB sind dann gut möglich.
Falls Sie kein Tool dafür haben können Sie das auch mit einem Online Service machen, hier ein Link eines Services den Sie benutzen können:
Einzelbild-Verkleinerung mit Grössenangabe PicResize - Crop, Resize, Edit images online for free!
Einzelbild-Verkleinerung mit Grössenangabe von Google (Verarbeitung im Browser, nicht auf dem Server) Squoosh
Mehrbildverkleinerung PicResize - Crop, Resize, Edit images online for free!
Wir haben keine Verbindung zu InterNich LLC und deren Produkte und können für deren Qualität, Datensicherheit und Funktionalität auch keine Verantwortung übernehmen.