5 pasos para crear un sitio web de membresía en 2024 (sin código)

Esta guía paso a paso contiene todo lo que necesitas saber para crear un sitio web de membresía y hacerlo crecer utilizando herramientas sin código (no-code).

5 pasos para crear un sitio web de membresía en 2024 (sin código)

¿Quieres crear un sitio web de membresía totalmente personalizable sin escribir una sola línea de código? Has llegado al lugar indicado. En esta guía definitiva, aprenderás cómo planifiqué, construí y promocioné mi propio negocio de membresía.

Todo empezó con un tuit.

Aproximadamente un mes antes, había anotado en mis notas una idea sobre un "archivo de referencia" (swipe file) que recopilara ejemplos de marketing con detalles y comentarios para cada uno.

Por si no sabes qué es un archivo de referencia, básicamente es una colección de ejemplos de marketing y redacción publicitaria que sirve de inspiración. Un profesional del marketing "guarda" páginas, anuncios, correos electrónicos y otros ejemplos en un archivo para consultarlos más adelante.

Así que, cuando Sako tuiteó que iba a crear un sitio web gratis, decidí aprovechar la oportunidad y presentarle mi idea.

El destino quiso que Sako decidiera crear varios sitios y terminara convirtiendo el sorteo en el lanzamiento del Nocode Rumble, donde me uní a otros 7 creadores en un desafío para construir un sitio sin código en 3 meses con la ayuda de Sako.

Más concretamente, te mostraré cómo construí Swipe Files, mi sitio de membresía creado totalmente con herramientas sin código, para que tú también puedas aprender a hacerlo.

Pero, ¿qué es exactamente un sitio de membresía?

En esencia, el modelo de membresía es un sistema basado en suscripciones que te permite cobrar a tu audiencia una cuota mensual o anual a cambio de acceso a contenido exclusivo, comunidad, servicios o beneficios.

Dado que un archivo de referencia es una biblioteca de contenido curado, tuve el presentimiento de que podría funcionar mejor como un sitio de membresía en lugar de simplemente publicarlo en un blog abierto al público.

Si lograba empaquetar una colección curada de contenido premium, descargas digitales, seminarios web o cursos en línea que aportaran un valor real a las personas y a sus negocios, ¡quizás pagarían por acceder y yo podría construir un buen negocio! Lo único que tendría que hacer sería restringir el contenido para que solo fuera accesible para los miembros.

En pocas palabras, un sitio de membresía es simplemente un sitio web, o una parte de él, al que solo pueden acceder los miembros.

5 pasos para crear un sitio web de membresía

Aquí tienes un sencillo tutorial de 5 pasos para crear tu sitio web de membresía.

1. Planifica tu visión para el sitio de membresía

Lewis Carroll dijo una vez: "Si no sabes a dónde vas, cualquier camino te llevará allí".

Lo mismo se aplica a la creación de un sitio de membresía.

Si no sabes cómo debería ser el sitio de membresía terminado, cualquier sitio servirá.

Así que, después de decidir el nombre tan literal de "Swipe Files" para el nombre de dominio, comenzamos a planificar lo que realmente implicaría el sitio de membresía.

Tenía muchas ideas en la cabeza y algunos apuntes sueltos, pero todo seguía siendo demasiado etéreo como para pasar a la acción, especialmente teniendo en cuenta que Sako iba a hacer el trabajo pesado de construirlo para mí.

Explicárselo a otra persona es un ejercicio fantástico para definir exactamente qué quieres construir. Lanzarse a crear sin tener ni idea de cómo será el producto final es receta segura para el desastre.

Antes de empezar a construir, tienes que darle forma a tu visión y detallar todo lo que puedas para no acabar con un "Frankensite". Es un paso del proceso del que rara vez se habla, pero que es fundamental, y lo que Ryan Singer de Basecamp bautizó como "shaping" (dar forma).

Puedes ver cómo Sako y yo le damos forma a la visión de Swipe Files en nuestra primera sesión de Nocode Rumble.

Esto nos permitió responder a cinco preguntas clave que determinarían una visión clara de lo que llegaría a ser Swipe Files:

  • ¿Para quién es?
  • ¿Qué hace?
  • ¿Cómo se monetizará?
  • ¿Por qué debería la gente hacerse miembro?
  • ¿Dónde se enterará la gente de su existencia?

