INHALTSVERZEICHNIS

Grundsätze

Alles an einem Ort

Wenn Sie in der Verwaltung oder im internen Bereich eingeloggt sind, wechseln Sie oben links auf den Bereich «Webseite». Nun wird Ihnen Ihre Webseite im aktuellen Zustand angezeigt, und darüber das Bearbeitungsmenü «CMS».

Über dieses Menü können Sie die gesamte Webseite administrieren. Daneben finden Sie die Menüs für Artikel, Kalender und Galerie. Dort können Sie Newsmeldungen, Termine und Fotos erfassen, die Sie dann in der Webseite einbinden können.

Trennung von Design und Inhalt

Sie können Inhalte unabhängig vom Design der Website erstellen. Es ist problemlos möglich, zuerst Seiteninhalte zu erfassen, und das Design der Webseite (Farben, Hintergrund, Schriftarten) nachträglich anzupassen. Für die Design-Anpassungen finden Sie im CMS-Menü daher einen separaten Punkt «Design», wo Sie eine neue Theme-Konfiguration erstellen und anschliessend aktivieren können. Sie können beliebig viele Konfigurationen erstellen und in der Vorschau ansehen. Erst wenn Sie es aktivieren, ist es für die normalen Benutzer sichtbar.

Trennung von Navigationsstruktur und Inhalt

Sie können die Menüstruktur jederzeit umbauen, ohne Seiteninhalte neu erstellen zum müssen. Die Navigationsstruktur können Sie bearbeiten, indem Sie im Bereich „Navigation & Seiten“ in der Seitenspalte auf das Menü-Symbol neben „Hauptnavigation“ klicken. Auf der Hauptnavigation-Bearbeitungsseite können Sie neue Menüpunkte erstellen sowie bestehende neu ordnen, indem Sie sie auf den linken Seite mit der Maus packen und an eine andere Stelle schieben.

Responsive Design: Automatische Anpassung auf Bildschirmgrössen

Die Website ist von Grund auf «responsive», d.h. alle Seiten werden automatisch an die verschiedenen Bildschirmgrössen von Smartphone bis HD-Bildschirm angepasst. Dies bedeutet, dass die Spaltenbreiten des Seiteninhalts variabel sind. Dies gilt es zu Bedenken, wenn Sie Seiteninhalte erstellen.

Webseiten-Einstellungen

Allgemein

Mit Klick auf CMS und Einstellungen gelangen Sie zu den allgemeinen Webseiten-Einstellungen.

Hier können Sie u.a. Ihr Standard-Vereinslogo oder eine Seitenbeschreibung eingeben. Zudem können Sie ein Favicon hinterlegen. Für Favicons empfehlen wir eine Auflösung von 16x16 oder 32x32px.

Google Analytics und der Tracking-Code

Google-Analytics4 (GA4) Konto erstellen und einrichten

Um für Ihre Webdomain Statistiken zu sammeln, können Sie in den Webseiten Einstellungen von Fairgate Google-Analytics mit der zugehörigen ID einbinden. 

Die Anleitung zum Erstellen des Google-Analytics-Kontos und Generieren der Tracking-ID finden Sie auf der Webseite: Anleitung bei Google-Analytics

Ab Juli 2023 wird Google die GA3 Konten abschalten und soweit sperren, dass man nur noch lesend darauf zugreifen kann. Da von Google keine Übernahme Ihrer Daten zu GA4 angeboten wird, muss hier eine neue Google-Analytics 4 ID erstellt und in Fairgate eingebunden werden.

Tracking-Code im CMS eintragen

Gehen Sie in die CMS-Einstellungen.

• Kopieren Sie den Tracking-Code (oder Message-ID beginnt mit "G-") in das entsprechende Feld ein. Für die neue neue Tracker-ID von Google Analytics4 steht Ihnen das untere Feld "Google Analytics4 Tracker-ID" zur Verfügung.

Achtung!
Es kann immer nur eine Tracker ID aktiv sein: entweder GA3 oder GA4.

• Speichern Sie die Änderung.

Anschliessend können Sie die Statistiken über Ihren Google-Analytics-Account checken. Es kann allerdings ein paar Tage dauern, bis eine erste brauchbare Auswertung entsteht. 

Benutzerrechte

Für das Webseitenmodul können Sie Berechtigungen für alle Bereiche oder für gezielte Seiten vergeben.

Wenn Sie einen Kontakt als CMS-Administrator hinzufügen, kann dieser alle Funktionen des Moduls lesend und schreibend benutzen (1).

