Wix / Squarespace Integration

Information

Wix und Squarespace sind beliebte Website-Baukästen, die von über 250 Millionen Websites weltweit genutzt werden. Beide Plattformen ermöglichen das Einbinden von gettickr.app Timern – ganz ohne Programmierkenntnisse!

Wix und Squarespace sind für ihre benutzerfreundlichen visuellen Editoren bekannt, mit denen jeder eine Website erstellen kann. Beide Plattformen unterstützen das Einbetten von gettickr.app Timern, wobei jede Plattform ihren eigenen Ansatz hat. Dieser Leitfaden behandelt beide Systeme im Detail.

Plattform-Vergleich

Feature	Wix	Squarespace	Hinweise
Einbettung	HTML-iFrame-Element	Code Block	Beide nutzen HTML
Schwierigkeit	Einfach	Einfach	Keine Programmierung nötig
Positionierung	Absolut (Drag & Drop)	Block-basiert (linear)	Wix ist flexibler
Responsiv	Automatisch	Automatisch	Beide mobilfreundlich
Vorschau	Echtzeit	Echtzeit	Änderungen sofort sichtbar
Mehrere Timer	✅ Unbegrenzt	✅ Unbegrenzt	Beliebig viele möglich
Eigenes CSS	✅ Ja	✅ Ja	Erweiterte Gestaltung
Mobile Bearbeitung	Separater Editor	Einheitlicher Editor	Unterschiedliche Ansätze
Lernkurve	Gering	Gering	Sehr benutzerfreundlich

Tip

Beide Plattformen eignen sich hervorragend für Timer-Integration – wähle die, die du bereits nutzt oder die dir beim Website-Bau insgesamt besser gefällt!

Wix Integration

Wix bietet einen intuitiven Drag-and-Drop-Editor für visuelles Website-Building.

Schritt-für-Schritt-Anleitung für Wix

Schritt 1: Timer erstellen

Gehe zum Editor
Gestalte und konfiguriere deinen Timer
Passe Farben und Schriftarten an deine Wix-Seite an
Kopiere die Timer-URL aus dem Renderer-Bereich

Schritt 2: Wix Editor öffnen

Melde dich bei Wix an
Gehe zu Meine Websites
Klicke auf „Website bearbeiten“ bei der gewünschten Seite
Navigiere zur Seite, auf der der Timer erscheinen soll

Schritt 3: HTML-iFrame-Element hinzufügen

Klicke auf das „+“ (Elemente hinzufügen) in der linken Seitenleiste
Scrolle oder suche nach „Einbetten“
Klicke auf „Einbetten“
Wähle „HTML iFrame“ aus den Optionen
Wix platziert ein Platzhalter-Element auf deiner Seite

Information

Das HTML-iFrame-Element ist speziell für das Einbetten externer Inhalte wie Timer, Videos und Karten gedacht – dieselbe Technik wie bei YouTube!

Schritt 4: iFrame konfigurieren

Klicke das iFrame-Element an
Klicke auf „Code eingeben“ oder das Einstellungen-Symbol
Im Bereich „Code“ wähle den Tab „Code“ (nicht URL)
Füge deinen iFrame-Code ein:

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Countdown Timer"
>
</iframe>

Klicke auf „Aktualisieren“

Schritt 5: Positionieren und Größe anpassen

Ziehe das Element an die gewünschte Stelle
Größe ändern mit den Eckgriffen
Nutze die Ausrichtungshilfen (blaue Linien) für exakte Platzierung
Halte Shift beim Ziehen für gleichmäßige Skalierung

Schritt 6: Mobile-Optimierung

Klicke auf das Mobile-Icon in der oberen Werkzeugleiste
Wechsle in den Mobile Editor
Positioniere und skaliere den Timer für Mobilgeräte
Mobile- und Desktop-Layout sind in Wix unabhängig

Tip

Wix erlaubt separate Positionierung für Mobil und Desktop – nutze das für optimale Layouts auf jedem Gerät!

Schritt 7: Veröffentlichen

Klicke auf „Vorschau“, um das Ergebnis zu prüfen
Teste auf Desktop und Mobil
Klicke auf „Veröffentlichen“, wenn alles passt
Dein Timer ist jetzt live!

