Eingabehilfen öffnen

Zum Hauptinhalt springen

Aktuelle Version: 1.0.0

MODAL by Tonino Gerns

Der flexible Modal Builder für YOOtheme Pro

Du willst ein Modal öffnen, wenn jemand die Seite verlässt. Oder nach 30 Sekunden. Oder wenn er 60 % gescrollt hat. Mit dem Standard-Builder bist du bei einem simplen Button-Trigger stehen geblieben. Der Modal by Tonino Gerns gibt dir vier Trigger-Typen, einen Wizard-Stapel für mehrstufige Flows und eine Anzeige-Steuerung ganz ohne Cookies - direkt im Builder konfiguriert, kein Custom-Code nötig.

  • 4 Trigger-Typen: Button, Auto-Open, Scroll-Triggered, Exit-Intent
  • Consent-freie Frequenzsteuerung: pro Sitzung, einmalig oder alle X Tage
  • Referenz-Modus: Mehrere Trigger-Links für dasselbe Modal ohne Content-Duplizierung

Schluss mit "Ich brauch nen Entwickler für das Modal".

Warum Agenturen und Freelancer den Modal by Tonino Gerns als Standard für ihre YOOtheme-Kundenprojekte einsetzen.

Vier Trigger. Alles im Builder.

Button-Klick, Timer-Verzögerung, Scroll-Tiefe oder Exit-Intent - alle vier Trigger lassen sich direkt im YOOtheme-Customizer konfigurieren. Kein JavaScript-Snippet im Template, keine Child-Theme-Basteleien. Einmal Element ziehen, Trigger wählen, fertig.

Frequenzsteuerung.

Steuere, wie oft ein Modal pro Besucher erscheint - pro Sitzung, einmalig forever oder alle X Tage. Die Steuerung basiert auf localStorage, nicht auf Consent-pflichtigen Cookies. DSGVO-konform ohne Consent-Banner-Anpassung.

Auswahl an Animationen.

Verleihe deinem Modal eine zum Projekt passende Animation. Nicht mehr nur die Standard Fade-Animation, sondern die Möglichkeit auf UIKIT-basierte Animationen zurückzugreifen.

Alles, was Modals können müssen

Du brauchst kein separates Popup-Plugin, kein Cookie-Plugin, kein Accessibility-Plugin. Der Modal by Tonino Gerns bringt alles in einem einzigen Builder-Element mit. Kein Bloat, keine Konflikte, keine versteckten Abhängigkeiten.
Demo 1
Demo 2
Dein Baukasten für interaktive Flows.
Button-Trigger
Klassischer Klick-Trigger. Verbinde beliebig viele Links oder Schaltflächen mit demselben Modal über den Referenz-Modus - ohne den Content zu duplizieren.
Auto-Open mit Timer
Öffne das Modal nach einer konfigurierbaren Verzögerung - ideal für Newsletter-Popups oder Willkommens-Hinweise.
Scroll-Triggered
Löse das Modal aus, wenn der Besucher einen definierten Scroll-Prozentsatz der Seite erreicht. Prozentual, nicht pixelgenau - funktioniert auf jedem Viewport.
Exit-Intent
Zeige ein letztes Angebot, bevor der Besucher den Tab schließt oder die Maus Richtung Browser-Chrome bewegt. Ohne externen Tracking-Dienst.
Step-Wizard
Bis zu 3 Footer-Buttons pro Modal mit den Typen Schließen, Link oder Step. Step-Buttons öffnen das nächste Modal im Stapel - perfekt für mehrstufige Onboardings oder Funnels.
Video-Steuerung
HTML5, YouTube und Vimeo werden beim Öffnen automatisch gestartet und beim Schließen pausiert. Respektiert prefers-reduced-motion.
Auto-Close
Schließe das Modal automatisch nach einer konfigurierbaren Zeit - mit oder ohne sichtbaren Countdown.

Technik, die Entwickler lieben.

Jedes Feature wurde entwickelt, um sich nahtlos in dein YOOtheme Pro Ökosystem einzufügen.

Consent-freie Frequenzsteuerung

Die Anzeige-Steuerung - pro Sitzung, einmalig oder alle X Tage - basiert auf localStorage, nicht auf Cookies. Kein Consent-Banner muss angepasst werden, kein Cookie-Plugin muss angebunden werden. Funktioniert vollständig im Browser des Besuchers, ohne Server-Request.

Automatisches Modal-Stacking

Wenn ein Modal ein weiteres öffnet (z. B. über einen Step-Button), erbt das neue Modal das UIkit-Stack-Verhalten automatisch. Du musst keine Z-Index-Konflikte lösen, keine verschachtelten Overlays manuell verwalten - das Element erledigt das intern.

WCAG AA Barrierefreiheit

Vollständige Umsetzung: ARIA-Attribute, automatisches Fokus-Management beim Öffnen, Rückgabe des Fokus an das Trigger-Element beim Schließen und volle Keyboard-Navigation. Screen Reader werden korrekt informiert - ohne nachträgliche Anpassungen.

8 UIkit-native Animationen

Slide, Scale, Fade und fünf weitere Öffnungs-Animationen sind direkt über die UIkit-Klassen konfigurierbar. Kein zusätzliches CSS, keine Animation-Library - alles kommt aus dem Theme, das du bereits nutzt.
Zurück zur Übersicht