Usa estas mismas cinco preguntas para planificar tu sitio de membresía. Para ilustrar el proceso, aquí te muestro cómo respondí a estas preguntas para Swipe Files.

¿Para quién es Swipe Files?

Dada la naturaleza de un "swipe file" (archivo de ideas), sabía que el sitio se centraría en profesionales del marketing y emprendedores enfocados en el marketing. La idea surgió de mi propia frustración al tener que buscar y analizar manualmente ejemplos dignos de copiar. Así que, básicamente, estaba resolviendo mi propio problema.

En un sentido más amplio, el sitio podría atraer a profesionales del marketing y emprendedores de diversos sectores: SaaS, aplicaciones de escritorio/móviles, comercio electrónico, productos digitales, mercados y servicios.

La clave aquí es que no intento atraer a todo el mundo. Está diseñado específicamente para profesionales del marketing y emprendedores centrados en el marketing.‍

¿Qué haría Swipe Files?

Como autor y curador principal, daría a los miembros acceso a una biblioteca de ejemplos con análisis detallados de lo que hacía que cada uno fuera excelente.

Los ejemplos se centrarían inicialmente en páginas de destino, correos electrónicos y anuncios, pero luego se expandirían a una variedad de otras categorías.

Una de las cosas en las que creo firmemente es que la inspiración puede encontrarse en lugares inesperados. Y, más concretamente, a veces la mejor fuente de inspiración para el marketing proviene de empresas de sectores completamente distintos, con productos y modelos de negocio totalmente diferentes.

Por lo tanto, los ejemplos y los análisis también representarían los diferentes tipos de negocios para los que alguien podría estar haciendo marketing, como mencioné antes: SaaS, aplicaciones de escritorio/móviles, comercio electrónico, productos digitales, mercados y servicios.

De esta forma, los miembros no se quedarían atrapados en la burbuja de su propio sector, limitados a las ideas y prácticas de personas exactamente iguales a ellos.

Más adelante, Swipe Files podría incluir otros formatos de contenido como estudios de caso, tácticas, guías, audio o incluso vídeo. Pero, por ahora, se centrará en el análisis detallado de ejemplos.‍‍

¿Cómo se monetizará?

¿Será gratuito? ¿De pago? ¿Habrá planes de suscripción vitalicia? ¿Planes mensuales? ¿Una combinación? ¿Cuáles son todas las opciones de suscripción?

Quería que Swipe Files fuera lo más inclusivo posible para que hubiera una versión para cada nivel de interés, así que me decidí por cuatro niveles y planes de suscripción diferentes:

  1. Gratuito: Cualquiera puede suscribirse para recibir el último análisis en su bandeja de entrada en cuanto se publique, pero, en cuanto sale uno nuevo, el anterior pasa a ser exclusivo para miembros.
  2. 29 $/mes: Ideal para quienes quieran probarlo o solo necesiten usarlo durante un tiempo breve.
  3. 99 $/año: La mejor opción para quienes buscan la mejor oferta y planean usarlo a largo plazo.
  4. 299 $/pago único: Perfecto para quienes odian las suscripciones y no quieren preocuparse por las renovaciones.

Con cada suscripción de pago, los miembros obtendrán acceso total a toda la biblioteca y a todo el contenido, la comunidad y las ventajas futuras.‍

¿Por qué debería la gente hacerse miembro?

De nuevo, hablando desde mi propia experiencia, me frustraba la falta de recursos que había. Existen algunos sitios que recopilan ejemplos de marketing, pero ninguno profundiza en el porqué de su selección. Parece que, en realidad, no son nada selectivos.

Mi promesa a los miembros de Swipe Files es que solo recibirán los mejores ejemplos, y cada uno contará con un montón de detalles, contexto y análisis. Los profesionales del marketing y los emprendedores nunca tendrán que empezar de cero: podrán encontrar ejemplos relevantes para lo que estén haciendo en ese momento y nueva inspiración para futuros proyectos.‍

¿Dónde se enterará la gente de su existencia?

A lo largo de los años, he conseguido un número decente de seguidores en Twitter y una lista de correo de profesionales del marketing y emprendedores a través de mis otros proyectos que podría usar para hacer promoción cruzada.

Más adelante, podría experimentar patrocinando podcasts y boletines, colaborando con otros sitios y blogueros, publicando anuncios y creando sistemas de referidos para incentivar a la gente a compartir Swipe Files con otros.

