Installation

1. Kopieren des Themes in neue HubSpot Instanz. Dazu über den Design-Manager das Theme mit Rechtsklick anwählen und "in anderen Account kopieren" auswählen.
2. Im Fall von individual Projekten mit vielen Anpassungen an bestehenden Code Modulen beim Kunden über Datei "Untergeordnetes Design erstellen" eine Kopie des Themes (Child-Theme) erzeugen.
3. Im Fall von CSS Anpassungen und lediglich neuen Modulen, kann über die Custom-Dateien eine modifikation im Theme direkt vorgenommen werden. Die Code-Basis bestehender Module und Standard Dateien solle dann unverändert bleiben.
4. In der field.css müssen die Variablen theme_name für Ordner, und UUID licence für Kunde geändert werden. Den Lizens-Schlüssel bitte im Intranet zum Kunden speichern.
5. Hinweis: Nicht benötigte Templates oder Module können der Redakteursauswahl entzogen werden. Es können auch einzelne Modul Felder für den Redakteur gesperrt werden.
6. Tipps: ?developerMode=true, ?hsDebug=true, ?hsBustCache=true

Jedes Projekt sollte eine Lizens erhalten, diese folg dem UUID Schema: b95237ba-0837-4823-9f16-cee3789745d9 Die ID kann mit Hilfe der Webseite uuidgenerator.net erstellt werden. Speicherort im Projekt ist die fields.css Datei. Parallel sollte die ID im Intranet beim Kunden abgelegt werden.

Update Kunden-Projekt

1. Erstellen, bzw. verwenden des API Key für die CLI Schnittstelle. System-Administator Rechte vorausgesetzt.
2. Download des aktuellen Theme aus der Entwicklungsumgebung.
3. Ergänzen der .hsignore Datei im Root Verzeichnis, siehe nachstehend.
4. Sicherstellen, dass keine Custom-Files (Kunden-Dateien) überschrieben werden.

Je nach Projekt könnte es sein, dass der Entwickler die fields.css und fields.html veränder hat. Dann sind diese ebenfalls in der .hsignore zu ergänzen. Beide Dateien lassen sich auch über die custom.css und custom.html update sicher verändern!

Update X-Theme-Projekt

Aktuallisierungen am X-Theme-Projekt selber sind mit Versionsnummer und kurzer Beschreibung der Änderung, sowie Nennung des Entwicklers in der theme.md festzuhalten. Die Versionsnummer is in die theme.json zu übertragen.

Globals

Globale Variablen stehen in der fields.css und können über die custom.html erweitert werden. Ebenso stehen eine Reihe von globalen Macros in der fields.html zur Verfügung. Neue Macros können ebenfalls über die custom.html ergänzt werden. Weiter gibt es globale Klassen zur Formattierung aus einer Reihe von CSS Dateien. Nachstehend Einträge aus der _helper.css.

Colors

Die Standart Farbpalette ist in der fields.css konfiguriert. Bitte beachte, dass für update sichere Anpassungen in der fields.css die custom.css verwendet werden kann. Für ein besseres Farbverständnis, bitte den Farbton in einem Kommentar bennen. Und dann den Werten für primär, sekundär, tertiär und quartär zuweisen. Verfügbar sind auch dynamisch generierte Farbklassen. Die Bezeichnung folgt der Schreibweise: .color-{{ name }} und .bg-{{ name }}. Aber meist wird die Farb-Variable im Konfigurationsobjekt des Elementes direkt verwendet. Zum Beispiel durch {{ colors.primary }}.

Box-Shadow

Es gibt drei Größen von Schatten: small, medium und large. Dabei wird Desktop, Mobile und Print unterschieden. Zudem gibt es ein Hover schatten und die Variante eines Hover-Only Schattens. Die Klassen sind in der _helper.css deklariert.

Eine weitere Möglichkeit, wenn die Klassen-Namen unzureichend sind, ist die manuelle Erstellung der Schatten. Dazu kann das box_shadow() Macro verwendet werden. Siehe dazu nachstehendes Beispiel oder direkt in der fields.html.

Font-Size

Es steht eine Reihe von Schriftschnitten zur Verfügung. Die Größen reichen von xss bis xxxl. Die Schriftklassen sind konsequent Anzuwenden. Im Custom Richtext Modul besteht die Möglichkeit weitere Schriftschnitte zu formatieren. Nachstehend die Klassen und ihre momentane Formatierung in der fields.css.

H1-H6 Überschriften

Zu jedem guten Schriftschnitt gehört eine passende Überschrift. Nachstehend die H1 bis H6 Formatierung. Für unterscheidung zwischen optischer und semantischer Überschrift, sowie ausgefeiltere Anwendungen, siehe headline.module.

Aspect-Ratio

Eine besonderheit in unserem Theme ist, dass wir Seitenverhältnisse über CSS Klassen angeben. Diese finden vielfach Anwendung. Zum Beispiel im banner.module oder im picture.module. Hintergrund ist, dass Grafiken besser Zugeschnitten werden können und wir eine Bildresource für mehrere Anwendungfälle hinweg verwenden können. Für details siehe _ratio.css. Neue Seitenverhältnisse können auch über die globale custom.css ergänzt werden.

Weiter besteht die Möglichkeit für Mobile gesondert ein Seitenverhältnis anzugeben.

Die Nachsehende Tabelle kann als Hilfe für die Grafik dienen. Sie zeigt das Skalieren von Bildern ausgehend von der Breite.

Loading-Spinner

Für asynchrone Ajax Abfragen oder als Platzhalter für iFrames und lade intensive Inhalte gibt es ein aniemiertes SVG. Dieses kann über die Webseite Icon8.com erzeugt und im Datei-System ersetzt werden. Siehe dazu auch in die _loader.css Datei.

Lazy-Loading

Generell verwenden wir das Attribute loading="lazy" für Bilder. Das beinhaltet, dass vorzugsweise ein echtes <img /> verwendet wird. Unter anderem auch, weil <img /> Tags Suchmaschinen und Screen-Reader freundlich sind. Ein Lazy-Loading für CSS-Hintergrundbilder ist derzeit nicht verfügbar, wohl aber für das <img />, welches die CSS Klasse loaded erhält, sobald der Browser es vollsändig geladen hat. Siehe dazu auch lazyload.js. Verwendet wird es zum Beispiel um eine unscharfe Minatur des Bildes als Preload Platzhalter mit dem letztlichen Motiv auszutauschen. Ein Anwendungsbeispiel daüfer findest sich im banner.module.

Raster

Das Theme-Raster basiert auf Bootstrap. Das HubSpot Raster ist dem Bootstrap Raster angeglichen. Wenn Möglich sollten die durch Bootstrap verfügbaren Raster und Felxbox Klassen verwendet werden. Für weitere information siehe Bootstrap Dokumentation, oder folgende CSS Dateien: _grid_boostrap.css und _grid_hubspot.css. Für ein seperates Print Layout kann die Klasse row-print, sowie col-(1-12)-print verwendet werden.

Breakpoints

