Anforderungen

Bitte stellen Sie sicher, dass Sie ein HubSpot-Konto haben, um dieses Thema zu verwenden. Falls nicht, können Sie unter unter diesem Link ein HubSpot-Konto erstellen.

HubSpot-Konto erstellen

Einrichtung

Sie können Ihr Thema entweder vom HubSpot Asset Marketplace oder als .zip-Datei installieren.

Vom HubSpot-Asset-Marktplatz

Wenn Sie das Theme vom HubSpot Asset Marketplace installieren, klicken Sie einfach auf die Schaltfläche Kostenlos installieren auf der Theme-Seite und folgen Sie dann den Anweisungen.

Aus .zip-Datei

Wenn Sie eine .zip-Datei Ihres HubSpot CMS-Theme haben, folgen Sie bitte den nachstehenden Schritten, um es in Ihrem Account zu installieren:

  1. Melden Sie sich bei Ihrem HubSpot-Konto an.
  2. Klicken Sie oben rechts auf das Symbol Einstellungen (sieht aus wie ein Zahnrad).
  3. Klicken Sie in der linken Seitenleiste auf Tools > Content > Themes.
  4. In der oberen rechten Ecke des Bildschirms sehen Sie die Schaltfläche Thema hochladen. Klicken Sie darauf und wählen Sie dann die Zip-Datei aus, die Sie haben.
  5. Melden Sie sich bei Ihrem HubSpot-Konto an.

Wenn Sie die Schritte erfolgreich abgeschlossen haben, sollten Sie das Slider-Thema und seine Vorlagen sehen, wenn Sie eine neue Seite erstellen.

Um mehr über die Theme-Installation zu erfahren, besuchen Sie bitte HubSpot Reference Docs.

HubSpot-Referenzdokumente besuchen
Bildschirmfoto_7

Start Pro: Auf und davon

Bildschirmfoto_1

Auf ein anderes Konto kopieren

Wählen Sie IhrenThemenordner aus und klicken Sie mitder rechten Maustaste, um eine Option anzuzeigen

Wählen Sie die Option = In ein anderes Konto kopieren

Bildschirmfoto

Globale Überschrift

Um Ihre Kopfzeile zu bearbeiten, müssen Sie zunächst eine Seite mit einer Themenvorlage erstellen. Wenn eine Seite erstellt ist, bearbeiten Sie die Seite auf der linken Seite und klicken Sie auf Registerkarte Inhalt. Klicken Sie dann auf Seitenkopf.

Die Kopfzeile unterstützt mehrsprachige Funktionen, so dass Sie eine mehrsprachige Kopfzeile erstellen können.

Bildschirmfoto_4
Bildschirmfoto_5
Bildschirmfoto_6

Globale Fußzeile

Um Ihre Fußzeile zu bearbeiten, müssen Sie zunächst eine Seite mit einer Themenvorlage erstellen. Wenn eine Seite erstellt ist, bearbeiten Sie die Seite auf der linken Seite und klicken Sie auf Registerkarte Inhalt. Klicken Sie dann auf Seitenfußzeile.

Bildschirmfoto_8

System & Standardvorlagen

Start Pro enthält 14 gebrauchsfertige Seitenvorlagen sowie die integrierten Systemvorlagen von HubSpot, um die volle Funktionalität Ihrer Website zu gewährleisten.

Die folgenden Standard-HubSpot-Systemvorlagen sind im Theme enthalten:

  • 404 Fehlerseite (404.html)
  • 500-Fehlerseite (500.html)
  • Backup-Abmeldeseite (backup-unsubscribe.html)
  • Anmeldeseite für die Mitgliedschaft (membership-login.html)
  • Seite zur Registrierung der Mitgliedschaft (membership-register.html)
  • Seite zur Beantragung einer Passwortrücksetzung (membership-reset-password-request.html)
  • Passwort zurücksetzen Seite (membership-reset-password.html)
  • Passwortgeschützte Seite (passwort-prompt.html)
  • Suchergebnisse Seite (search-results.html)
  • Abonnement-Einstellungen Seite (abonnement-einstellungen.html)
  • Seite zur Bestätigung des Abonnements (abonnement-bestaetigung.html)
Bildschirmfoto_9
Bildschirmfoto_10

Startseite

Diese Vorlage ist für die Homepage Ihrer Website konzipiert und enthält die folgenden Abschnitte und Module, die in ihrer Standardreihenfolge aufgeführt sind:

  • Helden-Banner
  • Swiper Logo-Schieberegler
  • Über Impact
  • Feature-Übersichtskarten
  • Impact-Zähler
  • Teams Showcase
  • Erfolgreiche Geschichten
  • Blog Beliebter Beitrag
  • HÄUFIG GESTELLTE FRAGEN
  • Formular abonnieren

Speicherort der Datei: /Vorlagen/home.html

Über

Diese Vorlage ist für die Präsentation von Informationen über Sie und Ihr Team gedacht und enthält die folgenden Abschnitte und Module in der Standardreihenfolge:

  • Helden-Banner
  • Icon & Text Raster
  • Hero Banner(Zweispaltig)
  • Über Impact
  • Unser Team Karten
  • Aufruf zur Aktion

Speicherort der Datei: /vorlagen/ueber.html

Unser Team

Die Vorlage Unser Team wurde professionell gestaltet, um das Humankapital, das Fachwissen und die Führungsqualitäten Ihres Unternehmens zu präsentieren. Sie bietet ein strukturiertes Layout, um Teammitglieder vorzustellen, allgemeine Anfragen zu beantworten und Leads durch integrierte Konversionspunkte zu erfassen.

  • Helden-Banner
  • Icon Inhaltskarte
  • Unser Team Karten
  • Impact-Zähler
  • Erfolgreiche Geschichten
  • Aufruf zur Aktion

Speicherort der Datei: /Vorlagen/unser-team.html

Dienstleistungen

Verwenden Sie diese Vorlage, um Ihre Dienstleistungen und Lösungen in einem klaren und strukturierten Layout zu präsentieren. Sie wurde entwickelt, um Ihr Angebot hervorzuheben, Ihren Prozess zu erklären, Vertrauen durch Kundenfeedback aufzubauen und das Engagement der Nutzer zu fördern.

  • Helden-Banner
  • Feature-Showcase-Video
  • Schrittregisterkarten mit Popup-Video
  • Registerkartenkartenfilter
  • Wirkungszähler
  • Erfolgreiche Geschichten
  • Anmeldeformular

Speicherort der Datei: /Vorlagen/Dienstleistungen.html

Kontakt

Sie können diese Vorlage verwenden, um Ihre Kontaktseite zu erstellen. Sie enthält die folgenden Abschnitte in dieser Reihenfolge:

  • Helden-Banner
  • Kontakt-Formular
  • Icon Inhaltskarte
  • Google-Karte

Speicherort der Datei: /Vorlagen/Kontakt.html

Blog-Index

Dies ist die Vorlage für Ihren Blog. Sie enthält die folgenden Module:

  • Blog-Banner
  • Blog Listing Post
  • Paginierung Blog

Speicherort der Datei: /Vorlagen/blog-index.html

Blog-Beitrag

HubSpot unterstützt keine Drag-and-Drop-Funktion für Blogpost-Vorlagen. Daher sind alle Abschnitte und Module direkt in die Vorlage integriert und können nicht über den Seiteneditor aufgerufen oder bearbeitet werden.

Speicherort der Datei: /Vorlagen/blog-post.html

Leere

Verwenden Sie diese leere Vorlage, um eine einfache und vollständig angepasste Seite zu erstellen. Sie bietet ein leeres Layout, in das Sie nur die Abschnitte und Module einfügen können, die Sie benötigen.

Speicherort der Datei: /Vorlagen/blank.html

Preisgestaltung

Diese Vorlage wurde entwickelt, um Ihre Preispläne und Wertangebote zu präsentieren, damit Nutzer Angebote vergleichen und fundierte Kaufentscheidungen treffen können. Sie enthält die folgenden Abschnitte und Module in der Standardreihenfolge:

  • Helden-Banner
  • Erweiterte Preiskarte
  • Erfolgreiche Geschichten
  • FAQ
  • Aufruf zur Aktion

Speicherort der Datei: /Vorlagen/Preisgestaltung.html

Landing Page

Dies ist eine allgemeine Landing Page-Vorlage, die dazu dient, Besucherinformationen über ein Formular zu erfassen und allgemeine Fragen zu beantworten. Sie enthält die folgenden Abschnitte und Module in der Standardreihenfolge:

  • Helden-Banner
  • Icon Inhaltskarte
  • Über Impact
  • Erweiterte Preiskarte
  • Aufruf zur Aktion
  • FAQ

Speicherort der Datei: /vorlagen/landing-page.html

Landing Page 02

Dies ist eine alternative Landing Page-Vorlage mit einem modifizierten Layout, das darauf ausgelegt ist, die wichtigsten Funktionen hervorzuheben, durch Erfolgsgeschichten Vertrauen zu schaffen und die Nutzer zum Handeln zu bewegen. Sie enthält die folgenden Abschnitte und Module in der Standardreihenfolge:

  • Helden-Banner
  • Icon Inhaltskarte
  • Erfolgreiche Geschichten
  • Aufruf zur Aktion

Speicherort der Datei: /vorlagen/landung-seite-zwei.html

Ressource Blog-Auflistung

Dies ist die Vorlage für Ihren Blog, die für die Anzeige von ressourcenorientierten Inhalten mit einem modifizierten Layout und zusätzlichen Seitenleistenfunktionen konzipiert wurde. Es hilft bei der Organisation von Beiträgen neben abonnierten und verwandten Inhalten für eine bessere Benutzerinteraktion. Sie enthält die folgenden Module:

  • Blog-Banner
  • Ressource Listing Post
  • Paginierung Blog
  • Seitenleiste Beiträge (Global)
  • Blog abonnieren (Global)

Speicherort der Datei: /vorlagen/ressourcen-blog-auflistung.html

Ressource Blog-Beitrag

HubSpot unterstützt keine Drag-and-Drop-Funktionalität für Resource Blog Post-Vorlagen. Daher sind alle Abschnitte und Module direkt in die Vorlage integriert und können nicht über den Seiteneditor aufgerufen oder bearbeitet werden.

Speicherort der Datei: /vorlagen/ressourcen-blog-post.html

Dankeschön

Dies ist die Vorlage für die Dankeseite. Sie enthält das folgende Modul:

  • Helden-Banner

Speicherort der Datei: /vorlagen/dankeschoen.html

Globale Farben

  • Primäre
  • Sekundär
Screenshot_1-Jan-09-2026-03-57-50-4228-AM

Globale Schriftarten

  • Primäre
  • Sekundär
Bildschirmfoto_2-3

Abstand (Containerbreite)

  • Vertikale Abstände
  • Maximale Breite des Inhalts
Bildschirmfoto_3-4

Typografie

Überschriften (H1 > H6)
  • Schriftart
  • Abstand zwischen den Buchstaben
  • Transformieren
Textkörper
  • Schriftart
  • Wahl der Einheit Rem / Px
Links
  • Schriftart
  • Abstand zwischen den Buchstaben
Typografie für Mobilgeräte
  • Überschriften (H1 > H6)
Bildschirmfoto_5-2
Bildschirmfoto_6-3
Bildschirmfoto_7-3
Bildschirmfoto_8-1

Buttons

Klein
  • Schriftgröße
  • Vertikaler Abstand
  • Horizontale Abstände
Regelmäßig
  • Schriftgröße
  • Vertikaler Abstand
  • Horizontaler Abstand
Groß
  • Schriftgröße
  • Vertikaler Abstand
  • Horizontaler Abstand
Primär
  • Text

    • Schriftart
    • Abstand zwischen den Buchstaben
    • Transformieren
  • Hintergrund

    • Farbe
  • Umrandung

    • Umrandungsstil, Breite, Farbe
  • Ecke

    • Radius
  • Schwebezustand

    • Text
      • Farbe
    • Hintergrund

      • Farbe
    • Umrandung

      • Umrandungsstil, Breite, Farbe
Sekundäres
  • Text

    • Schriftart
    • Abstand zwischen den Buchstaben
    • Transformieren
  • Hintergrund

    • Farbe
  • Umrandung

    • Umrandungsstil, Breite, Farbe
  • Ecke

    • Radius
  • Schwebezustand

    • Text
      • Farbe
    • Hintergrund

      • Farbe
    • Umrandung

      • Umrandungsstil, Breite, Farbe
Tertiär
  • Text

    • Schriftart
    • Abstand zwischen den Buchstaben
    • Transformieren
  • Hintergrund

    • Farbe
  • Umrandung

    • Stil
    • Breite
    • Farbe
  • Ecke

    • Radius
  • Schwebezustand

    • Text
      • Farbe
    • Hintergrund

      • Farbe
    • Umrandung

      • Umrandungsstil, Breite, Farbe
Einfach
  • Schriftart
  • Abstand zwischen den Buchstaben
  • Text umwandeln
  • Unterstreichen

    • Unterstrich hinzufügen (Checkbox)
    • Breite
    • Hinzufügen
  • Schweben

    • Schriftart
    • Unterstreichen

      • Unterstrich hinzufügen (Checkbox)
      • Breite
      • Hinzufügen
Bildschirmfoto
Bildschirmfoto_1
Bildschirmfoto_2-4

Formulare

Titel
  • Hintergrund

    • Farbe
  • Text

    • Schriftart
    • Abstand zwischen den Buchstaben
    • Transformieren
  • Umrandung

    • Stil
    • Breite
    • Farbe
  • Abstände

    • Auffüllung
  • Ecke

    • Radius oben links
    • Radius oben rechts
    • Unten links Radius
    • Unterer rechter Radius
Beschriftungen
  • Text

    • Schriftart
    • Abstand zwischen den Buchstaben
    • Transformieren
Hilfetext
  • Text

    • Schriftart
Felder
  • Platzhalter

    • Farbe
  • Text

    • Schriftart
  • Hintergrund

    • Farbe
  • Umrandung

    • Umrandungsstil, Breite, Farbe
