Comment construire le site Web des membres en utilisant divi – partie 2

Bienvenue dans la deuxième partie de cette série en deux parties, et je vais vous montrer comment créer un site d’adhésion complet en combinant memberpress et Divi. Joignez – vous à moi et je vous montrerai comment créer un site d’adhésion qui contient tout ce dont vous avez besoin pour vendre des cours ou des produits en ligne, y compris des pages d’inscription personnalisées, des avis par courriel et trois niveaux d’abonnement qui augmentent au fil du temps. Il y en a d’autres. Je vais également vous montrer comment concevoir une page d’adhésion en utilisant le Code d’adhésion court en conjonction avec Divi Builder. Tu ne veux pas le perdre!

Je suis heureux de poursuivre notre mission de créer un site Web complet pour les membres avec Divi. Dans l’article précédent, je vous ai montré comment développer toutes les fonctionnalités du site en utilisant memberpress. Par conséquent, si vous vous joignez au processus, vous devriez vous adapter au tutoriel d’aujourd’hui. Aujourd’hui, tout est du design. Plus précisément, je vais vous montrer comment utiliser Divi Builder pour concevoir votre site d’adhésion (même les pages d’abonnement créées par memberpress). Je vais utiliser le pack de mise en page Divi du système de gestion de l’apprentissage pour accélérer considérablement le processus de conception, et j’ai css pour les rares cas où memberpress nous a empêchés d’utiliser Divi Builder. Mais dans l’ensemble, mon objectif est de réduire les CSS personnalisés et d’augmenter le générateur Divi.
Un voyeur. Avant de commencer ce tutoriel, voici quelques choses que vous aimeriez savoir. Trousse de mise en page du système de gestion de l’apprentissage j’utiliserai la trousse de mise en page du système de gestion de l’apprentissage pour concevoir les pages des membres de ce tutoriel. Si vous n’avez pas encore copié, assurez – vous de l’importer dans la Bibliothèque Divi. Pour plus d’aide sur la façon de configurer le paquet de mise en page Divi, consultez les conseils suivants. Nombre de pages
Jusqu’à présent, vous auriez dû créer les pages suivantes. Vous n’avez pas besoin de contenu sur ces pages. Il suffit de les créer dans le tableau de bord WordPress. Certaines de ces pages sont spécifiques aux sites Web qui offrent des cours en ligne. Vous devrez peut – être les modifier pour votre site.
Abonnez – vous à la page prix page aperçu du cours page d’inscription page d’inscription page d’inscription page d’accueil des membres (réservée) Page d’ouverture de compte créée page de remerciement page comment construire un site d’adhésion en utilisant divi – partie 2 Abonnez – vous à nos paramètres personnalisés de thème de canal YouTube, même Si vous pouvez Modifiez avec l’une des mises en page Divi et vous ne voulez pas ignorer les paramètres du personnalisateur de thème. Bien sûr, c’est là que vous devez concevoir les en – têtes, la navigation et les pieds de page, car la disposition Divi importée n’a aucun effet sur ces éléments. De plus, comme il est inévitable qu’il y ait des pages ou du contenu qui ne peuvent pas être personnalisés à partir de Divi Builder, définir les paramètres par défaut du personnalisateur de thème est une approche pour les projets en dehors de Divi Builder.
Pour mettre à jour le personnalisateur de thème, allez à Divi > personnalisateur de thème. Je veux juste faire quelques changements, mais n’hésitez pas à en faire plus. Changer le thème accent sur les couleurs le thème accent sur les couleurs affecte de nombreux éléments différents dans l’ensemble du site. Plus précisément, dans ce tutoriel, vous remarquerez que quelle que soit la couleur que vous définissez, cette couleur sera la couleur par défaut pour les liens, même ceux trouvés dans les raccourcis clavier de memberpress, comme votre page de compte. Pour mettre à jour la couleur de l’accent du thème, du menu personnaliser le thème, allez à paramètres généraux > paramètres de mise en page. J’ai ajouté le violet utilisé dans toute la mise en page de l’école codée: # 7272ff. Modifier les paramètres
Woocommerce ou memberpress), vous pouvez utiliser le Code court dans les modules de la page où vous pouvez déployer Divi Builder. De cette façon, vous pouvez ajuster la conception du contenu généré en ajoutant un raccourci au formulaire texte et en modifiant les paramètres de conception dans l’onglet conception du formulaire. Conception de la page frontale de memberpress comme je l’ai mentionné dans la partie 1 de ce tutoriel, memberpress a 3 pages frontales à réserver: la page de remerciement, la page de compte et la page de connexion. Ces pages sont sélectionnées dans l’onglet page options memberpress. Comme nous n’utiliserons pas la page d’inscription par défaut, nous devons également concevoir une page d’inscription. Mais d’abord, complétons ce qui commence par la page comptes. Mise en page du compte utilisé: raccourci de mise en page générique utilisé: [formulaire de compte mepr] changement de conception: parce que nous avons déjà conçu la page du compte lorsque nous avons créé la mise en page générique, La principale chose à faire ici est d’ajouter le Code court au formulaire texte, puis de mettre à jour les paramètres de conception pour démarrer le texte et les liens dans le module que le Code court affiche. Par exemple, si vous changez la taille du texte à 18 Px, tout le texte des informations du compte change à 18 Px. Le texte personnalisé du lien affecte également les liens du menu de navigation du compte et d’autres liens dans les informations du compte. CSS personnalisé: en raison des limites de destination de certains éléments des informations de compte, je recommande d’ajouter les CSS personnalisés suivants aux personnalisations de thème dans d’autres CSS: \/ * boutons de navigation de page de compte et autres boutons utilisés par memberpress
– Oui. Mepr submission. Bouton – poussoir principal. Onglet de navigation active mepr a {
Couleur: # FFFFFF! Important
Largeur de la bordure: 10px! Important
Couleur de la bordure: # 7272ff;
Bore
Rayon der: 100 Px;
Espacement des lettres: 1px;
Taille de la police: 16px;
Taille de la police: 700! Important
Conversion de texte: majuscules! Important
Remplissage à gauche: 2em;
Remplissage à droite: 2em;
Couleur de fond: # 7272ff! Important
}
Compte mepr nav
Alignement du texte: centré;
}
– Oui. Projet mepr NAV a. Paiements mepr a {
Contexte: # eeeeee;
Emballage: 0,5em 1EM;
Rayon limite: 100 Px;
}
Style form Field and Text form Field Text
– Oui. MP \ u enveloppe la zone de texte. Sélection de l’emballage MP \ U. MP \ u wrapper input [type = texte]. MP \ u wrapper input [type = url]. MP \ u wrapper input [type = email]. MP \ u wrapper input [type = tel]. MP \ u wrapper input [type = Number]. MP \ u wrapper input [type = password] {
Bordure: 1px solide rgba (7174182,0,12)! Important
Couleur: rgba (114114255,0.91)! Important
Remplissage: 12px 10px! Important
Contexte: \ # f8f8f8
}
Ce CSS ajoutera des styles à la navigation de page de votre compte, aux champs de formulaire, aux boutons de formulaire et aux liens. Il ajoutera également des styles similaires aux modules d’enregistrement et aux boutons. Merci pour la mise en page: changements généraux de mise en page: tout ce que vous avez à faire est de mettre à jour la mise en page avec du nouveau contenu. Un complément important est le CTA, qui guide les utilisateurs vers les cours auxquels ils s’inscrivent. Une fois le processus d’inscription terminé, l’utilisateur sera redirigé dans la page merci. Ce n’est pas une page spécifique du plug – in, donc vous pouvez le faire en utilisant Divi Builder. Il suffit d’importer la mise en page générique de la Bibliothèque Divi dans la page, de mettre à jour le titre de la page et d’ajouter du contenu. Vous pouvez spécifier la page de remerciement par défaut dans l’option memberpress. Vous pouvez l’écraser pour chaque abonnement que vous créez en sélectionnant activer les messages de page de remerciement personnalisés dans l’onglet inscription des options d’abonnement au bas de la page. Rappel: vous voudrez peut – être continuer à créer une autre page de remerciement pour les autres abonnements en m
Je pense que je peux personnaliser le CTA pour tout le monde. Mise en page de connexion utilisée: codage raccourci de mise en page de contact utilisé: [formulaire de connexion mepr] remarque: toute page de connexion sélectionnée dans l’onglet page sous l’option memberpress a une option pour placer manuellement le formulaire de connexion sur la page lors de l’édition de la page. Modifications de conception: J’ai utilisé la disposition des contacts codés parce que je voulais utiliser la disposition à deux colonnes de la section formulaires de contact pour inclure le formulaire de connexion et le CTA adjacent pour m’inscrire à l’abonnement. CSS personnalisé: Heureusement, le CSS personnalisé que nous avons entré précédemment pour le formulaire de compte nous a également fourni un bon formulaire de connexion. Mise en page d’enregistrement utilisée: mise en page de cours codée en Code court utilisée: selon les changements de conception: J’ai changé la ligne de section de titre en ligne de colonne et supprimé l’image. J’ai ensuite supprimé toutes les introductions sauf une dans la Section de contenu de gauche et ajouté mon code court de registre au contenu du module d’introduction. Memberpress crée automatiquement une page d’inscription pour chaque abonnement que vous créez. Le registre utilisé sur chaque page est extrait du registre créé dans l’onglet champs de l’option memberpress. Cependant, vous n’avez pas besoin d’utiliser cette page d’inscription. Lorsque vous définissez un abonnement, vous pouvez trouver une liste de codes courts en cliquant sur abonnement à Code court au bas de la page modifier l’abonnement dans la zone options d’abonnement sous l’onglet inscription. Un des codes courts vous permet de générer un registre pour cette adhésion particulière. C’est le raccourci que vous devez ajouter à la page d’inscription créée pour cet abonnement. Voici à quoi ressemble la page du Registre
Action Remarque: Malheureusement, si l’abonnement est payant et nécessite un processus de vérification, l’utilisateur sera redirigé vers le modèle de page d’inscription par défaut pour compléter l’achat. Il est donc préférable d’ajouter des CSS personnalisés à la page d’inscription par défaut afin de maintenir la cohérence de la conception lors de la vérification. Non, laissez – moi vous montrer la mise en page et les changements que j’ai utilisés pour créer les pages restantes des membres. Concevoir la mise en page de la page d’accueil utilisée par les pages du site Web pour les membres: chiffrer les changements de conception de la page d’accueil: J’ai supprimé le module image qui affiche les graphiques. J’ai créé la section titre et la section simple à 1..2..3.. Disposition des colonnes. J’ai changé le bouton en texte. Et mettre à jour la section cours avec les trois cours que j’offre (gratuit, argent et or). Cela m’a pris environ 3 minutes, donc ne soyez pas trop difficile à juger:). Mise en page de l’abonnement en utilisant: codage des modifications de conception de cours: J’ai changé le titre. Pour les lignes contenant des cours, j’ai changé la disposition des colonnes en colonnes, avec une largeur personnalisée de 680 Px. Puis j’ai supprimé toutes les cases sauf trois (En fait, ce sont des modules Blurb). Un lien est ajouté au bas de chaque page, qui pointera vers la page d’inscription ou de tarification appropriée. Mise en page des prix utilisés: changement de code de prix: simple. Tout ce que j’ai fait, c’est mettre à jour le contenu de la liste de prix et ajouter des liens pour accéder à la page d’inscription de chaque abonnement. Page d’aperçu du cours pour la mise en page de l’inscription: codage des changements de cours: C’est aussi très simple. Pour la section titre, j’ai mis à jour le contenu de sorte que la colonne soit pleine de largeur et que le texte soit centré. Ensuite, mettez à jour l’introduction à gauche de la page et ajoutez un lien pour voir
Page de cours pour tout le monde. L’image ci – dessous montre la page d’aperçu du Programme d’inscription gratuit. Vous devriez en créer un pour chaque abonnement fourni. De plus, je dois vous rappeler qu’il s’agit de la page d’accueil de toutes les pages de cours (sous – pages) de ce cours (voir la partie 1 pour en savoir plus sur l’importance). Mise en page utilisée par la page cours: codage changement de cours: essentiellement, j’ai apporté les mêmes changements à la page aperçu du cours inscrit, à l’exception de la mise à jour du contenu et du contenu de la barre latérale. La figure ci – dessous montre la page de la leçon 1 du cours gratuit. Cette page et les autres pages du cours sont des sous – pages de la page aperçu du cours et peuvent être enregistrées gratuitement. À la fin de cette série en deux parties, je veux que vous voyiez la puissance de memberpress et Divi lors de la création de sites membres. Memberpress offre beaucoup de fonctionnalités et je dois dire qu’il est facile à utiliser. J’ai été impressionné par le système de règles de memberpress pour protéger le contenu et créer des séquences à la demande. Les notifications par courriel sont également faciles à personnaliser et à modifier. J’aime beaucoup la possibilité de grouper les abonnements afin que les membres puissent changer \/ acheter des abonnements en dehors de leur page de compte. Du point de vue de la conception, je pense que Divi fonctionnera bien avec memberpress. Les pages frontales memberpress ne sont pas créées automatiquement pour vous (il s’agit d’un rafraîchissement) et le Code Court peut être utilisé pour générer du contenu dans le module Divi. Oui, nous avons encore des limites de conception parce que Divi Builder ne peut pas cibler certains contenus. Cependant, plusieurs lignes de CSS personnalisés doivent être ajoutées pour compléter int
Si vous me le demandez, ce n’est pas trop mal non plus. J’ai hâte d’entendre vos commentaires. Bonjour!