Bienvenue dans la deuxième partie de cette série en deux parties, et je vais montrer comment créer un site damp;rsquoadhésion complet en combinant memberpress et Divi. Joignez à moi et je montrerai comment créer un site damp;rsquoadhésion qui contient tout ce dont avez besoin pour vendre des cours ou des produits en ligne, y compris des pages damp;rsquoinscription personnalisées, des avis par courriel et trois niveaux damp;rsquoabonnement qui augmentent au fil du temps. Il y en a damp;rsquoautres. Je vais également montrer comment concevoir une page damp;rsquoadhésion en utilisant le Code damp;rsquoadhé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 lamp;rsquoarticle précédent, je ai montré comment développer toutes les fonctionnalités du site en utilisant memberpress. Par conséquent, si joignez au processus, devriez adapter au tutoriel damp;rsquoaujourdamp;rsquohui. Aujourdamp;rsquohui, tout est du design. Plus précisément, je vais montrer comment utiliser Divi Builder pour concevoir votre site damp;rsquoadhésion (même les pages damp;rsquoabonnement créées par memberpress). Je vais utiliser le pack de mise en page Divi du système de gestion de lamp;rsquoapprentissage pour accélérer considérablement le processus de conception, et jamp;rsquoai css pour les rares cas où memberpress nous a empêchés damp;rsquoutiliser Divi Builder. Mais dans lamp;rsquoensemble, mon objectif est de réduire les CSS personnalisés et damp;rsquoaugmenter le générateur Divi.
Un voyeur. Avant de commencer ce tutoriel, voici quelques choses que aimeriez savoir. Trousse de mise en page du système de gestion de lamp;rsquoapprentissage jamp;rsquoutiliserai la trousse de mise en page du système de gestion de lamp;rsquoapprentissage pour concevoir les pages des membres de ce tutoriel. namp;rsquoavez pas encore copié, assurez de lamp;rsquoimporter dans la Bibliothèque Divi. Pour plus damp;rsquoaide sur la façon de configurer le paquet de mise en page Divi, consultez les conseils suivants. Nombre de pages
Jusquamp;rsquoà présent, auriez dû créer les pages suivantes. Vous namp;rsquoavez 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 à la page prix page aperçu du cours page damp;rsquoinscription page damp;rsquoinscription page damp;rsquoinscription page damp;rsquoaccueil des membres (réservée) Page damp;rsquoouverture de compte créée page de remerciement page comment construire un site damp;rsquoadhésion en utilisant divi partie 2 Abonnez à nos paramètres personnalisés de thème de canal YouTube, même pouvez Modifiez avec lamp;rsquoune des mises en page Divi et ne voulez pas ignorer les paramètres du personnalisateur de thème. Bien sûr, camp;rsquoest là que devez concevoir les en têtes, la navigation et les pieds de page, car la disposition Divi importée namp;rsquoa aucun effet sur ces éléments. De plus, comme il est inévitable quamp;rsquoil 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 amp;gt personnalisateur de thème. Je veux juste faire quelques changements, mais namp;rsquohé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 lamp;rsquoensemble du site. Plus précisément, dans ce tutoriel, remarquerez que quelle que soit la couleur que 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 lamp;rsquoaccent du thème, du menu personnaliser le thème, allez à paramètres généraux amp;gt paramètres de mise en page. Jamp;rsquoai ajouté le violet utilisé dans toute la mise en page de lamp;rsquoécole codée: 7272ff.
Modifier les paramètres
Woocommerce ou memberpress), pouvez utiliser le Code court dans les modules de la page où pouvez déployer Divi Builder. De cette façon, 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 lamp;rsquoonglet conception du formulaire. Conception de la page frontale de memberpress comme je lamp;rsquoai 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 lamp;rsquoonglet page options memberpress. Comme nous namp;rsquoutiliserons pas la page damp;rsquoinscription par défaut, nous devons également concevoir une page damp;rsquoinscription. Mais damp;rsquoabord, 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 damp;rsquoajouter 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 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 damp;rsquoautres liens dans les informations du compte. CSS personnalisé: en raison des limites de destination de certains éléments des informations de compte, je recommande damp;rsquoajouter les CSS personnalisés suivants aux personnalisations de thème dans damp;rsquoautres 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 lamp;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 damp;rsquoenregistrement et aux boutons. Merci pour la mise en page: changements généraux de mise en page: tout ce que 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 samp;rsquoinscrivent. Une fois le processus damp;rsquoinscription terminé, lamp;rsquoutilisateur sera redirigé dans la page merci. Ce namp;rsquoest pas une page spécifique du plug in, donc pouvez le faire en utilisant Divi Builder. Il suffit damp;rsquoimporter la mise en page générique de la Bibliothèque Divi dans la page, de mettre à jour le titre de la page et damp;rsquoajouter du contenu. Vous pouvez spécifier la page de remerciement par défaut dans lamp;rsquooption memberpress. Vous pouvez lamp;rsquoécraser pour chaque abonnement que créez en sélectionnant activer les messages de page de remerciement personnalisés dans lamp;rsquoonglet inscription des options damp;rsquoabonnement au bas de la page. Rappel: 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 lamp;rsquoonglet page sous lamp;rsquooption memberpress a une option pour placer manuellement le formulaire de connexion sur la page lors de lamp;rsquoédition de la page. Modifications de conception: Jamp;rsquoai 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 mamp;rsquoinscrire à lamp;rsquoabonnement. 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 damp;rsquoenregistrement utilisée: mise en page de cours codée en Code court utilisée: selon les changements de conception: Jamp;rsquoai changé la ligne de section de titre en ligne de colonne et supprimé lamp;rsquoimage. Jamp;rsquoai 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 damp;rsquointroduction. Memberpress crée automatiquement une page damp;rsquoinscription pour chaque abonnement que créez. Le registre utilisé sur chaque page est extrait du registre créé dans lamp;rsquoonglet champs de lamp;rsquooption memberpress. Cependant, namp;rsquoavez pas besoin damp;rsquoutiliser cette page damp;rsquoinscription. Lorsque définissez un abonnement, pouvez trouver une liste de codes courts en cliquant sur abonnement à Code court au bas de la page modifier lamp;rsquoabonnement dans la zone options damp;rsquoabonnement sous lamp;rsquoonglet inscription. Un des codes courts permet de générer un registre pour cette adhésion particulière. Camp;rsquoest le raccourci que devez ajouter à la page damp;rsquoinscription créée pour cet abonnement. Voici à quoi ressemble la page du Registre
Action Remarque: Malheureusement, si lamp;rsquoabonnement est payant et nécessite un processus de vérification, lamp;rsquoutilisateur sera redirigé vers le modèle de page damp;rsquoinscription par défaut pour compléter lamp;rsquoachat. Il est donc préférable damp;rsquoajouter des CSS personnalisés à la page damp;rsquoinscription par défaut afin de maintenir la cohérence de la conception lors de la vérification. Non, laissez moi montrer la mise en page et les changements que jamp;rsquoai utilisés pour créer les pages restantes des membres. Concevoir la mise en page de la page damp;rsquoaccueil utilisée par les pages du site Web pour les membres: chiffrer les changements de conception de la page damp;rsquoaccueil: Jamp;rsquoai supprimé le module image qui affiche les graphiques. Jamp;rsquoai créé la section titre et la section simple à 1..2..3.. Disposition des colonnes. Jamp;rsquoai changé le bouton en texte. Et mettre à jour la section cours avec les trois cours que jamp;rsquooffre (gratuit, argent et or). Cela mamp;rsquoa pris environ 3 minutes, donc ne soyez pas trop difficile à juger:). Mise en page de lamp;rsquoabonnement en utilisant: codage des modifications de conception de cours: Jamp;rsquoai changé le titre. Pour les lignes contenant des cours, jamp;rsquoai changé la disposition des colonnes en colonnes, avec une largeur personnalisée de 680 Px. Puis jamp;rsquoai 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 damp;rsquoinscription ou de tarification appropriée. Mise en page des prix utilisés: changement de code de prix: simple. Tout ce que jamp;rsquoai fait, camp;rsquoest mettre à jour le contenu de la liste de prix et ajouter des liens pour accéder à la page damp;rsquoinscription de chaque abonnement. Page damp;rsquoaperçu du cours pour la mise en page de lamp;rsquoinscription: codage des changements de cours: Camp;rsquoest aussi très simple. Pour la section titre, jamp;rsquoai mis à jour le contenu de sorte que la colonne soit pleine de largeur et que le texte soit centré. Ensuite, mettez à jour lamp;rsquointroduction à gauche de la page et ajoutez un lien pour voir
Page de cours pour tout le monde. Lamp;rsquoimage ci dessous montre la page damp;rsquoaperçu du Programme damp;rsquoinscription gratuit. Vous devriez en créer un pour chaque abonnement fourni. De plus, je dois rappeler quamp;rsquoil samp;rsquoagit de la page damp;rsquoaccueil de toutes les pages de cours (sous pages) de ce cours (voir la partie 1 pour en savoir plus sur lamp;rsquoimportance). Mise en page utilisée par la page cours: codage changement de cours: essentiellement, jamp;rsquoai apporté les mêmes changements à la page aperçu du cours inscrit, à lamp;rsquoexception 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 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 quamp;rsquoil est facile à utiliser. Jamp;rsquoai é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. Jamp;rsquoaime 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 (il samp;rsquoagit damp;rsquoun 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
me le demandez, ce namp;rsquoest pas trop mal non plus. Jamp;rsquoai hâte damp;rsquoentendre vos commentaires. Bonjour!
