Este artículo muestra cómo utilizar la función de contenido alojado de Memberstack. Esta práctica herramienta le permite controlar el acceso a contenido cerrado en función del estado de inicio de sesión del usuario. Si, por ejemplo, un usuario inicia sesión en su cuenta Webflow, la página muestra un botón de descarga activo. Para los visitantes desconectados, Webflow desactiva el botón.

También le mostraremos cómo ampliar esta herramienta añadiendo un enlace de menú seguro que sólo se muestre a los usuarios registrados.

Creación de un estado de inicio de sesión

El primer paso es crear un estado de inicio de sesión para los usuarios de Webflow. En este ejemplo, la interfaz de usuario es un botón de descarga con un archivo adjunto.

Una vez que esté todo configurado, tenemos que publicar el sitio, ir a la página publicada, y copiar el HTML del botón.

1. Haga clic con el botón derecho del ratón en el elemento que desea almacenar en Memberstack.
2. Seleccione Inspeccionar.

3. Vaya al panel Elementos y copie el HTML del botón de descarga.

Configuración de Memberstack

Vaya a su cuenta Memberstack.

1. Haga clic en Contenido cerrado en el menú lateral y luego en el botón Añadir.

Desplácese hacia abajo hasta el encabezado Contenido alojado (opcional).

1. Asegúrese de que el campo Tipo de contenido muestra HTML.
2. Pegue el HTML de Webflow en el campo.
3. Introduzca un nombre para el contenido.
4. Haga clic en el botón Añadir contenido.

Para guardar el contenido, deberá rellenar el resto de campos obligatorios. Introduzca información de marcador de posición si es necesario.

Creación de un estado de carga

Ahora cree un estado de carga en Webflow. Este estado muestra la misma página de descarga pero elimina el contenido protegido.

1. Vuelva a la página de descarga de Webflow.
2. Seleccione el elemento alojado en el lienzo.
3. Recomiendo sustituir cualquier información sensible, contenido y enlaces por marcadores de posición. Siempre que sea posible, trate de mantener los mismos nombres de clase para que se guarden en Webflow.
4. El contenido del marcador de posición no será visible durante mucho tiempo (normalmente menos de medio segundo), pero es aconsejable que tenga un buen aspecto.

En este ejemplo he eliminado el enlace de descarga y he cambiado el texto del botón.

• Si un visitante del sitio hace clic en el botón de la página en vivo, no ocurre nada.

Añadir un atributo

¡Ya casi está!

1. Vuelve al sitio Memberstack.
2. Vaya a la sección Contenido alojado.
3. Haga clic en el botón de instalación HTML.
4. En la ventana emergente, haga clic en el icono de copia

Vuelva a Webflow.

1. Seleccione el elemento botón.
2. Vaya al panel de la derecha y abra la carpeta Atributos personalizados.
3. Pegue los atributos Nombre y Valor.
4. Haga clic en Publicar.

Probar el enlace

Vaya a la página Webflow en directo e inicie sesión. Webflow muestra un botón activo y un enlace de descarga.

‍

Ya está.

Ha creado un botón con un enlace seguro a un contenido cerrado.

Añadir un enlace seguro

Esta función le permite insertar dinámicamente enlaces para los miembros. El enlace sólo se mostrará a los usuarios registrados.

Vuelva a la sección Contenido alojado de su panel de control de Memberstack.

1. Haga clic en el campo Tipo de contenido y seleccione Enlace.
2. Pegue la URL de la página segura (descarga, enlace del cuadro desplegable, vídeo de Youtube, etc.).
3. Añade un nombre para este enlace.
4. Haga clic en Guardar.

• En la ventana emergente, copie los atributos de datos para este enlace seguro.

• A continuación, vuelva a Webflow. Y añada un enlace a su sitio. En este ejemplo, he añadido un enlace a la barra de navegación en mi sitio de marketing.

1. Abra la interfaz de usuario de atributos personalizados.
2. Pegue los atributos del enlace.
3. Haga clic en Publicar.

• Vaya a la página en vivo e inicie sesión. Webflow muestra el enlace del menú seguro.

• Cuando hago clic en el enlace del menú, Webflow abre la página correcta.

• Cuando salgo del sitio, Webflow elimina el enlace del menú seguro.

‍

Ya está.

Ahora ya sabe cómo crear enlaces para contenidos seguros que pueden añadirse a botones de descarga o a una barra de navegación.