Wix Element-Einstellungen

Einstellung	Wo zu finden	Zweck	Empfehlung
Breite	Ziehgriffe	Elementbreite	Volle Breite
Höhe	Ziehgriffe	Elementhöhe	300–500px
Position	Ziehen	X/Y-Koordinaten	Zentriert/oben
Ausrichtung	Rechtsklick-Menü	Mit anderen Elementen ausrichten	Hilfslinien nutzen
Sperren	Rechtsklick-Menü	Vor versehentlichem Verschieben schützen	Nach Fertigstellung
Duplizieren	Rechtsklick-Menü	Für mehrere Timer kopieren	Spart Zeit
Auf Mobil ausblenden	Element-Einstellungen	Nur auf Desktop anzeigen	Optional
Animationen	Element-Einstellungen	Einblendeffekte	Dezent einsetzen

Wix Positionierungs-Tipps

Vorteile absoluter Positionierung:

Pixelgenaue Kontrolle
Überlagerung auf Bildern/Sektionen
Kreative Layouts
Professionelles Design

Zu beachten:

Mobilansicht immer testen
Kann auf kleinen Bildschirmen überlappen
Mobile Anpassung oft nötig

Warning

Bei freier Positionierung in Wix immer prüfen, wie sich Elemente auf Mobilgeräten anordnen. Was auf Desktop perfekt aussieht, kann mobil überlappen oder Lücken erzeugen!

Wix Codebeispiele

Vollbreiter Hero-Timer:

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    Nur für kurze Zeit!
  </h2>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Sale Timer"
  >
  </iframe>
</div>

Kompakter Sidebar-Timer:

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Event Countdown</h3>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Event Timer"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px;">Nicht verpassen!</p>
</div>

Squarespace Integration

Squarespace nutzt ein blockbasiertes System mit modernem Designansatz.

Schritt-für-Schritt-Anleitung für Squarespace

Schritt 1: Timer erstellen

Gehe zum Editor
Gestalte einen Timer passend zum Stil deiner Squarespace-Seite
Squarespace-Seiten sind oft minimalistisch – wähle ggf. ein schlichtes Timer-Design
Kopiere die Timer-URL

Schritt 2: Squarespace Editor öffnen

Melde dich bei Squarespace an
Gehe zu Seiten im linken Menü
Navigiere zur gewünschten Seite
Klicke auf „Bearbeiten“, um den Editor zu öffnen

Schritt 3: Code Block hinzufügen

Fahre mit der Maus an die gewünschte Stelle (zwischen Blöcken)
Klicke auf das „+“ (Einfügepunkt)
Suche nach „Code“ oder scrolle dorthin
Klicke auf „Code“, um einen Code Block einzufügen
Ein Editor mit <h1>HELLO</h1> erscheint

Schritt 4: Timer-Code einfügen

Lösche den Platzhalter-Code
Füge deinen iFrame-Code ein:

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Countdown Timer"
>
</iframe>

Klicke auf „Übernehmen“ unten rechts
Der Timer erscheint im Seitenlayout

Information

Der Code Block von Squarespace unterstützt HTML, CSS und JavaScript. Für Timer reicht HTML völlig aus.

Schritt 5: Block positionieren

Ziehe den Code Block an die gewünschte Stelle
Nutze das Block-Menü (sechs Punkte beim Hover) für weitere Optionen
Typische Positionen:
- Über dem Seiteninhalt – maximale Sichtbarkeit
- Unterhalb einer Überschrift – kontextbezogen
- Vor dem Footer – präsent, aber nicht störend

Schritt 6: Block-Einstellungen anpassen

Über den Code Block fahren
Auf „Bearbeiten“ klicken, um Code zu ändern
Duplizieren für mehrere Timer
Entfernen zum Löschen

Schritt 7: Speichern und veröffentlichen

Klicke auf „Speichern“ oben links
Mit „Vorschau“ testen, bevor du veröffentlichst
Mit den Geräte-Icons Mobil-/Tablet-Ansicht prüfen
Mit „Veröffentlichen“ oder „Aktualisieren“ live schalten

Squarespace Block-Typen

