#26 - Contenido de la puerta con módulos personalizados v0.1

Utilice modales personalizados para instar a sus visitantes a obtener una cuenta de pago.

Ver proyecto de demostración Más información sobre 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>

Creación del escenario Make.com

1. Descargue el proyecto JSON a continuación para empezar.

Descargar archivo

2. Navegue hasta Make.com y Cree un nuevo escenario...

3. Haga clic en el pequeño cuadro con 3 puntos y luego Importar Blueprint...

4. Sube tu archivo y ¡voilá! Ya está listo para vincular sus propias cuentas.

¿Necesitas ayuda con este MemberScript?

Todos los clientes de Memberstack pueden solicitar asistencia en el Slack 2.0. Tenga en cuenta que no se trata de funciones oficiales y que no se puede garantizar la asistencia.

Únete al Slack 2.0

Notas de la versión

Atributos

Descripción

Atributo

No se han encontrado artículos.

Guías / Tutoriales

Cómo crear muros de pago con Webflow

Tutorial

Cómo bloquear contenido con módulos personalizados en Webflow: Guía paso a paso

Hola a todos ¿Desea mejorar la experiencia de usuario de su sitio web abriendo el contenido con modales personalizados? Estás en el lugar adecuado. Este tutorial le guiará a través del proceso, como se muestra en el vídeo "Cómo bloquear contenido con modales personalizados en Webflow.

¿Qué es la "compuerta" de contenido con módulos?

Los modales son una función muy popular en muchos sitios web. Le permite mostrar a los usuarios que existen ciertas funciones, pero que necesitan registrarse o iniciar sesión para acceder a ellas. Es una buena forma de animar a los visitantes a actualizar su plan o iniciar sesión.

Guía paso a paso

Paso 1: Comprender los elementos

En Webflow, trabajará con dos elementos principales: un botón y un modal personalizado. El botón permite a los usuarios interactuar con su contenido, y el modal personalizado aparece cuando un visitante que no ha iniciado sesión hace clic en un elemento exclusivo para miembros.

Paso 2: Aplicar atributos

Aplicar un atributo al botón: ms-code-gate-modal-trigger. El valor de este atributo es un marcador de posición (por ejemplo, "X"). Este atributo es crucial para activar el modal.

A continuación, aplique un atributo a la capa exterior del modal personalizado: ms-code-gate-modal-box. El valor de este atributo debe coincidir con el valor que utilizaste para el atributo del botón (en este caso, "X"). Este atributo es esencial para vincular el botón al modal correcto.

Paso 3: Personalizar el modal

Puede personalizar el contenido de su modal para adaptarlo a sus necesidades. Por ejemplo, puedes incluir enlaces a una página de registro o cualquier otra información relevante.

Paso 4: Ocultar el modal

Antes de publicar su sitio web, asegúrese de ocultar su modal. Además, tenga en cuenta que el script establece el modal a flex, que es una práctica común para centrar todo dentro del modal.

Paso 5: Aplicar Memberscript 26

Pega el Memberscript 26 en tu proyecto Webflow. No es necesario cambiar nada aquí a menos que esté utilizando una propiedad de visualización diferente (como bloque en lugar de flex).

Paso 6: Ajustar los enlaces

Si tu botón enlaza con otra página, tendrás que ajustar el script para evitar que el enlace interfiera con el modal. Para ello, descomenta algunas líneas del script.

Paso 7: Eliminar atributos no deseados

Si tiene atributos personalizados que desea eliminar, puede hacerlo copiando y pegando una línea de código específica del script.

Y ya está. Ha cerrado con éxito el contenido con modales personalizados en Webflow.

Conclusión

Los modales personalizados son una forma eficaz de mejorar la experiencia del usuario de su sitio web. Con sólo un script y dos atributos, puede crear una experiencia más atractiva y personalizada para sus visitantes. Si tienes algún problema, no dudes en pedir ayuda. ¡Feliz programación!

Para obtener instrucciones más detalladas, puede ver el tutorial de vídeo completo aquí.

Texto del botón

¿Qué es Memberstack?

Autenticación y pagos para sitios Webflow

Añada inicios de sesión, suscripciones, contenido cerrado y mucho más a su sitio Webflow: fácil y totalmente personalizable.

Más información

"Hemos estado utilizando Memberstack durante mucho tiempo, y nos ha ayudado a lograr cosas que nunca hubiéramos creído posible usando Webflow. Nos ha permitido construir plataformas con gran profundidad y funcionalidad y el equipo que hay detrás siempre ha sido súper servicial y receptivo a los comentarios"

Jamie Debnam

39 Digital

"He estado construyendo un sitio de membresía con Memberstack y Jetboost para un cliente. Se siente como magia construir con estas herramientas. Como alguien que ha trabajado en una agencia donde algunas de estas aplicaciones fueron codificadas desde cero, finalmente entiendo el bombo ahora. Esto es mucho más rápido y mucho más barato."

Félix Meens

Estudio Webflix

"Uno de los mejores productos para iniciar un sitio de membresía - Me gusta la facilidad de uso de Memberstack. Yo era capaz de mi sitio de membresía en marcha y funcionando dentro de un día. No hay nada más fácil que eso. También proporciona la funcionalidad que necesito para hacer la experiencia del usuario más personalizada."

Eric McQuesten

Nerds de la tecnología sanitaria

Depósito Off World

"Mi negocio no sería lo que es sin Memberstack. Si crees que 30 $/mes es caro, prueba a contratar a un desarrollador para que integre recomendaciones personalizadas en tu sitio por ese precio. Increíblemente flexible conjunto de herramientas para aquellos dispuestos a poner en algunos esfuerzos mínimos para ver su documentación bien elaborado."

Riley Brown

Depósito Off World

"La comunidad de Slack es una de las más activas que he visto y los clientes están dispuestos a responder preguntas y ofrecer soluciones. He realizado evaluaciones en profundidad de herramientas alternativas y siempre volvemos a Memberstack: ahórrate el tiempo y dale una oportunidad"."

Abadía Burtis

Nerds de la tecnología sanitaria

Ver todos los testimonios Iniciar prueba gratuita

Slack

¿Necesitas ayuda con este MemberScript? ¡Únete a nuestra comunidad Slack!

Únete al Slack de la comunidad Memberstack y ¡pregunta! Espera una respuesta rápida de un miembro del equipo, un experto de Memberstack o un compañero de la comunidad.

Únete a nuestro Slack