Media-Queries im CSS, sowie im JS werden über die HubL Syntax verwendet. Die Einstellung der Breakpoints erfolgt über die fields.css. Es werden Mobile, Tablet, Desktop und Widescreen unterschieden. Neben den untern stehenden Queries können zusätzlich die Bedingungen print und screen, sowie die Einschränkung {{ landscape }} und {{ portrait }} verwendet werden.

Das equivalent in JavaScript funktioniert wie folgend, siehe dazu auch base.html.

Container

Das Bootstrap Raster unterstützt mehere Media-Querie gebundene Container Laufweiten. In der Regel wir aber nur eine Container Breite, angegben in max-width, verwendet. Wenn dies nicht zutrifft ist die container_width mit 0 (Zero) zu definieren. Und die einzelen Querie-Laufweiten zu spezifizieren.

Nachstehend das Beispiel einer dynamischischen Laufweite auf Basis der Breakpoints. Es können aber auch statische Zahlenwerte definiert werden.

Language

Das Theme verfügbt über eine Sprachweiche und Sprachdateien, siehe lang.html. In den Modulen über die lang Variable erreichbar. Das jeweilige Sprachobjekt ist in JavaScript über window.lang verwendbar. Die Dateien liegen in einem gesonderten Ordner. Unterstützt werden zur zeit Deutsch und Englisch. Bei neuen Entwicklungen ist stehts die Mehrsprachigkeit einzuhalten. Das gilt auch für die Verarbeitung von Datumsangaben und Währungen.

Sollten Texte, Begriffe oder Links in einer anderen Sprache verwendet werden als die Sprache in welcher die Seite ausgewiesen ist. So sind solche Text, Begriffe oder Links mit folgenden HTML Attributen zu versehen.

Print

Es stehen diverse Klassen zu Steuerung der Druckansicht zur Verfügung. Diese befinden sich in der _print.css Datei. Diese ist eine globale Helfer-Datei, die Klassen daraus können verwendet werden. Sie ist nicht der Ort wo man Modul-Stylsheets hinterlegt. Die Druck-Optimierung der einzelnen Module ist in den Modulen vorzunehmen.

Verwendet werden kann ein Print-Raster, dazu .row-print und .col-print-xy als Klassennamen benutzen.
Das Anzeigen und Ausblenden von Elementen funktioniert mit .d-print oder .no-print .

Die verbindlichste Darstellung für spätere Seitenausdrucke im Browser erhält man mit folgenden Einstellungen. Viewport auf A4 = 595 x 842 px Bildschirm-Auflösung. Das entspricht A4 = 2480 x 3508 px Durck-Auflösung. Mit der Tastenkombination Strg+Shift+P und dem Konsolen-Befehl Rendering Emulate CSS print media type werden die Media-Querie @print Stylesheets im Chrome-Browser simuliert.

Sort & Filter

Frontend seitiges Suchen und Filter erfolgt bitte mit der Bibliothek von isotope.metafizzy.co. Wir besitzen eine komerzielle Lizens für die Bibliothek, welche den Einsatz bei allen Kunden abdeckt. Am einfachsten ist das Filtern mit Klassennamen.

Das Filtern im Backend kann über Query-Parameter erfolgen. Dazu wird ein Parameter an die URL gehängt und die Seite neu geladen. Über HubL Kann der Paramter als Kriterium für eine HubL Such- und Filter Funktion dienen. Entsprechende Helfer-Funktionen stehen in JavaScript, siehe _helper.js, und auch als Macro in HubL zur Verfügung, siehe fields.html.

HubDB Datenbanken lassen sich ebenfalls über Query-Parameter Filtern. Zudem lassen sich diese über ein XHR-Request öffentlich abrufen. Siehe dazu auch HubSpot API Dokumentation.

Module

Die Standard Module im Theme folgen immer dem gleichen Schema. Ersichtlich im _vorlage.module. Das Schema ist zu berücksichtigen. Bei neuen Modulen, welche in das Theme aufgenommen werden muss folgendes erfüllt sein. Die nachstehende Auflistung dient auch zur Orientierung für ein internes Code-Review und als Qualitätskriterium für das Testen der eigenen Arbeit.

• Schema ist eingehalten, Kommentare sind soweit erfoderlich vorhanden und der Quellcode wurde ordentlich formatiert, strukturiert und optimiert.
• Die Datei-Struktur ist stimmig, HTML5-Vailidierung wurde bestanden, Best-Practice in der Programmierung und sinnvolle aber kurze Variablen-Namen.
• Feldbezeichnungen für den Redakteur sind einfach, nachvollziehbar und selbsterklärent bezeichnet.
• Tastatur-Support für die barrierefreie Bedienung ist gegeben. Bitte hierzu wie bei anderen Modulen eine extra xy-keyboard Klasse im Script-Teil verwenden.
• No-Script Fallback. Die Seite und das Modul muss auch ohne JavaScript bedienbar bleiben.
• Barrierefreiheit. In Form von ARIA-Attributen und HTML-Elementen.
• Mirodata nach schema.org. Für die SEO-Optimierung und Suchmaschinenfreundlichkeit.
• Verwendung von Theme-CSS-Klassen, Theme-MediaQueries und Globalen-Variablen.
• Responsive Optimierung. Für Desktop, Mobile und Print Darstellung.
• Es dürfen keine HubSpot Warnungen oder Fehler im Design-Manager erscheinen.
• Unterstützung für Mehrsprachigkeit, unter Verwendung von HubSpot oder unseren Sprachdateien.
• Child-Theme-Support. Das schließt die Unabhängigkeit von HubSpot-Account spezifischen Ressourcen ein, welche zu Fehlern nach dem Kopieren in andere Accounts führen können. Zum Beispiel Verknüpfungen zu dem HubSpot Datei-Manager oder anderen HubSpot Inhalten als vordefinierte Feld-Belegung, welche sich nicht im Theme Verzeichnis befinden. Es schließt auch die Verwendung von realtiven Pfaden ein, sonst würden im Child-Theme die falschen Dateien gladen.

Address

Als Bestandteil der semantischen Elemente für Suchmaschinen wurde das address.module entwickelt. Abhängigkeiten zu anderen Microdata Elementen sind zu beachten. In der Regel ist es Teil der footer.html. Im Standard Betrieb wird die Adresse aus den HubSpot System-Einstellungen herangezogen. Um aber auch mehrere Child-Theme Designs zu unterstützen, kann eine abweichende Adresse manuell eingetragen werden.

Copyright

Ein Micro-Modul, das über {{ today()|datetimeformat('%Y') }} die Jahreszahl dynamisch setzt. Im Zusammenahng des Child-Theme Supports können abweichende Firmen angeben werden. Ansonsten wird die in den HubSpot Account Einstellungen hinterlegte Firmenbezeichnung verwendet. Siehe auch direkt das copyright.module.

Favorites

Kern des favorites.module ist das Javascript, welches im localstorage die über das love_and_share() Macro gewählten Elemente speichert. Damit das Macro korrekt arbeitet, muss es sich um ein vollständiges Seiten-Objekt handeln. Das gespeicherte Objekt, kann als Liste ausgegeben werden. Dafür stehen zwei JS-Templates, erzeugt aus dem article.module und dem lineitem.module, zur Verfügung. Das Modul beherbergt gleichzeitig auch die Schaltfläche für die Navigation. Es erfolgt kein Tracking über die Favorieten der Besucher, da aber der localstorage verwendet wird fällt das Modul in die Kategorie "funktionale Cookies".

