🚀 system d’ inscription avec WebFlow

Comment créer un site d'adhésion à l'aide de Webflow

Le guide étape par étape ultime

📚 Contenu

Ce guide vous guidera à travers toutes les étapes nécessaires pour créer et lancer un site d'adhésion réussi sur Webflow .

👩‍🏫 1. Apprenez les bases de Webflow

🎬 2. Création de contenu pour vos membres

✅ 3. Premiers pas avec MemberSpace

🧭 4. Configuration de la navigation sur votre site membre

🔑 5. Création de pages d'inscription et de connexion

🙅‍♀️ 6. Protection du contenu réservé aux membres (manière la plus simple)

🚫 7. Noircir le contenu réservé aux membres (plus sécurisé)

🔒 8. Ajout de liens de contenu aux pages des membres (le plus sécurisé)

🙋‍♂️ 9. Aller de l'avant et obtenir de l'aide

*******************************************************

La création d'un site d'adhésion avec Webflow est un excellent choix. Après tout, Webflow est un constructeur visuel qui vous permet de créer rapidement des sites Web. Associé à MemberSpace, tous les outils dont vous avez besoin pour créer un site d'adhésion fonctionnel sont à portée de main.

Nous avons rassemblé ce guide pour vous aider à apprendre non seulement comment utiliser MemberSpace avec Webflow, mais aussi comment utiliser Webflow pour créer un site Web. En suivant ce guide, vous pourrez non seulement créer un site Web fonctionnel, mais vous apprendrez également des conseils utiles sur la création d'un site d'adhésion.

Si vous voulez démarrer le processus ... vous devriez consulter nos modèles Webfow gratuits et clonables ici: modèle d'adhésion 1 , modèle d'adhésion 2 .

👩‍🏫 1. Apprenez les bases de Webflow

Dans cette section, vous apprendrez les bases de l'utilisation de Webflow Designer pour créer et modifier des pages.

Pour nous assurer que nous commençons sur la même page, nous nous attendons à ce que vous ayez déjà accompli ce qui suit avant de commencer ce guide:

• S'inscrire à Webflow
• Choisissez un modèle
• Connecté au Webflow «Designer»
• Création d'un compte MemberSpace

Une fois ces étapes terminées, vous êtes prêt à plonger.

Modification de la page principale Lorsque vous choisissez un modèle pour la première fois et entrez dans Webflow Designer, vous serez redirigé vers la page principale de votre site. Il s'agit de la page sur laquelle tous les visiteurs de votre site accèderont. Vous voulez vraiment vous consacrer à la conception de cette page; après tout, c'est la première chose que les visiteurs de votre site verront (et feront leur première impression).

Cependant, aussi beaux que soient les modèles Webflow, il est peu probable que le thème soit conçu exactement comme vous le souhaitez. Il est naturel de vouloir apporter des modifications, nous allons donc vous expliquer comment modifier votre page principale dans Webflow Designer.

Les sites Web sont divisés en trois parties différentes dans Webflow Designer:

• La navigation
• Corps
• Bas de page

Pour modifier des éléments dans chacune de ces zones, vous devez vous assurer que la zone est sélectionnée. Le corps (la majorité moyenne du site Web) est sélectionné par défaut. Cependant, si vous souhaitez modifier un élément dans la navigation, vous devrez vous rendre dans cette zone et double-cliquer. Cela sélectionnera la nouvelle zone et vous permettra de voir et de sélectionner les éléments dans cette zone. La même méthode peut être utilisée pour accéder à la zone de pied de page.

La zone du corps permet toujours de modifier les éléments, donc pour revenir à un élément du corps, vous pouvez simplement cliquer en arrière dans la zone du corps.

Si vous survolez un élément dans la zone sélectionnée, une boîte apparaîtra autour de lui. Cela vous montrera en quoi consiste l'élément. C'est un marqueur utile pour vous montrer ce qui est inclus dans un élément et ce que vous modifierez si vous le sélectionnez.

Une petite plaque signalétique apparaîtra également lorsque vous survolez un élément.

Pour modifier un élément, passez la souris sur l'élément afin que la boîte de l'élément apparaisse. Ensuite, double-cliquez sur l'élément. Cela vous permet de modifier l'élément. Selon l'élément, cependant, cela peut se produire de différentes manières. Par exemple, si vous double-cliquez sur un élément de texte, vous pourrez modifier le texte directement.

Cependant, si vous cliquez sur un élément d'image, il affichera la boîte "Paramètres" de l'élément, que vous pouvez utiliser pour modifier l'image.

Lorsqu'un élément est sélectionné, la barre latérale droite affiche également les options d'édition. Webflow utilise la même terminologie que CSS sans vous obliger à créer une feuille de style réelle.

La barre latérale droite a une variété de fenêtres d'édition. Pour voir une fenêtre différente, cliquez sur l'une des quatre icônes en haut de la barre latérale droite.

Si vous survolez l'icône, le nom de la fenêtre apparaîtra, ainsi que le raccourci de la fenêtre entre parenthèses. Vous pouvez utiliser le raccourci pour basculer facilement entre les fenêtres. Les fenêtres d'édition et leurs raccourcis sont:

Fenêtre: Style Raccourci clavier: S