Absenden
  • Auswahl des Schaltflächenstils (primär, sekundär, tertiär, einfach)
Formular
  • Hintergrund

      Farbe
  • Abstände

    • Auffüllung
  • Umrandung

    • Umrandungsstil, Breite, Farbe
  • Ecke

    • Radius oben links
    • Oberer rechter Radius
    • Unten links Radius
    • Unterer rechter Radius
Bildschirmfoto
Bildschirmfoto_4-4
Bildschirmfoto_5-3
Bildschirmfoto_6-4
Bildschirmfoto_7-4

Tische

Kopfzeile
  • Text

    • Schriftart
  • Hintergrund

    • Farbe
Körper
  • Text

    • Schriftart
  • Hintergrund

    • Farbe
Fußzeile
  • Text

    • Schriftart
  • Hintergrund

    • Farbe
Zellen
  • Abstände

    • Auffüllung
  • Umrandung

    • Umrandungsstil, Breite, Farbe
Tabelle

Kopfzeile

Menü
  • Text

    • Schriftart
    • Hover-Farbe
    • Abstand zwischen den Buchstaben
    • Texttransformation
  • Hintergrund

    • Farbe
  • Dropdowns

    • Text

      • Schriftart
      • Hover-Farbe
      • Abstand zwischen den Buchstaben
      • Text umwandeln
    • Hintergrund

      • Farbe
    • Umrandung

      • Umrandungsstil, Breite, Farbe
    • Ecke

      • Radius
Bildschirmfoto_8-3
Bildschirmfoto_9-2
Bildschirmfoto_10-1

Fußzeile

Menü
  • Menü-Titel

    • Schriftart
  • Menü Fußzeile

    • Text

      • Schriftart
      • Abstand zwischen den Buchstaben
      • Text umwandeln
    • Mauszeiger

      • Schriftfarbe
    • Aktiv

      • Schriftfarbe
    Hintergrundfarbe
    • Farbe
    Textfarbe
    • Farbe
    Farbe des sozialen Symbols
    • Hintergrundfarbe
    • Icon Farbe
    Farbe des sozialen Symbols beim Überfahren
    • Hintergrundfarbe
    • Icon-Farbe
Bildschirmfoto_11

Module

Start Theme wird mit 30 vorgefertigten, sofort einsetzbaren Modulen geliefert, die auf Flexibilität, Geschwindigkeit und Konsistenz ausgelegt sind.

Helden-Banner

Mit dem Hero Banner-Modul können Sie beeindruckende Bannerabschnitte erstellen, die überall auf Ihren Seiten verwendet werden können. Es unterstützt flexible Layouts, reichhaltige Inhalte, Medien- oder Formularintegration, Achievements und erweiterte Styling-Kontrollen für vollständig responsive Designs.

Funktionen
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Rich-Text-Felder zum Hinzufügen einer Hauptüberschrift und einer Inhaltsbeschreibung
  • Mehrere Layout-Optionen, darunter einspaltiger Inhalt und zweispaltiger Inhalt mit Bild oder Formular
  • Einstellbare maximale Inhaltsbreite für große, mittlere und kleine Bildschirmgrößen
  • Blockausrichtungseinstellungen für große, mittlere und kleine Bildschirmgrößen
  • Textausrichtungssteuerung für große, mittlere und kleine Bildschirme
  • Zweispaltiges Layout mit erweiterten Steuerelementen:

    • Einstellbare linke und rechte Spaltenbreiten
    • Responsive Spaltenabstandsoptionen für Desktop und Mobilgeräte
    • Steuerungder Zeilenausrichtung mit Umschaltmöglichkeiten für Desktop und Mobilgeräte (Zeilenumkehr)
    • Vertikale Ausrichtungsoptionen: Start, Mitte und Ende
  • Rechtes Bild / Formularauswahl:
    Wählen Sie, was in der rechten Spalte erscheinen soll.

    • Bildoption für visuelle Inhalte
    • Formularoption mit:

      • HubSpot-Formularauswahl
      • Formulartitel und -beschreibung über Rich-Text-Felder
  • Schaltflächenoptionen innerhalb eines Repeaters verfügbar
  • Achievement-Inhalt aktivieren/deaktivieren:
    Schalten Sie um, um leistungsbezogene Inhalte ein- oder auszublenden.

  • Achievement-Elemente:
    Repeater-Feld, das mehrere Leistungselemente über Rich-Text-Felder ermöglicht.

Styling-Optionen
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
  • Optionen zur Anpassung desHintergrunds, einschließlich Hintergrundfarbe und Hintergrundbild
  • Auswahl der Containereinstellung mit Optionen für Seitenmitte, volle Breite oder benutzerdefinierte Containerbreite
  • Einstellungen für das rechte Bild, einschließlich:

    • Maximale Breite aktivieren/deaktivieren
    • Optionen für maximale Bildbreite und Ausrichtung
    • Boxschatten-Steuerungen mit Umschaltmöglichkeit zum Ein- und Ausblenden:

      • X-Versatz, Y-Versatz
      • Unschärferadius und Streuradius
      • Farbe des Schattens
    • Option für den Radius des Bildrandes für abgerundete Kanten
  • Gestaltung des zweispaltigen Layouts:

    • Einstellungen für die Breite der linken und rechten Spalte
    • Abstände zwischen den Spalten für Desktop und Tablet
    • Umschalten der Zeilenumkehr für Desktop und Mobilgeräte
    • Steuerung der vertikalen Ausrichtung (Anfang, Mitte, Ende)
  • Option für dieFarbe der Auflistungspunkte zum Anpassen der Listenindikatoren
Helden-Banner-01
Bildschirmfoto_15-1
Bildschirmfoto_16-1
Banner
Bildschirmfoto_12
Bildschirmfoto_13
hero-banner-screenshot
hero-banner-02

Process Visualisierungs

Das Process-Visualisierungs-Modul wurde entwickelt, um Geschäftsabläufe und Prozesse visuell mithilfe eines kreisförmigen SVG-Layouts mit Icons, Bildern, Animationen und editierbaren Inhaltsbereichen darzustellen. Es bietet umfangreiche Anpassungsmöglichkeiten für Inhalte, Layout, Styling und Animationen, sodass das Modul optimal an Ihre Markenidentität und Benutzererfahrung angepasst werden kann.

Funktionen
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und gezielte Anpassungen
Linker Inhalt

Der linke Bereich verwaltet alle textbezogenen Inhalte und Call-to-Action-Elemente.

  • Untertitel-Tag
    Textfeld zum Hinzufügen eines Untertitels
  • Titel
    Textfeld für die Hauptüberschrift
  • Typewriter-Titeltext
    Repeater-Feld zum Hinzufügen mehrerer animierter Texte
  • Beschreibung
    Rich-Text-Feld für detaillierte Inhalte
  • Buttons
    Button-Optionen innerhalb eines Repeaters zur Unterstützung mehrerer CTAs
Rechter Inhalt

Der rechte Bereich wird für visuelle und interaktive Elemente verwendet, die im kreisförmigen Layout angezeigt werden.

  • Icon-Inhalte & Link
    • Bildelement mit Link-Option
    • Textfeld für die Icon-Beschriftung
  • AI-Bild-Link
    Bildfeld
  • BPO-Bild-Link
    Bildfeld
  • Detaching-Bild-Link
    Bildfeld
  • Zentriertes Logo
    Bildfeld für die Platzierung des zentralen Logos
Hintergrundoptionen

Wählen Sie aus mehreren Hintergrundtypen:

  • Hintergrundfarbe
  • Hintergrundverlauf
  • Hintergrundbild mit Overlay-Option
Abstandssteuerung

Passen Sie die Abstände des Abschnitts separat an für:

  • Desktop
  • Tablet
  • Mobilgeräte
Animationseinstellungen
  • Abschnitts-Animation aktivieren
    Aktiviert oder deaktiviert die Animation des gesamten Abschnitts
  • Animationsrichtungen
    • Nach oben
    • Nach unten
    • Nach links
    • Nach rechts
Text- & Button-Ausrichtung (Mobile Ansicht)
  • Ausrichtungsoptionen:
    • Links
    • Zentriert
    • Rechts
  • Vertikale Spaltenrichtung ändern
    Aktivieren, um die Inhaltsanordnung auf Mobilgeräten zu ändern
Stil des getippten Inhalts

Steuern Sie das Erscheinungsbild und Verhalten der animierten Texte.

  • Tag-Auswahl für Titel & animierten Text
    • H1–H6
    • Absatz (P)
  • Farbe des Typewriter-Texts
  • Rotationsgeschwindigkeit
    Steuert die Übergangsgeschwindigkeit der Animation
  • Einstellungen für getippten Text
    • Getippter Text in voller Breite (Desktop)
    • Getippter Text in voller Breite (Mobil)
SVG-Kreis- & Icon-Styling
  • Kurvenlinien-Farben
    • Farbe der äußeren Ringlinie
    • Farbe der inneren Ringlinie
  • Hover- & Aktiv-Zustandsfarbe
Icon-Stil
  • Icon-Hintergrundfarbe
  • Helle Icon-Farbe (erste Farbe)
  • Dunkle Icon-Farbe (zweite Farbe)
SVG-Kreis-Hintergrund
  • Hintergrundverlaufsoption für den SVG-Kreis
Process-visualization-1
Process-visualization-02
Process-visualization-03
Process-visualization-04
Process-visualization-05
Process-visualization

Swiper Logo-Schieberegler

Mit dem Swiper Logo Slider-Modul können Sie Kunden-, Partner- oder Markenlogos entweder in einem Rasterlayout oder in einem interaktiven Slider präsentieren und dabei die volle Kontrolle über Layout, Styling und Reaktionsfähigkeit haben.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Überschrift: Verwenden Sie das Rich-Text-Feld Titel/Inhalt für Überschriften und Beschreibungen
  • Layout-Optionen, einschließlich Inline-Logo-Layout undBox-basiertes Logo-Layout
  • Logoverwaltung mit einem Repeater-Feld für einfacheBildaktualisierungen
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Abschnittsabstandssteuerung für obere, untere, linke und rechte Polsterung auf Desktop, Tablet und Mobilgeräten
  • Containertyp-Optionen, einschließlich seitenzentrierter und ganzflächiger Layouts
Schieberegler-Steuerelemente
  • Umschaltoption zum Aktivieren oder Deaktivieren des Schiebereglers
  • Autoplay-Option aktivieren/deaktivieren
  • Einstellbare Autoplay-Dauer (Geschwindigkeit in Millisekunden)
  • Steuerung der Schiebereglerrichtung (von links nach rechts)
  • Responsive Einstellungen für einzublendende Dias und zu scrollende Dias auf Desktop, Tablet und Handy
  • Wenn Autoplay deaktiviert ist :

    • Option zum Aktivieren oder Deaktivieren von Punkten und Pfeilen für Desktop, Tablet und Mobilgeräte
    • Benutzerdefinierte Styling-Optionen für Punkte und Navigationspfeile
  • Wenn der Schiebereglerstrong> deaktiviertist :strong>

    • Steuerung der Anzahl der Logos pro Zeile mit Ausrichtungsoptionen für Desktop, Tablet, Handy und kleine Bildschirme
Logo-Styling-Optionen

Layout-basierte Styling-Steuerungen, einschließlich:

  • Hintergrundfarbe der Box
  • Abmessungen des Logo-Bildes
  • Logoausrichtung und Optionen für die Ausrichtung des Inhalts
  • Auswahl des Größenverhältnisses der Box
  • Radius des Box-Rahmens
  • Box-Schatten aktivieren/deaktivieren
  • Spalten- und Zeilenabstände zwischen Logoboxen
  • Inneres Padding für Logospalten
  • Zeilenabstand zwischen Logos
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_3
Bildschirmfoto_5-4
Bildschirmfoto_8-2
Bildschirmfoto_9-1
Bildschirmfoto

Icon Inhaltskarte

Das Modul Icon Content Card zeigt Karten in Boxen mit einem benutzerdefinierten Symbol, einem Titel und unterstützendem Text an. Es ist ideal für die Präsentation von Dienstleistungen, Funktionen oder wichtigen Informationen in einem klaren und visuell strukturierten Format.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Layout-Optionen einschließlich Inline-Karten und Boxed-Card-Layouts
  • Verwenden Sie das Rich-Text-Feld für Überschriften und Beschreibungen
  • Icon Content Card Repeater für einfaches Content Management
  • Icon-Auswahloptionen innerhalb des Repeaters:

    • HubSpot-Symbole
    • Bild-Uploads
    • Benutzerdefinierter SVG-Code
  • Rich-Text-Unterstützung für Karteninhalte
  • Optionale Schaltflächenkonfiguration innerhalb jeder Karte
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
Layout-basierte Styling-Steuerungen umfassen:
  • Anzahl der Karten pro Zeile für Desktop, Tablet, Handy und kleine Bildschirme
  • Optionen für die Kartengestaltung, einschließlich:

    • Hintergrundfarbe der Box
    • Steuerelemente für Größe und Farbe von Symbolen
    • Optionen für die Kartenausrichtung (Flex-Start, Mitte, Raum-um, Flex-Ende, Raum-zwischen)
    • Anpassung der Umrandung, des Eckenradius und des Boxschattens
  • Spalten- und Zeilenabstände zwischen den Karten für Desktop, Tablet und Mobilgeräte
  • Innerer Spaltenabstand innerhalb von Karten für Desktop, Tablet und Mobilgeräte
  • Äußere Zeilenabstände zwischen Karten für Desktop, Tablet und Mobilgeräte
  • Option zum Aktivieren oder Deaktivieren der mittigen Ausrichtung von Symbolen und Inhalten
  • Optionen für die Ausrichtung von Symbolen, einschließlich links oben, rechts oben, mittig oder keine
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_3
Bildschirmfoto_
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Zähler