Si necesitas más ayuda para dar forma a tu idea antes de empezar a construir, te recomiendo encarecidamente The MVP Experiment Canvas para ayudarte a trazar tus ideas y el curso No-Code MVP para una exploración más exhaustiva.

2. Elige tu pila tecnológica "no-code" para el sitio de suscripción

Hoy en día hay muchísimas herramientas diferentes que puedes usar. Tenemos la suerte de vivir en pleno auge del software, lo que permite a cualquier persona crear y personalizar productos fantásticos sin tener que aprender a programar.

Ese soy yo.

Y en cuanto a flexibilidad, personalización y experiencia general del cliente, no hay nada como Webflow para crear tu sitio de suscripción. Antiguamente, muchas personas sin conocimientos técnicos usaban creadores de sitios web como WordPress para crear sitios de suscripción. Sin embargo, eso requería combinar un montón de complementos y plugins de suscripción de WordPress, lo que hacía que el sitio web de tu negocio fuera vulnerable a problemas de seguridad y ralentizaba la página, algo nefasto para el SEO.

Junto con Webflow, existen otros productos de software que cubren las necesidades de un sitio de suscripción:

  • Memberstack para nuestro software de suscripción, con el fin de restringir el acceso al contenido y gestionar las membresías
  • Jetboost para añadir funciones avanzadas de búsqueda y filtrado en la página
  • Zapier, Integromat o Parabola para enviar datos y automatizar procesos
  • Airtable o Google Sheets para bases de datos

Con estas herramientas clave, puedes crear prácticamente cualquier tipo de sitio de membresía. Mencionaré otras herramientas auxiliares más adelante, pero probablemente solo necesites una combinación de estas para construir la base de tu sitio.

3. Diseña y construye en Webflow

Ahora, a ponerse manos a la obra.

Por suerte, como usé Webflow, diseñar y construir es lo mismo gracias a su avanzada interfaz de diseño. Puedes empezar desde cero, desde una plantilla base o desde una de las muchas y fantásticas plantillas de Webflow.

Sako y yo encontramos una plantilla en particular, Panels, que encajaba exactamente con la estética que buscaba y tenía muchos de los componentes que habríamos necesitado si hubiéramos empezado de cero. Comprar la plantilla Panels aceleró drásticamente el proceso, ya que pudimos hacer pequeños ajustes y empezar a montar el sitio en cuestión de minutos.

Como mínimo, tu sitio de membresía necesitará cuatro páginas:

  • Página de inicio para informar a los visitantes sobre tu sitio de membresía y convencerlos de que se registren
  • Página de registro para mostrar los precios a los visitantes y ofrecerles una forma de unirse como miembros
  • Página exclusiva para miembros para dirigir a los usuarios al contenido, la comunidad, los servicios o los beneficios que ofreces
  • Página de inicio de sesión para los visitantes que regresan

Como estaba creando una "biblioteca" de contenido, también utilicé el CMS de Webflow y necesité una página adicional: la plantilla de elemento CMS para cada ejemplo.

En nuestra primera sesión de construcción del sitio, Sako y yo creamos la página de inicio para definir la estructura del sitio.

Uno de los retos más interesantes fue descubrir cómo permitir que los visitantes vieran un análisis gratuito. Si quieres crear una versión "freemium" de tu sitio de membresía para que los visitantes prueben lo que pueden esperar al hacerse miembros, esto es para ti.

Lo que terminamos haciendo fue crear dos colecciones de CMS: una restringida solo para miembros y otra gratuita para que cualquiera pueda verla, que básicamente sería una copia del contenido exclusivo pero con acceso limitado.

Como puedes ver en nuestra segunda sesión, probamos varias opciones antes de decidirnos por esta solución.

Eso es lo mejor de Webflow: tienes control creativo total y no estás limitado a una sola forma de hacer las cosas.

4. Construye la sección exclusiva para miembros

Aquí es donde ahora construirías la parte de tu sitio donde los miembros pueden acceder a sus beneficios.

En el caso de Swipe Files, el contenido exclusivo para miembros es un directorio de análisis detallados.

Para poder buscar y filtrar el contenido restringido en Swipe Files, incorporé otra herramienta llamada Jetboost.