Fenêtre: Paramètres des éléments Touche de raccourci: D

Fenêtre: Gestionnaire de styles Touche de raccourci: G

Fenêtre: Interactions Touche de raccourci: H

Si vous connaissez les termes CSS, l'utilisation de la barre latérale droite sera un jeu d'enfant. Même si vous n'êtes pas familier avec CSS, la plupart des options ne sont pas trop difficiles à trouver. Cependant, si vous avez besoin d'aide avec certains termes, nous vous recommandons de les consulter sur w3schools.com . Cette ressource gratuite est conçue pour aider les débutants à comprendre les bases du site Web. Leur section CSS couvre les termes CSS typiques et vous montre comment les utiliser. Bien que vous n'ayez pas besoin d'apprendre à utiliser le terme dans un fichier CSS, cela vous donnera quand même une bonne idée de la façon dont l'option affecte l'élément.

Conseil de pro: lorsque vous modifiez votre site, vous pouvez utiliser les quatre icônes au milieu de la barre de navigation supérieure pour voir à quoi ressemblera votre site sur différentes tailles d'écran. Avoir un site réactif est important, après tout .

Suppression d'éléments Webflow Lorsque vous utilisez un générateur de site Web pour créer un site, il est naturel de vouloir supprimer des éléments. Que ce soit un élément que vous avez ajouté vous-même ou un élément fourni avec l'élément, la suppression de contenu fait partie du processus de création de site Web.

Pour supprimer des éléments dans Webflow, vous devez sélectionner l'élément. Comme nous l'avons mentionné précédemment, si l'élément se trouve dans une zone autre que le «corps» (c'est-à-dire la navigation ou le pied de page), vous devrez double-cliquer sur cette section avant de pouvoir sélectionner un élément dans cette région.

Une fois un élément sélectionné, vous pouvez soit cliquer sur le bouton de retour arrière de votre clavier, soit cliquer avec le bouton droit et sélectionner «Supprimer» dans le menu déroulant.

Cela supprimera l'élément de la page de votre site.

Astuce de pro: Si vous supprimez accidentellement un élément auquel vous ne vouliez pas, vous pouvez utiliser le bouton Annuler dans la barre de navigation supérieure pour ramener l'élément.

Ajouter de nouveaux éléments de flux Web L'une des meilleures parties de la création d'un site Web avec un constructeur de site Web est de pouvoir ajouter du contenu facilement. Pas besoin de codage personnalisé - les constructeurs de sites Web comme Webflow s'occupent des bases pour vous et fournissent une interface qui vous aide à ajouter et à modifier les éléments à votre guise.

Pour ajouter de nouveaux éléments dans Webflow, accédez à la barre latérale gauche et recherchez l'icône plus.

Cliquez dessus pour ouvrir l'interface «Ajouter». L'interface «Ajouter» contient une variété d'éléments, qui peuvent tous être utilisés pour créer votre site. Les éléments sont divisés en catégories, telles que «Mise en page» et «Typographie». Vous pouvez faire défiler cette fenêtre pour avoir une meilleure idée des éléments que Webflow peut offrir.

Lorsque vous avez trouvé un élément que vous souhaitez ajouter, cliquez et faites glisser l'élément sur l'interface Designer. Une ligne bleue apparaîtra à l'endroit où l'élément sera placé, alors assurez-vous de garder cela à l'esprit avant de déposer l'élément.

Si vous êtes familier avec HTML, vous pouvez utiliser la barre latérale droite pour avoir une meilleure idée de l'endroit où l'élément sera placé. Lors de la suppression d'un élément, la barre latérale droite affiche automatiquement une liste des éléments HTML qui sont déjà sur la page. Lorsque vous déplacez l'élément choisi, la barre latérale droite vous indique où l'élément sera placé dans la hiérarchie HTML.

Lorsque vous déposez l'élément, il place l'élément à l'endroit où se trouvait la ligne bleue. Cela peut entraîner la réorganisation d'autres éléments autour du nouveau. Ne vous inquiétez pas - si vous détestez l'apparence du nouvel élément ou son emplacement, vous pouvez toujours appuyer sur le bouton Annuler.

Déplacement de contenu Webflow Le déplacement d'éléments dans Webflow est un processus simple.

Si vous avez placé un élément, mais que vous n'avez pas aimé son emplacement, il vous suffit de sélectionner l'élément et de le faire glisser vers un nouvel emplacement dans l'éditeur. La même ligne bleue que vous avez vue lors de l'ajout de contenu apparaîtra pour vous guider. Cette ligne vous montre où le contenu va atterrir, il est donc important d'y prêter attention.

Les éléments de Webflow s'aligneront sur l'objet le plus proche. Bien que cela ne vous permette pas de placer les choses aussi librement, cela aide à l'alignement, vous n'avez donc pas besoin de compter les pixels.

🎬 2. Création de contenu pour vos membres

Dans cette section, vous apprendrez à organiser et à créer des pages de contenu pour vos membres.

Maintenant que vous disposez des bases du concepteur Webflow, vous pouvez passer à la configuration de votre site d'adhésion.

