Tutorials

📈 Animierter Zahlen-Counter für Squarespace: Elfsight Tutorial 2025 (Schritt-für-Schritt)

Melden

Hier ist ein detailliertes Schritt-für-Schritt-Tutorial für das Jahr 2025, wie du einen animierten Zahlen-Counter (Number Counter) von Elfsight in deine Squarespace-Website integrierst.

Ein animierter Zahlen-Counter ist ein hervorragendes Werkzeug, um Vertrauen aufzubauen (Social Proof), Meilensteine zu präsentieren oder Statistiken wie „Zufriedene Kunden“ oder „Abgeschlossene Projekte“ dynamisch darzustellen. In diesem Tutorial nutzen wir das Elfsight Number Counter Widget, da es die einfachste No-Code-Lösung für Squarespace ist.

Schritt 1: Das Widget bei Elfsight erstellen

  1. Besuche Elfsight: Gehe auf die Website von Elfsight und erstelle ein kostenloses Konto (oder logge dich ein).
  2. Widget auswählen: Suche in der App-Bibliothek nach "Number Counter".
  3. Vorlage wählen: Elfsight bietet verschiedene Vorlagen an (z. B. Grid-Layout, horizontal, mit Icons oder puristisch). Wähle eine Vorlage, die am besten zum Design deiner Squarespace-Seite passt, und klicke auf "Continue with this template".

Schritt 2: Inhalt und Design anpassen

  1. Inhalt (Content):
    • Klicke auf die einzelnen Counter-Elemente, um die Zahlen, das Suffix (z. B. ein „+“ oder „%“) und die Beschriftung (z. B. „Projekte“) zu ändern.
    • Du kannst auch Icons oder Bilder hinzufügen, die über der Zahl erscheinen.
  2. Layout & Stil:
    • Gehe zum Reiter "Style". Hier kannst du die Farben der Zahlen, die Schriftarten und die Hintergrundfarbe anpassen.
    • Tipp 2025: Achte darauf, dass die Schriftart mit deiner Squarespace-Seite harmoniert oder wähle "Inherit font", falls verfügbar.
  3. Animation:
    • Stelle die Dauer der Animation ein (wie schnell die Zahlen hochzählen). Ein Wert zwischen 2000ms und 3000ms wirkt meist am professionellsten.

Schritt 3: Den Widget-Code kopieren

  1. Wenn du mit dem Design zufrieden bist, klicke oben rechts auf "Publish".
  2. Wähle einen Plan aus (für den Start reicht meist der "Lite"-Plan/Kostenlos).
  3. Es öffnet sich ein Fenster mit einem Code-Schnipsel. Klicke auf den Code, um ihn automatisch in deine Zwischenablage zu kopieren. Er sieht etwa so aus: <script src="https://static.elfsight.com/platform/platform.js" ...></script> <div class="elfsight-app-..."></div>

Schritt 4: Den Counter in Squarespace einbauen

Jetzt wechseln wir zu deiner Squarespace-Website.

  1. Seite bearbeiten: Logge dich bei Squarespace ein, navigiere zu der Seite, auf der der Counter erscheinen soll, und klicke oben links auf "Bearbeiten" (Edit).
  2. Abschnitt/Block hinzufügen:
    • Bewege den Mauszeiger an die Stelle, an der der Counter stehen soll.
    • Klicke auf "Block hinzufügen" (Add Block).
    • Wähle den Block "Code" aus.
  3. Code einfügen:
    • Klicke auf das Stift-Symbol (Bearbeiten) im Code-Block.
    • Lösche den Platzhalter-Text (<p>Hello, World!</p>).
    • Füge den Elfsight-Code ein, den du in Schritt 3 kopiert hast.
    • Stelle sicher, dass im Dropdown-Menü des Blocks "HTML" ausgewählt ist.
  4. Positionieren (Fluid Engine):
    • Da Squarespace die Fluid Engine nutzt, kannst du den Code-Block nun einfach großziehen oder verschieben, damit er das gewünschte Layout einnimmt.
    • Hinweis: In der Bearbeitungsansicht wird oft nur eine Vorschau oder ein Platzhalter angezeigt. Das ist normal.

Schritt 5: Speichern und Überprüfen

  1. Klicke oben links auf "Speichern" (Done / Save).
  2. Lade die Seite neu.
  3. Ergebnis prüfen: Scrolle zu dem Abschnitt. Die Zahlen sollten nun flüssig hochzählen, sobald der Bereich im Sichtfeld des Nutzers erscheint.

Profi-Tipps für 2025:

  • Mobile Ansicht: Überprüfe den Counter unbedingt in der mobilen Ansicht von Squarespace. In der Fluid Engine musst du den Block für Mobilgeräte oft separat in der Größe anpassen.
  • Performance: Elfsight-Widgets sind gut optimiert. Dennoch solltest du nicht zu viele verschiedene externe Widgets auf einer einzigen Seite nutzen, um die Ladezeit gering zu halten.
  • Lazy Loading: Die Animation startet bei Elfsight standardmäßig erst, wenn der Besucher zum Counter scrollt. Das ist ideal für die User Experience.

Fertig! Du hast nun erfolgreich einen professionellen, animierten Zahlen-Counter in deine Squarespace-Seite integriert, ohne eine einzige Zeile selbst programmieren zu müssen.

0