Zum Hauptinhalt springen

Gestaltungselemente - Wissensdatenbank / Website CMS / CMS Elemente - Fairgate DeskPro

Gestaltungselemente

Autorenliste

Das Fairgate CMS bietet Ihnen verschiedene Gestaltungselemente, um ganz einfach mit wenigen Klicks die Inhalte und das Design von CMS Seiten zu gestalten.

Die einzelnen Elemente befinden sich oben in der Elemente-Toolbar und können per Drag&Drop an die gewünschte Stelle gezogen werden:

73baede7-11de-4849-b9bc-10dc60ed2ea4.png

Für manche Elemente wie Text oder Überschrift können Sie erweiterte Designeinstellungen vornehmen:

d86aff0c-2dfa-4a87-a426-7115aebe9dab.png

Wenn Sie für das Webseitendesign die erweiterten Schrifteinstellungen nutzen, wird dies auch Auswirkungen auf die CMS Elemente Text und Überschrift haben.

Überschrift

4f665fda-3c07-42fe-b172-12a0131a61e1.png

Sie können hier einen Titel in 5 verschiedenen Grössen von Large bis Nano erstellen. Es können nur Text und Sonderzeichen eingegeben werden, keine Bilder oder Icons.

Text

5aba9edd-b056-448f-8645-cbd1400943c7.png

Dieses Element erstellt einen Textblock den Sie sehr frei gestalten können. Sie können im Texteditor beliebige Teile eines Textes formatieren und sehr lange Texte schreiben (1)

Es erlaubt Ihnen auch Bilder und Videos anzuhängen, welche sich dann relativ zum Textblock platzieren lassen z.b. links oder rechts davon oder als Slider oben oder unten. Videos müssen auf YouTube hochgeladen sein um ihre URL hier zu verwenden. (2)

bf3d49ea-b9b0-4e56-a54a-b38092625475.png

Images/Videos

81dba747-24d8-4951-b823-e64a85e06a34.png

Hier können Sie Bilder hochladen oder Videos anzeigen (von YouTube) um diese einzeln oder als Slider darzustellen. Die Bilder lassen sich entweder mit einem Klick in einer Detailansicht öffnen, in einem neuen Tab (mit definiertem Link) oder gar nicht.

20e0727b-6147-452c-b0b7-9c7132b28a87.png


Artikel

a6cff5a2-be0e-400f-8fee-f0c42f641880.png

Die Artikelplatzierung gibt Ihnen die Möglichkeit, Ihre eigenen News in Ihre Website einzubinden. Artikel, welche Sie im internen Bereich erfassen, können dann explizit oder zeitgesteuert veröffentlicht werden. Sie wählen die Kategorie und die Bereiche aus die zu veröffentlichen sind und können dann die Darstellung mit Anzahl Spalten und Zeilen, mit oder ohne Bildvorschau und vieles mehr anzeigen. Aufgrund der Layouttechnology in Browsern passt sich die Darstellung auf verschiedenen Geräten nach dessen Auflösung an. Sie werden dementsprechend weniger Spalten auf einem Handy sehen als auf Ihrem Desktop-PC.

d5d66493-9077-4284-b24a-2e26fc3d1440.png

Kalender

64418ca1-51a7-4744-b1f2-0f9d3c9c1763.png

Das Kalenderelement zeigt Ihnen eine Liste von Terminen aus Ihrem Kalender an. Sie können den Kalender, die Kategorie und Anzahl angezeigten Termine auswählen.

8ff6f5cc-f7b2-40cf-b092-931bc7cfc28e.png

Events

04b5afbe-de9d-4faa-a618-7d82634298bf.png

Formular

b48ae0eb-f03f-4a5c-9345-c4ffb75c7128.png

Mit diesem Element können Sie ein beliebiges Formular erstellen und dessen Besuchereinträge einsehen. Ihr Formular können Sie mit mehreren Eingabefeldern und Trennern gestalten sowie mit einem CAPTCHA versehen um sicher zu stellen, dass keine Bots oder Hacker Ihre Site mit Müll zuspammen.