Lang-Switch

Unser Theme kommt mit einem eigenen Sprachwechsler. Das lang_swith.module erlaubt uns während der Entwicklung mit einem Demo-Sprachobjekt zu arbeiten. Und gibt uns mehr Kompetenz bei der Gestaltung und Erscheinung in der Navigation oder anderer Stelle. Damit der Sprachwechsler sauber arbeitet ist in der lang lang.html die Sprache zu definieren, sowie die der Sprache zugeordneten Übersetzungsdateien anzulegen. Siehe auch Abschintt language der Dokumentation.

Login

Das login.module gehört zu den Membership Funktionalitäten der HubSpot Enterprice Edition. Es kann als Navigations-Element mit Dropout oder direkt auf der Seite eingebunden werden. Entgegen dem Standard Element von HubSpot, bietet unser Login weiter Möglichkeiten der Personalisierung an. Auch kann unser Modul, zwischen log-in und log-out Status unterscheiden. Zudem wird die von Browsern erwartete auto-complete Funktion für Passwort und Username ergänzt.

Totop

Das Scroll-To-Top Modul, kurz totop.module befördert den Besucher zum Seitenanfang. Das Icon lässt sich im Modul einstellen, die Farbgebung über CSS konfigurieren. Konventionelle Position ist unten rechts. Der Button erscheint erst ab einer bestimmten Scroll-Tiefe und verwendet das _scrollto.js Skript.

Search

Die Seitensuche ist mit dem search.module aufrufbar. Es basiert auf dem gleichnamigen HubSpot Modul. Im Modul können die Bereiche Webseite, Blog, Landing-Page und KnowloageBase als Suchoption gewählt werden. Die Suche selbst funktioniert über ein XHR-Request, die Aufschlüsselung erfolgt über die Sucherergebnisseite, einstellbar im HubSpot Backend. Überschriften, Meta-Description und Seiten-Titel werden automatisch in den Suchindex aufgenommen. Zusätzlich lassen sich Inhalte über die Klasse .hs-search-keyword indexieren.

Share

Das share.module teilt die Seiten auf denen es plaziert ist mit Sozialen-Plattformen. Dazu wird die jeweilige Plattform Share-API benutzt um eine Query-Parameter URL zu generieren und ein Post mit dem Link, Titel und Kurztext der Seite abzusetzen. Im CSS-Code sind die Farben der Plattformen mit hinterlegt und können bei Bedarf verwendet werden.

Socialmedia

Das socialmedia.module ist ein lokales Modul. Es nutzt das {{ icon("name") }} Macro der fields.html um global einheitliche Picktogramme der Social-Media Plattformen auszugeben. Aleternativ kann auch die fontawesome.com Syntax <i class="fa fa-name"></i> benutzt werden. Die Verlinkung erfolgt im global Content Editor von HubSpot. Die Links zählen als sameAs Referenz zu Microdata-Satz der Firmen-Adresse. Die Farben der Plattformen sind optional im CSS hinterlegt und können auch für das share.module oder person.module verwendet werden. Es sind zwei Varianten vorhanden: Horizontal und Vertikal.

Für das E-Mail Modul mit Social-Media-Icons sind PNGs mit transparenten Hintergrund aus der Datei-Ablage zu verwenden.

Trademark

Mit dem trademark.module wird das primäre Seiten Logo bezeichnet. Das Module wurde speziell für inline SVG Logos, responsive Logos und Child-Theme Logos entwickelt. Es deckt die Verwendung der HubSpot-Website Logo Einstellung aus dem Backend ab. Sowie die Verwendung eines Bildes aus dem Datei-Manager. Oder eben die Verwendung einer HTML-Schablone. Die aktuelle Schablone zeigt den komplexesten Anwendungsfall. Sie kann ohne Rücksicht mit dem inline SVG-Code des Kunden überschireben werden. In jedem Fall wird das Logo als OpenGraph <meta/> Tag dem Webseiten <head/> ergänzt.

Headline

Aufgrund der steigenden Anforderungen an Überschriften wurde das headline.module entwickelt. Es bietet weitereichendere Einstellungen als die Verwendung von <h1/> bis <h6/>. So kann zwischen semantischer und visueller Überschrift unterschieden werden. Es kann eine Hintergrund Auffüllung erfolgen und einzelne oder meherere Wörter hervorgehoben werden. Siehe nachstehende Beispiele.

Button

Es gibt vier Standard Button. Diese können über das button.module konfiguriert werden. Die Klassennamen für die Buttons lauten wie unten stehend. Es kann auch die Klasse .no-button verwendet werden, um zum Beispiel ein semantischen Button wie in Text-Link erscheinen zu lassen. Beim erstellen von neuen Buttons Designs, ist ebenfalls ein CTA zu erstellen. Das geht über Kopieren der kompilierten Stylsheets aus der "Ausgabeanzeige" in den CTA. Bedacht werden sollte auch die Anpassung von Schaltflächen in E-Mail Vorlagen. Mögliche weitere Fälle können die Schaltflächen im tabs.module und der Submit-Button im form.module sein.

Nicht jede der folgenden Darstellung ist ein verbindlicher Anwendungsfall. Ob auf farbigen oder dunkelen Hintergrund ist stets Context und Design abhängig.

Button Group

Eine Erweiterung des Standard Button, stellt das button_group.module da. Es verfügt über die Option einer horizotalen und vertikalen Ausrichtung. Die vier verfügbaren Button Designs werden untersützt. Nachstehend ein Beispiel für das Modul.

Bitte beachte, dass ein Button eine semantisch definierte Funktion in HTML hat. Es sind keine Link-Elemente! Ein Button steuert in der Regel eine Aktion auf der Seite. Die Aktion verwendet in der Regel JavaScript.

Divider

Die klassische <hr/> Line. Als divider.module auch für den DnD-Editor nutzbar. Der Unterschied zum Richtext Linien-Element besteht in der Ergänzung eines Ornaments bzw. Schriftzugs auf der Linie. Ansonsten ist es schlicht eine <hr/> Linie.

Tooltip

Das tooltip.module ist ein seperater Wrapper für das HTML <pre/> Element, welches auch direkt als Formatierungselement dem Redakteur im Rich-Text zur Verfügung steht. Es eröffnet die Möglichkeit wichtige Information hervorzuheben oder spezielle Informationen aus dem regulären Textfluss herraus zu stellen. Gestaltungen hier im Modul übertragen sich auf alle RichText <pre/> Elemente, so auch für den Blog. Es steht nur eine Gestaltung zur Verfügung! Das Modul ist nicht mit dem notifications.module zu verwechseln.

Picture

In unserem Theme gibt es das picture.module. Es ist mit dem HTML5 <figure/> Element erstellt. Unterstüzt wird das Microdata Format für Suchmaschinen. Optionen für die Ausgabe der Bilder stehen in Form von Seitenverhältnis zu Verfügung. Siehe dazu den Abschnitt aspect-ratio der Dokumentation. Weiter kann die Ausrichtung innerhalb des Bildrahmens festgelegt werden. Die Einstellungen können seperat für Desktop und Mobile getroffen werden. Ein Bild-Titel und eine Bild-Beschreibung können ebenfalls ergänzt werden.