Les sites d'adhésion sont composés de contenu. Qu'il s'agisse de contenu écrit, de contenu audible ou de contenu créé par les membres eux - mêmes , un site d'adhésion est une passerelle permettant aux membres d'y accéder.

Alors, comment vous assurez-vous que votre site d'adhésion est conçu de manière à donner à vos membres un large accès à votre contenu?

Eh bien, comme toujours, le design est subjectif. Nous ne pouvons pas vous dire qu'il n'y a qu'une seule façon de concevoir votre site d'adhésion. Cependant, nous pouvons vous orienter dans la bonne direction en vous montrant ce que nous avons vu bien fonctionner pour d'autres sites d'adhésion.

Connexion / Inscription des membres La zone de connexion et d'inscription sera l'une des fonctionnalités les plus interactives de votre site Web. Pour cette raison, c'est une bonne idée de rendre cette fonctionnalité HAUTEMENT visible. Vous voulez que les gens puissent le trouver dès qu'ils atterrissent sur votre site, peu importe où ils atterrissent.

C'est pourquoi c'est une bonne idée de l'avoir quelque part qui existe sur toutes les pages du site. Vous ne voulez pas perdre des gens simplement parce qu'ils n'ont pas atterri sur la bonne page. Qu'il s'agisse d'un onglet dans votre navigation supérieure ou d'une section que vous branchez sur chaque page, assurez-vous que vos membres existants et potentiels peuvent le trouver dès que possible.

Contenu réservé aux membres Le contenu réservé aux membres est l'attraction de votre adhésion, il est donc important que vos membres puissent le trouver! En plus de cela, la façon dont vous traitez réellement le contenu réservé aux membres dépend entièrement de vous. Certains propriétaires de sites d'adhésion masquent tout le contenu réservé aux membres jusqu'à ce qu'un membre soit connecté. Cependant, d'autres autoriseront les non-utilisateurs à cliquer sur le contenu, mais leur proposeront à la place un formulaire d'inscription / connexion.

Quelle que soit la façon dont vous choisissez d'afficher le contenu aux non-membres, de nombreux sites d'adhésion incluent l'entrée de leur contenu d'adhésion quelque part sur la page principale pour les membres qui se sont déjà connectés.

Astuce de pro: MemberSpace a une fonctionnalité astucieuse que vous pouvez utiliser pour cela. Avec la fonction MemberSpace, vous pouvez spécifier une page Web vers laquelle les membres seront redirigés directement après la connexion pour chaque plan. Vous pouvez vous en occuper lors de l'ajout d'un nouveau plan de membres dans l'interface MemberSpace.

Nous couvrirons l'interface MemberSpace et configurerons plus en détail plus tard, vous n'avez donc pas à vous en préoccuper maintenant.

Configuration d'autres pages Webflow Les sites d'adhésion sont généralement composés de nombreuses pages. Entre la page principale, la page de connexion / inscription potentielle et le contenu différent, les sites d'adhésion nécessitent généralement beaucoup de pages différentes.

Cela étant, vous devrez savoir comment ajouter de nouvelles pages dans Webflow Designer.

Pour ajouter une nouvelle page, accédez à la barre latérale gauche et cliquez sur l'icône de page.

Cette icône ouvrira l'interface Pages. Cette interface vous montre quelles pages vous avez actuellement. Il dispose également d'une barre de recherche pratique pour vous aider à trouver une page spécifique.

Pour ajouter une nouvelle page, cliquez sur l'icône de la page avec le bouton plus en haut à droite de l'interface. Si vous survolez l'icône, une info-bulle apparaîtra: «Créer une nouvelle page».

Assurez-vous de ne pas cliquer sur l'icône du dossier avec le signe plus - si ce bouton est cliqué, il ajoutera un nouveau dossier, pas une nouvelle page.

Lorsque vous cliquez sur l'icône «Créer une nouvelle page», une nouvelle interface appelée «Paramètres de nouvelle page» s'ouvre. Vous pouvez entrer tous les détails de votre nouvelle page dans cette interface, tels que le nom de la page, le slug , les éléments SEO et d'autres données liées à la page.

Une fois terminé, cliquez sur le bouton bleu «Créer» dans le coin supérieur droit de l'interface.

Cela ajoutera la nouvelle page à votre site et l'ouvrira automatiquement afin que vous puissiez commencer la modification.

✅ 3. Premiers pas avec MemberSpace

Dans cette section, nous allons vous montrer comment démarrer avec MemberSpace et l'installer sur votre site Webflow.

Maintenant que vous disposez des bases de la conception d'un site dans Webflow Designer, vous pouvez passer à l'ajout de MemberSpace à votre site. MemberSpace est ce qui donnera à votre site d'adhésion des capacités d'adhésion réelles.

Installation de MemberSpace sur votre site Webflow Cependant, avant que MemberSpace puisse fonctionner sur votre site Webflow, vous devez d'abord intégrer MemberSpace dans votre site Web.

Pour ce faire, vous devez d'abord vous connecter à votre compte MemberSpace . Une fois connecté, accédez au menu de navigation supérieur et cliquez sur le bouton «Personnaliser». Une fois sur place, cliquez sur «Options d'installation».

Cela vous amènera à une page où vous verrez le code d'installation de MemberSpace. Cliquez sur le bouton "Copier" en haut de la page pour copier ce code.