Block-Typ	Anwendungsfall	Timer geeignet	Hinweise
Code	Timer einbetten	✅ Perfekt	Empfohlene Methode
Markdown	Text mit HTML	⚠️ Eingeschränkt	Nicht ideal für iFrames
Embed	URL-basierte Einbettung	❌ Nein	Nur für bestimmte Anbieter
HTML	Legacy (ältere Version)	✅ Ja	In 7.1 Code Block nutzen
Custom CSS	Site-weites Styling	⬜ Indirekt	Für bestehende Timer stylen

Tip

In Squarespace 7.1 immer den Code Block für Timer verwenden – er ist für benutzerdefiniertes HTML wie iFrames gedacht!

Squarespace Codebeispiele

Hero-Section-Timer:

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Summer Sale</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">Endet bald!</p>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Sale Timer"
  >
  </iframe>
</section>

Inline-Content-Timer:

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">Event startet in:</h3>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Event Timer"
  >
  </iframe>
</div>

Produkt-Launch-Timer:

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 Produkt-Launch
  </h2>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Launch Timer"
  >
  </iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Jetzt benachrichtigen lassen
    </a>
  </p>
</div>

Erweiterte Gestaltung (beide Plattformen)

Eigenes CSS für Wix

Ort: Website-Einstellungen → Eigener Code → Custom Code (im <head>)

<style>
  /* Alle iFrames auf der Seite stylen */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Mobiles Styling */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

Eigenes CSS für Squarespace

Ort: Design → Custom CSS

/* Code Block iFrames stylen */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Mobile-Optimierung */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Tip

Mit eigenem CSS kannst du alle Timer auf deiner Seite einheitlich gestalten, ohne jeden Einbettungscode einzeln zu ändern!

Fehlerbehebung

Wix Fehlerbehebung

Problem	Ursache	Lösung
Timer wird nicht angezeigt	Falscher Elementtyp	HTML-iFrame-Element verwenden
Code erscheint als Text	Textfeld statt iFrame	HTML-iFrame-Element nutzen
Timer zu klein	Element zu klein	Größe mit Ziehgriffen anpassen
Überlappung auf Mobil	Absolute Positionierung	Im Mobile Editor anpassen
HTML-iFrame nicht auffindbar	Falscher Bereich	Elemente → Einbetten → HTML-iFrame
Timer eingefroren	Syntaxfehler im Code	iFrame-Code auf Fehler prüfen

Warning

Wix aktualisiert regelmäßig die Editor-Oberfläche. Falls du „HTML-iFrame“ nicht findest, suche nach „Embed Code“ oder „Custom Element“ – die Funktion bleibt, der Name kann sich ändern.

Squarespace Fehlerbehebung

Problem	Ursache	Lösung
Timer erscheint nicht	Falscher Blocktyp	Code Block statt Markdown verwenden
Schwarzer Bildschirm	Falsche URL	Timer-URL prüfen
Timer zu breit	Kein max-width gesetzt	`max-width: 100%` im Style ergänzen
Code nicht editierbar	Block nicht ausgewählt	Auf „Bearbeiten“ beim Block klicken
Falsche Höhe	Höhe nicht in px gesetzt	Höhe in Pixel angeben
Mobilansicht fehlerhaft	Nur Desktop getestet	Vor Veröffentlichung mobil prüfen

Information

Squarespace 7.1 (aktuelle Version) nutzt Code Blocks. Ältere 7.0-Seiten verwenden andere Methoden. Dieser Guide bezieht sich auf 7.1.

Performance-Hinweise

Beide Plattformen optimieren die Performance automatisch, dennoch gilt:

Aspekt	Empfehlung	Warum
Timer-Anzahl	Max. 1–3 pro Seite	Vermeidet lange Ladezeiten
Timer-Größe	Passend zum Einsatzort	Keine riesigen iFrames
Mobile First	Für Mobilgeräte gestalten	Meiste Nutzer mobil
Bildqualität	Andere Bilder optimieren	Nicht mit Timern summieren
Drittanbieter	Wenige weitere Embeds	Jeder Embed erhöht Latenz

Tip

Wenn die Seite nach Timer-Einbindung langsam lädt, prüfe die Gesamtgröße im Browser (F12 → Netzwerk-Tab).

