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

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

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

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

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".

¿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

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.

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!

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