Ensuite, revenez à Webflow Designer et cliquez sur l'icône W dans la barre latérale gauche. Cela ouvrira une liste déroulante. Cliquez sur "Paramètres du projet".

Cela ouvrira une nouvelle page avec les paramètres du site Web. Accédez à l'onglet «Code personnalisé», puis collez le code que vous avez copié depuis MemberSpace dans le champ de texte «Code principal».

Une fois terminé, assurez-vous de cliquer sur «Enregistrer les modifications».

Gardez à l'esprit que les modifications ne seront pas rendues publiques, même après l'enregistrement, si vous ne publiez pas votre site. Bien que vous puissiez choisir d'attendre la fin de toutes les modifications du site, le test de votre intégration MemberSpace ne sera pas possible tant que vous n'aurez pas publié votre site.

En effet, Webflow désactive le code dans le concepteur Webflow, ce qui rend impossible de déterminer si le code fonctionne réellement.

Vous pouvez publier votre site en cliquant sur le bouton «Publier» dans le coin supérieur droit de la barre de navigation du concepteur.

Options du bouton de connexion / inscription automatique Lorsque MemberSpace est implémenté, il ajoute automatiquement un bouton de connexion / inscription noir dans le coin inférieur droit de votre site Web. Ce bouton apparaîtra sur chaque page.

Bien que ce bouton soit conçu pour vous aider à démarrer avec votre site d'adhésion, il peut être déplacé ou supprimé complètement si vous le souhaitez. Si vous préférez déplacer le bouton, vous pouvez contacter notre équipe d'assistance pour obtenir de l'aide. Ils seront ravis de vous aider à déplacer le bouton vers un autre emplacement.

Si vous souhaitez supprimer complètement le bouton et utiliser une autre forme d'inscription / de connexion (comme une intégration ou une fenêtre contextuelle, que nous aborderons plus loin dans ce guide), procédez comme suit:

Dans la barre de navigation supérieure, cliquez sur «Personnaliser». Une fois dans l'interface "Personnaliser", cliquez sur "Expérience d'inscription".

Sur la page suivante, recherchez la case «Afficher la connexion / inscription» et décochez-la. Cliquez ensuite sur «Enregistrer» pour enregistrer vos modifications.

🧭 4. Configuration de la navigation sur votre site membre

Dans cette section, vous apprendrez à créer une navigation pour que vos membres puissent se repérer sur votre site.

Maintenant que MemberSpace est correctement configuré sur votre site Webflow, vous pouvez commencer à ajouter ses fonctionnalités d'adhésion.

La première fonctionnalité que nous allons couvrir est de savoir comment configurer la navigation de vos membres. La navigation des membres est importante pour tout site d'adhésion. C'est le portail par lequel vos membres interagiront avec votre offre et où ils iront instinctivement lorsqu'ils chercheront quelque chose de nouveau.

La façon dont vous créez finalement la navigation de votre site dépend de vous, mais nous avons deux méthodes de navigation spécifiques aux membres que d'autres ont utilisées avec succès dans le passé: une page de navigation réservée aux membres et un menu déroulant réservé aux membres.

Page de navigation réservée aux membres Une page de navigation réservée aux membres fonctionne comme base d'accueil pour vos membres. Une fois connecté, ils accèderont à cette page pour accéder à tout le contenu que leur adhésion met à leur disposition.

Pour ajouter une page de navigation réservée aux membres, vous devez d'abord ajouter une page dans Webflow et la concevoir à votre guise. C'est un excellent endroit pour montrer aux membres à quel contenu ils ont accès et les diriger vers les différentes catégories de votre offre. Reportez-vous à la section Apprendre les bases de Webflow pour obtenir des instructions sur l'ajout et la conception de pages.

Une fois la page ajoutée, vous pouvez l'ajouter à votre navigation en double-cliquant sur la section Navigation en haut de votre site.

Ensuite, allez dans la barre latérale droite et cliquez sur l'icône d'engrenage qui signifie «Paramètres». Ensuite, dans l'interface qui apparaît, cliquez sur le bouton "+ Ajouter un lien".

Ajoutez l'URL de la page que vous venez de créer dans le champ de texte disponible, puis double-cliquez sur le lien dans la section Navigation de votre site pour modifier le texte du lien.

Si vous ne modifiez pas le texte du lien, le lien s'affichera comme «Nav Link 1» ou quelque chose de similaire.

Si vous ne connaissez pas l'URL de votre page, vous pouvez la trouver en cliquant sur l'icône Page dans la barre latérale gauche, puis recherchez le nom de votre page.

Une fois que vous l'avez trouvé, survolez le nom, puis cliquez sur l'icône d'engrenage qui apparaît.

Trouvez le champ «Slug». Le texte qui se trouve dans ce champ est la fin de votre URL. Vous pouvez voir une version complète de l'URL juste en dessous.

Une fois que vous avez terminé d'ajouter et de modifier le texte de l'URL, vous pouvez également styliser et déplacer le lien dans la zone de navigation si vous le souhaitez. Cela n'aura aucun effet sur la fonctionnalité du lien.