Das Zählermodul zeigt wichtige Statistiken mit einem animierten Zählereffekt an und eignet sich daher ideal zur Hervorhebung von Zahlen wie Erfolgen, Meilensteinen oder Leistungskennzahlen.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Layout-Optionen einschließlich Inline-Karten und Boxed-Card-Layouts
  • Verwenden Sie das Rich-Text-Feld für die Hauptüberschrift sowohl für Überschriften als auch für Beschreibungen.
  • Icon Content Card Repeater für einfaches Content-Management
  • Nummern- und Inhaltsrepeater mit den folgenden Optionen:

    • Plus-Symbol-Textfeld
    • Eingabe von Zahlenwerten
    • Vorzeichensymbole (z.B. +, K)
    • Zähler Animationsgeschwindigkeit Dauer
    • Inhaltsreiches Textfeld
    • Option zum Ein- und Ausblenden des letzten Textes in einer neuen Zeile
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
Layout-basierte Styling-Steuerungen umfassen:
  • Einstellungen für Karten pro Zeile für Desktop, Tablet, Handy und kleine Bildschirme
  • Optionen für die Kartengestaltung, einschließlich:

    • Hintergrundfarbe der Box
    • Zählernummernfarbe/Schriftgröße

      • Farbe der Zählernummer
      • Auswahl des Zählerüberschrift-Tags
      • Optionen für die Textausrichtung
      • Optionale benutzerdefinierte Zählernummern-Schriftgröße (ein-/ausblenden) mit separaten Einstellungen für Desktop und Mobile
    • Optionen für die Ausrichtung des Karteninhalts (Flex-Start, Mitte, Zwischenraum, Flex-Ende, Zwischenraum-um)
    • Kartenlayout und Ausrichtungssteuerung:

      • Vertikale Ausrichtung (normal, flex-start, center, flex-end)
      • Flex-Richtungsoptionen (Zeile, Zeile-umgekehrt, Spalte, Spalte-umgekehrt)
      • Abstand zwischen den Inhalten für Desktop und Mobile
    • Anpassung der Umrandung, des Eckenradius und des Boxschattens:

      • Stil, Breite und Farbe der Umrandung
      • Anpassung des Umrandungsradius
      • Boxschatten aktivieren/deaktivieren
    • Spalten- und Zeilenabstände zwischen Karten für Desktop, Tablet und Mobilgeräte
    • Innerer Spaltenabstand innerhalb von Karten für Desktop, Tablet und Mobilgeräte
    • Äußere Zeilenabstände zwischen Karten für Desktop, Tablet und Mobilgeräte
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_
Screensho
Bildschirmfoto

Aufschlagzähler

Das Zählermodul zeigt die wichtigsten Statistiken mit einem animierten Zähleffekt an und ist damit ideal für die Präsentation von Erfolgen, Meilensteinen und wichtigen Leistungsindikatoren.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für verbessertes Styling und erweiterte Zielgruppenansprache
  • Flexible Layout-Optionen, einschließlich Inline- und Boxed-Card-Designs
  • Das Rich-Text-Feld für die Hauptüberschrift kann sowohl für Abschnittsüberschriften als auch für beschreibenden Text verwendet werden
  • Icon-basierter Content Card Repeater für vereinfachtes Content Management
Optionen für Zähler und Inhalt
  • Zahlen- und Inhaltswiederholer mit konfigurierbaren Optionen:
    • Benutzerdefinierter Pluszeichen-Text
    • Numerische Werteingabe
    • Vorzeichenanzeigen (z.B. +, K)
    • Einstellbare Dauer der Zähleranimation
    • Inhaltsreiches Textfeld
    • Umschalten zur Anzeige des endgültigen Textes in einer neuen Zeile
Icon-Optionen
  • Integrierte Icon-Unterstützung in Zählerkarten, mit mehreren Eingabemethoden:
    • Einfügen von benutzerdefiniertem SVG-Code
    • Auswahl von Symbolen aus der HubSpot-Symbolbibliothek
    • Hochladen und Verwenden von bildbasierten Symbolen
  • Steuern Sie die Platzierung der Icons relativ zum Inhalt des Zählers
  • Anpassen von Größe und Farbe der Symbole (für SVG- und HubSpot-Symbole)
Steuerelemente für Hintergrund und Abstände
  • Optionen zur Anpassung des Hintergrunds:
    • Hintergrundfarbe
    • Hintergrundbild
  • Steuerelemente für Abschnittsabstände:
    • Polsterung oben, unten, links und rechts
    • Responsive Einstellungen für Desktop, Tablet und Handy
Layout-basierte Styling-Steuerelemente
  • Karten-pro-Zeile-Konfiguration für:
    • Desktop, Tablet, Handy und kleine Bildschirmgrößen
Optionen für die Kartengestaltung
  • Hintergrundfarbe der Karte
  • Farbe der Zählernummer
  • Schriftgröße der Zählernummer
  • Auswahl des Zählerüberschrift-Tags
  • Steuerung der Textausrichtung
  • Optionaler Schalter für die Schriftgröße des Zählers mit separaten Werten für Desktop und Mobile
Steuerelemente für Kartenlayout und -ausrichtung
  • Horizontale Ausrichtungsoptionen mit justify-content:
    • flex-start, center, space-between, flex-end, space-around
  • Vertikale Ausrichtungseinstellungen:
    • Normal, Flex-Start, Mitte, Flex-Ende
  • Konfiguration der Flex-Richtung:
    • Zeile, Zeile-umgekehrt, Spalte, Spalte-umgekehrt
  • Steuerelemente für die Zentrierung des Inhalts für Desktop und Mobile
Rand- und Schattenanpassung
  • Steuerelemente für Stil, Breite und Farbe des Rahmens
  • Einstellbarer Rahmenradius
  • Aktivieren oder Deaktivieren des Rahmenschattens
Abstände zwischen Karten
  • Einstellungen für Spalten- und Zeilenabstände für:
    • Desktop, Tablet und Mobile
  • Innerer Spaltenabstand innerhalb der Karten für:
    • Desktop, Tablet und Mobiltelefon
  • Äußere Zeilenabstände zwischen Karten für:
    • Desktop, Tablet und Handy
Bildschirmfoto
Bildschirmfoto
Screenshot-Wirkungszähler
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_
Screensho
impact-counter-screenshot

Erfolgreiche Geschichten

Mit dem Modul Erfolgsgeschichten können Sie Kundenreferenzen in einem modernen und ansprechenden Layout präsentieren. Es trägt dazu bei, Vertrauen und Glaubwürdigkeit aufzubauen, indem es Kundenrezensionen, Bewertungen und Erfolgsgeschichten mit flexiblen Layouts und optionaler Slider-Funktionalität präsentiert.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Layout-Optionen einschließlich Layout Eins und Layout Zwei
  • Verwendung des Rich-Text-Feldes "Main Heading " sowohl für die Überschrift als auch für den Beschreibungsinhalt
  • Überschrift und Inhaltsfelder für den Titel des Hauptabschnitts
  • Hauptüberschrift und Schaltflächenausrichtung:
    Schalten Sie die Optionen um, um die Hauptüberschrift und die Schaltfläche links, rechts, mittig oder normal auszurichten.

  • Konfigurationsoptionen für Schaltflächen, einschließlich:

    • Schaltflächentypen: Primär, Sekundär, Tertiär, Einfach
    • Schaltflächengrößen: Normal, Groß, Klein
    • Schaltflächentext und Schaltflächenlink
  • Verwaltung von Testimonial-Inhalten mit einem inneren Repeater, einschließlich:

    • Testimonial-Inhaltstext
    • Abschnitt Kunde:

      • Name des Kunden
      • Rolle oder Bezeichnung des Kunden
      • Bild des Kunden
      • Sternebewertung Bewertungen
  • Position der Kundeninformationen:
    Wählen Sie, ob die Kundendaten oben oder unten auf der Zeugniskarte erscheinen sollen.

  • Zwei Spalten pro Zeile:
    Aktivieren Sie diese Option, um Zeugnisse in einem zweispaltigen Layout pro Zeile anzuzeigen. Wenn diese Option deaktiviert ist, werden die Zeugnisse in einer einzigen Spalte angezeigt.

  • Linker Rand der Zeugniskarte:
    Aktivieren Sie dieses Kontrollkästchen, um einen linken Rand auf den Testimonial-Karten zu aktivieren. Wenn diese Option aktiviert ist, ist der linke Rand vollständig editierbar.

  • Optionen zur Anpassung desHintergrunds, einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
Layout-basierte und Schieberegler-Styling-Steuerungen
  • Anpassung der Farbe des Sternsymbols
  • Umschaltoption zum Aktivieren oder Deaktivieren des Empfehlungsschiebers
  • Wenn der Schieberegler aktiviert ist:

    • Autoplay-Option aktivieren/deaktivieren
    • Geschwindigkeitssteuerung, die bei aktivierter Autoplay-Funktion angezeigt wird
    • Responsive Slider-Einstellungen für Desktop, Tablet und Mobile, einschließlich:

      • Einzuzeigende Folien
      • Zu scrollende Folien
      • Optionen zum Aktivieren/Deaktivieren von Punkten und Pfeilen
    • Benutzerdefinierte Styling-Optionen für Slider-Punkte und Navigationspfeile
Testimonial-Inhaltsstil
  • Optionen für die Ausrichtung von Testimonial-Inhalten: Links, Rechts, Zentriert
  • Einstellbare Breite des Testimonial-Inhalts
  • Hintergrundfarbe des Testimonials
  • Testimonial-Box-Schattenfarbe
  • Größe des Kundenbildes einstellbar
  • Optionen für die Angebotsgestaltung:

    • Farbe des Angebots
    • Hintergrundfarbe des Angebots
    • Schattenfarbe der Angebotsbox
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
erfolgreich-geschichten-02
Bildschirmfoto
erfolgreich-geschichten-01
Bildschirmfoto
Bildschirmfoto_8-4
erfolgreich-geschichten-sektion

Einfache Form

Mit dem Modul Abo-Formular können Besucher Ihren Newsletter abonnieren und die neuesten Updates erhalten. Es bietet flexible Optionen für den Inhalt, die Sichtbarkeit des Formulars und das Styling, um es an das Design Ihrer Website anzupassen.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Titel- und Inhaltsfelder mit der Option, benutzerdefinierte Inhalte hinzuzufügen
  • Umschaltbare Option zum Ein- und Ausblenden des Anmeldeformulars

    • Wenn aktiviert, sind die folgenden Felder verfügbar:

      • Auswahl des Anmeldeformulars
      • Unterer Textinhalt
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für den Abstand zwischen den Abschnitten oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
Styling-Optionen:
  • Optionen für die Gestaltung des Formulars mit der Auswahl Theme oder Custom Style:

    • Themenstil - verwendet den Standarddesignstil des Themas
    • Benutzerdefinierter Stil - ermöglicht erweiterte Formularanpassung
  • Wenn der benutzerdefinierte Stil ausgewählt ist:

    • Eingabefeldstil

      • Umrandungsradius-Steuerung für Eingabefelder und Schaltflächen
      • Optionen für Stil, Breite und Farbe des Eingaberahmens
    • Stil für Schaltflächen

      • Textfarbe der Schaltfläche
      • Stil, Breite und Farbe des Rahmens von Schaltflächen
      • Hintergrundfarbe der Schaltfläche
      • Schaltflächen-Hover-Stil, einschließlich:

        • Hover-Textfarbe
        • Stil, Breite und Farbe des Hover-Rahmens
        • Hover-Hintergrundfarbe
      • Option zum Ein- oder Ausblenden der Schaltfläche "Senden" in absoluter Position
    • Stil für abgeschickte Nachrichten

      • Anpassung der Hintergrundfarbe
  • Kontrolle der Formularbreite:

    • Einstellbare maximale Breite für das Anmeldeformular
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_
Bildschirmfoto

FAQ

Das FAQ-Modul (Frequently Asked Questions - häufig gestellte Fragen) hilft dabei, häufig gestellte Fragen und Antworten in einem klaren, erweiterbaren Format zu organisieren. Es verbessert die Benutzerfreundlichkeit, indem es den Besuchern ermöglicht, relevante Informationen schnell zu finden und gleichzeitig die Seite sauber und strukturiert zu halten.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Rich-Text-Feld zum Hinzufügen einer Abschnittsüberschrift
  • FAQ-Verwaltung mit einem Repeater, einschließlich:

    • Frage (Rich-Text)
    • Antwort (Rich-Text)
  • Umschaltbare Option zur Aktivierung der FAQ-Ansicht
    • Wenn diese Option aktiviert ist, werden die FAQs in einem erweiterbaren Akkordeonformat angezeigt.
  • Abschnittsabstände für den oberen, unteren, linken und rechten Rand auf Desktop, Tablet und Mobilgeräten
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die maximale Inhaltsbreite:

    • Ein- und Ausschalten der Einstellungen für die maximale Breite
    • Wenn aktiviert, sind folgende Optionen verfügbar:

      • Benutzerdefinierte maximale Breite für den FAQ-Container
      • Einstellbare linke und rechte Polsterung
FAQ-Stil-Optionen
  • Anpassung des Hintergrunds der FAQ-Liste:

    • Hintergrundfarbe
  • Einstellungen für Rahmen und Radius:

    • Umrandungsstil, -breite und -farbe
    • Stil, Breite und Farbe des aktiven Rahmens
    • Steuerung des Rahmenradius
  • Icon-Typen und Styling-Optionen:

    • Auswahl des Icon-Typs, einschließlich:

      • Plus / Minus
      • Pfeil nach unten / Pfeil nach oben
      • Pfeil rechts / Pfeil unten
      • Pluskreis / Minuskreis
      • Caret unten / Caret oben
    • Einstellung der Icongröße
    • Einstellung der Icon-Fettigkeit
    • Icon-Farbeinstellungen
    • Farboptionen für schwebende und aktive Symbole
    • Option zum Ein- oder Ausblenden des Symbolhintergrunds

      • Wenn aktiviert, sind die Optionen für Hintergrundfarbe und aktive Farbe verfügbar
  • Hover- und Aktiv-Styling:

    • Hintergrundfarbe
    • Textfarbe der Frage
  • Boxschatten-Anpassung:

    • Option Boxschatten aktivieren/deaktivieren
      • Wenn aktiviert:

        • Art des Schattens (Einfügung/Aussetzung)
        • Horizontaler Versatz (X)
        • Vertikaler Versatz (Y)
        • Unschärferadius
        • Ausbreitungsradius
        • Farbe des Schattens
  • FAQ-Elementabstandssteuerung für Desktop und Mobile
  • Option Zweispaltiges Layout:
    • Umschalten, um das zweispaltige Layout zu aktivieren oder zu deaktivieren
    • Wenn aktiviert:

      • Option zur Anzeige von FAQ-Einträgen in der linken Spalte
      • Einstellbarer Abstand zwischen den Spalten