d98b22d6-b6a8-4a51-9ea2-210df098a704.png

Im Bereich „Webseite“ unter dem Menüpunkt „CMS“ zeigt es anschliessend das Formular inkl. Einträge an:

896f50e5-4b99-441f-a0a9-5ef021b28540.png

Beispiel Darstellung auf der Webseite:

eb7be1c1-b676-4577-acaf-7580047914c9.png

Kontakttabelle

111cf489-78ea-4371-9467-7ef1297bb47b.png

Sie zeigen hier eine Liste von Kontakten aus dem System (z.B. Sponsoren oder Mitglieder einer Arbeitsgruppe) an, welche Sie mittels Filter genau abgrenzen sollten. Um die Liste sehr genau abzugrenzen und nur die Kontakte anzuzeigen, die Sie wirklich für diese Seite benötigen, sollten Sie zuvor in der Kontaktverwaltung einen Filter erstellt und ihn abgespeichert haben. Sie können auch die Anzeige von Profilfotos erlauben, sowie die Spalten und Tabellenfilter bestimmen. Der Tabellenfilter lässt dem Seitenbesucher die Möglichkeit, den dargestellten Inhalt nach den von Ihnen festgelegte Kriterien zu filtern.

72378785-277e-4b61-bedf-d1db9aaa54dd.png

c35ef00f-c8e1-4cb5-ac60-7ebd53d222ed.png

b328671d-6d38-442d-be85-2c1ae5470b8d.png

Das Aussehen können Sie dann im letzten Schritt bestimmen, wobei Sie sogar den Export der angezeigten Kontakte oder eine Suchfunktion erlauben können. Für mobile Ansichten (Responsiveness) können Sie auch im Schritt „Tabellenaussicht wählen“ wählen was passiert wenn „Falls kein Platz (zu viele Spalten)“ besteht. Entweder erscheint dann eine horizontale Scrollleiste oder die „übrigen Spalten werden eingeklappt“.

Porträts

93a07e73-ac90-4a99-bd0a-d88077a81996.png

Der grosse Bruder der Kontakttabelle. Sie können hier eine Auswahl von Kontakten als Porträts darstellen (z.B. um den Vorstand abzubilden) Sie wählen die Kontakte auch wieder mit zuvor gespeicherten Filtern (aus der Kontaktverwaltung) aus, bestimmen die Grösse und Anordnung der Porträts auf der Seite und ihre Sortierung, ergänzen die Porträts mit zusätzlich darzustellenden Daten und können wieder einen Auswahlfilter für die Besucher einblenden.

Wenn Sie ein Profilbild anzeigen möchten, müssen Sie vorab an den entsprechenden Kontakten in der Kontaktverwaltung ein Profilbild hinterlegen.

Beispiel für die Darstellung auf der Webseite:

4bfd6f9e-5df0-4886-8255-b916fabfb61f.png

Karte

423fa4ad-d18e-43ac-a4cb-3269a781763c.png

Hier können Sie eine bestimmte Adresse mittels des Google-Maps Service darstellen. Sie können die Kartengrösse auf der Website angeben und was für Details die Karte zeigen soll. Mit dem Zoomlevel können Sie den Kartenausschnitt bestimmen.

Zoomlevels nach Googles Interpretation:

1: Welt

5: Landmasse/Kontinent

10: Stadt

15: Strasse

20: Gebäude


Darstellung auf der Webseite:

c0d48134-eddc-4cb2-91e3-77e22bfc173d.png

Sponsoren

5f847dd0-0df8-4951-9bc8-3f4e86ee8745.png

Dieses Element steht Ihnen nur zur Verfügung, wenn Sie das Sponsorenmodul gebucht haben und bereits erste Sponsoren und Leistungen erfasst haben.