Lorsque vous avez terminé, vous devez ajouter la page en tant que page membre. Pour ce faire, connectez-vous à votre compte MemberSpace , puis cliquez sur «Pages des membres» dans la barre de navigation supérieure. Cela vous amènera à l'interface des pages membres. Dans la barre latérale gauche, cliquez sur le bouton «Ajouter une page de membre».

En cliquant sur ce bouton, vous accédez à un formulaire à remplir sur la page. Sur cette page, entrez l'URL de la page (que vous avez trouvée plus tôt) et sélectionnez le délai après lequel cette page doit être accessible aux membres.

Si vous souhaitez l'ajouter en tant que page par défaut sur laquelle les membres sont redirigés après la connexion, vous pouvez le faire en modifiant «Après l'inscription - envoyer les membres à cette URL» ou «Après la connexion - envoyer les membres à cette URL» dans vos plans de membre réglages.

Ajouter une liste déroulante de membres à votre menu supérieur Une autre option consiste à ajouter la liste déroulante de navigation à votre menu de navigation supérieur. Pour ce faire, double-cliquez d'abord sur la section de navigation de votre site Web. Ensuite, allez dans la barre latérale gauche et cliquez sur l'icône plus.

Une fois sur place, faites défiler les éléments disponibles et trouvez l'élément «déroulant».

Faites glisser et déposez cet élément dans votre section de navigation. Gardez à l'esprit que s'il ne vous permet pas d'ajouter un élément de menu à votre barre de navigation et le place à la place en dehors du menu de navigation, cela signifie que vous n'avez pas double-cliquez sur la section de navigation.

Une fois l'élément «déroulant» ajouté, vous pouvez commencer à ajouter votre contenu dans le menu déroulant. Vous pouvez utiliser cette configuration pour répertorier tout votre contenu dans le menu déroulant, ce qui permet à vos membres d'accéder facilement.

Pour ajouter des liens vers une liste déroulante, double-cliquez sur le nouvel élément de la liste déroulante. Assurez-vous que l'élément est enfermé dans la boîte intitulée «Nav Link». Sinon, un double-clic peut entraîner la modification du texte au lieu de l'élément lui-même.

Une fois que vous avez double-cliqué sur l'élément, allez dans la barre latérale droite et cliquez sur le bouton «Ouvrir le menu».

Cela ouvrira le menu déroulant afin que vous puissiez ajouter votre contenu dans le menu déroulant. Si vous souhaitez modifier le texte de l'élément de sous-menu, cliquez deux fois. Si vous souhaitez lier votre contenu, vous devrez cliquer sur l'élément de sous-menu une seule fois. Cela fera apparaître la barre latérale droite.

Pour créer un lien vers votre contenu, collez l'URL de la page de contenu dans le champ de texte disponible.

Si vous souhaitez ajouter plus de pages au menu déroulant, cliquez sur "+ Ajouter un lien". Cela ajoutera automatiquement un autre lien au menu déroulant.

Pour modifier le texte du lien, double-cliquez sur le texte du lien. Une fois terminé, vous pouvez cliquer sur la barre de navigation pour terminer le processus.

🔑 5. Création de pages d'inscription et de connexion

Dans cette section, nous allons vous montrer différentes façons dont les gens peuvent s'inscrire et se connecter à votre site d'adhésion.

La création de pages d'inscription et de connexion est nécessaire pour tout site d'adhésion fonctionnel. Cependant, vous avez beaucoup d'options sur la façon d'incorporer l'interface d'inscription ou de connexion à votre site.

MemberSpace fournit des interfaces d'inscription / connexion intégrées et contextuelles qui fonctionnent avec Webflow.

Ajout d'une fenêtre de connexion / inscription à Webflow Il existe deux options pour ajouter une fenêtre de connexion / inscription à votre site. La première option consiste à ajouter la fenêtre contextuelle à un menu, qui invoquera la fenêtre contextuelle lorsque les utilisateurs cliquent sur le lien. La deuxième option consiste à ajouter la fenêtre contextuelle à une page spécifique. Une fois ajouté de cette manière, la fenêtre contextuelle sera intégrée quelque part dans la page sous forme de lien ou de bouton.

De manière pratique, les options contextuelles et intégrées se transforment en lien «Votre compte» lorsque les membres sont connectés.

Ajout d'une fenêtre contextuelle à la navigation supérieure Si vous choisissez d'ajouter une fenêtre contextuelle à votre navigation, vous devez commencer par saisir votre compte MemberSpace et cliquer sur «Personnaliser» dans le menu de navigation supérieur. Cela vous amènera à la page de personnalisation avec une liste d'options. Cliquez sur "Options d'installation".

Une fois sur la page Options d'installation, cliquez sur le bouton gris «Plus d'options de lien». Cela ouvrira la zone contenant les différents codes de connexion et d'inscription.