Bildschirmfoto
Bildschirmfoto
Screenshot_3-Jan-09-2026-12-22-29-4736-PM
Bildschirmfoto_
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Team-Karten

Mit dem Modul Team Cards können Sie Ihre Teammitglieder in einem sauberen und strukturierten Kartenlayout präsentieren. Es ist ideal für die Präsentation von Profilbildern, Namen, Rollen, Beschreibungen und Links zu sozialen Medien in einem visuell einheitlichen und professionellen Format.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Rich-Text-Feld zum Hinzufügen einer Hauptabschnittsüberschrift
  • Teamkartenverwaltung mit einem Repeater, einschließlich:

    • Profilbild
    • Name des Profils
    • Beschreibung oder Rolle
    • Repeater für soziale Symbole mit:

      • Auswahl des Icon-Typs (HubSpot-Symbole oder benutzerdefinierte SVG-Symbole)
      • Konfiguration des Icon-Links
Stil-Optionen
  • Abschnittsabstandssteuerung für obere, untere, linke und rechte Polsterung auf Desktop, Tablet und Mobile
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Container-Stil

    • Optionen fürden Container-Stil, einschließlich seitenzentrierter und benutzerdefinierter Container-Layouts. Wenn die Option für benutzerdefinierte Container ausgewählt ist, werden Felder für die Containerbreite und den linken/rechten Abstand verfügbar.

Die kartenbasierten Styling-Steuerungen umfassen:

  • Abstandssteuerungen für Desktop, Tablet und Mobile
  • Einstellungen fürKarten pro Zeile für Desktop, Tablet und Mobilgeräte
  • Einstellbarer Abstand zwischen den Karten
  • Anpassung der Hintergrundfarbe der Karten
  • Optionen für die Gestaltung von Kartenrändern, einschließlich Stil, Breite und Farbe
  • Bild-Styling

    • Steuerung des Radius des Bildrandes
    • Optionen für die Objektposition (oben oder mittig)
    • Einstellbare Bildhöhe und -breite
  • Gestaltung vonsozialen Symbolen

    • Farbe des sozialen Symbols
    • Hover-Farbe des sozialen Symbols
    • Größe des sozialen Symbols
    • Hintergrundfarbe des Social Icons
    • Hintergrundfarbe des Social Icons beim Hovern
    • Hintergrundgröße des sozialen Symbols
  • Ausrichtungdes Inhalts

    • Optionen für die Ausrichtung des Karteninhalts: links oder mittig
Bildschirmfoto_1
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Mannschaften Showcase

Das Modul Team Cards wurde entwickelt, um Teammitglieder in einem strukturierten und visuell ansprechenden Layout darzustellen, mit flexiblen Optionen für Inhalt, Styling und Interaktion.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und erweiterte Zielgruppenansprache

  • Rich-Text-Feld für Abschnittsüberschriften für Überschriften und einleitende Inhalte

  • Team Cards Repeater für die einfache Verwaltung von Teammitgliedern

Teamkarten-Inhaltsoptionen
  • Jedes Repeater-Element enthält:

    • Profilbild des Teams
    • Rich-Text-Feld für Teamdetails
    • Rich-Text-Feld für die Beschreibung
  • Unterstützung von sozialen Symbolen mit flexiblen Eingabeoptionen:

    • Hinzufügen von Symbolen mit der HubSpot-Symbolbibliothek
    • Hochladen und Verwenden benutzerdefinierter Bildsymbole
    • Individuelle Link-Option für jedes soziale Symbol verfügbar
Sektions-Styling
  • Maximale Inhaltsbreite
    Steuert die Ausrichtung und Lesbarkeit des Abschnittslayouts.

    • Anzeigen / Ausblenden - Aktivieren oder Deaktivieren der benutzerdefinierten Breiteneinstellungen

    • Max-Width - Legt die maximale Breite des Inhaltscontainers fest

    • Padding Left / Right - Passt die horizontalen Abstände innerhalb des Containers an

  • Optionen für die Anpassung des Abschnittshintergrunds:

    • Hintergrundfarbe
    • Hintergrundbild mit Overlay-Unterstützung
  • Responsive Abschnittsabstandssteuerung für:

    • Desktop
    • Tablet
    • Mobil
Popup-Einstellungen
  • Popup aktivieren/deaktivieren umschalten
  • Wenn aktiviert, wird das Popup angezeigt:

    • Profilbild des Teams
    • Name und Titel des Teammitglieds
    • Inhalt der Beschreibung
    • Soziale Symbole
  • Optionen zur Anpassung des Popup-Overlays:

    • Auswahl der Overlay-Farbe
    • Einstellbare Overlay-Deckkraft
Karte & Inhalt Styling
  • Optionen für die Gestaltung von sozialen Symbolen:

    • Icon-Hintergrundfarbe
    • Icon-Farbe
    • Stilisierung des Icon-Rahmens
  • Textausrichtung für den Karteninhalt:

    • Links
    • Zentriert
    • Rechts
Schieberegler-Optionen
  • Schieberegler aktivieren/deaktivieren umschalten
  • Wenn der Schieberegler aktiviert ist:

    • Optionen für die Gestaltung der Navigationspunkte
    • Optionen für die Gestaltung von Pfeilen
Bildschirmfoto-1
Bildschirmfoto-2
Bildschirmfoto-3
Bildschirmfoto-4
Bildschirmfoto-5
Bildschirmfoto-6

Bild mit Inhaltsliste

Das Modul Bild mit Inhaltsliste zeigt ein Bild neben einer strukturierten Liste von Inhalten an. Es ist ideal für die Hervorhebung von Dienstleistungen, Funktionen oder wichtigen Angeboten in einem flexiblen zweispaltigen Layout mit einem klaren, modernen Design.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Rich-Text-Felder zum Hinzufügen einer Hauptüberschrift und einer Beschreibung
  • Inhaltsverwaltung mit einer Repeater-Liste zum Hinzufügen mehrerer Inhaltselemente.
  • Optionen zur Konfiguration vonSchaltflächen, einschließlich:

    • Schaltflächentypen (Primär, Sekundär, Tertiär, Einfach)
    • Schaltflächengrößen (Normal, Klein, Groß)
    • Schaltflächentext und Link
    • Optionales Schaltflächensymbol mit HubSpot-Symbolen oder benutzerdefinierten SVG-Symbolen
  • Unterstützung für das Hochladen von Bildern (Option)
Stil-Optionen
  • Abschnittsabstandssteuerung für die obere, untere, linke und rechte Polsterung auf Desktop, Tablet und Handy
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Option fürbenutzerdefinierte Container mit Umschaltfunktion zur Aktivierung der benutzerdefinierten Containerbreite
  • Flexible Layout-Steuerungen, einschließlich:

    • Einstellungen für die linke und rechte Spaltenbreite
    • Zentrumsabstände für Desktop und Mobile
    • Vertikale Spaltenausrichtung (oben, mittig, unten)
  • Optionen für die Ausrichtung des Inhalts (Bild/Inhalt oder Inhalt/Bild)
  • Gestaltung von Schaltflächensymbolen mit einstellbarer Symbolgröße
  • Optionen für die Bildgestaltung, einschließlich:

    • Radius des Bildrandes
    • Maximale Bildhöhe
  • Optionen für die Gestaltung von Listeninhalten, einschließlich:

    • Stil, Breite und Farbe der Umrandung von Wiederholungselementen
    • Breite des Kreises
    • Farbe des Kreisrandes
    • Hintergrundfarbe des Kreises
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Horizontales Tabbing

Mit dem Modul " Horizontale Registerkarten" können Sie Inhalte in einem interaktiven Layout mit Registerkarten präsentieren. Es ist ideal, um Prozesse, Arbeitsabläufe, Funktionen oder verwandte Inhalte auf strukturierte und benutzerfreundliche Weise zu präsentieren, so dass Besucher zwischen den Abschnitten wechseln können, ohne die Seite neu laden zu müssen.

Funktionen
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Rich-Text-Felder zum Hinzufügen einer Hauptüberschrift und einer Beschreibung
  • Verwaltung von Tab-Inhalten mithilfe eines Repeaters, einschließlich:

    • Name der Registerkarte
    • Felder für Registerkarteninhalte:

      • Anzeige von Symbolen oder Bildern mit Titel
      • Optionen für die Medienauswahl: Bild, HubSpot-Symbol oder benutzerdefinierter SVG-Code
      • Beschreibungsinhalt für jede Registerkarte
    • Optionen für die Ausrichtung des Inhaltslayouts:

      • Inhalt / Bild
      • Bild / Inhalt
Stil-Optionen
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die maximale Inhaltsbreite:

    • Option zum Aktivieren oder Deaktivieren der Einstellungen für die maximale Breite
    • Wenn aktiviert, Optionen für: Benutzerdefinierte maximale Breite und Anpassung der linken und rechten Polsterung
  • Optionen zur Anpassung derRegisterkartenfarbe:

    • Standard-Tab-Textfarbe und -Hintergrundfarbe
    • Textfarbe und Hintergrundfarbe der aktiven Registerkarte
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_
Bildschirmfoto

Soziale Links

Mit dem Modul Soziale Links können Sie Symbole für soziale Medien anzeigen, die auf Ihre sozialen Profile oder URLs zum Teilen von Inhalten verweisen. Es bietet flexible Icon- und Styling-Optionen, die es einfach machen, sich an Ihr Markendesign anzupassen und gleichzeitig Nutzer zum Verbinden oder Teilen von Inhalten zu ermutigen.

Funktionen
  • Verwaltung sozialer Icons über einen Repeater, mit Unterstützung für:

    • HubSpot-Symbole
    • Bild-Symbole
    • Benutzerdefinierter SVG-Code
    • Icon-Link-Konfiguration für jedes soziale Icon
Stil-Optionen
  • Modul-Sichtbarkeitsschalter zum Ein- und Ausblenden der Social Sharing-Links
  • Benutzerdefinierte Farbe des sozialen Symbols umschaltbar:

    • Wenn diese Option aktiviert ist, sind Optionen für die Gestaltung des Symbols verfügbar, darunter:
      • Icon-Farbe
      • Icon-Hintergrundfarbe
      • Hover: Icon-Farbe und Hover-Hintergrundfarbe
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Kontakt-Formular

Das Kontaktformular-Modul hilft Ihnen, einen flexiblen und konversionsorientierten Kontaktbereich zu erstellen, indem es Formulare, Bilder, Überschriften und Kontaktdetails in einem einzigen Layout kombiniert. Mit mehreren Styling- und Layout-Steuerelementen passt sich dieses Modul leicht an unterschiedliche Designanforderungen auf Ihrer Website an.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Auswahl derBild-/Formularanzeige mit der Option, Bild und Formular zusammen anzuzeigen, je nach ausgewähltem Feld
  • Überschriften- und Beschreibungsfelder zur Einführung des Kontaktbereichs
  • Verwaltung von Kontaktinformationen mit Hilfe eines Repeaters, der unterstützt:

    • HubSpot-Symbole
    • Benutzerdefinierte Bildsymbole
    • Überschriftstext
    • Anklickbare Links
Stil-Optionen
  • Modulsichtbarkeitsschalter zum Ein- und Ausblenden des Moduls
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Wenn Formular ausgewählt ist, sind zusätzliche Optionen verfügbar:

    • Steuerung der Hintergrundfarbe des Formulars
    • Hintergrund des Formulartitels mit Farbverlauf und Farboptionen
  • Umschalten zwischen den Flex-Richtungszeilen zur Steuerung der Layout-Ausrichtung
  • Optionen für die Anpassung des Icon-Stils, einschließlich:

    • Icon-Farbe
    • Icon-Hintergrundfarbe
    • Hover: Farbe und Hintergrund des Symbols
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Google-Karte

Mit dem Google Map-Modul können Sie auf Ihrer Website ganz einfach eine Standortkarte anzeigen, indem Sie einen Google Maps-Einbettungscode hinzufügen. Es ist ideal, um Bürostandorte, Geschäftsadressen oder Servicebereiche in einem einfachen und responsiven Layout darzustellen.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Rich-Text-Feld zum Hinzufügen und Verwalten des Google Maps-Einbettungscodes
Stil-Optionen
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Schaltfläche

Das Button-Modul wird verwendet, um klickbare Button-Links zu erstellen, die Benutzer zu wichtigen Seiten oder Aktionen auf Ihrer Website führen.

Funktionen
  • Button-Einstellungen zum Hinzufügen von Button-Text und Link
Stil-Optionen
  • Optionen für die Textgestaltung mit Schriftartensteuerung
  • Anpassung derHintergrundfarbe
  • Randgestaltung mit Optionen für Stil, Breite und Farbe
  • Eckenradiussteuerung für abgerundete Kanten
  • Abstandsoptionen für obere, untere, linke und rechte Polsterung
  • Ausrichtungsoptionen zur Positionierung der Schaltfläche links, mittig oder rechts
Bildschirmfoto
Bildschirmfoto_
Bildschirmfoto

Blog-Banner