Am besten hinterlegen Sie auch vorab entsprechende Sponsorenlogos in der Sponsorenverwaltung, damit diese entsprechend auf der Webseite angezeigt werden.

Die Logos können Sie hier hinterlegen:

da4d5f38-bd97-4ece-9e35-b409c98cfa96.png

Beitrittsgesuchsformular

3fcafe02-46a7-468b-800b-d4325f5f4aef.png

Sie können hiermit ein Beitrittsgesuchsformular für Interessierte in Ihre Seite einbinden und dann diese Gesuche in der Kontaktverwaltung bearbeiten und/oder direkt als Kontakt in die Datenbank aufnehmen. Dieses Element steht Ihnen nur zu Verfügung, sofern Sie zuvor ein Beitrittsgesuchsformular in der Kontaktverwaltung erstellt haben!

1bdee65d-09ad-4c81-9994-59dd1255075d.png

Iframe

810e928b-031f-4ed2-a9b1-f2c78d0d7d8c.png

Mit dem iFrame-Element können Sie fertige Inhalte von fremden Websites einbinden. Dies ist das heikelste Element weil es dabei wichtig ist, dass Sie besonders auf die Sicherheit und die Urheberrechte achten müssen bevor Sie einen fremden Inhalt auf Ihrer Website darstellen.

Sie können entweder für einen Fremdinhalt eine URL angeben welche dann die komplette Webseite einbindet, oder Sie geben einen HTML/Javascript Code-Block für einen existierendes iFrame eines Serviceanbieters ein (z.b. Social Media, Wetterinfos, etc.). Dann bestimmen Sie noch wie hoch das iFrame-Element auf der Seite erscheinen soll, die Breite wird durch die Spaltenbreite des Layouts Ihrer Box bestimmt.

Hier lässt sich z.b. der Like-Button von Facebook einfügen den Sie hier zusammenstellen und danach den iFrame-Code ins iFrame-Element kopieren können.

Sicherheitshinweise

Wir versuchen unsere Server und die Daten unserer anderen Kunden so gut wie möglich zu schützen, da wir Ihnen erlauben auch Javascript-Code einzubetten besteht immer die Gefahr, dass Sie unbewusst gefährliche bzw. maliziöse Inhalte hochladen und anbieten. Bitte seien Sie deshalb besonders vorsichtig und fragen Sie bei unserem Support nach um sicher zu sein. Wir können für jegliche Inhalte die Sie auf diese Weise einbinden keine Funktionsgarantie übernehmen wie auch keine Verantwortung für etwaige Schäden die dadurch entstehen könnten.

Urheberrechtshinweise

Bevor Sie fremde Inhalte auf Ihrer Website einbetten, sollten Sie das Einverständnis vom Urheberrechteinhaber eingeholt haben. Falls eine solche Genehmigung nicht eindeutig auf dessen Website vorliegt, sollten Sie den Urheberechtsinhaber direkt anfragen um späteren Entschädigungsforderungen vorzubeugen.

Loginformular

b7450845-fbc2-42cb-8456-11d382c4e677.png

Damit platzieren Sie eine Loginbox auf Ihrer Website. Damit gelangen Ihre Mitglieder in den internen Bereich oder auch in die Verwaltung falls sie Administratoren sind. Sie können aber auch nur einen Begriff wie „Login“ in der Nebennavigation oder im Footer mit https://mein.fairgate.ch/xyz???/backend/signin verlinken falls Sie das Login etwas dezenter halten möchten.

65c24f87-9dfb-42ee-a8b1-eafe0ac4c6ab.png

Twitter (jetzt: “X”)

60b81d0e-9b6f-42e3-91b2-687547d22c8e.png

Dieses Element stellt Twitternachrichten dar. Sie können die Höhe bestimmen, die Breite wird durch die Spaltenbreite Ihres Layouts bestimmt. Es genügt den gewünschten Account mittels des eindeutigen Handles/Kontonamens anzugeben, dann werden alle öffentlichen Beiträge hier dargestellt. Twitter bestimmt dabei die Darstellung und Anzahl Beiträge die Ihre Besucher sehen können.