Sie haben engagierte (Vorstands)Mitglieder oder Trainer? Dann können Sie auch Bearbeitungsrechte gezielt für einzelne Seiten vergeben. So können Sie die administrativen Arbeiten auf viele Schultern verteilen (2)

Webseiten-Struktur

Mit der Webseiten Struktur entscheiden Sie, welche Menüpunkte und Seiten es auf Ihrer Webseite geben soll, um passende Informationen schnell zugänglich zu machen. Die Struktur kann jederzeit geändert werden.

Hauptnavigation

Die Hauptnavigation findet sich präsent oben auf Ihrer Webseite (je nach Design teilweise unterschiedlich dargestellt). Hier sollten Sie die wichtigsten Vereinsinformationen platzieren (Vorstand, Mannschaften, Abteilungen, News, Facts etc).

Mit Klick auf die drei Striche neben “Hauptnavigation” kann die Navigation bearbeitet werden.

Über das blaue Plus kann ein neuer Navigationspunkt hinzugefügt werden (1). Sie können ausserdem entscheiden, ob der Navigationspunkt für nicht eingeloggte Gäste sichtbar sein soll oder nicht (2) und ob der Navigationspunkt aktiviert ist oder nicht (3). Wenn Sie z.B. noch dabei sind, die Seiten erst aufzubauen, können Sie diese solange deaktivieren, bis alles entsprechend fertig gepflegt ist und dann alle Seiten auf einmal aktivieren.

Sobald ein Navigationspunkt Inhalt hat, wird automatisch ein Direktlink erzeugt (4). Sobald man auf das “x” des Seitennamens klickt (hier mit blauem Hintergrund) wird die Verankerung der Seite zum Menüpunkt gelöst und die Seite wird automatisch zu den Seiten ohne Navigationspunkt hinzugefügt (und kann später wieder verankert werden):

Von dort kann die Seite per Drag & Drop mit gedrückter linker Maustaste einem Navigationspunkt wieder zugeordnet werden

Alle Navigationspunkte können mit gedrückter linker Maustaste per Drag & Drop in Ihrer Reihenfolge verschoben werden.

Menüpunkte der 2. und 3. Ebene können Sie durch die Drag-&-Drop-Funktion entsprechenden Obermenüpunkten zuordnen.

Nebennavigation

Die Nebennavigation steht unabhängig von der Hauptnavigation in einem eigenen Bereich zur Verfügung. Hier im Designbeispiel Vancouver.

Die Nebennavigation wird genau wie die Hauptnavigation administriert.

Footer

Der Footer befindet sich auf allen Seiten immer am Ende jeder Seite. Üblicherweise können Sie dort die wichtigsten Direktlinks, die Vereinsadresse bzw. Kontaktdaten oder auch Sponsoren platzieren.

Den Footer gestalten Sie, wie auch alle anderen CMS Seiten mithilfe der Boxen, Container und entsprechenden CMS Elementen.

Das Design des Footers ändern Sie unter den Designeinstellungen.

Tipp: Versteckte und unsichtbare Seiten

Design

Fairgate bietet Ihnen Out-of-the-box verschiedene Gestaltungsoptionen für Ihre Webseite.

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

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:

Ergänzen: Optimale Formate

Header

Schriftarten

g

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

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 http://picresize.com/

• Einzelbild-Verkleinerung mit Grössenangabe von Google (Verarbeitung im Browser, nicht auf dem Server) Squoosh

• Mehrbildverkleinerung http://picresize.com/batch.php

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.

Beispielwebsites unserer Kunden

Theme London

• TC Sonnenfeld: https://tc-sonnenfeld.ch/

• UHC Wyland: https://uhcwyland.ch/

• SGIG: https://sgig.ch/

• UHT-Schüpbach: Home

• HSC-Suhr Aarau: Home

Theme Vancouver

• Ski- & Sportclub Richterswil-Samstagern: https://ssc-risa.ch/

• Club 1889: CLUB 1889 – "WE PRESERVE HERITAGE VEHICLES OF THE RHEATIAN RAILWAY"

• SC Roche: https://scroche.ch/

• Zürich Tennis: https://zuerichtennis.ch

Theme Sotschi

• VBC Andwil-Arnegg: https://vbcaa.ch/

• FC Ems: Home

• Fairgate Academy: https://academy.fairgate.ch/

Theme Rio

• TC Zug: https://tczug.ch/

• CTAC: https://tractionavant.ch/

• Schützengesellschaft Schachen: https://sg-schachen.ch/

• Gemischter Chor Röschenz: https://gemchor-roeschenz.ch/