Template-spezifische Hinweise

Wix Templates

Template-Typ	Beste Timer-Position	Hinweise
Blank Template	Überall (volle Kontrolle)	Maximale Flexibilität
Store	Produktseiten, Startseite	Conversion-Fokus
Events	Hero-Bereich, Sidebars	Countdown passt perfekt
Portfolio	Projektseiten	Launch-/Deadline-Timer
Blog	Beitragskopf, Sidebar	Inhaltsspezifische Timer

Squarespace Templates

Template-Familie	Beste Timer-Position	Hinweise
Avenue	Indexseiten, Hero	Vollbreite Timer möglich
Brine	Inhaltsbereiche	Flexibles Blocksystem
Bedford	Unter Überschriften	Klassisches Layout
Five	Landingpages	Fokus auf Einzelseiten
Seven	Produktseiten	Für E-Commerce optimiert

Information

Jede Squarespace-Template-Familie hat eigene Maximalbreiten und Layouts. Gestalte Timer, die zu deinem Template passen.

Nächste Schritte

iFrame Integration – Detaillierte Anleitung zur iFrame-Anpassung
Timer-Design anpassen – Optik an deine Seite anpassen
WordPress Integration – Falls du auch WordPress nutzt
Shopify Integration – Für E-Commerce-Shops

Tip

Beide Plattformen machen die Timer-Integration einfach. Wähle die, die zu deinen Website-Anforderungen passt – Timer funktionieren auf beiden hervorragend!

Wix / Squarespace Integration

Information

Plattform-Vergleich

Feature	Wix	Squarespace	Hinweise
Einbettung	HTML-iFrame-Element	Code Block	Beide nutzen HTML
Schwierigkeit	Einfach	Einfach	Keine Programmierung nötig
Positionierung	Absolut (Drag & Drop)	Block-basiert (linear)	Wix ist flexibler
Responsiv	Automatisch	Automatisch	Beide mobilfreundlich
Vorschau	Echtzeit	Echtzeit	Änderungen sofort sichtbar
Mehrere Timer	✅ Unbegrenzt	✅ Unbegrenzt	Beliebig viele möglich
Eigenes CSS	✅ Ja	✅ Ja	Erweiterte Gestaltung
Mobile Bearbeitung	Separater Editor	Einheitlicher Editor	Unterschiedliche Ansätze
Lernkurve	Gering	Gering	Sehr benutzerfreundlich

Tip

Beide Plattformen eignen sich hervorragend für Timer-Integration – wähle die, die du bereits nutzt oder die dir beim Website-Bau insgesamt besser gefällt!

Wix Integration

Wix bietet einen intuitiven Drag-and-Drop-Editor für visuelles Website-Building.

Schritt-für-Schritt-Anleitung für Wix

Schritt 1: Timer erstellen

Gehe zum Editor
Gestalte und konfiguriere deinen Timer
Passe Farben und Schriftarten an deine Wix-Seite an
Kopiere die Timer-URL aus dem Renderer-Bereich

Schritt 2: Wix Editor öffnen

Melde dich bei Wix an
Gehe zu Meine Websites
Klicke auf „Website bearbeiten“ bei der gewünschten Seite
Navigiere zur Seite, auf der der Timer erscheinen soll

Schritt 3: HTML-iFrame-Element hinzufügen

Klicke auf das „+“ (Elemente hinzufügen) in der linken Seitenleiste
Scrolle oder suche nach „Einbetten“
Klicke auf „Einbetten“
Wähle „HTML iFrame“ aus den Optionen
Wix platziert ein Platzhalter-Element auf deiner Seite

Information

Das HTML-iFrame-Element ist speziell für das Einbetten externer Inhalte wie Timer, Videos und Karten gedacht – dieselbe Technik wie bei YouTube!

Schritt 4: iFrame konfigurieren

Klicke das iFrame-Element an
Klicke auf „Code eingeben“ oder das Einstellungen-Symbol
Im Bereich „Code“ wähle den Tab „Code“ (nicht URL)
Füge deinen iFrame-Code ein:

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none;"
  title="Countdown Timer"
>
</iframe>

Klicke auf „Aktualisieren“