Curiosidad: Jetboost fue creado por mi amigo Chris Spagnuolo, quien estaba trasteando con mi bolsa de trabajo de marketing y escribió un pequeño script sencillo para facilitar mucho la búsqueda y el filtrado de empleos.

Después de que escribí sobre cómo creé la bolsa de trabajo, la gente no paraba de escribirme preguntando cómo había hecho el sistema de búsqueda y filtrado, a lo que yo los remitía a Chris. Al poco tiempo, se dio cuenta de que quizás había demanda para algo así ¡y creó Jetboost!

La primera vez nos llevó un tiempo, pero conectar Jetboost es bastante sencillo en realidad.

Primero, crea una colección CMS para cada filtro que desees y luego añade un campo de referencia múltiple para cada uno de esos filtros.

webflow cms collection settings

Luego, creas un "booster" para cada filtro en Jetboost y designas qué colección CMS vas a filtrar y cuál es el filtro.

configure jetboost filter

Añade el fragmento de JavaScript de Jetboost a la sección de Código personalizado en la configuración del proyecto de tu sitio y publícalo.

adding jetboost script

Añade una clase contenedora a la Lista de colección que quieras filtrar para que Jetboost pueda localizarla e incrustar un pequeño fragmento de código dentro del Elemento de colección.

jetboost file filter

Aquí tienes un ejemplo de cómo se ve eso en Webflow.

adding jetboost code to webflow

Luego, básicamente repites el mismo proceso para el elemento que realiza el filtrado.

creating filter in jetboost

Y finalmente, algunas opciones avanzadas para qué hacer cuando no se encuentran resultados y diferentes botones para manipular los filtros.

jetboost advance options

Sigue este proceso para cada filtro, así como un proceso muy similar para crear la barra de búsqueda, y terminarás con una lista de boosters para potenciar tu página de colección CMS.

swipefiles jetboost filters

El resultado final es poder buscar y filtrar una gran cantidad de elementos CMS en tu página recién estrenada para miembros.

swipe files search functionality

5. Añadir funcionalidad de membresía

Ahora, a ponerle la "membresía" al "sitio de membresía".

Añadir funcionalidad de membresía a un sitio solía ser cuestión de contratar a un desarrollador y gastar miles de dólares para implementar una solución personalizada.

Ahora es solo cuestión de registrarse en una plataforma de membresía increíble como Memberstack.

Memberstack es una solución de gestión de membresías que te permite añadir funcionalidad de membresía a casi cualquier sitio web, sin necesidad de programación compleja.

Puedes vernos realizar el proceso para conocer todos los detalles, pero también te explicaré la versión simplificada.

Después de añadir el fragmento de JavaScript de Memberstack al código personalizado de tu sitio, tal como hicimos antes, hay tres pasos esenciales para empezar:

  1. Conectar todos los formularios y campos
  2. Crear membresías
  3. Designar contenido exclusivo para miembros

Crea los campos que quieras obtener de tus miembros cuando se registren.

memberstack sign up and profile fields

Luego, añade atributos a cada formulario para que Memberstack pueda capturar esa información cuando alguien lo envíe. Repite este proceso con cada formulario.

add attributes for memeberstack in webflow

Como Swipe Files tiene tres planes diferentes, creé un formulario para cada membresía y luego repetí el proceso de añadir atributos de datos para cada una.

add memberstack plans

Es tan sencillo como ponerle un nombre, un precio y decirle a Memberstack a dónde quieres enviar a alguien una vez que se convierta en cliente.

memberstack members only content

Designa qué contenido es exclusivo para miembros basándote en la URL y Memberstack denegará el acceso a menos que el usuario haya iniciado sesión. Puedes añadir varias rutas de URL o páginas individuales.

memberstack url paths

El resto de la configuración son solo detalles: colores, fuentes, ajustes, etc. ¡Eso es todo! Ahora los nuevos miembros pueden empezar a pagarte. Sin embargo, ten en cuenta que actualmente Memberstack solo tiene integración con Stripe para tarjetas de crédito, pero tienen planes de añadir más pasarelas de pago como PayPal, Apple Pay, Google Pay y otras en el futuro.

Bonus: Más herramientas para tu sitio de membresía

