Handbuch
Recruiting-Theme Dokumentation
Dieses Handbuch beschreibt den Aufbau des Themes, alle verfügbaren Abschnitte, die Einstellungen für Farben und Schriften sowie die Punkte, die für Datenschutz und Cookie-Banner zu beachten sind. Es richtet sich an die Personen, die die Website später pflegen.
Sie richten das Theme zum ersten Mal ein? Der kompakte Einstieg steht unter cixon.de/recruiting-theme-erste-schritte — dieses Handbuch ist das ausführliche Nachschlagewerk.
1. Erste Schritte
Von der Installation bis zur ersten veröffentlichten Seite — in dieser Reihenfolge geht es am schnellsten.
- Theme installieren. Im HubSpot-Marketplace „Cixon Recruiting ATS“ wählen und in Ihren Account installieren. Das Theme erscheint unter Marketing → Dateien und Vorlagen → Design-Manager im Ordner
@marketplace. - Farben und Schriften prüfen. Primär- und Sekundärfarbe übernehmen beim ersten Aufruf automatisch die Farben aus Ihren Markeneinstellungen (Einstellungen → Account-Standards → Branding). Wollen Sie davon abweichen, tragen Sie in den Theme-Einstellungen einen eigenen Wert ein — damit ist die Verknüpfung gelöst. Anschließend Design veröffentlichen.
- Systemseiten und Blog zuweisen. Einstellungen → Website → Seiten → Systemseiten: die vier Vorlagen aus dem Theme wählen. Einstellungen → Website → Blog → Vorlagen: „Blog-Übersicht“ und „Blog-Beitrag“ setzen.
- Startseite anlegen. Neue Website-Seite mit der Vorlage „Startseite“ erstellen; Texte, Kennzahlen und Logos in den Abschnitten austauschen; Menü im Seitenkopf über den Bereich Website-Kopf pflegen.
- Weitere Seiten. Karriereseite, Unternehmenskultur, Bewerbungsprozess, Standorte, Events, Über uns, Kontakt — jede Vorlage kommt mit Beispielinhalten, die Sie nur noch austauschen. Die Vorlage „Modulübersicht“ zeigt alle Abschnitte auf einer Seite.
- Formulare verbinden. In Kontakt- und Bewerbungsabschnitten das gewünschte HubSpot-Formular im Feld „Formular“ auswählen (Abschnitt 8).
- Cookie-Banner aktivieren (Abschnitt 10), Impressum und Datenschutzerklärung anlegen und im Seitenfuß verlinken.
- Veröffentlichen und prüfen: Smartphone-Ansicht, Tab-Titel, Formular-Testversand.
2. Aufbau des Themes
Das Theme ist so gebaut, dass es allein funktioniert und sich zugleich um einen Aufsatz für Stellen- und Kandidatendaten erweitern lässt:
- Recruiting-Theme (Basis)
- Seitenkopf und -fuß, Layouts, Textabschnitte, Kennzahlen, Team, Standorte, Fragen und Antworten, Kontakt, Blog und die Systemseiten. Alles, was hier beschrieben ist, gehört zur Basis. Sie erhält Aktualisierungen über den HubSpot-Marketplace.
- Recruiting Hub (optionaler Aufsatz)
- Stellenportal, Stellendetailseite, Bewerbungsformulare, Talentpool und Exposé-Seiten, die mit Datensätzen in Ihrem HubSpot-Konto arbeiten. Der Aufsatz wird von CIXON eingerichtet und ist nicht Teil des Marketplace-Themes.
Alle Abschnitte auf einer Seite ansehen
Die Vorlage Modulübersicht stellt jeden verfügbaren Abschnitt einmal dar. Legen Sie damit eine nicht verlinkte, für Suchmaschinen gesperrte Seite an — so lässt sich vor dem Bau einer neuen Seite die passende Variante auswählen.
3. Farben und Schriften einstellen
Zu finden unter Marketing → Dateien und Vorlagen → Design-Manager, dort das Theme auswählen und oben rechts Theme-Einstellungen öffnen. Alternativ im Seiteneditor über Design in der linken Spalte.
Farben
- Primärfarbe — Schaltflächen, Verweise, Akzente, aktive Zustände. Diese Farbe prägt den Gesamteindruck.
- Sekundärfarbe — der zweite Ton in Farbverläufen und die Hervorhebung im Menü.
Beide Farben sind zunächst mit den Markeneinstellungen Ihres Accounts verknüpft (Ketten-Symbol neben dem Feld) und folgen ihnen automatisch. Sobald Sie einen eigenen Wert eintragen, ist die Verknüpfung gelöst und der eingetragene Wert gilt. Änderungen werden erst mit Design veröffentlichen auf der Website sichtbar.
Die Farben wirken auf allen Seiten. Je dunkler die Primärfarbe, desto besser der Kontrast der weißen Schrift auf Schaltflächen; sehr helle Farben sollten vermieden werden.
Schriften
- Grundschrift — Fließtext, Menü, Beschriftungen. Voreinstellung: Inter.
- Überschriftenschrift — alle Überschriften. Voreinstellung: Plus Jakarta Sans.
Beim Wechsel der Schrift beachten
Die beiden voreingestellten Schriften sind im Theme mitgeliefert und werden von Ihrer eigenen Domain ausgeliefert. Es besteht keine Verbindung zu Google — dafür brauchen Sie keine Einwilligung Ihrer Besucher.
Wählen Sie eine andere Schrift aus der Liste, lädt HubSpot sie von Google-Servern; dabei wird die IP-Adresse Ihrer Besucher an Google übertragen, was eine Einwilligung erfordert. Wenn Sie dauerhaft eine andere Schrift einsetzen möchten, sprechen Sie uns an — wir hinterlegen sie ebenfalls lokal.
4. Darstellung je Abschnitt
Viele Abschnitte haben eine Feldgruppe Darstellung. Damit lässt sich das Aussehen einzelner Abschnitte anpassen, ohne das Gesamtdesign zu verändern.
| Einstellung | Wirkung |
|---|---|
| Hintergrund | Auswahl zwischen Standard, Farbe, Farbverlauf und Bild. |
| Hintergrundfarbe | Wird verwendet, wenn „Farbe“ gewählt ist. |
| Verlauf von / bis | Die beiden Farben des Verlaufs, dazu die Richtung: waagerecht, senkrecht oder diagonal. |
| Hintergrundbild | Bild aus dem Dateimanager. Es füllt den Abschnitt vollständig und wird mittig beschnitten. |
| Overlay über dem Bild | Farbschleier mit einstellbarer Deckkraft, damit Text auf unruhigen Bildern lesbar bleibt. |
| Schriftfarbe | Überschreibt die Textfarbe im Abschnitt — nötig bei dunklem Hintergrund. |
Empfehlung: Bei einem Hintergrundbild das Overlay auf mindestens 50 Prozent Deckkraft und die Schriftfarbe auf Weiß setzen. Das Ergebnis anschließend auf dem Smartphone prüfen — dort liegt der Text über einem anderen Bildausschnitt.
5. Abschnittskatalog
Alle Abschnitte, die im Seiteneditor zur Verfügung stehen, nach Verwendung gruppiert. D = mit Feldgruppe „Darstellung“, F = mit Formularauswahl.
Seitenkopf und Seitenfuß
| Abschnitt | Beschreibung |
|---|---|
| Website-Kopf mit Navigation | Logo, Menü mit Untermenüs, Aufruf-Schaltfläche; auf dem Smartphone als Klappmenü |
| Website-Fuß | Logo, Kurztext, bis zu zwei Menüspalten, Kontaktspalte, Rechtszeile |
Auftaktbereiche
| Abschnitt | Beschreibung |
|---|---|
| Startseiten-Hero | Aufmacher mit Überschrift, Text und zwei Schaltflächen |
| Karriere-Kopfbereich | Aufmacher mit wechselnden Schlagwörtern und optionalem Video |
| Aufruf-Bereich mit Farbverlauf | Schlichter Aufmacher mit Überschrift, Text und Schaltflächen |
| Detailseiten-Kopfbereich | Aufmacher für Detailseiten mit Faktenzeile |
| Event-Kopfbereich | Aufmacher für die Terminseite mit Kennzahlen |
| Blog-Kopfbereich | Aufmacher der Blog-Übersicht |
Text und Inhalt
| Abschnitt | Beschreibung |
|---|---|
| Bild und Text D | Bild links oder rechts, Überschrift, Text, Aufzählung mit Häkchen, zwei Schaltflächen |
| Vorteils-Karten mit Symbol D | Überschrift mit Einleitung und drei Karten mit Symbol |
| Warum bei uns arbeiten D | Zweispaltige Argumenteliste mit Symbolen |
| Unternehmensgeschichte als Zeitleiste D | Stationen mit Jahreszahl, Titel und Text |
| Unternehmenswerte D | Werte als Karten mit Symbol |
| Textabschnitt mit Überschrift | Kurzer Textabschnitt für Leitbild oder Einleitung |
| Kultur-Bereich mit Bild | Überschrift, Text, zwei Schaltflächen und Bild |
| Werte-Karten | Drei Karten mit Symbol, Titel und Text |
| Willkommen mit Merkmalen | Begrüßung mit Merkmalsliste und Hervorhebungen |
Zahlen und Fakten
| Abschnitt | Beschreibung |
|---|---|
| Kennzahlen mit Zählanimation D | Vier Kennzahlen mit Symbol, zählen beim Einblenden hoch |
| Karriere-Kennzahlen D | Kennzahlenraster für die Karriereseite |
| Recruiting-Zahlen | Kompaktes Kennzahlenband |
| Standort-Eckdaten D | Faktenzeile, etwa für Standorte |
Team und Stimmen
| Abschnitt | Beschreibung |
|---|---|
| Team-Karten D | Teamvorstellung mit Zitaten |
| Team-Übersicht | Teamkarten mit Bild, Name und Rolle |
| Team-Slider | Teamkarten als Slider |
| Stimmen aus dem Team | Zitate mit Video-Vorschau |
| Team-Stimmen mit Initialen | Zitate mit Initialen-Kreis, Rolle und Dauer |
| Kundenlogo-Leiste D | Logoleiste für Partner und Kunden, mit Textalternative |
| Bilder-Slider D | Laufband für Logos oder Bilder |
Standorte
| Abschnitt | Beschreibung |
|---|---|
| Standort-Karten | Kartenfläche mit anklickbaren Standort-Punkten |
| Standort-Details | Karten je Standort mit Bild, Fakten und Verweis |
| Standorte-Übersicht | Kompakte Standortliste mit Adresse |
| Regionen-Übersicht | Offene Stellen je Region |
Prozess, Termine, Galerie
| Abschnitt | Beschreibung |
|---|---|
| Bewerbungs-Aufruf D | Aufruf mit Formular oder Schaltfläche |
| Bewerbungsprozess in Schritten | Ablauf in Schritten mit Dauer und Hinweisen |
| Hinweisbereich mit zwei Schaltflächen | Einzelner Hinweis oder Schritt als Karte |
| Event-Liste mit Filter | Termine mit Filter nach Art, Datum, Ort und Teilnehmerzahl |
| Bildergalerie | Bildergalerie mit Vergrößerung |
| Bürorundgang | Bildreihe für Einblicke in die Räume |
Fragen, Kontakt, Abschluss
| Abschnitt | Beschreibung |
|---|---|
| Fragen und Antworten D | Fragenkatalog mit Kategorien und Suche; gibt strukturierte Daten aus |
| Kontaktbereich mit Formular D, F | Kontaktseite mit Formular, Kontaktdaten und Standorten |
| Kontaktformular F | Formularabschnitt mit Begleittext |
| Newsletter-Anmeldung F | Anmeldung zum Newsletter |
| Abschluss-Aufruf D | Farbiger Abschluss mit Überschrift und zwei Schaltflächen |
| Teil der Geschichte werden F | Abschluss-Aufruf mit Symbol, optional mit Formular oder Hintergrundbild |
Blog
| Abschnitt | Beschreibung |
|---|---|
| Blog-Beitragsliste | Beiträge mit Filter und Suche |
6. Fertige Kombinationen
Im Seiteneditor lassen sich unter Abschnitte vorbereitete Kombinationen aus zwei Bausteinen einfügen — jeweils mit sinnvollen Beispielinhalten, die Sie nur noch anpassen.
- Startbereich mit Kundenlogos — Hero und Logoleiste
- Argumente und Vorteils-Karten — Argumenteliste und drei Karten
- Bild, Text und Kennzahlen — Bild-Text-Bereich und Kennzahlen
- Team mit Stimmen — Team-Slider und Zitate
- Fragen und Abschluss-Aufruf — Fragenkatalog und Abschluss
- Standorte mit Karten und Details — Kartenfläche und Standortkarten
7. Seiten und Vorlagen
Beim Anlegen einer neuen Seite wählen Sie eine Vorlage. Sie legt fest, welche Abschnitte vorbelegt sind — ändern lassen sich diese anschließend frei.
| Vorlage | Zweck |
|---|---|
| Startseite | Hero, Kennzahlen, Nutzenargumente, Kundenlogos, Abschluss-Aufruf |
| Karriereseite | Arbeitgeberdarstellung, Team, Kennzahlen, Aufruf |
| Unternehmenskultur | Werte, Bürorundgang, Galerie, Team, Stimmen, Geschichte |
| Bewerbungsprozess | Ablauf in Schritten und durchsuchbarer Fragenkatalog |
| Events und Termine | Termine mit Filter nach Messen, Workshops, Webinaren und Neuigkeiten |
| Standort-Übersicht, Standort-Detailseite | Alle Standorte auf einer Karte und je Standort eine Detailseite |
| Leistungen, Über uns, Kontaktseite | Unternehmens- und Leistungsdarstellung, Kontakt mit Formular |
| Blog-Übersicht, Blog-Beitrag | Fachbeiträge mit Filter, Suche und Inhaltsverzeichnis |
| Systemseiten | Fehlerseiten 404 und 500, Passwortabfrage, Suchergebnisse, Abo-Verwaltung, Mitglieder-Seiten |
| Modulübersicht | Alle Abschnitte auf einer Seite, zum Auswählen |
| Theme-Dokumentation | Diese Seite |
Einmalige Einrichtung nach der Installation
Zwei Zuweisungen lassen sich nur in den Einstellungen vornehmen, nicht im Theme: die Vorlage für die Blog-Übersicht (Einstellungen → Website → Blog → Vorlagen) und die Systemseiten (Einstellungen → Website → Seiten → Systemseiten). Ohne diese Zuweisung erscheinen die Standardseiten von HubSpot statt der gestalteten Varianten.
8. Formulare
Formulare werden in HubSpot getrennt vom Theme gepflegt und im jeweiligen Abschnitt nur ausgewählt.
- Formular anlegen unter Marketing → Formulare. Klassische und mehrstufige Formulare werden unterstützt.
- Im Abschnitt auswählen: im Seiteneditor den Abschnitt anklicken und im Feld „Formular“ das gewünschte Formular wählen.
- Verhalten nach dem Absenden direkt am Feld einstellen: Dankestext an derselben Stelle oder Weiterleitung.
Für Bewerbungs- und Kontaktformulare empfehlen wir ein Ankreuzfeld mit Verweis auf die Datenschutzerklärung sowie eine Löschfrist für eingegangene Unterlagen. Beides wird im Formular selbst konfiguriert, nicht im Theme.
9. Datenschutz und Schriften
Das Theme ist so ausgelegt, dass beim Aufruf einer Seite keine Verbindung zu Servern Dritter entsteht:
- Schriften. Beide Schriften liegen als Dateien im Theme und werden von Ihrer Domain geladen. Keine Anfrage an Google, keine Übermittlung von IP-Adressen. Die Schriften stehen unter der SIL Open Font License.
- Bilder und Symbole. Alle mitgelieferten Grafiken liegen im Theme; es werden keine Bilddienste von außen eingebunden.
- Skripte. jQuery und der Slider liegen ebenfalls im Theme; es werden keine Skripte von fremden Servern geladen.
Beim Einbinden eigener Inhalte prüfen
Sobald Sie externe Inhalte ergänzen, entstehen Verbindungen zu Dritten, die eine Einwilligung erfordern: Videos von YouTube oder Vimeo (auch die Video-Vorschau in „Stimmen aus dem Team“), Kartendienste, eingebettete Bewertungs- oder Social-Media-Elemente, nicht mitgelieferte Schriften. Verzichten Sie darauf oder laden Sie sie erst nach erteilter Einwilligung.
Unabhängig davon setzt HubSpot für die Reichweitenmessung eigene Cookies. Diese sind einwilligungspflichtig — dafür ist der Banner im nächsten Abschnitt zuständig.
Eine Ausnahme, die nicht vom Theme kommt
HubSpots eigener Einwilligungs-Banner lädt die Schrift Lato von fonts.googleapis.com — also von einem Google-Server, und zwar bevor eine Einwilligung vorliegt. Das geschieht außerhalb des Themes: Der Banner fügt den Verweis selbst ein, und seine Einstellungen bieten keine Möglichkeit, die Schriftquelle zu ändern. Es betrifft jede HubSpot-Seite mit aktivem Banner, unabhängig vom eingesetzten Theme.
Wenn Sie das vermeiden möchten, schalten Sie den HubSpot-Banner ab und übergeben die Einwilligung aus einer eigenen Consent-Lösung: window.disableHubSpotCookieBanner = true; im Kopfbereich, danach die Zustimmung per _hsp.push(['setHubSpotConsent', …]) melden. Beschrieben in der Cookie-Banner-API von HubSpot. Diese Entscheidung treffen Sie in Ihrem Portal; das Theme selbst lädt weiterhin nichts von Dritten.
11. Suchmaschinen
- Seitentitel und Beschreibung pflegen Sie je Seite in den Seiteneinstellungen; das Theme gibt sie zusammen mit den Social-Media-Vorschaudaten aus.
- Fragenkatalog. Der Abschnitt „Fragen und Antworten“ gibt seine Fragen als strukturierte Daten aus. Formulieren Sie echte Fragen und Antworten — sie werden von Suchmaschinen und Sprachassistenten ausgelesen.
- Eine Hauptüberschrift pro Seite. Abschnitte mit wählbarer Überschriftenebene sollten nur einmal auf H1 stehen.
- Bilder brauchen einen kurzen Alternativtext — für Screenreader und für die Suche.
Nach dem Livegang: in den Website-Einstellungen den Verweis auf die Sitemap in der robots.txt hinterlegen und prüfen, dass Vorschau- und Testseiten dort ausgeschlossen sind.
12. Pflegehinweise und Grenzen
Was Sie selbst ändern können
- Alle Texte, Bilder, Verweise und Reihenfolgen in den Abschnitten
- Farben und Schriften über die Theme-Einstellungen
- Hintergrund, Overlay und Schriftfarbe je Abschnitt
- Menü und Seitenfuß über die entsprechenden Bereiche im Editor
- Formulare in HubSpot selbst
Worauf zu achten ist
- Bildgrößen. Hintergrundbilder etwa 1600 × 900 Pixel, Porträts quadratisch. Zu große Dateien verlangsamen die Seite.
- Kontraste. Nach dem Ändern von Farben stichprobenartig prüfen, ob Text auf Schaltflächen und farbigen Flächen lesbar bleibt.
- Menü. Untermenüs sind auf eine Ebene ausgelegt.
Was CIXON übernimmt
Änderungen am Aufbau der Abschnitte, neue Abschnittstypen, das Einbetten zusätzlicher lokaler Schriften sowie die Einrichtung des Recruiting-Hub-Aufsatzes für Stellen und Kandidaten.
13. Support
CIXON GmbH · info@cixon.de · www.cixon.de
Antwort in der Regel innerhalb eines Werktags, Montag bis Freitag, 9 bis 17 Uhr (MEZ). Support auf Deutsch und Englisch.