Schritt 5: Positionieren und Größe anpassen

Ziehe das Element an die gewünschte Stelle
Größe ändern mit den Eckgriffen
Nutze die Ausrichtungshilfen (blaue Linien) für exakte Platzierung
Halte Shift beim Ziehen für gleichmäßige Skalierung

Schritt 6: Mobile-Optimierung

Klicke auf das Mobile-Icon in der oberen Werkzeugleiste
Wechsle in den Mobile Editor
Positioniere und skaliere den Timer für Mobilgeräte
Mobile- und Desktop-Layout sind in Wix unabhängig

Tip

Wix erlaubt separate Positionierung für Mobil und Desktop – nutze das für optimale Layouts auf jedem Gerät!

Schritt 7: Veröffentlichen

Klicke auf „Vorschau“, um das Ergebnis zu prüfen
Teste auf Desktop und Mobil
Klicke auf „Veröffentlichen“, wenn alles passt
Dein Timer ist jetzt live!

Wix Element-Einstellungen

Einstellung	Wo zu finden	Zweck	Empfehlung
Breite	Ziehgriffe	Elementbreite	Volle Breite
Höhe	Ziehgriffe	Elementhöhe	300–500px
Position	Ziehen	X/Y-Koordinaten	Zentriert/oben
Ausrichtung	Rechtsklick-Menü	Mit anderen Elementen ausrichten	Hilfslinien nutzen
Sperren	Rechtsklick-Menü	Vor versehentlichem Verschieben schützen	Nach Fertigstellung
Duplizieren	Rechtsklick-Menü	Für mehrere Timer kopieren	Spart Zeit
Auf Mobil ausblenden	Element-Einstellungen	Nur auf Desktop anzeigen	Optional
Animationen	Element-Einstellungen	Einblendeffekte	Dezent einsetzen

Wix Positionierungs-Tipps

Vorteile absoluter Positionierung:

Pixelgenaue Kontrolle
Überlagerung auf Bildern/Sektionen
Kreative Layouts
Professionelles Design

Zu beachten:

Mobilansicht immer testen
Kann auf kleinen Bildschirmen überlappen
Mobile Anpassung oft nötig

Warning

Bei freier Positionierung in Wix immer prüfen, wie sich Elemente auf Mobilgeräten anordnen. Was auf Desktop perfekt aussieht, kann mobil überlappen oder Lücken erzeugen!

Wix Codebeispiele

Vollbreiter Hero-Timer:

<div
  style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 20px;"
>
  <h2 style="text-align: center; font-size: 36px; margin-bottom: 20px;">
    Nur für kurze Zeit!
  </h2>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; display: block;"
    title="Sale Timer"
  >
  </iframe>
</div>

Kompakter Sidebar-Timer:

<div
  style="background: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;"
>
  <h3 style="margin-top: 0; font-size: 20px;">Event Countdown</h3>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="250"
    frameborder="0"
    style="border: none;"
    title="Event Timer"
  >
  </iframe>
  <p style="margin-bottom: 0; font-size: 14px;">Nicht verpassen!</p>
</div>

Squarespace Integration

Squarespace nutzt ein blockbasiertes System mit modernem Designansatz.

Schritt-für-Schritt-Anleitung für Squarespace

Schritt 1: Timer erstellen

Gehe zum Editor
Gestalte einen Timer passend zum Stil deiner Squarespace-Seite
Squarespace-Seiten sind oft minimalistisch – wähle ggf. ein schlichtes Timer-Design
Kopiere die Timer-URL

Schritt 2: Squarespace Editor öffnen

Melde dich bei Squarespace an
Gehe zu Seiten im linken Menü
Navigiere zur gewünschten Seite
Klicke auf „Bearbeiten“, um den Editor zu öffnen

Schritt 3: Code Block hinzufügen

Fahre mit der Maus an die gewünschte Stelle (zwischen Blöcken)
Klicke auf das „+“ (Einfügepunkt)
Suche nach „Code“ oder scrolle dorthin
Klicke auf „Code“, um einen Code Block einzufügen
Ein Editor mit <h1>HELLO</h1> erscheint

Schritt 4: Timer-Code einfügen