Richtext

Neben dem HubSpot Rich-Text Editor, welcher inline Stylsheets schreibt, gibt es unsere Variante des richtext.module. Dieser stellt ein Wrapper zur Verfügung, welcher erlaubt eigene Schriftschnitte zu definieren und dabei Theme konform Mobile, Desktop und Print unterscheiden zu können. Es können damit Kunstschriften und Sonderformatierungen realisiert werden, oder die Theme Schriftschnitte angewendet werden. Überschreibung der Formattierung mit Inliine-Stylesheets ist weiterhin möglich.

Quotations (Zitate)

Für Zitate gibt es das quotations.module Modul. Es kann auch indirekt im Rich-Text über die <blockquote/> Formatierung angewendet werden. Allerdings bietet das Modul bei direkter Verwendung die Möglichkeit den Autor auszuweisen und auf die Quelle zu verlinken. Die Anführungszeichen sind SVG Hintergrund Grafiken und lassen sich in der Farbe über CSS formatieren. Es stehen runde und eckige Anführungsstichte zur Verfügung.

Notification

Mit dem notification.module erzeugen wir Push-Meldungen. Das Modul erstellt dafür ein Container und fügt dort die Meldungen an, sowie blendet sie nach kurzer Zeit automatisch wieder aus. Die Farben werden in der fields.css definiert. Als Meldungen verfügbar sind Typ message, alert, warning, okay.

Die Meldungen können über JavaScript erzeugt werden. Natürlich kann das Markup der Meldungen auch als reines HTML in anderen Modulen oder im Template eingesetzt werden, um ein optisches Element in Erscheindung der Notification einzubinden.

Pagination

Das pagination.module ist ein Modul für den Tempalte-Typ Blog-Inxdex. Es besteht aus einem Vor- und Zurück Button, sowie eine bezifferte Teil-Navigation für den Seiten-Index. Funktionsvorraussetzung neben dem Template ist die Anzahl der Elemente pro Seite, welche in den HubSpot-Blog Einstellungen festgelegt wird.

Readtime

Das readtime.module ist ein Micro-Modul, für die Berechnung der Lesezeit eines Blog Artikels. Dazu wird die Zeichen-Menge im Text-Körper des Beitrags kalkuliert. Da diese Methode relativ unpräzise ist und nur auf der Blog-Seite selbst funktioniert gibt es die Möglichkeit die Lesezeit manuel einzugeben. In manchen Fällen steht auch kein Text-Körper für die Berechnung zur verfügung, in diesem Fall wird die Lesezeit über Javascript kalkuliert. Die mindest Lesezeit ist auf eine Minute beschränkt.

Spacer

Das spacer.module ist in erster Linie ein None-DnD Modul, denn der HubSpot DnD-Editor hat vielfach eigene Einstellungen für Abstände. Wir versuchen einheitliche Abstände in den Templates mit Variablen zu verwenden. Auf eben diesen Variablen baut das spacer.module auf. Es erlaubt darüber hinaus eigene Abstände zu definieren. Mit der Option custom können Desktop, Mobile und Print eingestellt werden. Die Visiaulisierung des Abstands findet nur in der Modul-Vorschau statt. Der Abstand sollte stets ein vielfaches bzw. teilbares des gutter Werts sein. Die derzeitige Konfiguration für small, medium und large aus der fields.css nachstehend visualisiert:

Article

Eine Seiten-Vorschau in Form einer Karte, als einzelnes Element auch in Iterationsschleife anwendbar. Das article.module kann als Teaser für weitere Artikel dienen oder als Listenelement auf Themen- und Übersichtsseiten. Das Modul kann über eine Seiten ID oder das content Objekt der Seite bespielt werden. Bei hoher Stückzahl ist zu empfehlen die IDs zuvor gebündelt abzufragen und via content zu übergeben, da die HubL Funktion content_by_id(...) limitiert ist. Siehe dazu content_by_ids([...]) der HubSpot Dokumentation.

Im article.module selber können neben, Title, Beschreibung und Bild auch die Tags einer Blog-Seite angezeigt werden. Weiteres Feature ist das love_and_share( page ) Macro. Welches erlaubt den Artikel über Soziale Medien zu teilen oder im localstorage des Users abzuspeichern und später über ein JavaScript Template des Articels auf der Favorits-Seite auszugeben. Siehe dazu Macro in der fields.html. Oder auch das favorites.module.

Article-Slider

Verfügbare Variante des article.module mit Slider. Auch mit Möglichkeit den Slider nur für Mobile Auflösungen oder ab einer bestimmten Anzahl an Elementen anzuwenden. Als Slider verwenden wir Splide.js von Naotoshi Fujita, siehe auch splidejs.com.

Company Logos

Für die Auflistung von Referenzen oder Partner-Firmen Logos gibt es das company_logos.module. Angelegt als globales Modul, ist der Inhalt für alle Seiten gleich. Je nach Projekt Anforderung muss eine lokale Variante erstellt werden. Die Code Basis ist ein CSS-Grid. Es empfiehlt sich hier alle Logos zuvor im gleichen Seitenverhältnis zueinander aufzubereiten. Damit der Graustufen zu Farbe Hover-Effekt funktioniert ist ein Pixel Format mit Transparenz erfoderlich.

Card

Das card.module erweitert die Artikel um ein CTA-Karten Element. In der Regel in werbender Funktion. Um zum Beispiel bei einer Aufzählung von Produkten, als letztes Element auf den Download des Produkt-Katalog hinzuweisen. Form und Größe des Elements passen sich den Listen-Raster an, hier nur beispielhaft angedeuted.

Code

Quellcode Darstellungen können über das code.module erreicht werden. Das Syntax-Highlight wird mit der Bibliothek prismjs.com erzeugt. Aktuell werden CSS, PHP, HTML und JSON unterstützt. Die Packete für JINJA und JS hatten ein Fehler zur Folge, daher zur Zeit keine Unterstützung für dise beiden Programmiersprachen.

Um Code für das Modul zu schreiben, sind HTML Entitätsreferenzen erfoderlich. Siehe dazu freeformatter.com.
Zum Beispiel bei HTML &lt; und &gt; für <tag/>. Oder bei JINJA &rcub; und &lcub; für {% set a = b %}.

Countdown

Das countdown.module berechnet wie der Name sagt ein Zählwerk zu einem bestimmten Datum. Es kann ein zweites Dateum angeben werden, um zum Beispiel für die Dauer während eines Events eine andere Information auszuspielen. Nach Ablauf beginnt das Zählwerk aufwärts zu zählen. Hier besteht die Möglichkeit wiederum ein anderen Inhalt auszugeben. Ein Anwendungsfall ist zum Beispiel ein Webinar. Das an einem bestimmten Zeitpunkt startet. Ab dann Live-Übertragen wird. Und später als Aufzeichnung zur Verfügung steht.

Download