Zusatznavigation

5e2c313d-f97c-41cf-be9b-879c2fb2e64a.png

Platzieren Sie dieses Element auf einer Seite, werden alle bestehenden und zukünftigen Unterseiten angezeigt. Sehr praktisch, wenn Sie in einem Hauptnavigationspunkt (Menü) eine tiefe und verzweigte Struktur haben.

Wichtig: Wenn Sie noch keine Unternavigationspunkte inklusive Seiten dazu erstellt haben, wird dieses Element keinen Inhalt darstellen.

Newsletter-Abonnierung

284eff4e-36f0-4c87-835d-a0e3d0a15343.png

Mit diesem Element geben Sie interessierten Besuchern die Möglichkeit, sich für Ihre Newsletter einzutragen und diese zu abonnieren. Sofern Sie das Modul „Kommunikation“ gebucht haben, werden diese als Abonnenten hinzugefügt.

Newsletter-Archiv

8db027fc-629a-4867-acb6-7a51c50d41f5.png

Hier werden alle Newsletter angezeigt, welche Sie nach dem Versand auch im öffentlichen Archiv anzeigen möchten.  Über einen Klick auf den gewünschten Newsletter gelangt der Besucher auf dessen Webansicht und kann ihn dort lesen.

HTML/JS

ea08fc79-8acf-49b3-badb-9afaaaa555bb.png

Dies ist ein sehr spezielles Element zum einbinden Inhalte Dritter welches Sie nur verwenden sollten wenn Sie sicher sind, dass es mit keinem anderen Element funktioniert. Sie kopieren einfach den notwendigen HTML Code in das entsprechende Feld und den Link zum Javascript Code, oder Sie laden ein Javascript-File hoch. Dann geben Sie noch die Maximale Höhe in Pixel an. Bitte überprüfen Sie, dass der verwendete Code und der Link vertrauenswürdig und sicher ist. Im Zweifelsfall kontaktieren Sie bitte unseren Support.

Buttons

4ec028d3-d6e2-46c2-81a0-e0ea837626ba.png

Mit dem Button-Element können Sie einen oder mehrere Buttons auf Ihrer Webseite platzieren, welche auf verschieden Art und Weise angeordnet werden können:

65d8c29a-080e-4d86-9765-0569388ba67b.png

Erstellen Sie zunächst einen Button und geben Sie diesem einen Text (1). Danach können Sie definieren, wohin der Benutzer geleitet wird, wenn er auf den Button klickt (2). Dies kann ein interner (=Navigationspunkte) oder externer Link sein.

Abschliessend klicken Sie auf “Erstellen” (3).

Sie können dann die Buttons entsprechend anpassen:

Ausrichtung nebeneinander/verbunden:

e8065d6d-2dbd-4248-bab3-807aa3184385.png

Ausrichtung untereinander/verbunden:

dab893d8-f0c0-430d-813a-451031ab8609.png

Ausrichtung nebeneinander/getrennt:

e70cb282-e20d-4bd0-ba10-3458ffed3912.png

Ausrichtung untereinander/getrennt:

952d966e-6e6b-47cc-9aab-8692ed7c82a4.png

Sie können zudem die Buttongrösse und den -stil anpassen und den Link in einem neuen oder demselben Register-Tab öffnen lassen:

d9f333c4-6e2b-4aef-89e7-ab0ecd729b9a.png

Erweiterte Button-Designeinstellungen

98ac8885-4e4c-4cff-8917-7c05858ca5f4.png

Neben den vorgegebenen Button-Stilen und Farben, können Sie auch individuelle Attribute definieren. Gehen Sie hierzu unter CMS>Design zum Menüreiter “Buttons”

38f0114a-6e41-4917-b9dd-c36045ca386e.png

Hilfreich Nicht hilfreich

1 von 1 Personen fanden diese Seite hilfreich