Lösche den Platzhalter-Code
Füge deinen iFrame-Code ein:

<iframe
  src="https://gettickr.app/r/#DEIN-TIMER-ID"
  width="100%"
  height="400"
  frameborder="0"
  style="border: none; max-width: 100%;"
  title="Countdown Timer"
>
</iframe>

Klicke auf „Übernehmen“ unten rechts
Der Timer erscheint im Seitenlayout

Information

Der Code Block von Squarespace unterstützt HTML, CSS und JavaScript. Für Timer reicht HTML völlig aus.

Schritt 5: Block positionieren

Ziehe den Code Block an die gewünschte Stelle
Nutze das Block-Menü (sechs Punkte beim Hover) für weitere Optionen
Typische Positionen:
- Über dem Seiteninhalt – maximale Sichtbarkeit
- Unterhalb einer Überschrift – kontextbezogen
- Vor dem Footer – präsent, aber nicht störend

Schritt 6: Block-Einstellungen anpassen

Über den Code Block fahren
Auf „Bearbeiten“ klicken, um Code zu ändern
Duplizieren für mehrere Timer
Entfernen zum Löschen

Schritt 7: Speichern und veröffentlichen

Klicke auf „Speichern“ oben links
Mit „Vorschau“ testen, bevor du veröffentlichst
Mit den Geräte-Icons Mobil-/Tablet-Ansicht prüfen
Mit „Veröffentlichen“ oder „Aktualisieren“ live schalten

Squarespace Block-Typen

Block-Typ	Anwendungsfall	Timer geeignet	Hinweise
Code	Timer einbetten	✅ Perfekt	Empfohlene Methode
Markdown	Text mit HTML	⚠️ Eingeschränkt	Nicht ideal für iFrames
Embed	URL-basierte Einbettung	❌ Nein	Nur für bestimmte Anbieter
HTML	Legacy (ältere Version)	✅ Ja	In 7.1 Code Block nutzen
Custom CSS	Site-weites Styling	⬜ Indirekt	Für bestehende Timer stylen

Tip

In Squarespace 7.1 immer den Code Block für Timer verwenden – er ist für benutzerdefiniertes HTML wie iFrames gedacht!

Squarespace Codebeispiele

Hero-Section-Timer:

<section
  style="text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
>
  <h1 style="font-size: 48px; margin: 0 0 10px 0;">Summer Sale</h1>
  <p style="font-size: 24px; margin: 0 0 30px 0;">Endet bald!</p>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="400"
    frameborder="0"
    style="border: none; max-width: 1000px;"
    title="Sale Timer"
  >
  </iframe>
</section>

Inline-Content-Timer:

<div style="margin: 40px auto; max-width: 800px;">
  <h3 style="text-align: center; margin-bottom: 20px;">Event startet in:</h3>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="300"
    frameborder="0"
    style="border: none; display: block;"
    title="Event Timer"
  >
  </iframe>
</div>

Produkt-Launch-Timer:

<div
  style="background: #f5f5f5; padding: 40px; border-radius: 8px; margin: 20px 0;"
>
  <h2 style="text-align: center; margin-top: 0; color: #333;">
    🚀 Produkt-Launch
  </h2>
  <iframe
    src="https://gettickr.app/r/#DEIN-TIMER-ID"
    width="100%"
    height="350"
    frameborder="0"
    style="border: none;"
    title="Launch Timer"
  >
  </iframe>
  <p style="text-align: center; margin-bottom: 0;">
    <a
      href="/shop"
      style="display: inline-block; padding: 12px 30px; background: #000; color: #fff; text-decoration: none; border-radius: 4px; margin-top: 20px;"
    >
      Jetzt benachrichtigen lassen
    </a>
  </p>
</div>

Erweiterte Gestaltung (beide Plattformen)

Eigenes CSS für Wix

Ort: Website-Einstellungen → Eigener Code → Custom Code (im <head>)