Ein semantisches Modul um herunterladbare Inhalte zur Verfügung zu stellen. Im downlaod.module können mehrere Dateien verknüpft werden. Dabei wird der Datei-Pfad CORS gerecht aufbereiet. Ein Teil des Moduls besteht aus dem accordion.module und beherbergt Detail Informationen, besteht aus Richtext und optionalem Bild Element.

Galerie

Das galerie.module ist ein CSS-Raster, welches als Link Element verwendet werden kann, oder mit der Option einer Lightbox anstelle des Link. Für die Gestaltung steht die Darstellungsoption im full_width Modus zur Verfügung. Die einzelnen Bilder können in der Größe des Rasters angepasst werden. Wählbar sind 2x Felder Breit , 2x Felder Hoch oder 4x Felder Groß.

Iconbox

Das iconbox.module ist eine einfache Text plus Icon kombination. Es ist als DnD-Micro Modul konzipiert. Weiter Ausführungen dieses Moduls, wie Varianten mit Boxen als Iteration oder Boxen mit Bild als Icon-Quelle sind dem Kunden-Projekt vorbehalten und nicht Teil des Moduls.

Lineitem

Als Lineitem bezeichnet wird ein Warenkorb Element. In Anlehnung als solches entwickelt hat es in unserem Theme die Funktion eines alternativen Elements für Listenasichten und Übersichtsseiten. Mit Möglichkeit auf eine Detailseite zu verlinken. Strukturell ist das lineitem.module vergleichbar mit dem article.module. Als solches wird es als Template Option vom favorits.module verwendet. Es kann aber auch als Element in Blog-Listen Templates oder anderweitig als Ersatz für das Artikle Element verwendet werden. Bitte dazu auch den Abschnitt der Dokumentation über das Artikle Element lesen.

Person Card

Als Element für eine Team Übersichtsseite, als Autor unter einem Blog Artikel oder als Kontak für eine Stellenauschreibung. Das person.module ist vielseitig einsetzbar. Die Karten sind Responsiv und können gespiegelt werden. Als Inhalt bietet es ein Lichtbild, die Berufsbezeichnung und die gängigen Kontakt Optionen, wie E-Mail, Telefon und Social-Media. Diese Daten können von der Suchmaschine gelesen werden. Wir Empfehlen dem Kunden die Zustimmung zur Veröffentlichung von den Personen einzuholen.

Pricing-Cards

Der primäre Einsatz des pricing_cards.module liegt in der Ausgabe von Produkten aus der HubSpot-Produkt Datenbank. Diese wird vom Deal-Hub verwendet für Angbebote, Rechnungen und Shopfunktionen. Es können Abweichende Produkte auch manuell definiert werden. Das Layout dieses Moduls sollte sich an den Standard-Eigenschaften aus der HubSpot-Produkt-Datenbank richten. Als Features steht das hervorheben einer bestimmten Karte zur Verfügung. Das Link-Ziel für jedes Element kann unabhängig bestimmt werden. Im Fall von Mehrsprachigkeit ist die Währung zu berücksichtigen, zum Beispiel in HubSpot Standard als Dollar und Euro Eigenschaft verfügbar. Ohne die Angabe einer Summe wird von einem kostenlosen Produkt ausgegangen.

Suggestions

Das suggestions.module lässt einen den Blog, die dazu gehörigen Blog-Post-Tags und ein Zeitraum wählen. Darauf basierend wird eine Liste von gefunden Blog-Artikeln als Vorschlag zurück gegeben. Die aktuelle im Browser aufgerufene Seite ist nicht Teil des Ergebnis. Die Treffer werden durch den Popularitäts-Wert der Seite berechnet. Einem von HubSpot entwickelten Algorythmus. Das Modul kann auf jeder Seite eingesetzt werden. Vorzugsweise wird es als Teaser für weitere Beiträge im Blog eingesetzt.

Timeline

Die Realisierung von einem Zeitstrahl erfolgt mit dem timeline.module. Es ordnet im Reisverschluß Elemente mit Datum, Icon und Textbox aus. Die Mobile-Ansicht ordnet die Elemente linear untereinander. Die Mobile-Ansicht kann somit auch zur Auflistung eines Veranstaltungsprogramms oder zur Visualisierung einer Agenda genutzt werden. Bezüglich des Datums stehen verschiedene Ausgabe Formatierung zu Wahl, zum Beispiel, Jahreszahl, Uhrzeit oder Datum. Es werden deutsche und englische Formatierung unterstützt.

Historiography

Eine echte Alternative zum timeline.module bietet das historiography.module. Es baut auf dem splidejs.com Slider auf und zeigt einen horizontale bewegbaren Zeitstrahl an. Aktuell werden ganze Jahreszahlen, Titel und Beschriftung unterstützt, sowie diverse CSS-Gestaltungsoptionen.

Twinbox

Das twinbox.module ist ein flexiebles Modul für die Darstellung von zweispaltigen Inhalten. Das kann von einfachen Text, über Bild-Text Kombinationen oder auch Bild-Formular Kombinationen reichen. Als Modi stehen full-width und boxed zur Verfügung. Eine optionale Farbgebung kann im Mobul für jede Spalte einzeln getroffen werden. Besonderheit in diesem Modul ist, dass es die Spieglung erlaubt, responsive Bild vor Text plaziert uns stehts die Inhalte Raster konform positioniert. Es stellt mit Abstand das komplexiste Modul im Theme da, also Vorsicht bei Modifikationen.

Accordion

Das accordion.module kommt im Standard mit einem Richtext für den Inhaltsbereich. Es verfügt über zwei Boolean Einstellungen, zum einen auto_closing von Tabs, welche erlaubt nur ein Tab gleichzeitig zu öffnen. Und zum anderen für lange Inhalte eine scroll_to_top Hilfe, welche den User zum Anfang des Inhalts navigiert. Tastatur-Support, No-Script Fallback und Barrierefreiheit sind gegeben. Daher bitte neue Varianten für Kunden stehts auf Code-Basis dieses Akkordions entwickeln.

Infographic

Als erweiterte Variante des picture.module erfüllt das infographic.module den Zweck einer interaktiven Bildbeschriftung. Dabei können Bezifferte-Punkte auf dem Bild platziert werden, welche automatisch in einer Legende neben dem Bild erscheinen. Bei Interaktion mit der Liste, wird der Punkt auf dem Bild hervorgehoben. Bei Interaktion mit dem Punkt, wird ein Popover mit der Beschriftung eingeblendet. Die Position des Popover Fensters kann links, rechts, oben oder unten sein. Je nach dem was am geeignetsten erscheint.

Leaflet

Mit der Bibliothek von leaflet.com erzeugen wir unsere Karten. Das gleichnamige leaflet.module verwendet Geo-Koordinaten, angegeben in Latitude und Longitude, um daraus Marker Punkte auf der Karte zu plazieren. Die Geo-Koordinaten eines Standortes lassen sich über HubDB bereitstellen oder manuell von google.maps kopieren. Es besteht die Option dem Marker ein Popup mit Html-Code beizufügen. Der Marker selbst ist verfügbar als inline SVG und kann via fill eingefärbt werden. Es kann aber auch auf eine Grafik zurückgegrifen werden. Im Modul steht eine Liste von OSM-Kartenmaterial-Servern zur Auswahl; Stand 2021. Weiteres Kartenmaterial (Map-Tile-Images) kann über die Seite: leaflet-extras.github.io recherchiert werden.

