#Nr. 26 - Inhalte mit benutzerdefinierten Modals verwalten

Verwenden Sie benutzerdefinierte Modals, um Ihre Besucher dazu zu bewegen, ein kostenpflichtiges Konto zu eröffnen!

Conditional Visibility UX Marketing

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

26 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #26 v0.1 💙 GATE CONTENT WITH MODALS -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    // Member is not logged keywordin
    const triggers = document.querySelectorAll('[ms-code-gate-modal-trigger]');
    const boxes = document.querySelectorAll('[ms-code-gate-modal-box]');
    
    triggers.forEach(trigger => {
      trigger.addEventListener('click', () => {
        const targetId = trigger.getAttribute('ms-code-gate-modal-trigger');
        const box = document.querySelector(`[ms-code-gate-modal-box="${targetId}"]`);
        if (box) {
          box.style.display = 'flex';
        }
      });
      // Remove links and attributes keywordfrom trigger
      // Uncomment the lines below to enable keywordthis functionality
      // trigger.funcremoveAttribute('href');
      // trigger.funcremoveAttribute('target');
      // trigger.funcremoveAttribute('rel');
      // trigger.funcremoveAttribute('onclick');
    });
  }
});
</script>

Tutorial

Wie man Inhalte mit benutzerdefinierten Modals in Webflow vergibt: Eine Schritt-für-Schritt-Anleitung

Hello there! Are you looking to enhance your website's user experience by gating content with custom modals? You're in the right place! This tutorial will guide you through the process, as demonstrated in the video "How To Gate Content With Custom Modals In Webflow".

Was ist Gating Content mit Modals?

Das Gating von Inhalten mit Modals ist eine beliebte Funktion auf vielen Websites. Damit können Sie den Nutzern zeigen, dass es bestimmte Funktionen gibt, für die sie sich jedoch anmelden oder registrieren müssen. Dies ist eine großartige Möglichkeit, Besucher dazu zu bewegen, ihr Abo zu erweitern oder sich anzumelden.

Schritt-für-Schritt-Anleitung

Schritt 1: Verstehen Sie die Elemente

In Webflow werden Sie mit zwei Hauptelementen arbeiten: einer Schaltfläche und einem benutzerdefinierten Modal. Mit der Schaltfläche können Benutzer mit Ihrem Inhalt interagieren, und das benutzerdefinierte Modal wird angezeigt, wenn ein nicht angemeldeter Besucher auf ein Element klickt, das nur für Mitglieder zugänglich ist.

Schritt 2: Attribute anwenden

Apply an attribute to the button: ms-code-gate-modal-trigger. The value for this attribute is a placeholder (for example, "X"). This attribute is crucial for triggering the modal.

Next, apply an attribute to the outer layer of the custom modal: ms-code-gate-modal-box. The value for this attribute should match the value you used for the button attribute (in this case, "X"). This attribute is essential for linking the button to the correct modal.

Schritt 3: Passen Sie Ihr Modal an

Sie können den Inhalt Ihres Modals an Ihre Bedürfnisse anpassen. Sie können zum Beispiel Links zu einer Anmeldeseite oder anderen relevanten Informationen einfügen.

Schritt 4: Das Modal ausblenden

Bevor Sie Ihre Website veröffentlichen, sollten Sie Ihr Modal ausblenden. Beachten Sie auch, dass das Skript das Modal auf Flex einstellt, was eine gängige Praxis ist, um alles innerhalb des Modals zu zentrieren.

Schritt 5: Implementierung von Memberscript 26

Fügen Sie Memberscript 26 in Ihr Webflow-Projekt ein. Sie brauchen hier nichts zu ändern, es sei denn, Sie verwenden eine andere Anzeigeeigenschaft (z. B. block statt flex).

Schritt 6: Anpassen für Links

Wenn Ihre Schaltfläche auf eine andere Seite verweist, müssen Sie das Skript anpassen, um zu verhindern, dass der Link das Modal beeinträchtigt. Sie können dies tun, indem Sie bestimmte Zeilen im Skript auskommentieren.

Schritt 7: Unerwünschte Attribute entfernen

Wenn Sie benutzerdefinierte Attribute entfernen möchten, können Sie dies tun, indem Sie eine bestimmte Codezeile aus dem Skript kopieren und einfügen.

Und das war's! Sie haben Inhalte mit benutzerdefinierten Modals in Webflow erfolgreich mit Gates versehen.

Schlussfolgerung

Die Einblendung von Inhalten mit benutzerdefinierten Modals ist eine leistungsstarke Methode zur Verbesserung der Benutzerfreundlichkeit Ihrer Website. Mit nur einem Skript und zwei Attributen können Sie ein attraktiveres und persönlicheres Erlebnis für Ihre Besucher schaffen. Wenn Sie auf Probleme stoßen, zögern Sie nicht, uns um Hilfe zu bitten. Viel Spaß beim Kodieren!

For more detailed instructions, you can watch the full video tutorial here.