#Nr. 26 - Inhalte mit benutzerdefinierten Modals abbilden v0.1

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

Demo-Projekt ansehen Erfahren Sie mehr über Memberstack


<!-- 💙 MEMBERSCRIPT #26 v0.1 💙 GATE CONTENT WITH MODALS -->
<script>
$memberstackDom.getCurrentMember().then(({ data }) => {
  if (!data) {
    // Member is not logged in
    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 from trigger
      // Uncomment the lines below to enable this functionality
      // trigger.removeAttribute('href');
      // trigger.removeAttribute('target');
      // trigger.removeAttribute('rel');
      // trigger.removeAttribute('onclick');
    });
  }
});
</script>

Erstellen des Make.com-Szenarios

1. Laden Sie den JSON-Blaupause unten, um angegeben zu bekommen.

Datei herunterladen

2. Navigieren Sie zu Make.com und erstellen Sie ein neues Szenario...

3. Klicken Sie auf das kleine Kästchen mit den 3 Punkten und dann auf Blaupause importieren...

4. Laden Sie Ihre Datei hoch und voila! Sie sind bereit, Ihre eigenen Konten zu verknüpfen.

Brauchen Sie Hilfe mit diesem MemberScript?

Alle Memberstack-Kunden können im 2.0 Slack um Unterstützung bitten. Bitte beachten Sie, dass dies keine offiziellen Funktionen sind und der Support nicht garantiert werden kann.

Treten Sie dem 2.0 Slack bei

Anmerkungen zur Version

Attribute

Beschreibung

Attribut

Keine Artikel gefunden.

Leitfäden / Tutorials

Erstellen von Paywalls mit Webflow

Tutorial

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

Hallo zusammen! Möchtest du die Benutzerfreundlichkeit deiner Website verbessern, indem du Inhalte mit benutzerdefinierten Modals einbindest? Dann sind Sie hier genau richtig! Dieses Tutorial wird Sie durch den Prozess führen, wie im Video gezeigt "Wie man Inhalte mit benutzerdefinierten Modals in Webflow anzeigt".

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

Wenden Sie ein Attribut auf die Schaltfläche an: ms-code-gate-modal-trigger. Der Wert für dieses Attribut ist ein Platzhalter (z. B. "X"). Dieses Attribut ist entscheidend für das Auslösen des Modals.

Wenden Sie als nächstes ein Attribut auf die äußere Schicht des benutzerdefinierten Modals an: ms-code-gate-modal-box. Der Wert für dieses Attribut sollte mit dem Wert übereinstimmen, den Sie für das Attribut Schaltfläche verwendet haben (in diesem Fall "X"). Dieses Attribut ist wichtig für die Verknüpfung der Schaltfläche mit dem richtigen 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!

Ausführlichere Anweisungen finden Sie in der vollständigen Videoanleitung hier.

Schaltfläche Text

Was ist Memberstack?

Autorisierung und Zahlungen für Webflow-Websites

Fügen Sie Ihrer Webflow-Website Logins, Abonnements, Gated Content und vieles mehr hinzu - einfach und vollständig anpassbar.

Mehr erfahren

"Wir verwenden Memberstack schon seit langem, und Es hat uns geholfen, Dinge zu erreichen, die wir mit Webflow nie für möglich gehalten hätten. Es hat uns ermöglicht, Plattformen mit großer Tiefe und Funktionalität zu bauen, und das Team dahinter war immer sehr hilfsbereit und offen für Feedback.

Jamie Debnam

39 Digital

"Ich habe eine Mitgliedschaftsseite mit Memberstack und Jetboost für einen Kunden erstellt. Es fühlt sich wie Magie an, mit diesen Tools zu bauen. Als jemand, der in einer Agentur gearbeitet hat, wo einige dieser Anwendungen von Grund auf neu programmiert wurden, verstehe ich jetzt endlich den Hype. Das ist viel schneller und viel billiger."

Félix Meens

Webflix-Studio

"Eines der besten Produkte, um eine Mitgliederseite zu starten - ich mag die Benutzerfreundlichkeit von Memberstack. Ich war in der Lage, meine Mitgliederseite innerhalb eines Tages einzurichten und zu betreiben.. Einfacher geht's nicht. Außerdem bietet es die Funktionalität, die ich brauche, um die Benutzererfahrung individueller zu gestalten."

Eric McQuesten

Gesundheitstechnologie-Nerds

Off World Depot

"Mein Geschäft wäre ohne Memberstack nicht das, was es ist. Wenn Sie denken, dass $30/Monat teuer sind, versuchen Sie mal, einen Entwickler zu engagieren, der für diesen Preis individuelle Empfehlungen in Ihre Website integriert. Unglaublich flexible Tools für diejenigen, die bereit sind, einige minimale Anstrengungen zu unternehmen und die gut zusammengestellte Dokumentation zu lesen."

Riley Brown

Off World Depot

"Die Slack-Community ist eine der aktivsten, die ich kenne, und andere Kunden sind bereit, Fragen zu beantworten und Lösungen anzubieten. Ich habe ausführliche Bewertungen von alternativen Tools durchgeführt und wir kommen immer wieder auf Memberstack zurück - sparen Sie sich die Zeit und probieren Sie es aus."

Abtei Burtis

Gesundheitstechnologie-Nerds

Alle Testimonials anzeigen Kostenlose Testversion starten

Slack

Brauchen Sie Hilfe mit diesem MemberScript? Treten Sie unserer Slack-Community bei!

Treten Sie der Memberstack-Community Slack bei und fragen Sie los! Erwarten Sie eine prompte Antwort von einem Team-Mitglied, einem Memberstack-Experten oder einem anderen Community-Mitglied.

Unserem Slack beitreten