Wichtig zu beachten ist, dass Karten-Martial-Server mit ihrem Standort relevant für die Datenschutzbestimmung der EU sind. Dahingehend muss der Kunde informiert werden, bzw. das Kartenmaterial ausgewählt werden. Eine DSGVO Prüfung auf funktionale Cookies, mit Verweis auf die Consent-Einstellungen, ist im Modul integriert.

Tabs

Wenn Inhalte in mehrere Bereiche untergliedert werden sollen, dann bietet sich das tabs.module an. Wie bei allen Theme Modulen ist es für Barrierefreiheit und No-Script optimiert. Aktuell als Standard-Inhalt mit Rich-Text, kann des Markup auch anderweitig verwendet werden um koplexere Inhalte zu gruppieren.

Popup

Das popup.module setzt sich aus dem Button zum öffnen des Popups und dem Modal mit Overlay zusammen. Als Auswahl für den Inhalt des Popup steht ein Rich-Text, ein Formular und ein Video Feld bereit.

Dropdown

Das dropdown.module ist nicht für die Navigation oder Formulare gedacht. Es ist ein Menu für die Sortierung und Filterung oder die Selektion von Optionen. Zum bei Beispiel für Listen Seiten mit Blog-Artikelen, nach Datum oder Alphabetisch.

Meeting

Die Verwendung des meeting.module erfordert die Verknüpfung eines Kalenders. Kalendarische Termine können nur vom Benutzer selbst oder einem Super-Admin ertellt werden. Das Modul ist eine Kopie des HubSpot Meeting Features um dieses als iFrame in eine Seite einbetten zu können. Das iFrame selber lässt sich minimal mit den HubSpot-Backend und während des erstellen des Meetings gestalten. Mehr Spielraum hat man bei der Gestaltung des Assemble drumherum, insbesondere wenn man das iFrame in die Mobile Darstellung zwingt.

Advice

Mit dem advice.module steht ein Sticky-Banner Element zur Verfügung, dass erscheint, wenn die Seite gescrollt wird. Beim erreichen der Zielposition fügt sich der Banner nahtlos in den Seiteninhalt ein. Dazu wird an der Zielposition ein Platzhalter Element erzeugt. Aus gründen der Benutzfreundlichkeit ist diese Funktion nur für Desktop Auflösungen verfügbar. Ohne JavaScript oder Mobile Auflösung verhält sich das Element wie ein gewöhnlicher full-width Banner. Als Standard Inhalt steht ein Richtext Feld zur Verfügung. Behalte im Hinterkopf, dass an ein Richtext Feld auch reines HTML übergeben werden kann.

Banner

Hero-Banner für Bilder und Hintergrund Videos. Funktioniert als full-width oder boxed Banner. Es kann zwischen einem seperaten Bild für Mobile und einem für Desktop unterschieden werden. In der Regel Hoch- zu Querformat. Die Besonderheit liegt darin, dass zunächst eine unscharfe Miniatur des letztlichen Bildes geladen und überblendet wird, was die Ladegeschwindigkeit steigert. Bei der Option Video ist darauf zu achten, dass es sich um ein Web Format wie MP4 handlet. Bitte auch ein Poster, erster Frame des Videos, als Fallback und Preload abspeichern. Weitere Einstelleungen beziehen sich auf diverse Seitenverhältnisse. Ein Overlay zum aufhellen oder abduckeln des Motives. Siehe auch banner.module und zugehörige CSS Datei.

Linkboxes

Diese Boxen verfügen über eine Versatz Option, um sie nach oben oder unten über ein Banner zu verlagern. Sie bieten eine Möglichkeit das Banner Element mit deutlich sichtbaren Call-To-Action Schaltflächen zu erweitern. Verwendung, Gestaltung und Detail-Einstellungen bitte direkt dem linkboxes.module entnehmen.

Mockup

Für die Präsentation von Produkten oder Angeboten existiert das mockup.module. Es stellt ein full-width Banner Element mit Option auf ein Mockup und Richtext zur Verfügung. Verwendung meißt im Content-Bereich der Seite als Einschub, Auflockerung oder Handlungsanweisung.

Anker

Das anchor.module ist ein universelles Element um eine Sprungpunkte auf der Seite zu platzieren. Eine vergleichsweise Option steht von HubSpot im Richttext Editor zur Verfügung. Die Aufgabe dieses Modul liegt im Bereich der DnD Funktion und erlaubt eine zielgerichtete Ansteuerung als im Richttext möglich. Ergänzt wir das Modul durch das _scrollto.js Script, welches für die Bewegungsanimation sorgt.

Anker Menü

Als Navigation für Wiki-Einträge in der Sidebar oder zur Übersicht in Blog Artikeln. Das anchor_menu.module spiegelt immer die aktuell sichtbaren Sprungmarken wieder. Dabei wird die Sprungmarke, welche am nächsten ist, gesondert hervorgehoben. So behält der Benutzer alles im Überblick und weiß genau wo er auf der Seite ist, was noch kommt und bereits gesichtet wurde.

Mandatory

Hinter dem Namen mandatory.module verbirgt sich das globale Footer-Menü mit den Pflichangaben zur Webseite. Das schließt in der Regel das Impressum, die Datenschutzseite, Allgemeine-Geschäftsbedingungen, Kontaktseite und Consent-Einstellungen ein.

Megamenu

Das megamenu.module baut auf dem navigation.module auf. Es kommt nicht ohne diese Basis aus. Klassennamen, Formatierung und JavaScript werden lediglich um die Mega-Funktion mit diesem Modul erweitert. Das bedeuted es können beide Menüs auf der Webseite in unterschiedlichen Templates verwendet werden. Es bietet sich an beide Module wie ein gemeinsames zu behandeln. Das heißt erst das Navigations Modul zu gestalten und dann die Mega-Element mit dem Megamenü aufzubauen. Bitte hier insbesondere die responsive Darstellung der Mega-Elemente für die Mobile-Ausgabe prüfen.

Megamenü bezeichnet hier, dass man das Menü aus den Template-Objekten der verlinkten Seiten konstruiert und dazu eigene Redakteur Felder ergänzen kann. Damit stehen dem Entwickler deutlich mehr Informationen über die Zielseite und die Gestaltung des Menüeintrags zur Verfügung, als aus dem HubSpot Backend Menü-Obejkt entnehmbar sind.

Navigation

Das navigation.module ist ein globales Module. Speziel optimiert für SEO Freundlichkeit und Barrierefreiheit, bietet es eine Quellcode offene Lösung für die Gestaltung der Seiten-Navigation, entgegen dem HubSpot Menü-Modul. Die CSS-Klassen Bezeichnungen sind an der HubSpot Standard Navigation orientiert. Als Datenquelle dienen die Menü-Objekte aus dem HubSpot Backend.

Breadcrumb