Une fois là-bas, trouvez la fenêtre contextuelle que vous souhaitez (il existe deux options - une fenêtre contextuelle de connexion / inscription et une seule fenêtre contextuelle d'inscription) et cliquez sur le bouton "Copier" pour copier le code contextuel.

Une fois que vous avez copié le code contextuel, vous pouvez revenir au Webflow Designer et double-cliquer sur le menu de navigation supérieur. Cela ouvrira l'interface pour la modifier.

Ensuite, allez dans la barre de navigation de droite et cliquez sur l'icône d'engrenage. Cela fera apparaître les paramètres du menu de navigation. Dans cette interface, cliquez sur le bouton "+ Ajouter un lien".

Cela ouvrira un champ dans lequel vous pourrez saisir une URL. Collez le code que vous avez copié depuis le backend MemberSpace dans ce champ. Pour modifier le texte du lien, double-cliquez sur le texte affiché dans la barre de navigation. Cela vous permettra de modifier le texte de l'élément de menu.

Comme précédemment, nous vous rappelons que les modifications non publiées ne pourront pas être testées. L'interface Webflow Designer bloque le code de MemberSpace, donc pour voir votre nouvelle fenêtre contextuelle en action, vous devez d'abord publier votre site, puis visiter le site publié.

Ajout d'une fenêtre contextuelle à une page spécifique L'ajout d'une fenêtre contextuelle à une page spécifique peut fonctionner correctement, en particulier pour les inscriptions. Vous pouvez utiliser la fenêtre contextuelle dans n'importe quel élément interactif qui utilise un lien. Par exemple, vous pouvez utiliser un bouton ou un lien dans le texte.

Donc, si vous souhaitez ajouter une fenêtre contextuelle à une page spécifique, vous devez commencer par entrer votre compte MemberSpace, en cliquant sur l'onglet «Personnaliser», en sélectionnant «Options d'installation», puis en cliquant sur le bouton gris «Plus d'options de lien». Cela fera apparaître les options pop-up. Trouvez la fenêtre contextuelle souhaitée, puis cliquez sur le bouton «Copier» pour copier le code contextuel.

Une fois que vous avez copié le code contextuel, vous pouvez revenir à votre concepteur Webflow et cliquer sur l'icône de page dans la barre latérale gauche.

Recherchez la page à laquelle vous souhaitez ajouter la fenêtre contextuelle, puis cliquez sur son nom. Cela vous amènera à la page. Une fois sur la page, revenez à la barre latérale gauche et cliquez sur le bouton plus.

Vous pouvez ajouter n'importe quel élément qui acceptera un lien, tel qu'un bouton ou du texte. Une fois que vous avez sélectionné et placé l'élément que vous avez choisi (dans notre exemple, nous avons choisi un bouton), recherchez le champ URL de l'élément et collez-y le code que vous avez copié depuis MemberSpace.

Vous pouvez formater et organiser l'élément comme bon vous semble; cela n'affectera pas la fonctionnalité du lien.

Publiez les modifications que vous souhaitez tester. N'oubliez pas: le code MemberSpace ne fonctionne pas correctement dans l'interface Webflow Designer. La seule façon de voir sa véritable fonctionnalité est de publier et de visiter le site en direct.

** Incorporation d'une connexion / inscription dans une page ** Si vous préférez intégrer votre formulaire de connexion / inscription dans une page, vous pouvez le faire en utilisant la fonction d'intégration MemberSpace. MemberSpace fournit le code pour l'intégration du formulaire, donc tout ce que vous avez à faire est de coller le code dans votre page Webflow.

Vous pouvez trouver le code d'intégration au même endroit que les options contextuelles. Entrez votre compte MemberSpace, cliquez sur l'onglet «Personnaliser», sélectionnez «Options d'installation», puis cliquez sur le bouton gris «Plus d'options de lien». Cela fera apparaître les codes de connexion / inscription supplémentaires. Une fois que vous avez trouvé le code d'intégration, cliquez sur le bouton «Copier» pour copier le code d'intégration.

Une fois copié, retournez dans Webflow Designer et accédez à la page sur laquelle vous souhaitez ajouter le formulaire d'intégration. Ensuite, allez dans la barre latérale gauche et cliquez sur l'icône plus. Dans l'interface des éléments, faites défiler jusqu'à ce que vous trouviez l'élément «Embed».

Faites glisser et déposez cet élément à l'emplacement souhaité sur votre page. Une fois placé, il affichera automatiquement un champ de texte.

Collez le code que vous avez copié à partir du backend MemberSpace dans ce champ, puis cliquez sur "Enregistrer et fermer". Cela ajoutera la connexion / inscription intégrée à votre page.

N'oubliez pas de publier vos modifications si vous souhaitez tester la fonctionnalité MemberSpace! Webflow bloquera le code MemberSpace dans l'interface Designer, vous devez donc visiter le site en direct pour voir votre nouvelle intégration en action.

🙅‍♀️ 6. Protection du contenu réservé aux membres (manière la plus simple)

Dans cette section, vous découvrirez la manière la plus simple et la plus simple de protéger vos pages de contenu réservées aux membres.

Maintenant que vous avez équipé votre site des fonctionnalités de connexion / inscription nécessaires, vous pouvez passer à l'ajout de contenu réservé aux membres.

Ajout de pages réservées aux membres Nous avons abordé cette question plus tôt dans le guide lorsque nous avons expliqué comment ajouter une navigation réservée aux membres. Cependant, vous pouvez également définir une page entière pour qu'elle soit uniquement accessible par vos membres.

Pour ce faire, vous devez d'abord créer la page dans Webflow et trouver l'URL de la page (ce que vous pouvez faire en accédant à l'interface Page, en cliquant sur l'engrenage à côté du nom de la page, puis en trouvant le champ «Slug»).

Lorsque vous avez créé la page et trouvé son URL, accédez à votre compte MemberSpace et cliquez sur «Pages des membres» dans le menu de navigation supérieur. Cela vous amènera à l'interface de la page des membres.

Une fois sur place, cliquez sur «Ajouter une page de membre» dans la barre latérale gauche.

Cela vous amènera à un formulaire à remplir sur votre page. Vous devrez saisir:

• Le lien vers la page (que vous avez trouvé plus tôt)
• Quand la page devrait être disponible

Remplissez ces champs, puis cliquez sur «Ajouter maintenant». Cela ajoutera la page à la liste des pages réservées aux membres. MemberSpace protégera cette page contre tout accès par des non-membres.

🚫 7. Noircir le contenu réservé aux membres (plus sécurisé)

Dans cette section, nous allons vous montrer comment rendre vos pages de contenu réservé aux membres encore plus sécurisées.

Le contenu est le fondement d'un site d'adhésion. Vous devez être sûr que seuls vos membres peuvent y accéder. Vous consacrez votre temps et vos efforts à la création du contenu; personne ne devrait pouvoir contourner votre système et accéder gratuitement à vos ressources.

C'est pourquoi MemberSpace a créé des moyens de protéger votre contenu et de le garder véritablement réservé aux membres. Par défaut, le contenu réservé aux membres est conservé des non-membres, mais nous avons proposé un niveau de sécurité supplémentaire pour empêcher même les non-membres les plus déterminés de contourner le mur des membres.

Cette couche de sécurité supplémentaire noircit vos pages pour les non-membres.

Lorsque des non-membres accèdent à une page de membre non masquée, la page peut s'afficher à l'écran pendant une seconde ou deux avant qu'on leur dise que c'est du contenu réservé aux membres. Avec une page noircie, il n'y a pas de bref blip. Il est toujours caché au non-membre.

Une page noircie est également utile si une personne ayant des connaissances techniques avancées essaie de contourner le mur de rémunération des membres. Les utilisateurs peuvent désactiver leur JavaScript pour contourner la redirection automatique vers le formulaire d'inscription / de connexion. S'ils essaient ceci et que la page est noircie, ils ne peuvent toujours pas voir la page.

Les pages noircies dissuadent également les moteurs de recherche d'indexer automatiquement vos pages réservées aux membres ainsi que le reste de votre site.

Alors que les non-membres et les moteurs de recherche obtiendront une page noircie, vos membres pourront se connecter normalement et voir la page comme elle était destinée.

Pour masquer des pages, vous devez vous connecter à votre compte MemberSpace et cliquer sur «Pages membres» dans le menu de navigation supérieur.

Cela vous amènera à l'interface des pages membres. Une fois là-bas, allez dans la barre latérale gauche et cliquez sur «Blackout Your Pages».

Vous serez redirigé vers l'interface des pages d'occultation. En haut de la page, vous verrez un code. Vous pouvez utiliser ce code dans votre interface Webflow pour masquer les pages de votre choix. Pour copier ce code, cliquez simplement sur le bouton «Copier».

Maintenant, allez dans votre concepteur Webflow et cliquez sur l'icône de page dans la barre latérale gauche. Recherchez le nom de la page que vous souhaitez masquer, survolez-la, puis cliquez sur l'icône d'engrenage qui apparaît. Cela fera apparaître l'interface des paramètres de la page. Dans cette interface, faites défiler la page jusqu'à la section «Code personnalisé», puis collez le code que vous avez copié depuis MemberSpace dans le champ «Balise Insider <head>».

Une fois terminé, cliquez sur le bouton bleu «Enregistrer» dans le coin supérieur droit.

🔒 8. Ajout de liens de contenu aux pages des membres (le plus sécurisé)

Dans cette section, vous découvrirez le moyen le plus sûr de protéger le contenu réservé aux membres.

Si vous souhaitez ajouter du contenu accessible aux membres via un lien (comme un téléchargement, une fenêtre contextuelle, etc.), vous pouvez le faire avec les liens de contenu de MemberSpace.

Avec les liens de contenu, vous fournissez le fichier et MemberSpace s'assure que l'utilisateur est connecté avant de le laisser voir / télécharger l'élément.

Les liens de contenu fonctionnent avec:

• PDF
• Vidéos
• Audio (MP3 uniquement)
• Images
• HTML
• Fichiers divers

Pour créer un lien de contenu, vous devez d'abord ajouter son fichier à MemberSpace afin que nous puissions créer un lien qui le protégera des non-membres. Pour ce faire, connectez-vous à votre compte MemberSpace et cliquez sur «Liens de contenu» dans le menu de navigation supérieur.

Cela vous amènera à la page Liens de contenu. Pour ajouter un nouveau lien de contenu, cliquez sur le bouton «Ajouter des liens de contenu» dans la barre latérale gauche. Cela fera apparaître la page de téléchargement de contenu.

Maintenant, comme vous pouvez le voir, il existe trois options de lien de contenu:

• Fichiers divers (sur lesquels vous vous trouvez par défaut)
• HTML
• Vidéos

Ces trois types de contenu différents ont différentes étapes pour les ajouter en tant que liens de contenu. Vous trouverez ci-dessous un aperçu de chaque processus.

** Liens de contenu de fichiers (PDF, audio, images, fichiers divers) ** Utilisez cette page pour télécharger le contenu de votre lien. Vous pouvez soit faire glisser et déposer le fichier dans la zone de téléchargement de fichiers, soit cliquer sur la zone de téléchargement de fichiers pour afficher l'interface du fichier.

Une fois que vous avez téléchargé un fichier, cliquez sur «Téléchargement terminé» dans le coin supérieur gauche.

Cela vous ramènera à la page principale des liens de contenu.

Liens de contenu HTML Si vous souhaitez ajouter du HTML, revenez à la page Ajouter des liens de contenu et cliquez sur le bouton «Ajouter HTML».

Cela changera la page en un formulaire dans lequel vous pourrez saisir le code HTML, choisir la disponibilité du contenu et établir le plan auquel vous avez accès.

Une fois terminé, cliquez sur le bouton "Ajouter maintenant". Vous serez redirigé vers la page Ajouter des liens de contenu où vous pourrez choisir d'ajouter d'autres liens de contenu ou cliquer sur «Terminer le téléchargement» pour terminer le processus de téléchargement.

Liens de contenu vidéo Vous pouvez ajouter des vidéos hébergées sur YouTube , Vimeo ou Wistia en tant que liens de contenu dans MemberSpace. MemberSpace garantit que les vidéos de ces sources peuvent être intégrées sur votre site Webflow d'une manière qui permet uniquement aux membres d'y accéder.

Pour ajouter un lien de contenu vidéo, cliquez sur le bouton "Ajouter des vidéos" en haut de l'interface Ajouter des liens de contenu.

Vous devrez ensuite remplir un formulaire (qui est très similaire au formulaire de lien de contenu HTML). Ce formulaire vous demandera l'URL de la vidéo, la disponibilité du contenu et établira quel plan a accès à la vidéo.

Étant donné que MemberSpace accepte uniquement les vidéos déjà hébergées sur YouTube , Vimeo ou Wistia , les formats des URL sont importants.

Format d'URL Youtube recommandé

Format d'URL Vimeo recommandé

Format d'URL Wistia recommandé

Lorsque vous avez terminé de remplir le formulaire, cliquez sur le bouton "Ajouter maintenant". Vous serez redirigé vers la page Ajouter des liens de contenu où vous pourrez soit choisir d'ajouter d'autres liens de contenu, soit cliquer sur «Terminer le téléchargement» pour terminer le processus de téléchargement.

Les vidéos sont plus difficiles à sécuriser car il n'y a pas de solution connue pour empêcher les gens de simplement enregistrer la vidéo. Cependant, nous recommandons certaines pratiques recommandées en matière de sécurité vidéo. Vous pouvez en savoir plus à ce sujet dans notre article de la base de connaissances .

Ajout de votre lien de contenu à Webflow Maintenant que votre contenu a été correctement téléchargé, vous pouvez l'ajouter à un plan de membre. Sur la page principale des liens de contenu, recherchez votre nouveau lien de contenu et cliquez sur le lien correspondant «Ajouter un plan d'accès».

Cela ouvrira le formulaire de plan d'accès. Il vous sera demandé de renseigner:

• Titre
• Quand le contenu doit-il être mis à disposition
• Ce que les membres peuvent faire avec le contenu
• À quel régime membre a accès

Lorsque vous avez terminé de remplir le formulaire, cliquez sur le bouton «Mettre à jour maintenant». Une fois mis à jour, vous pourrez accéder au lien pour utiliser le contenu de votre site Webflow.

Pour obtenir le lien de contenu réel, accédez à la page principale des liens de contenu et cliquez sur le bouton «Copier» à côté du contenu ajouté.

Ensuite, accédez à votre concepteur Webflow et accédez à la page à laquelle vous souhaitez ajouter le lien de contenu. Une fois sur place, vous pouvez ajouter n'importe quel élément qui accepte des liens (comme un bouton ou du texte) en cliquant sur l'icône plus dans la barre latérale gauche.

Une fois ajouté, collez le lien dans l'emplacement de l'élément pour les URL.

Alors que le lien de contenu doit être présent pour que l'élément fonctionne, n'hésitez pas à personnaliser la conception de l'élément comme vous le souhaitez.

Comme pour tout code spécifique à MemberSpace, vous devrez publier la page avant de la tester. Cela ne fonctionnera pas comme prévu dans l'éditeur Webflow.

🙋‍♂️ 9. Aller de l'avant et obtenir de l'aide

C'est maintenant à vous! N'oubliez pas que nous sommes toujours là si vous avez besoin d'aide pour configurer votre site d'adhésion.

La création d'un nouveau site d'adhésion est une période passionnante. Et, comme nous le savons tous, tout ce qui est excitant peut aussi être un peu effrayant. C'est pourquoi nous sommes là pour vous aider. Si vous rencontrez des problèmes avec votre site d'adhésion ou avez simplement des questions, n'hésitez pas à contacter l'équipe d'assistance MemberSpace .

---