Das Blog-Banner-Modul zeigt ein einfaches Banner für Blog-Seiten an und ermöglicht es Ihnen, einen Blog-Titel und eine unterstützende Beschreibung hinzuzufügen, um einen klaren Kontext und visuelle Konsistenz zu gewährleisten.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Titel/Inhalt mit einem Rich-Text-Feld zum Hinzufügen einer Überschrift und Beschreibung
Stil-Optionen
  • Modulsichtbarkeits-Toggle zum Ein- und Ausblenden des Moduls
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Blog-Beitrag

Das Blog Listing Post-Modul wurde entwickelt, um Blog-Posts in einem strukturierten und visuell ansprechenden kartenbasierten Layout anzuzeigen. Es unterstützt die Präsentation des neuesten Beitrags, der letzten oder Tag-basierten Beiträge und der vollständigen Blog-Listenseiten mit flexiblen Anzeige-, Inhalts- und Styling-Steuerungen.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Option für dieerste Beitragsüberschrift mit einem Rich-Text-Feld zum Hinzufügen einer benutzerdefinierten Überschrift
  • Umschalter zum Ein-/Ausblenden des ersten Beitrags in voller Breite, um den neuesten Blogbeitrag hervorzuheben
  • Auswahl der Blog-Inhaltsquelle mit Optionen für:

    • Tag-bezogene Beiträge
    • Neueste Blogeinträge
    • Einträge auf der Blog-Listenseite
  • Überschriftder Blog-Liste über ein Rich-Text-Feld
  • Blog-Auswahlfeld zur Auswahl der angezeigten Blog-Beiträge
  • Ein/Ausblenden von Optionen für:

    • Name des Autors
    • Datum der Veröffentlichung
    • Themen
    • Mehr lesen-Link (mit benutzerdefiniertem Mehr lesen-Textfeld, wenn aktiviert)
Stil-Optionen
  • Modulsichtbarkeitsschalter zum Ein- und Ausblenden des Moduls
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die Kartengestaltung, einschließlich:

    • Steuerelemente fürKarten pro Zeile und Abstand mit separaten Einstellungen für Desktop-, Tablet- und mobile Layouts
    • Radius des Kartenrandes
    • Ausrichtung des Karteninhalts (links, mittig, rechts, ausrichten)
    • Stil, Breite und Farbe des Kartenrahmens
    • Hintergrundfarbe der Karte
    • Radius des Bildrandes
    • Innenpolsterung des Karteninhalts für Desktop und Mobile
    • Box-Schatten-Toggle mit Steuerelementen für X-Offset, Y-Offset, Unschärferadius, Verbreitungsradius und Farbe
  • Tag-Styling-Optionen , einschließlich:

    • Tag-Textfarbe
    • Tag-Hintergrundfarbe
    • Farbe des Tag-Rahmens
    • Radius des rechten oberen Randes für Tags
  • Schieberegler anzeigen/ausblenden mit zusätzlichen Schieberegleroptionen, wenn aktiviert:

    • Autoplay aktivieren/deaktivieren mit Steuerung der Autoplay-Geschwindigkeit
    • Umschalten zwischenPunkten und Pfeilen
    • Einstellungen für einzublendende Dias und Dias zum Scrollen für Desktop, Tablet und Handy
    • Anpassung des Punkt- und Pfeildesigns
  • Einstellungen fürden Überschriftenstil mit Optionen zur Steuerung der maximalen Breite und des unteren Rands der Überschrift
  • Einstellung fürdie Anzahl der Beiträge über ein Zahlenfeld, um zu steuern, wie viele Blogbeiträge in der Liste angezeigt werden
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_9-3
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Blog-Abonnement-Formular

Das Blog-Abonnement-Modul wird verwendet, um einen Abonnement-Abschnitt anzuzeigen, der Benutzer dazu auffordert, sich für Blog-Updates oder Newsletter anzumelden. Es kombiniert eine Überschrift mit einem Anmeldeformular und bietet Styling-Optionen zur Anpassung an das Design Ihres Blogs oder Ihrer Website.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Überschriften- und Inhaltsverwaltung mit einem Rich-Text-Feld zum Hinzufügen von Titel und Beschreibung des Abschnitts
  • Formularauswahloption zur Auswahl und Anzeige eines HubSpot-Formulars
Stil-Optionen
  • Hintergrund-Styling mit Unterstützung für Farbverläufe
  • Umschalter fürbenutzerdefiniertes Formularstyling zum Aktivieren oder Deaktivieren erweiterter Formularstile

    • Wenn das benutzerdefinierte Styling aktiviert ist, sind die folgenden Optionen verfügbar:
      • Textfarbe des Formulartitels
      • Hintergrundfarbe des Formulartitels (Farbverlauf)
      • Äußerer Rahmenradius
      • Schattenfarbe des Formularfeldes
      • Hintergrundfarbe des Formulars
      • Hintergrundfarbe des Eingabefeldes
      • Randradius des Eingabefeldes
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Blog Tag Post

Das Blog-Tag-Post-Modul zeigt Blog-Posts auf der Grundlage ausgewählter Tags in einem übersichtlichen und konsistenten Layout an und ermöglicht die Kontrolle über die sichtbaren Post-Details und das Card-Styling.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Überschriftenverwaltung mit einem Rich-Text-Feld zum Hinzufügen eines benutzerdefinierten Titels
  • Steuerelemente für die Beitragsanzeige mit Umschaltoptionen für:

    • Zusammenfassung des Beitrags
    • Name des Autors
    • Datum der Veröffentlichung
    • Themen
    • Schaltfläche "Mehr lesen" ein-/ausblenden, mit benutzerdefiniertem Schaltflächentext
    • Beitrag lesen Zeit anzeigen/ausblenden, mit benutzerdefiniertem Text
    • Anzahl der anzuzeigenden Beiträge
Stil-Optionen
  • Modul-Sichtbarkeits-Toggle zum Ein- und Ausblenden des Moduls
  • Abschnittsabstände für oben, unten, links und rechts auf Desktop, Tablet und Handy
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die Kartengestaltung, einschließlich:

    • Steuerelemente fürKarten pro Zeile und Abstand mit separaten Einstellungen für Desktop-, Tablet- und mobile Layouts
    • Radius des Kartenrandes
    • Ausrichtung des Karteninhalts (links, mittig, rechts, ausrichten)
    • Stil, Breite und Farbe des Kartenrahmens
    • Hintergrundfarbe der Karte
    • Radius des Bildrandes
    • Innenpolsterung des Karteninhalts für Desktop und Mobile
    • Box-Schatten-Toggle mit Steuerelementen für X-Offset, Y-Offset, Unschärferadius, Verbreitungsradius und Farbe
  • Tag-Styling-Optionen , einschließlich:

    • Tag-Textfarbe
    • Tag-Hintergrundfarbe
    • Farbe des Tag-Rahmens
    • Radius des rechten oberen Randes für Tags
  • Schieberegler anzeigen/ausblenden mit zusätzlichen Schieberegleroptionen, wenn aktiviert:

    • Autoplay aktivieren/deaktivieren mit Steuerung der Autoplay-Geschwindigkeit
    • Umschalten zwischenPunkten und Pfeilen
    • Einstellungen für einzublendende Dias und Dias zum Scrollen für Desktop, Tablet und Handy
    • Anpassung des Punkt- und Pfeildesigns
  • Option für die maximale Breite von Überschriften, um eine benutzerdefinierte maximale Breite für den Überschriftenbereich festzulegen
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Logo mit Link

Mit dem Modul Logo mit Link können Sie ein Logo mit einem zugehörigen Link und einer kurzen Beschreibung anzeigen.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Logo-Bild mit Link-Option, um das Logo anklickbar zu machen
  • Rich-Text-Feld zum Hinzufügen einer Logobeschreibung oder unterstützender Inhalte
Stil-Optionen
  • Modul-Sichtbarkeits-Toggle zum Ein- und Ausblenden des Moduls
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Menü Navigation

Das Navigationsmenü-Modul wird verwendet, um die primäre Kopfnavigation Ihrer Website anzuzeigen. Es hilft bei der Organisation von Seiten und Abschnitten in einem klaren, benutzerfreundlichen Menü mit Unterstützung für Dropdown-Ebenen.

Merkmale
  • Menüauswahlfeld zum Erstellen und Auswählen des anzuzeigenden Menüs
  • Option"Maximale Ebenen" zur Steuerung der Anzahl der angezeigten Dropdown-Menüebenen
Bildschirmfoto
Bildschirmfoto

Blog-Paginierung

Das Blog-Modul Pagination wird verwendet, um zwischen mehreren Blog-Seiten zu navigieren, so dass die Besucher ältere und neuere Beiträge übersichtlich durchblättern können.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Paginierungstextoptionen zur Anpassung der Beschriftung der Schaltflächen Vorherige und Nächste
Stil-Optionen
  • Abstandskontrollen für die obere, untere, linke und rechte Auffüllung auf Desktop, Tablet und Mobilgeräten
  • Auswahl desPaginierungsstils mit Theme- oder Custom-Optionen
  • Wenn "Benutzerdefiniert" ausgewählt ist, sind zusätzliche Gestaltungsoptionen verfügbar:
    • Hintergrundfarbe
    • Textfarbe
    • Aktiv/ Hover

      • Hintergrundfarbe
      • Farbe Farbe
Bildschirm
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Soziale Links

Mit dem Modul Soziale Links können Sie Symbole für soziale Medien anzeigen, die auf Ihre sozialen Profile oder URLs zum Teilen von Inhalten verweisen. Es bietet flexible Icon- und Styling-Optionen, die es einfach machen, sich an Ihr Markendesign anzupassen und gleichzeitig Nutzer zum Verbinden oder Teilen von Inhalten zu ermutigen.

Funktionen
  • Verwaltung sozialer Icons über einen Repeater, mit Unterstützung für:

    • HubSpot-Symbole
    • Bild-Symbole
    • Benutzerdefinierter SVG-Code
    • Icon-Link-Konfiguration für jedes soziale Icon
Stil-Optionen
  • Modul-Sichtbarkeitsschalter zum Ein- und Ausblenden der Social Sharing-Links
  • Benutzerdefinierte Farbe des sozialen Symbols umschaltbar:

    • Wenn diese Option aktiviert ist, sind Optionen für die Gestaltung des Symbols verfügbar, darunter:
      • Icon-Farbe
      • Icon-Hintergrundfarbe
      • Hover: Icon-Farbe und Hover-Hintergrundfarbe
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Benutzerdefinierte Schaltflächen

Mit dem Modul für benutzerdefinierte Schaltflächen können Sie mehrere Schaltflächen mit flexiblen Stilen und Links hinzufügen und so leicht Call-to-Action-Gruppen auf Ihren Seiten erstellen.

Funktionen
  • Buttons Repeater zum Hinzufügen mehrerer Buttons
  • Unterstützung vonSchaltflächentext und benutzerdefinierten Schaltflächenklassen
  • Auswahl des Schaltflächenstils: Primär, Sekundär, Tertiär, Einfach und Benutzerdefiniert
  • Konfiguration der Schaltflächenverknüpfung
  • Schaltflächensymbol zum Aktivieren oder Deaktivieren von Symbolen

    • Auswahl des Icon-Typs: SVG oder Font Awesome (HubSpot-Symbol)
    • Steuerung der Icon-Position mit linker oder rechter Ausrichtung
Stil-Optionen
  • Abstandskontrollen für die obere, untere, linke und rechte Auffüllung auf Desktop, Tablet und Mobile
  • Ausrichtungsoptionen zur Positionierung der Schaltfläche links, mittig oder rechts
Bildschirmfoto
Bildschirmfoto
Screenshot_5-Jan-14-2026-10-56-34-0045-AM

Menü Fußzeile

Das Footer Menu-Modul wird verwendet, um Navigationslinks in der Fußzeile der Website anzuzeigen, damit Besucher schnell auf wichtige Seiten und Ressourcen zugreifen können.

Merkmale
  • Auswahl desMenütyps mit Optionen für Einfaches Menü oder Standardmenü
  • Die Menüfelder werden dynamisch auf der Grundlage des ausgewählten Menütyps angezeigt
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Icon & Text Raster

Das Icon & Text Grid Modul wird verwendet, um wichtige Informationen mit Icons und Text in einem sauberen, rasterbasierten Layout anzuzeigen. Es eignet sich ideal für die Anzeige von Kontaktinformationen in der Fußzeile, wie Telefonnummern, E-Mail-Adressen, Standorte oder andere Schnellinformationsblöcke in einer visuell konsistenten Weise.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Repeater-basierte Elemente zur Verwaltung mehrerer Einträge, einschließlich:

    • Link-Feld für anklickbare Einträge
    • Auswahl eines Symbols oder Bildes (Bild, HubSpot-Symbol oder benutzerdefinierter SVG-Code). Je nach ausgewählter Option werden die entsprechenden Felder angezeigt
    • Inhaltliches Textfeld für Beschriftungen
Stil-Optionen
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für die Abschnittsabstände oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
  • Steuerelement für die Ausrichtung des Icon-Textgitters für Elemente (Anfang, Mitte, Ende)
  • Icon Text Grid Pro Zeile Einstellungen für Desktop, Tablet und Mobile
  • Icon Text Grid Gap-Steuerung zwischen für Desktop, Tablet und Mobile
  • Optionen fürdie Gestaltung von Symbolen, einschließlich:

    • Größe des Ikonenhintergrunds
    • Icon-Hintergrundfarbe
    • Icon-Größe
    • SVG-Symbolfarbe
    • Aktivieren/Deaktivieren des Umschalters für Symbol- und Textflexrichtung (Spaltenlayout)
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto

Zu Div blättern

Das Modul "Scroll To Div" wurde für Dokumentationsseiten entwickelt, damit Benutzer schnell zwischen verschiedenen Abschnitten auf derselben Seite navigieren können. Es verbessert die Benutzerfreundlichkeit, indem es den Inhalt in Kategorien organisiert und einen reibungslosen Bildlauf zu verwandten Abschnitten ermöglicht, mit Unterstützung für Bilder und Videos.