Indikator für die Position innerhalb der Webseite, als Navigationselement für den Besucher oder als Wegweiser für Suchmaschinen, dass breadcrumb.module ist ein Element erster Wahl für die Benutzerfreundlichkeit einer Webseite. Dabei werden drei Datenquellen source für die Erzeugung der Breadcrumb unterschieden. (1) Auf Basis der URL, was automatisch Funktioniert, aber beim Formatieren des Pfads hinzu Wörtnern eine gewisse Fehleranfälligkeit birgt. (2) Besser ist dann der Pfad auf Basis einer Iterations-Liste mit Links, die vom Redakteur für jede Seite angelegt werden muss. (3) Oder letzte Möglichkeit, ein eigenes Menü-Objekt in den HubSpot Einstellungen erstellen. Der aktuelle Pfad wird hierbei automatisch gewählt. Es sollte für jede existierende Seite, ein Eintrag vorhanden sein.

Simple-Menu

Mit dem simple_menu.module steht ein Menü zur Verfügung, da dass einfache HubSpot Menü nachbildet und erweitert. Das betrifft die Design-Möglichkeiten, die Menüführung und den CSS-Klassen. Eine alternative zum Simple-Menu steht in Form des button_group.module zur Verfügung. Diese Verhält sich ganz ähnlich, ist aber speziell für die Verwendung des Button-Layouts optimiert.

Sitemap

Mit dem sitemap.module steht ein XML-Parser auf JavaScript Basis zur Verfügung, welcher in Kombination mit einer XSL-Layout-Datei aufgerufen werden kann. Daraus wir ein Inhaltverzeichnis in Form eines Menü-Baums erzeugt. Das Modul kann alterntiv mit einem Menü-Objekt aus dem HubSpot Backend gespeist werden. Anwendung könnte zum Beispiel ein full-height Sidebar Menübaum sein, in Form eines Seiten-Index. Anmerkung zur Hinweis-Meldung, diese Erscheint nicht Live.

Topbar

Die Topbar ist in der Regel eine Teilvorlage (partial), sieh auch topbar.html, für Elemente wie den Sprachwechsler oder die Seitensuche. Manchmal kommt es aber vor, dass spezifische Funktionaliäten benötigt werden. Dafür gibt es das topbar.module. Hier können zum Beispiel direkte Kontakt informationen dem Adress Microdatan Satz ergänzt werden. Es kann ein zusätzliches Menü mit Links erzeugt werden. Oder eine zeitlich geplante Meldung auf der Webseite plaziert werden, wie zum Beispiel abwesenheits Notizen während des Betriebsurlaubs.

QR-Code

Mit dem quick_response.module steht ein auf JavaScript-Bibliothek basierter QR-Code Generator zur Verfügung. Neben der URL, lassen sich Größe, Fehlertoleranz, sowie Hintergrund- und Vorderundfarbe konfigurieren. Einsatzmöglichkeit ist bei Angebotensvorlagen (Quote-Templates) aus dem Deal-Hub gegeben. Denkbar sind auch Druckansichten, zB. von Jobangeboten.

Formular (async)

Mit dem form.module wird das Theme um den Form-Designer erweitert. Dieser bietet ein umfangreiches CSS Einstellungsprofil für die Gestaltung der HubSpot Formulare. Besonderes Augenmerk ist auf die Vielschichtigkeit der HubSpot Einstellungen gelegt und die Berücksichtigung von Sonderfällen, wie dem Membership Login oder der Abonnement-Verwaltung. Dazu gibt es JS-Optionen um Custom Dropdowns, Zahlenfelder oder Boolean-Checkboxen zu erzeugen.

Die asyncrone Variante form_async.module beschreibt das Absenden der Formular-Daten über ein XHR-Request. Dabei werden die Formular-Einseundungen abgefangen und im localstorage zwischen gespeichert, bis eine Internetverbindung aufgebaut ist. Bei bestehender Internetverbindung erfolgt die Einsendung syncron. Es ist aktuell kein Service-Worker verfügbar für ein funktionierendes Cache Managment. Ein offline Neuladen (page-refresh) der Seite ist ist nicht möglich. Eine Speicherung der Daten auf dem Gerät über den Zeitpunkt des Absendens findet nicht statt.

MultiStep Formular

Verwendet wird dieser spezielle Formular Typ mit dem multistep.module. Als MultiStep Formular bezeichnen wir die Manipulation des HubSpot Standard-Formulars über Javascript und Klassen ohne den DOM zu verändern, denn dies würde ein Fehler in der React-Komponente für die HubSpot Form validierung zur Folge haben. Zu beachten ist, dass das Multistep Script, das Einzige im Theme ist, welches als jQuery Plugin programmiert ist. Andere Module sind in Vanilla-JS geschrieben. Das Modul lädt automatisch jQuery, wenn es im Projekt nicht verwendet wird. Es besteht also bei Verwendung des Modules keine Notwendigkeit jQuery für das gesamte Projekt zu aktivieren.

Um aus einem gewöhnlichen Formular ein MultiStep Formular zu machen stehen zwei Methoden zur Auswahl, welche die Einteilung in Schritte steuert. Es kann auf Basis des Formular Rasters geschehen. Dann werden alle Elemente in einer Zeile in einem Step aufgeführt. Oder es kann bei komplexeren Formualen eine CSS-Klasse definiert werden, welche als Seperator dient. Die CSS-Klasse kann zum Beispiel ein Element sein, dass mit dem Richt-Text Editor im Formular eingebunden wird.

Die Validierung der einzelnen Schritte kann über eventListener erfolgen, siehe nachstehendes Code Beispiel:

Eine Validierung mit JavaScript im Fall der E-Mail Adresse könnte zum Beispiel so aussehen:

Table-Designer

Der Table-Designer oder auch table.module ist eine Frontend Ausgabe für die Daten-Tabellen der HubDB. Es ist spziell für Reponsive-Tabellen Darstellung, welche in einer gut lesbaren Tab-Anischt der Zellen erfolgt. Und der Ausgabe von globalen Daten-Blättern geeignet, welche zentral verwaltet werden sollen.

Neben umfangreichen Einstellungsmöglichkeiten im CSS Teil des Modules für die Gestaltung gibt es weitereichend Support für Mehrsprachkeit, in Form von Währung und Zeit-Formatierungen. Bilder und Video in Tabellen sind ehr ungewähnlich, können aber auch formatiert werden. Eine horizontale oder vertikale Darstellung kann im Modul aktiviert werden, sowie eine Option für die Feinjustierung der mobilen Tabellen-Darstellung.

Timetable

Die timetable.module baut auf dem table.module auf. Das bedeutet Stylsheets und responsive Verhalten werden über das Tablellen Modul bestimmt. Und im Timetable Modul überschrieben oder weiter verwendet. Die Besonderheit dieses Modul besteht darin, Segmente in der Tabelle periodisch zu Kennzeichnen. Dabei wird von einem zwölf Montas Kalender ausgegeangen. Unterstützt werden deutsche und Englische Beschriftung. Anwednung findet das Modul zum Beispiel bei geeigneten Zeitpunkten für den Urlaub. Als Datenquelle kann eine manuele Eingabe dienen oder eine entsprechend formatierte HubDB-Tabelle.