Hay algunas otras herramientas que uso para que Swipe Files funcione y que no son estrictamente necesarias:

  • ConvertKit para el marketing por correo electrónico y alojar la lista de suscriptores, enviar el boletín gratuito y dar la bienvenida a nuevos suscriptores.
  • SparkLoop para gestionar el programa de referidos en mi boletín e incentivar a los suscriptores a compartirlo con sus amigos.
  • RightMessage para crear una lista de correo mediante encuestas personalizadas y ventanas emergentes.
  • Beamer para notificar actualizaciones a los miembros.
  • Fathom para medir el tráfico del sitio.

Cuando los visitantes llegan al sitio, uso RightMessage para crear la lista de correo y luego personalizar la experiencia según la etapa del "embudo" en la que se encuentren.

Por ejemplo, si alguien no es suscriptor, le hago un par de preguntas y luego le presento una propuesta personalizada para el boletín. Si ya es suscriptor, le ofrezco hacerse miembro. Y si ya es miembro, ¡no lo molesto con nada!

add email paths

Al integrar ConvertKit y SparkLoop, puedo enviar boletines semanales con los últimos análisis. ConvertKit está diseñado para creadores y facilita el envío de correos y la configuración de secuencias automatizadas. Junto con SparkLoop, los suscriptores pueden compartir Swipe Files para desbloquear recompensas.

landing page content

Y con Beamer, puedo enviar notificaciones directamente a los miembros en el sitio.

notifications for swipe files

¿Y ahora qué?

¡Ya deberías tener una membresía funcionando usando solo herramientas sin código!

Una vez que tu sitio de membresía esté activo, puedes empezar a invitar a personas a unirse y construir tu base de clientes.

Empieza con amigos que te ayuden a ajustar la experiencia y a pulir cualquier detalle antes de abrirlo al público general.

Cuando estés listo para abrir las compuertas, lánzalo en redes sociales, sitios como Product Hunt y Betalist, y promociona tu sitio de membresía con anuncios y marketing de contenidos.

Y si quieres ver el producto final (en constante evolución) de Swipe Files, suscríbete al boletín gratuito en swipefiles.co/subscribe y echa un vistazo a la biblioteca de contenido en swipefiles.co/files.

También creé un video de una hora donde explico paso a paso cómo se construyó Swipe Files, por si te interesa el tema.

Libro electrónico gratuito: La revolución no-code

Descubre el impacto que tendrá el movimiento no-code en el futuro de los creadores y las empresas.

→
↗
►
↓
←
↑
Leer ahora

Última actualización
January 12, 2021
Categoría

Artículos relacionados

3 ejemplos creativos de empresas que usan Webflow CMS
3 ejemplos creativos de empresas que usan Webflow CMS

3 ejemplos creativos de empresas que usan Webflow CMS

3 ejemplos creativos de empresas que usan Webflow CMS

Inspiración
Por
Gaby Izarra
,
,
Leer artículo
Cómo crear (y hacer crecer) un portal de empleo con Webflow
Cómo crear (y hacer crecer) un portal de empleo con Webflow

Cómo crear (y hacer crecer) un portal de empleo con Webflow

Cómo crear (y hacer crecer) un portal de empleo con Webflow

Desarrollo
Por
Tomas Laurinavicius
,
,
Leer artículo
18 aplicaciones y herramientas sin código para impulsar tu negocio
18 aplicaciones y herramientas sin código para impulsar tu negocio

18 aplicaciones y herramientas sin código para impulsar tu negocio

18 aplicaciones y herramientas sin código para impulsar tu negocio

Desarrollo
Por
Jeff Cardello
,
,
Leer artículo
6 creadores de sitios web gratuitos para inspirar tu próximo diseño
6 creadores de sitios web gratuitos para inspirar tu próximo diseño

6 creadores de sitios web gratuitos para inspirar tu próximo diseño

6 creadores de sitios web gratuitos para inspirar tu próximo diseño

Desarrollo
Por
Equipo de Webflow
,
,
Leer artículo
Diseña y crea la web de tu agencia, parte 1: Sentando las bases
Diseña y crea la web de tu agencia, parte 1: Sentando las bases

Diseña y crea la web de tu agencia, parte 1: Sentando las bases

Diseña y crea la web de tu agencia, parte 1: Sentando las bases

Estrategia
Por
Tom Johnson
,
,
Leer artículo
3 consejos para usar código personalizado en Webflow
3 consejos para usar código personalizado en Webflow

3 consejos para usar código personalizado en Webflow

3 consejos para usar código personalizado en Webflow

Desarrollo
Por
Timothy Ricks
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.