Merkmale
  • Textfeld fürKategoriebezeichnungen zur Anzeige von Abschnittsüberschriften oder Navigationsbezeichnungen
  • Ressourcenverwaltung über einen Repeater mit den folgenden Feldern:

    • Navigationstext
    • Kategoriezuweisung zur Gruppierung verwandter Elemente
    • Beschreibungsfeld für unterstützende Inhalte
    • Auswahl desMedientyps (Bild oder Video)

      • Wenn Bild ausgewählt wird, werden das Bildfeld und eine Option zum Aktivieren/Deaktivieren der 100%igen Bildbreite angezeigt.
      • Wenn Video ausgewählt wird, sind Video-Optionen verfügbar, einschließlich der Einbettungs-URL oder des Einbettungscodes

Anmerkungen: Automatisches Slider-Verhalten, wenn mehr als ein Bild/Video zu einem Ressourcenelement hinzugefügt wird

Stil-Option
  • Modulsichtbarkeits-Toggle zum Ein- oder Ausblenden von Scroll To Div
Bildschirmfoto
Bildschirmfoto_13-1

Über Impact

Das Modul About Impact hebt die wichtigsten Leistungen, Fortschritte und Informationen mit Hilfe von Überschriften, Listen, Fortschrittsbalken, Bildern und Schaltflächen in einem flexiblen zweispaltigen Layout hervor.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Überschrift & Beschreibung: Rich-Text-Feld zum Hinzufügen der Hauptüberschrift und der dazugehörigen Beschreibung
  • Geordnete Liste: Mit einem Repeater verwalteter Inhalt, einschließlich:
    • Auswahl eines Symbols oder Bildes (HubSpot-Symbol oder Bild, je nach Auswahl)
    • Rich-Text-Feld für den Listeninhalt
    • Steuerung der Icon-Farbe
  • Fortschrittsbalken: Verwaltet über einen Repeater mit:
    • Fortschrittsanzeige in Prozent (0-100)
    • Hintergrundfarbe des Fortschrittsbalkens
    • Beschriftung des Fortschrittsbalkens (Rich Text)
  • Schaltflächen-Optionen: Beinhaltet:
    • Schaltflächentyp (Primär, Sekundär, Tertiär, Einfach, Benutzerdefiniert)
    • Schaltflächengröße (Normal, Groß, Klein)
    • Schaltflächentext und Link
    • Schaltflächensymbol ein-/ausblenden (Toggle)
    • Auswahl des Symbols (SVG-Symbol oder HubSpot-Symbol, wird je nach Auswahl angezeigt)
  • Linke Spalte Bild: Bildfeld zum Hinzufügen eines unterstützenden Bildes
Stil-Optionen
  • Modul-Sichtbarkeits-Toggle zum Ein- und Ausblenden des Moduls
  • Optionen zur Anpassung des Hintergrunds, einschließlich:
    • Hintergrundfarbe
    • Hintergrund-Gradient
    • Hintergrundbild
  • Abschnittsabstandssteuerung für die obere, untere, linke und rechte Auffüllung auf Desktop, Tablet und Handy
  • Spaltenausrichtung: Bild/Inhalt oder Inhalt/Bild-Layout zur Auswahl
  • Spaltenausrichtung: Flexible Ausrichtungsoptionen (Start, Mitte, Ende)
  • Container-Einstellungen: Seitenmitte oder benutzerdefinierte Container-Option
    • Benutzerdefinierte Containerbreite
    • Linke und rechte Abstandskontrolle
  • Radius des Bildrandes: Steuerelement zur Anpassung der Bildeckenrundung
  • Zweispaltiges Layout umschalten: Wenn aktiviert, werden die geordnete Liste und der Fortschrittsbalken nebeneinander angezeigt.
Bildschirmfoto_1-1
Bildschirmfoto_2-1
Bildschirmfoto
Bildschirmfoto

Funktionsübersichtskarten

Das Modul Feature Overview Cards wird verwendet, um die wichtigsten Funktionen oder Angebote in einem strukturierten kartenbasierten Layout zu präsentieren. Es unterstützt flexible Layouts, reichhaltige Inhalte, Symbole oder Bilder und optionale Schaltflächen und ist damit ideal für die Hervorhebung von Dienstleistungen, Produktmerkmalen oder Hauptvorteilen.

Funktionen
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Layout-Auswahl:
    • Kartenbox-Layout
    • Inline-Karten-Layout
  • Überschrift & Beschreibung: Rich-Text-Feld zum Hinzufügen der Hauptüberschrift und der dazugehörigen Beschreibung
  • Optionen für Abschnittsschaltflächen:
    • Schaltflächentyp (Primär, Sekundär, Tertiär, Einfach, Benutzerdefiniert)
    • Schaltflächengröße (Normal, Groß, Klein)
    • Schaltflächentext und Link
    • Schaltflächensymbol ein-/ausblenden (Toggle)
    • Auswahl des Symbols (SVG-Symbol oder HubSpot-Symbol, wird je nach Auswahl angezeigt)
  • Inhalt der Karten: Wird über einen Repeater verwaltet, wobei jede Karte unterstützt wird:
    • Auswahl des Icon-Formats (HubSpot-Symbol, SVG-Code oder Bild)
    • Relevante Icon-Felder, die basierend auf dem ausgewählten Format angezeigt werden
    • Rich-Text-Feld für Kartentitel und Beschreibung
    • Schaltflächenoptionen einschließlich:
      • Schaltflächentyp (primär, sekundär, tertiär, einfach, benutzerdefiniert)
      • Schaltflächengröße (Normal, Groß, Klein)
      • Schaltflächentext und Link
Stil-Optionen
  • Optionen zur Anpassung des Hintergrunds, einschließlich:
    • Hintergrundfarbe
    • Hintergrund-Gradient
    • Hintergrundbild
  • Steuerelemente für den Abstand zwischen den Abschnitten oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
  • Spalteneinstellungen:
    • Steuerelemente für die linke und rechte Spaltenbreite
    • Lücke zwischen den Spalten
    • Umschalter für die Änderung der Spaltenrichtung
    • Vertikale Umwandlung gerader Elemente: Umschalter
  • Karten-Stil:
    • Hintergrundfarbe der Karte
    • Icon-Größe und SVG-Farbsteuerung
    • Größe und Farbe des Hintergrundkreises mit Umschalter für Ein- und Ausblenden
    • Optionen zum Ausrichten des Karteninhalts (Flex Start, Space Between, Center, Space Around, Flex End)
    • Steuerelemente für Rahmen, Eckenradius und Boxschatten
  • Steuerelemente für den Abstand von Boxspalten und -zeilen für Desktop, Tablet und Mobilgeräte
  • Steuerelemente für den inneren Abstand der Karte (Spalte innen) für Desktop, Tablet und Mobilgeräte
  • Steuerelemente für den äußeren Abstand der Karte (außerhalb der Zeile) für Desktop, Tablet und Mobilgeräte
  • Ausrichtung und Richtung:
    • Umschalter für die Ausrichtung von Symbolen und Inhalt in der Mitte
    • Optionen für die Ausrichtung von Symbolen (Oben links, Oben rechts, Zentriert, Keine)
Bildschirmfoto_1-2
Bildschirmfoto_2-2
Bildschirmfoto_3
Bildschirmfoto_4-1

Erweiterte Preissetzungskarte

Das Advanced Pricing Card-Modul wurde entwickelt, um flexible Preispläne mit Unterstützung für monatliche und jährliche Preise, anpassbare Kartenstile, symbolbasierte Funktionslisten und responsive Layout-Steuerungen anzuzeigen. Das Modul bietet umfangreiche Styling- und Layout-Optionen für volle Designflexibilität.

Funktionen
  • Benutzerdefinierte Klasse und ID
    Fügen Sie benutzerdefinierte CSS-Klassen und IDs für erweitertes Styling und Targeting hinzu.

  • Hauptüberschrift
    Rich-Text-Feld für die Überschrift des Hauptbereichs.

  • Umschalter für Preisplan

    • Toggle/Boolean-Option zum Umschalten zwischen monatlichen und jährlichen Preisplänen.

Preiskarten Repeater
  • Repeater zum Hinzufügen mehrerer Preiskarten.

Einstellungen für Preisschild
  • Textfeld für die Preisschildbeschriftung.

  • Option für die Hintergrundfarbe.

  • Option Textfarbe.

  • Umrandungsradius (Zahlenfeld).

Einstellungen für Preisgruppen
  • Tag-Auswahloption für den Preistext:

    • H1-H6

    • Absatz(p)

  • Monatlicher Preis (Textfeld).

  • Jährlicher Preis (Textfeld).

Titel & Beschreibung
  • Auswahl des Titel-Tags:

    • H1-H6

    • Absatz(p)

  • Titeltext (Textfeld).

  • Beschreibungstext (Textfeld).

Icon Text Wiederholung
  • Wiederholer zum Hinzufügen mehrerer Merkmalspunkte.

  • Textfeld für jedes Feature-Element.

  • HubSpot-Symbolfeld für jeden Symbolpunkt verfügbar.

Schaltflächen-Optionen
  • Unterstützung für:

    • Themen-Schaltflächen

    • Benutzerdefinierte Schaltflächen

Stiloptionen auf Kartenebene

Jede Preiskarte enthält individuelle Stilkontrollen:

  • Hintergrundfarbe der Karte.

  • Farbe des Kartenrandes.

  • Farbe der Überschrift.

  • Farbe des Inhaltstextes.

  • Farbe des unteren Rahmens des Inhalts.

Styling-Optionen
  • Responsive Abschnittsabstandssteuerung für:

    • Desktop

    • Tablet

    • Mobil

  • Hintergrund-Optionen:

    • Hintergrundbild mit Overlay

    • Hintergrundfarbe

Container-Einstellungen
  • Toggle/Boolean-Option zur Einstellung der maximalen Inhaltsbreite.

  • Max-Breite (Zahlenfeld).

  • Steuerelemente für die linke und rechte Auffüllung.

Karten-Styling
  • Steuerelemente für die inneren Abstände der Karte:

    • Desktop

    • Tablet

    • Mobil

  • Schattenfarbe der Hover-Box der Karte.

  • Radius des Kartenrandes (Zahlenfeld).

Bildschirmfoto
Bildschirmfoto-1-1
Bildschirmfoto-2-1
Preispläne

Aufruf zum Handeln

Das Call-to-Action-Modul wurde entwickelt, um wichtige Botschaften mit flexiblen Inhalten, Schaltflächen und Symbolen hervorzuheben. Es bietet umfangreiche Styling-Steuerelemente, Sichtbarkeitsoptionen und responsive Einstellungen, um verschiedene Designanforderungen zu erfüllen.

Eigenschaften des Moduls
  • Benutzerdefinierte Klasse und ID
    Fügen Sie benutzerdefinierte CSS-Klassen und IDs für erweitertes Styling und Targeting hinzu.

  • Box-Inhalt

    • Rich-Text-Feld für den Hauptinhalt des CTA.

  • Schaltflächen-Optionen

    • Unterstützung für:

      • Themen-Schaltflächen

      • Benutzerdefinierte Schaltflächen

    • Benutzerdefinierte Schaltflächen-Stiloptionen:

      • Hintergrundfarbe

      • Textfarbe

      • Farbe der Umrandung

      • Hover-Status-Styling:

        • Button-Hover-Hintergrundfarbe

        • Button-Hover-Textfarbe

        • Farbe des Rahmens beim Hover-Button

  • Icon-Unterstützung:

    • HubSpot-Symbole

    • SVG-Symbole

  • Anpassung der Ikonenfarbe:

    • Standard-Symbolfarbe

    • Icon-Hover-Farbe

  • Unterer Text

    • Rich-Text-Feld für zusätzlichen unterstützenden Inhalt unterhalb der Schaltfläche.

Optionen für die Gestaltung

Sichtbarkeit des Moduls

  • Toggle/Boolean-Option zum Anzeigen oder Ausblenden des Moduls.

Abschnitt-Styling

  • Responsive Abschnittsabstandssteuerung für:

    • Desktop

    • Tablet

    • Mobil

  • Hintergrund-Optionen:

    • Hintergrundbild mit Overlay

    • Hintergrundfarbe / Farbverlaufsfeld

  • Option für den Radius der Abschnittsgrenzen.

Layout & Ausrichtung

  • Klasse "Seitenmitte":

    • Option zum Ein- und Ausblenden.

Box-Stil-Einstellungen

  • Optionen für den Box-Hintergrund:

    • Hintergrundfarbe

    • Hintergrundbild mit Overlay

  • Rahmen der Box:

    • Ein-/Ausblenden der Option.

  • Box-Schatten:

    • Ein/Ausblenden der Option

    • Wenn aktiviert:

      • Farbe des Boxschattens

      • Steuerung der Schattentransparenz

  • Box-Abstand:

    • Option ein-/ausblenden (Toggle)

    • Wenn aktiviert, Abstandssteuerung für:

      • Desktop

      • Tablet

      • Mobil

  • Radius der Umrandung:

    • Option ein-/ausblenden (Toggle)

    • Wenn aktiviert, Zahlenfeld zur Steuerung des Rahmenradius der Box.

  • Benutzerdefinierte Inhaltsbreite:

    • Option ein-/ausblenden (Toggle)

    • Wenn diese Option aktiviert ist, kann die Breite des Inhalts über ein Zahlenfeld gesteuert werden.

Schaltfläche Styling

  • Option zur Ausrichtung der Schaltfläche.

  • Steuerung des oberen Randes der Schaltfläche.

Radius der Abschnittsumrandung:

  • Option zur Anwendung und Steuerung des Randradius für den gesamten Abschnitt.

Aufruf zum Handeln-01
Aufruf zum Handeln-02
Aufruf zum Handeln-03
Aufruf zum Handeln

Registerkarten