<style>
  /* Alle iFrames auf der Seite stylen */
  iframe {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  /* Mobiles Styling */
  @media (max-width: 768px) {
    iframe {
      height: 300px !important;
    }
  }
</style>

Eigenes CSS für Squarespace

Ort: Design → Custom CSS

/* Code Block iFrames stylen */
.sqs-block-code iframe {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sqs-block-code iframe:hover {
  transform: scale(1.02);
}

/* Mobile-Optimierung */
@media screen and (max-width: 767px) {
  .sqs-block-code iframe {
    height: 250px !important;
  }
}

Tip

Mit eigenem CSS kannst du alle Timer auf deiner Seite einheitlich gestalten, ohne jeden Einbettungscode einzeln zu ändern!

Fehlerbehebung

Wix Fehlerbehebung

Problem	Ursache	Lösung
Timer wird nicht angezeigt	Falscher Elementtyp	HTML-iFrame-Element verwenden
Code erscheint als Text	Textfeld statt iFrame	HTML-iFrame-Element nutzen
Timer zu klein	Element zu klein	Größe mit Ziehgriffen anpassen
Überlappung auf Mobil	Absolute Positionierung	Im Mobile Editor anpassen
HTML-iFrame nicht auffindbar	Falscher Bereich	Elemente → Einbetten → HTML-iFrame
Timer eingefroren	Syntaxfehler im Code	iFrame-Code auf Fehler prüfen

Warning

Squarespace Fehlerbehebung

Problem	Ursache	Lösung
Timer erscheint nicht	Falscher Blocktyp	Code Block statt Markdown verwenden
Schwarzer Bildschirm	Falsche URL	Timer-URL prüfen
Timer zu breit	Kein max-width gesetzt	`max-width: 100%` im Style ergänzen
Code nicht editierbar	Block nicht ausgewählt	Auf „Bearbeiten“ beim Block klicken
Falsche Höhe	Höhe nicht in px gesetzt	Höhe in Pixel angeben
Mobilansicht fehlerhaft	Nur Desktop getestet	Vor Veröffentlichung mobil prüfen

Information

Squarespace 7.1 (aktuelle Version) nutzt Code Blocks. Ältere 7.0-Seiten verwenden andere Methoden. Dieser Guide bezieht sich auf 7.1.

Performance-Hinweise

Beide Plattformen optimieren die Performance automatisch, dennoch gilt:

Aspekt	Empfehlung	Warum
Timer-Anzahl	Max. 1–3 pro Seite	Vermeidet lange Ladezeiten
Timer-Größe	Passend zum Einsatzort	Keine riesigen iFrames
Mobile First	Für Mobilgeräte gestalten	Meiste Nutzer mobil
Bildqualität	Andere Bilder optimieren	Nicht mit Timern summieren
Drittanbieter	Wenige weitere Embeds	Jeder Embed erhöht Latenz

Tip

Wenn die Seite nach Timer-Einbindung langsam lädt, prüfe die Gesamtgröße im Browser (F12 → Netzwerk-Tab).

Template-spezifische Hinweise

Wix Templates

Template-Typ	Beste Timer-Position	Hinweise
Blank Template	Überall (volle Kontrolle)	Maximale Flexibilität
Store	Produktseiten, Startseite	Conversion-Fokus
Events	Hero-Bereich, Sidebars	Countdown passt perfekt
Portfolio	Projektseiten	Launch-/Deadline-Timer
Blog	Beitragskopf, Sidebar	Inhaltsspezifische Timer

Squarespace Templates

Template-Familie	Beste Timer-Position	Hinweise
Avenue	Indexseiten, Hero	Vollbreite Timer möglich
Brine	Inhaltsbereiche	Flexibles Blocksystem
Bedford	Unter Überschriften	Klassisches Layout
Five	Landingpages	Fokus auf Einzelseiten
Seven	Produktseiten	Für E-Commerce optimiert

Information

Jede Squarespace-Template-Familie hat eigene Maximalbreiten und Layouts. Gestalte Timer, die zu deinem Template passen.

Nächste Schritte

iFrame Integration – Detaillierte Anleitung zur iFrame-Anpassung
Timer-Design anpassen – Optik an deine Seite anpassen
WordPress Integration – Falls du auch WordPress nutzt
Shopify Integration – Für E-Commerce-Shops

Tip

Beide Plattformen machen die Timer-Integration einfach. Wähle die, die zu deinen Website-Anforderungen passt – Timer funktionieren auf beiden hervorragend!