Chart

Visualisierung eines responsiven Balkendiagramms. Das chart.module ist Simpel gehalten. Es dient für einfache Daten-Visualisierung. Dabei kommt es ohne JavaScript aus bei gleichzeitiger Barrierefreiheit. Entwickelt um den Balast von großen Graph-Visualisierungs-Bibliotheken zu vermeiden, kann es in kleinen Projekten Anwendung finden. Sollte ein Kunde vermehrt Bedarf an Datenvisualisierungen haben, wären entsprechend Module unter hinzunahme einer JS-Bibliothek neu zu entwickeln.

Circle

Eine Visualisierungsoption für Zahlen und Daten ist das circle.module. Es ist vergleichsweise simpel gehalten, ähnlich wie das Balkendiagramm, aber mit Fokus auf den DnD-Editor. Das Modul bieten wir auch im HubSpot Marketplace an. Die Visualisierung und Animation erfolgt über ein SVG. Die Strichstärken und Farben können für jedes Element individuell durch den Redakteur vorgenommen werden. Die Animation der Kreise wird durch erscheinen des Elementes im Viewport ausgelöst. Es sind nur Prozent Werte von 0% bis 100% möglich.

Progress

Das progress.module verwendet das HTML5 <progress/> Element. Es kann für die Visualisierung von verschiedenen Daten verwendet werden.

Allgemein

Mit Extensions ist der Theme Ordner gemeint und die darin befindlichen Module. Diese sind unabhängig für sich funktionierende optionale Erweiterungen des Themes. Die Extensions werden im <head/> der Webseite eingebunden. Darunter fallen Preload-Schriftarten, aber auch Icon-Fonts. Oder Module wie der Blog-Tag-Designer, die Gestaltung des HubSpot Constent-Banners, Sprachsteuerung, austauschbare App- und Favicons oder erweitere OpenGraph Tags. Im Grunde alles das was nicht dem Theme Standard entspricht und optional als Mehrwert installiert werden kann. Wobei die Module die nicht vom Kunden benötigt werden, im Projekt entfernt werden können. Das geht weil sie eben keine Abhängigkeiten aufweisen! Ebenso können für den Kunden neue Extensions entwickelt werden. Erfüllen sie die Theme Kriterien, dürfen sie unter Zustimmung des Team in die Auswahl der für das Theme verfügbaren Extensions aufgebommen werden. Zum Beispiel wenn eine neue unter Open-Source Lizens stehende Schriftfamilie erstellt wurde. Beispiele hierfür sind das roboto.module und sourcesans.module.

Font-Awesome

Die Standart-Icon Font welche im Theme verwendet wird ist die Font-Awesome 5 Free. Hinweise zur Verwendung sind der fontawesome.com Dokumentation zu entnehmen. Die Wahl fiel auf die Font-Awesome, weil diese von HubSpot als Redakteur-Feld für die Einbettung von SVG-Icons bereitgestellt wird. Wir verwenden sie für die Standard-Icons wie Pfeile, aber auch für Module wie die Job-Benefits. Generel spricht nichts dagegen eine andere Icon-Font zu verwenden, jedoch sollte man, wenn man nicht gewillt ist, alle Icons zu überprüfen und Redakteur-Felder auszutauschen, bei dieser Icon-Font bleiben.

Consent Banner

Das consent.module ist eine CSS Schablone für die Gestaltung des HubSpot Cookie-Banners und Cookie-Consent-Managers. Eine realistische Vorschau kann auf einer publizierten Seite erfolgen mit ergänzen des Query-Parameter ?_hsPrivacyTest.

Consent Manager

Ebenfalls auf der consent.module Erweiterung baut die Gestaltung des Consent Managers auf. Dieser kann auf einer Live-Seite über den im Footer mandatory.module verankerten Link aufgerufen werden.

Favicon

Das favicon.module setzt sich aus drei Blöcken zusammen. Den App-Icons, dem Favicon und den Lade-Bildschirmen (Splash-Screens) bei Verwendung der Webseite als Schreibtisch- bzw. Desktop-Verknüpfung. Der verzicht auf App-Icons uns Splash-Screens ist möglich, es kann auch nur ein Favicon aus dem Datei-Manager gewählt werden. Es ist dabei ein globales Modul, die Inhalte gelten für alle Seiten, welche auf diesem Theme aufbauen. Zum Einsatz kommt das Modul, wenn unterschiedliche Child-Themes (Designs) beim Kunden verwendet werden. Zum Beispiel Tochter-Geseltschaften. Dann ist es nicht möglich über die HubSpot Backend Option unterschieldiche Favicon zu definieren. In dem Fall wird keines definiert und diese Erweiterung verwendet.

Die App-Icons und Splash-Screens können über den Datei-Manager verknüpft werden. Oder im favicon/files Ordner hochgeladern werden. Dort befinden sich bereits Datei-Vorlage für die Grafik, eine Kopie dieser liegt auch in der Entwicklung unter: app_icon_and_splash_screens.

Open-Graph

Das opengraph.module ergänzt voll automatisch <meta/> Angaben, welche in HubSpot fehlen. Darunter detailierte Angaben über das Feature-Image. Blog-Artikel und Blog-Autoren Seiten. Für weitere Informationen bitte die ogp.me Dokumentation nutzen. Das stärkste Feature diese Moduls besteht darin, ein Fallback für das Feature-Image definieren zu können. Und somit beim SEO-Check 100% für die Social-Media Kompatibilität zu erreichen.

Font-Face

Schriften im Theme zählen zu den Erweiterung (Extension). Weil die Einbindung dieser unabhänig vom Theme geschieht und geschehen muss! Anderenfalls müsste bei jedem Kunden an mehrern Stellen Dateien im Theme angepasst werden. Was undurchsichtige Verflechtungen und komplikationen beim Update-Vorgang bereiten kann. So ist nur ein Modul erforderlich, auch wenn das Erstellen zunächst mehr Arbeit erfodert, so ist es auf lange Sicht die saubere Lösung.

Eine Schrift Einbindung erfolgt kundenspezfisch oder als ganze Schrift-Familie. Dazu nutzen wir das font_face() Macro aus der fields.html. Die einzelnen Schriftschnitte werden vom Entwickler bereitgestellt. Das aktiveren eines Schriftschnittes erfolgt über eine Boolean Variable. Es wird für jede im Modul hinterlegte Schriftart ein CSS @font-face Eintrag mit zugehörigem <meta rel="preload" as="font" /> Tag erzeugt. In der Regel ist das WOFF oder WOFF2 Format ausreichend. Aber Vorsicht, manche Schriften sind nur für Bildschirm optimiert und haben keine Druck-Variante. Oder stellen für den Druck ein alternatives Format wie TTF bereit. Das so erstellte Font-Modul wird über die extension.html geladen. Und in der fields.css mit seinem Namen und möglichen Fallback System-Schriftarten angegeben.

Aktuell sind zwei vollwertige Schriftfamilien im Theme hinterlegt. Diese Module können als Vorlage für die Kunden Schriftart geklont und angepasst werden. Siehe dazu das robto.module oder sourcesans.module.