Mit dem Modul "Registerkarten" können Sie Inhaltskarten anzeigen, die nach Registerkartenmenü-Tags gefiltert sind. Jede Karte kann mehrere Tags haben, und die angezeigten Karten entsprechen der/den ausgewählten Registerkarte(n). Die Karten können Bilder, Profilnamen, Beschreibungen und Schaltflächen enthalten und bieten so eine flexible Möglichkeit, Inhalte zu organisieren und zu präsentieren.

Funktionen
  • Benutzerdefinierte Klasse und ID: Fügen Sie benutzerdefinierte CSS-Klassen und IDs für erweitertes Styling und Targeting hinzu.

  • Überschrift: Rich-Text-Feld für die Überschrift des Hauptbereichs.

  • Karten-Wiederholer:

    • Kategorietext: Geben Sie mehrere Kategorien mithilfe eines Textfeld-Repeaters ein.
    • Bild hinzufügen
    • Profilname (Rich-Text-Feld)
    • Beschreibung (Rich-Text-Feld)
    • Schaltfläche Link
Stil-Felder

Abschnitt Styling:

  • Hintergrundoptionen: Hintergrundbild mit Overlay, Hintergrundfarbe/Gradient-Feld
  • Abschnittsabstände für Desktop, Tablet und Mobile

Container-Einstellungen:

  • Auswahl zwischen Page Center oder Custom Container
  • Bei Auswahl von "Benutzerdefinierter Container": Einstellung der maximalen Breite des Containers und der linken/rechten Auffüllung

Registerkartenmenü-Styling:

  • Registerkarten-Textfarbe, Hintergrundfarbe, Rahmen
  • Stil der aktiven Registerkarte: Textfarbe der Registerkarte, Hintergrundfarbe, Umrandung
  • Ausrichtung des Registerkartenmenüs: Mitte, Links, Rechts

Karten-Styling:

  • Karten pro Zeile für Desktop, Tablet und Mobile
  • Lücke zwischen den Karten
  • Hintergrundfarbe und Deckkraft des Inhalts
  • Textfarbe des Inhalts
  • Kartenrahmen und Boxschatten (ein-/ausschaltbar; Schatteneinstellungen einstellbar)
  • Kartenbild-Styling: Hintergrundposition (oben/mittig), Mindesthöhe
  • Ausrichtung des Karteninhalts: Zentriert oder Links
tab-Karten-01
filter-2
filter-3
tab-Karten-04
tab-Karten-05
tab-Karten-06
tab-Karten-07
tab-Karten-08

Blog Beliebter Beitrag

Mit dem Blog Popular Post-Modul können Sie ausgewählte Blogbeiträge in einem optisch ansprechenden und stark anpassbaren Layout präsentieren. Es ermöglicht die Hervorhebung herausgehobener Beiträge, die Anzeige aktueller und beliebter Beiträge und gibt Ihnen die volle Kontrolle über Inhalt, Layout und Styling, wodurch Ihr Blogbereich ansprechender und übersichtlicher wird.

Merkmale:
  • Benutzerdefinierte Klasse und ID: Weisen Sie dem Modul benutzerdefinierte CSS-Klassen und IDs für erweitertes Styling oder Scripting zu.
  • Hauptüberschrift: Rich-Text-Feld für die Hauptüberschrift des Abschnitts.
  • Blog-Auswahl: Option zur Auswahl eines bestimmten Blogs oder zur automatischen Anzeige von Beiträgen.
  • Neueste Beiträge anzeigen: Schalten Sie diese Option ein, um die neuesten Blogeinträge anzuzeigen.
  • Benutzerdefinierter Inhalt des ersten Beitrags: Aktivieren Sie diese Option, um ein benutzerdefiniertes Layout für den ersten Beitrag hinzuzufügen, das ein Bild, einen Tag-Text, einen Auszug aus dem Inhalt und eine Schaltfläche enthält.
  • Auswahl des Tags für den ersten neuen Beitrag: Wählen Sie ein Tag aus, um die Anzeige des ersten letzten Beitrags zu filtern.
  • Linke Spaltenüberschrift: Rich-Text-Feld für die Überschrift der linken Spalte.
  • Beliebte Beiträge anzeigen: Schalten Sie diese Option ein, um die beliebtesten Beiträge anzuzeigen.
  • Überschrift der rechten Spalte: Rich-Text-Feld für die Überschrift der rechten Spalte.
  • Schaltfläche Alle Beiträge anzeigen: Schaltfläche, die auf die Seite mit der Blogliste verweist.
Stil-Felder:
  • Abstand zwischen den Abschnitten: Passen Sie die Abstände für Desktop-, Tablet- und Mobilgeräte an.
  • Auswahl des Abschnittshintergrunds: Zu den Optionen gehören Hintergrundbild mit Overlay, Hintergrundfarbe oder Farbverlauf.
  • Beliebtester Tag-Stil: Legen Sie Hintergrundfarbe und Textfarbe fest.
  • Tag-Stil "Neueste Beiträge": Legen Sie die Hintergrundfarbe und die Textfarbe fest.
  • Bild-Stil: Legen Sie die Bildhöhe als Prozentsatz fest und definieren Sie den Randradius mit Hilfe des Zahlenfeldes.
  • Beitrags-Tags anzeigen: Schalten Sie die Anzeige der Beitrags-Tags ein.
  • Veröffentlichungsdatum anzeigen: Schalten Sie diese Option ein, um das Veröffentlichungsdatum von Beiträgen anzuzeigen.
  • Autorenname anzeigen: Schalten Sie diese Option ein, um den Namen des Autors anzuzeigen.
  • Beitragstitel anzeigen: Schalten Sie diese Option ein, um den Titel des Beitrags anzuzeigen.
  • Stil der Hauptüberschrift: Legen Sie die maximale Überschriftenbreite und den unteren Rand für die Überschrift fest.
Blog-Beitrag-01
Blog-Beitrag-2
Blog-Beitrag

Unser Team Karten

Das Modul Unsere Teamkarten ermöglicht es Ihnen, Ihre Teammitglieder in einem optisch ansprechenden und vollständig anpassbaren Layout zu präsentieren. Sie können mehrere Teammitgliederprofile mit Bildern, Namen, Beschreibungen und sozialen Symbolen hinzufügen. Das Modul bietet außerdem umfangreiche Styling-Optionen für das Layout von Abschnitten, Karten, Bildern und sozialen Symbolen und gewährleistet so die Konsistenz mit dem Design Ihrer Website.

Merkmale:
  • Benutzerdefinierte Klasse und ID: Weisen Sie benutzerdefinierte CSS-Klassen und IDs für erweiterte Styling- oder Skriptingzwecke zu.
  • Hauptüberschrift: Rich-Text-Feld für die Hauptüberschrift des Abschnitts.
  • Teamkarten-Wiederholer: Fügen Sie mehrere Teammitgliederprofile mit den folgenden Feldern hinzu:
    • Profilbild: Laden Sie das Foto eines Teammitglieds hoch.
    • Profil-Name: Rich-Text-Feld für den Namen des Teammitglieds.
    • Beschreibung: Rich-Text-Feld für eine kurze Biografie oder Beschreibung.
    • Wiederholer für soziale Symbole: Fügen Sie mehrere soziale Symbole mit Optionen hinzu:
      • Icon-Auswahl: HubSpot-Symbol oder SVG-Symbol.
Abschnitt Stil:
  • Abstand zwischen den Abschnitten: Passen Sie die Abstände für Desktop-, Tablet- und Mobilgeräte an.
  • Auswahl des Abschnittshintergrunds: Zu den Optionen gehören Hintergrundbild mit Überlagerung oder Hintergrundfarbe/Gradient.
Karten-Stil:
  • Innere Abstände: Passen Sie den Kartenabstand für Desktop-, Tablet- und Mobilgeräte an.
  • Karten pro Zeile: Wählen Sie die Anzahl der Karten pro Zeile für jeden Gerätetyp.
  • Kartenabstand: Passen Sie die Abstände zwischen den Karten an.
  • Hintergrundfarbe: Legen Sie die Hintergrundfarbe der Karten fest.
  • Kartenumrandung & Umrandungsradius: Passen Sie den Randstil und den Eckenradius an.
  • Kartenschatten: Ein-/Ausblenden; wenn aktiviert, passen Sie den Kartenschatten an.
  • Kartenbild-Stil:
    • Bild-Radius: Passen Sie den Eckenradius des Bildes an.
    • Objekt-Position: Zentrierte oder obere Ausrichtung.
    • Objekt einpassen: Abdecken oder einschließen.
    • Bildhöhe: Höhe in Prozent oder Pixeln festlegen.
Stil der sozialen Symbole:
  • Symbolfarbe und Hover-Farbe: Passen Sie die Standard- und Hover-Farben an.
  • Icon Größe: Passen Sie die Größe der Icons an.
  • Hintergrundfarbe & Hover-Hintergrund: Legen Sie die Hintergrundfarben für die Symbole fest.
  • Hintergrundgröße: Passen Sie die Größe der Icon-Hintergründe an.
  • Radius der Umrandung: Legen Sie den Eckenradius für die Hintergründe von sozialen Symbolen fest.
Container-Stil:
  • Container-Auswahl: Seite zentriert oder benutzerdefinierter Container.
  • Benutzerdefinierte Container-Einstellungen: Maximale Breite und linke/rechte Polsterung.
unser-team-01
unser-team-02
unser-team-03
unser-team-04
unsere-team-karten

Video zur Leistungsschau

Mit diesem Modul können Sie flexible Inhaltsabschnitte mit Symbolen, Rich Text und einem optionalen Bild oder Video erstellen. Sie können zwischen mehreren Layouts wählen, die Ausrichtung und Breite für verschiedene Bildschirmgrößen steuern und das visuelle Styling von Abschnitten, Containern, Medien und Symbolinhalten vollständig anpassen.

Merkmale:
  • Benutzerdefinierte Klasse und ID:
    Weisen Sie benutzerdefinierte CSS-Klassen und IDs für erweitertes Styling oder Scripting zu.

  • Layout-Auswahl:
    Wählen Sie zwischen Inhalten mit Bild/Video oder einem einzelnen Inhaltslayout.

  • Überschrift & Inhalt:
    Rich-Text-Feld zum Hinzufügen von Überschriften und beschreibendem Inhalt.

  • Icon Content Repeater:
    Fügen Sie mehrere Icon-Content-Elemente mit den folgenden Optionen hinzu:

    • Icon-Auswahl: SVG-Code, Bild oder HubSpot-Symbol

    • Inhalt: Rich-Text-Feld für jedes Icon-Element

  • Bild/Video-Auswahl:
    Wählen Sie zwischen der Anzeige eines Bildes oder eines Videos.

    • Wenn Video ausgewählt wird, ist eine Umschaltoption verfügbar, um Popup-Videos zu aktivieren.

    • Als Videoquelle können Sie eine Videodatei hochladen, ein HubSpot-Video oder einen Einbettungscode verwenden.

    • Ein Miniaturbild des Videos kann für die Vorschauanzeige hinzugefügt werden.

  • Schaltfläche:
    Fügen Sie eine konfigurierbare Schaltfläche mit Link- und Beschriftungsoptionen hinzu.

  • Wrapper-Einstellungen:

    • Maximale Breiteneinstellungen für große, mittlere und kleine Bildschirme

    • Blockausrichtung (links, mittig, rechts) für jede Bildschirmgröße

    • Textausrichtung (links, mittig, rechts) für jede Bildschirmgröße

Abschnitt Stil
  • Abstand zwischen den Abschnitten:
    Steuern Sie den Abstand für Desktop-, Tablet- und Mobilgeräte.

  • Auswahl des Abschnittshintergrunds:
    Zu den Optionen gehören Hintergrundbild mit Überlagerung oder Hintergrundfarbe/Gradient.

Container-Einstellungen
  • Container-Typ:
    Seite zentriert, volle Breite oder benutzerdefinierter Container.

  • Optionen für benutzerdefinierte Container:
    Passen Sie die maximale Breite an und aktivieren Sie eine boolesche Option, um den Container oder den Abschnitt nach links oder rechts zu fixieren.

Bild-/Videostil
  • Rechte Bild-/Videoeinstellungen:

    • Legen Sie die maximale Breite des Bildes oder Videos fest.

    • Wählen Sie die Medienausrichtung: links, mittig oder rechts

    • Stil des Video-Wiedergabesymbols:
      Passen Sie die Hintergrundfarbe des Wiedergabesymbols, die Farbe des Rahmens und die Farbe des Symbols an.

  • Bild-Box-Schatten:
    Aktivieren oder deaktivieren Sie den Rahmenschatten und passen Sie seine Werte an.

  • Bild-/Video-Randradius:
    Passen Sie den Eckenradius des Medienelements an.

Zweispaltige Einstellungen
  • Steuerung der Spaltenbreite:
    Zahlenfelder zur Anpassung der linken und rechten Spaltenbreite.

  • Flex-Richtung:
    Boolesche Optionen zur Aktivierung der Zeilenumkehr für Desktop und Mobile.

  • Abstand zwischen den Spalten:
    Passen Sie den Abstand zwischen den beiden Spalten an.

Icon Content Repeater Stil
  • Icon Größe:
    Passen Sie die Größe der Icons an.

  • Icon Farbe:
    Legen Sie die Farbe des Symbols fest.

  • Icon Hintergrundgröße:
    Stellen Sie die Größe des Symbolhintergrunds ein.

  • Icon Hintergrundfarbe:
    Passen Sie die Hintergrundfarbe der Symbole an.

  • Umrandungsradius:
    Legen Sie den Eckenradius für den Symbolhintergrund fest.

Video-Schaukasten-1
Video-Schaukasten-3
Video-Schaukasten-4
Video-Schaukasten
video-schaukasten-6
video-schaukasten-7
video-schaukasten-8

Schrittregisterkarten mit Popup-Video

Dieses Modul wurde entwickelt, um einen Schritt-für-Schritt-Prozess mit Hilfe von tabulatorbasierten Karten und einem optionalen Popup-Video darzustellen. Es hilft dabei, Arbeitsabläufe, Serviceschritte oder Methoden auf strukturierte und visuell ansprechende Weise zu präsentieren, mit voller Kontrolle über Inhalt, Schaltflächen, Medien und Styling.

Merkmale
  • Benutzerdefinierte Klasse und ID:
    Fügen Sie benutzerdefinierte CSS-Klassen und IDs für erweitertes Styling oder JavaScript-Verwendung hinzu.

  • Überschrift & Beschreibung:
    Rich-Text-Feld zum Hinzufügen der Überschrift des Hauptabschnitts und des beschreibenden Inhalts.

  • Registerkarten-Wiederholer:
    Jede Registerkarte enthält die folgenden Optionen:

    • Überschrift und Beschreibung der Registerkarte über Rich-Text-Felder

    • Medienauswahl: Bild oder Video

  • Schaltflächen-Optionen:
    Flexible Schaltflächeneinstellungen für jede Registerkarte:

    • Schaltflächentypen: Primär, Sekundär, Einfach und Quaternär

    • Optionen für die Schaltflächengröße: Normal, Mittel, Groß

    • Schaltflächensymbol-Umschaltung mit Unterstützung für HubSpot-Symbole und SVG-Code

  • Popup-Video-Umschaltfunktion:
    Aktivieren Sie die Popup-Video-Funktionalität mit einer Umschaltoption.

    • Quellen für Popup-Videos: Hochladen einer Videodatei, HubSpot-Video oder eingebetteter Code

    • Popup-Video wird beim Klicken auf die Schaltfläche geöffnet, wenn aktiviert

Abschnitt Stil
  • Auswahl des Abschnittshintergrunds:
    Wählen Sie zwischen Hintergrundbild mit Overlay oder Hintergrundfarbe/Gradient.

  • Abstand zwischen den Abschnitten:
    Steuern Sie den oberen und unteren Abstand für Desktop-, Tablet- und Mobilgeräte.

Registerkarten-Stil
  • Inhalt Stil:
    Passen Sie sowohl den Standard- als auch den aktiven Registerkartenstatus an.

    • Standardmäßige Deckkraft des Registerkarteninhalts

    • Überschriftenfarbe und Beschreibungsfarbe

    • Hintergrundfarbe des Inhalts mit Deckkraftkontrolle

    • Farbe der Umrandung mit Opazitätssteuerung

    • Farbe der Überschrift und der Beschreibung der aktiven Registerkarte

    • Hintergrundfarbe der aktiven Registerkarte mit Opazitätssteuerung

  • Schrittnummer Stil:
    Steuern Sie die Hintergrundfarbe und die Textfarbe der Schrittnummern.

  • Farbe der Umrandungslinie:
    Legen Sie die Farbe der vertikalen oder verbindenden Randlinie zwischen den Schritten fest.

  • Radius des Bildrandes:
    Stellen Sie den Eckenradius für Registerkartenbilder oder Video-Miniaturansichten ein.

tab-01
tab-02
tab-03
tab-04
tab-05

Ressource Listing Post

Das Resource Listing Post-Modul wird verwendet, um Blogbeiträge in einem flexiblen, kartenbasierten Layout anzuzeigen. Es unterstützt mehrere Auflistungstypen, wie z. B. neue Beiträge, tagbasierte Beiträge und Blog-Auflistungsseiten, sowie erweiterte Styling-, Slider- und Layout-Steuerungen.

Modul-Funktionen

Benutzerdefinierte Felder

  • Benutzerdefinierte Klasse
    Fügen Sie eine benutzerdefinierte CSS-Klasse für erweitertes Styling hinzu.

  • Benutzerdefinierte ID
    Fügen Sie eine eindeutige ID für das Targeting auf Abschnittsebene hinzu.

Einstellungen für Beitragsquelle und Inhalt

  • Anzeigetyp für Beiträge
    Wählen Sie, wie Beiträge angezeigt werden sollen:

    • Tag-basierte verwandte Beiträge
    • Neueste Blog-Beiträge
    • Blog-Auflistung Seitenbeiträge
  • Blog Listing Überschrift
    Rich-Text-Feld zum Hinzufügen der Abschnittsüberschrift.

  • Blog auswählen
    Wählen Sie den Blog aus, aus dem die Beiträge geholt werden sollen.

  • Anzahl der anzuzeigenden Beiträge
    Zahlenfeld zur Steuerung der Anzahl der angezeigten Beiträge.

Schieberegler für die Sichtbarkeit des Inhalts

  • Autorenname anzeigen
  • Veröffentlichungsdatum anzeigen
  • Themen anzeigen
  • Schaltfläche "Mehr lesen" anzeigen
  • Mehr lesen Text
    Textfeld zum Anpassen der Beschriftung der Schaltfläche "Weiter lesen".

Stil-Einstellungen

Modul Sichtbarkeit

  • Modul Sichtbarkeit Toggle
    Blendet das Modul ein oder aus, ohne es zu entfernen.

Hintergrund-Optionen

  • Hintergrundbild mit Overlay
  • Hintergrund-Farbverlauf

Abstand zwischen den Abschnitten

Steuern Sie die Abstände für verschiedene Bildschirmgrößen:

  • Desktop
  • Tablet
  • Mobil
Kartenstil-Einstellungen

Layout-Steuerungen

  • Karten pro Zeile

    • Desktop
    • Tablet
    • Mobil (Steuert, wie viele Karten pro Reihe angezeigt werden und wie groß der Abstand zwischen den Karten ist).

Erscheinungsbild der Karten

  • Kartenauffüllung - Desktop & Mobile
  • Radius des Kartenrandes
  • Kartenrand
  • Hintergrundfarbe der Karte
  • Ausrichtung des Karteninhalts

Bild-Styling

  • Radius des Bildrandes

Abstand zwischen den Inhalten

  • Karteninhalt innerhalb der Füllung - Desktop & Mobile

Box-Schatten

  • Box Shadow aktivieren Toggle
    Wenn diese Option aktiviert ist, sind die Einstellungen für den Boxschatten anpassbar.

Tag-Stil-Einstellungen

Passen Sie das Erscheinungsbild von Blog-Tags an:

  • Tag-Textfarbe
  • Tag-Hintergrundfarbe
  • Tag-Rahmenfarbe
  • Tag-Rahmen oben rechts Radius
Slider-Einstellungen

Schieberegler Toggle

  • Schieberegler aktivieren/deaktivieren

Wenn der Schieberegler aktiviert ist, werden die folgenden Optionen verfügbar:

Autoplay-Einstellungen

  • Schieberegler Autoplay umschalten
  • Steuerung der Autoplay-Geschwindigkeit

Reaktionsfähige Schieberegler-Steuerungen

Separat konfigurieren für:

  • Desktop
  • Tablet
  • Mobil
  • Zu zeigende Folien
  • Zu scrollende Dias

Schieberegler-Navigationsstil

  • Dots-Stil
    • Standardfarbe
    • Aktive Farbe
  • Pfeil-Stil
    • Pfeil Farbe
    • Pfeil-Hintergrund
    • Pfeil-Ausrichtung
Container-Einstellungen

Container-Typ

  • Volle Breite
  • Seite zentriert
  • Benutzerdefinierter Container

Wenn Benutzerdefinierter Container ausgewählt ist:

  • Diemaximale Breite des Containers kann angepasst werden.
Überschrift Stil
  • Maximale Breite der Überschrift
  • Unterer Rand der Überschrift
Anwendungsfälle

Dieses Modul ist ideal für:

  • Blog-Listenseiten
  • Ressourcen- und Artikelabschnitte
  • Tag-basierte Blog-Layouts
  • Schieberegler-basierte Blog-Abschnitte
ressourcen-listing-01
ressourcen-listing-02
ressourcen-listing-03
ressourcen-listing-04
ressourcen-listing-05
ressourcen-listing-06
ressourcen-listing-07

Seitenleiste Post Global

Sidebar Post Global ist ein globales Modul zur Anzeige blogbezogener Inhalte im Seitenleistenbereich. Mit diesem Modul können Sie "Neueste Beiträge", "Themen" und "Beliebte Beiträge" über eine Registerkarten-basierte Oberfläche mit vollständiger Kontrolle über Inhalt, Überschriften, Schaltflächen und Styling anzeigen.

Da es sich um ein globales Modul handelt, werden alle Aktualisierungen, die daran vorgenommen werden, automatisch überall dort übernommen, wo das Modul auf der Website verwendet wird.

Modul-Funktionen

Benutzerdefinierte Felder

  • Benutzerdefinierte Klasse
    Fügen Sie eine benutzerdefinierte CSS-Klasse für erweitertes Styling hinzu.

  • Benutzerdefinierte ID
    Fügen Sie eine eindeutige ID für die Ausrichtung auf Abschnittsebene hinzu.

Registerkarten-Text-Einstellungen

  • Text der Registerkarte "Aktuelles" - Textfeld
  • Themen-Registerkarte Text - Textfeld
  • Registerkarte "Beliebt" - Textfeld

Sichtbarkeit des Inhalts - Umschalter

  • Neueste Beiträge anzeigen - Umschalten, um die neuesten Beiträge anzuzeigen
  • Themen anzeigen - Umschalten, um die Blog-Themen anzuzeigen
  • Beliebte Beiträge anzeigen - Umschalten, um beliebte Beiträge anzuzeigen

Button-Einstellungen

  • Schaltflächen-Stil
    Wählen Sie den Schaltflächentyp:

    • Primär
    • Sekundär
    • Tertiär
    • Einfach
  • Größe der Schaltfläche
    Wählen Sie die Größe der Schaltfläche:

    • Klein
    • Normal
    • Groß

Überschrift Einstellungen

  • Letzte Beiträge Überschrift

    • Überschriften-Tag-Auswahl (H1-H6, P)
    • Überschrift Textfeld
  • Themen Überschrift

    • Überschrift Tag-Auswahl (H1-H6, P)
    • Überschrift Textfeld
  • Populäre Beiträge Überschrift

    • Überschrift Tag-Auswahl (H1-H6, P)
    • Überschrift Textfeld
Stil-Einstellungen

Abstand zwischen den Abschnitten

Steuern Sie die Abstände separat für:

  • Desktop
  • Tablet
  • Mobil
Tab Box Stil
  • Tab-Box-Abstand
    Einstellbare Abstände für Desktop, Tablet und Mobile.

  • Hintergrundfarbe
  • Box-Schatten umschalten
    Aktivieren oder deaktivieren Sie den Boxschatten. Wenn diese Option aktiviert ist, können die Schatteneinstellungen bearbeitet werden.

  • Titel-Stil

    • Hintergrundfarbe des Titels
    • Radius der Titelumrandung
    • Titel-Rahmen
    • Titel-Hover-Hintergrundfarbe
    • Titel-Hover-Rahmen
Registerkarte Menü Box Stil
  • Radius der Umrandung des Registerkarten-Menüfelds
  • Registerkarte Menü Box Hintergrundfarbe
  • Box-Schatten umschalten
    Aktivieren oder deaktivieren Sie den Boxschatten. Wenn diese Option aktiviert ist, können die Schatteneinstellungen angepasst werden.

Anwendungsfälle

Dieses globale Seitenleistenmodul ist ideal für:

  • Blog-Seitenleisten-Layouts
  • Ressourcen- und Artikelseiten
  • Anzeige von aktuellen, beliebten und themenbezogenen Beiträgen
  • Beibehaltung eines konsistenten Seitenleisteninhalts über mehrere Seiten hinweg
seitenleiste-beitrag-01
seitenleiste-post-02
seitenleiste-beitrag-03
seitenleiste-post-04
seitenleiste-post-05

E-Mail-Abonnement

Mit dem Modul Abo-Formular können Besucher Ihren Newsletter abonnieren und die neuesten Updates erhalten. Es bietet flexible Optionen für den Inhalt, die Sichtbarkeit des Formulars und das Styling, um es an das Design Ihrer Website anzupassen.

Dies ist ein globales Modul, daher werden alle Änderungen, die an diesem Modul vorgenommen werden, automatisch auf allen Seiten widergespiegelt, auf denen es verwendet wird.

Merkmale
  • Benutzerdefinierte Klassen- und ID-Felder für erweitertes Styling und Targeting
  • Titel- und Inhaltsfelder mit der Option, benutzerdefinierte Inhalte hinzuzufügen
  • Umschaltbare Option zum Ein- und Ausblenden des Anmeldeformulars

    • Wenn aktiviert, sind die folgenden Felder verfügbar:

      • Auswahl des Anmeldeformulars
      • Unterer Textinhalt
  • Optionen zur Anpassung desHintergrunds , einschließlich Hintergrundfarbe und Hintergrundbild
  • Steuerelemente für den Abstand zwischen den Abschnitten oben, unten, links und rechts auf Desktop, Tablet und Mobilgeräten
Styling-Optionen:
  • Optionen für die Gestaltung des Formulars mit der Auswahl Theme oder Custom Style:

    • Themenstil - verwendet den Standarddesignstil des Themas
    • Benutzerdefinierter Stil - ermöglicht erweiterte Formularanpassung
  • Wenn der benutzerdefinierte Stil ausgewählt ist:

    • Eingabefeldstil

      • Umrandungsradius-Steuerung für Eingabefelder und Schaltflächen
      • Optionen für Stil, Breite und Farbe des Eingaberahmens
    • Stil für Schaltflächen

      • Textfarbe der Schaltfläche
      • Stil, Breite und Farbe des Rahmens von Schaltflächen
      • Hintergrundfarbe der Schaltfläche
      • Schaltflächen-Hover-Stil, einschließlich:

        • Hover-Textfarbe
        • Stil, Breite und Farbe des Hover-Rahmens
        • Hover-Hintergrundfarbe
      • Option zum Ein- oder Ausblenden der Schaltfläche "Senden" in absoluter Position
    • Stil für abgeschickte Nachrichten

      • Anpassung der Hintergrundfarbe
  • Kontrolle der Formularbreite:

    • Einstellbare maximale Breite für das Anmeldeformular
Bildschirmfoto
Bildschirmfoto
Bildschirmfoto_
Bildschirmfoto