迎來到這個(gè)由 2部分組成的系列的第 2部分，我將在其中向您展示如何通過結(jié)合MemberPress和 Divi來構(gòu)建一個(gè)完整的會(huì)員網(wǎng)站。我將帶您了解如何設(shè)置您的會(huì)員網(wǎng)站，其中包含銷售在線課程或產(chǎn)品所需的一切，包括自定義注冊頁面、電子郵件通知以及在一段時(shí)間內(nèi)滴灌內(nèi)容的三個(gè)級別的會(huì)員資格。我還將向您展示如何結(jié)合使用會(huì)員短代碼和Divi構(gòu)建器來設(shè)計(jì)您的會(huì)員頁面。

我很高興繼續(xù)我們的使命，即使用Divi建立一個(gè)完整的會(huì)員網(wǎng)站。在上一篇文章( https://wpzhanzhang.eastfu.com/ru-he-shi-yong-divi-jian-li-hui-yuan-wang-zhan-di-1-bu-fen/ )中，我向您介紹了如何使用 MemberPress 構(gòu)建會(huì)員網(wǎng)站的所有功能。因此，如果您參與了該過程，那么您應(yīng)該非常適合今天的教程。

今天是關(guān)于設(shè)計(jì)的。更具體地說，我將向您展示如何使用 Divi Builder 設(shè)計(jì)您的會(huì)員網(wǎng)站（甚至是那些由 MemberPress 創(chuàng)建的會(huì)員頁面）。我將使用Learning Management System Divi Layout pack 來大大加快設(shè)計(jì)過程，并且在 MemberPress 使我們無法使用 Divi Builder 的極少數(shù)情況下，我也提供了一些 CSS。但總的來說，我的目標(biāo)是減少自定義 CSS，增加 Divi Builder。

本文網(wǎng)址:https://wpzhanzhang.eastfu.com/ru-he-shi-yong-divi-jian-li-hui-yuan-wang-zhan-di-2-bu-fen/

要?jiǎng)?chuàng)建免費(fèi)網(wǎng)站和博客？從易服客建站平臺(tái)( https://eastfu.cn/ )開始

500M免費(fèi)空間，可升級為20GB電子商務(wù)網(wǎng)站

0元?jiǎng)?chuàng)建免費(fèi)網(wǎng)站

目錄

預(yù)先看

檢查清單學(xué)習(xí)管理系統(tǒng)布局包創(chuàng)建的會(huì)員頁面MemberPress 前端（保留）頁面已創(chuàng)建

如何使用 Divi 建立會(huì)員網(wǎng)站 – 第 2 部分

主題定制器設(shè)置更改主題強(qiáng)調(diào)色更改排版設(shè)置

構(gòu)建用于會(huì)員頁面的通用布局

關(guān)于設(shè)計(jì)會(huì)員前端頁面的一句話

設(shè)計(jì) MemberPress 前端頁面賬戶頁面感謝頁面登錄頁面注冊頁面

設(shè)計(jì)會(huì)員站點(diǎn)頁面主頁會(huì)員頁面定價(jià)頁面會(huì)員課程概覽頁面課程頁面

總結(jié)

預(yù)先看

檢查清單

在開始本教程之前，您需要了解以下幾點(diǎn)。

學(xué)習(xí)管理系統(tǒng)布局包

我將使用學(xué)習(xí)管理系統(tǒng)布局包來設(shè)計(jì)本教程中的會(huì)員頁面。如果您還沒有，請務(wù)必獲取您的副本并將其導(dǎo)入您的 Divi 庫。

創(chuàng)建的會(huì)員頁面

到目前為止，您應(yīng)該已經(jīng)創(chuàng)建了以下頁面。您不必在這些頁面上有內(nèi)容。它們只需要在您的 WordPress 儀表板中創(chuàng)建。其中一些頁面特定于提供在線課程的會(huì)員網(wǎng)站。您可能需要為您自己的網(wǎng)站做些調(diào)整。

• 會(huì)員頁面
• 定價(jià)頁面
• 會(huì)員課程概覽頁面
• 課程頁面
• 注冊頁面

MemberPress 前端（保留）頁面已創(chuàng)建

• 賬戶頁面
• 登錄頁面
• 感謝頁面

如何使用 Divi 建立會(huì)員網(wǎng)站 – 第 2 部分

主題定制器設(shè)置

即使您可能正在使用其中一種美化 divi 布局，您也不想忽略您的主題定制器設(shè)置。當(dāng)然，這是您需要設(shè)計(jì)頁眉、導(dǎo)航和頁腳的地方，因?yàn)槟鷮?dǎo)入的 Divi 布局對這些元素沒有影響。此外，由于您將不可避免地?fù)碛?Divi Builder 無法自定義的頁面或內(nèi)容，因此設(shè)置主題定制器默認(rèn)值是將這些元素定位到 Divi Builder 之外的方法。

要更新主題定制器，請轉(zhuǎn)到 Divi > 主題定制器。

更改主題強(qiáng)調(diào)色

主題強(qiáng)調(diào)色會(huì)影響整個(gè)網(wǎng)站的許多不同元素。更具體地說，對于本教程，您會(huì)注意到無論您將此顏色設(shè)置為什么，也將成為鏈接的默認(rèn)顏色，即使是在 MemberPress 短代碼（如帳戶頁面）中找到的鏈接。要更新主題強(qiáng)調(diào)色，請從主題定制器菜單轉(zhuǎn)到常規(guī)設(shè)置 > 布局設(shè)置。我添加了整個(gè)布局中使用的紫色：#7272ff。

更改排版設(shè)置

對于我在本教程中使用的 Coding School 布局包，在模塊級別確實(shí)沒有特定字體集，因此我可以從主題定制器中設(shè)置默認(rèn)字體，它將應(yīng)用于所有布局。無論如何，最好在此處設(shè)置您的排版設(shè)置作為您網(wǎng)站的后備。要更新版式設(shè)置，請從主題定制器菜單轉(zhuǎn)到常規(guī)設(shè)置 > 版式。

構(gòu)建用于會(huì)員頁面的通用布局

通用布局基本上是一種多用途布局，可用于您可能需要的那些額外頁面。為了構(gòu)建我們的通用布局，我將使用帳戶頁面。您應(yīng)該已經(jīng)創(chuàng)建了一個(gè)帳戶頁面并將其指定為 MemberPress 選項(xiàng)中的默認(rèn)帳戶頁面（如果沒有，請參閱本教程的第 1 部分）。

注意：MemberPress可以自動(dòng)為您創(chuàng)建一個(gè)默認(rèn)帳戶頁面。但是，由于此頁面無法部署 Divi Builder，因此最好創(chuàng)建您自己的帳戶頁面并將其指定為默認(rèn)帳戶頁面。這樣您就可以使用 Divi Builder 進(jìn)行設(shè)計(jì)，然后添加短代碼以使用模塊生成用戶帳戶信息表單。

現(xiàn)在去編輯帳戶頁面。部署可視化構(gòu)建器并將聯(lián)系人頁面布局導(dǎo)入您的頁面。將頁面標(biāo)題更新為“我的帳戶”。

將包含聯(lián)系表單和信息的行的列布局更新為一列布局。

接下來，刪除列內(nèi)的所有模塊，使一列行內(nèi)沒有任何內(nèi)容。

使用右鍵單擊菜單，復(fù)制文本模塊，在“常見問題”下方保留一段文本。然后使用右鍵單擊菜單將其粘貼到您剛剛創(chuàng)建的單列行中。

現(xiàn)在使用“設(shè)計(jì)”選項(xiàng)卡下的以下選項(xiàng)更新剛剛添加的文本模塊的設(shè)置：

文本方向：左
寬度：100%（默認(rèn)）

保存您的頁面。

如果您愿意，您可以刪除下面的其余部分，但最好保留它們，以防您需要某些頁面的任何這些元素。

注意：您的帳戶頁面尚未完全完成（我們?nèi)孕枰砑佣檀a），但很快就會(huì)實(shí)現(xiàn)。現(xiàn)在我們只需要為我們的通用布局模板保存這個(gè)布局。

接下來，您需要將此布局保存到您的 Divi 庫中。打開頁面設(shè)置菜單（視覺構(gòu)建器底部的紫色圖標(biāo)）。選擇保存到庫并將新模板命名為“Generic Layout”。然后單擊“保存到庫”。

就是這樣。現(xiàn)在您有一個(gè)通用的全寬布局，可用于您可能在整個(gè)站點(diǎn)中需要的其他會(huì)員頁面。您需要做的就是從您的庫中提取此通用布局，以便方便地開始。

現(xiàn)在我們有了通用布局，讓我們處理那些 MemberPress 前端頁面。

關(guān)于設(shè)計(jì)會(huì)員前端頁面的一句話

會(huì)員前端頁面是那些特定于會(huì)員功能的頁面。通常，這些頁面包括一個(gè)用于管理用戶帳戶信息的帳戶頁面、一個(gè)結(jié)帳頁面（用于付費(fèi)會(huì)員）以及一個(gè)登錄或注冊頁面。根據(jù)插件的不同，可能會(huì)有更多頁面。

作為一般規(guī)則，Divi 可以對第三方插件生成的頁面執(zhí)行的操作會(huì)有限制。如果頁面內(nèi)容是由簡碼生成的（例如 WooCommerce 或 MemberPress），您可以在能夠部署 Divi Builder 的頁面上的模塊中使用簡碼。這樣，您可以通過將短代碼添加到文本模塊并在模塊的設(shè)計(jì)選項(xiàng)卡中修改設(shè)計(jì)設(shè)置來調(diào)整生成內(nèi)容的設(shè)計(jì)。

設(shè)計(jì) MemberPress 前端頁面

正如我在本教程的第 1 部分中所述，MemberPress 有 3 個(gè)您必須保留的前端頁面：感謝頁面、帳戶頁面和登錄頁面。這些頁面是在 MemberPress 選項(xiàng)的頁面選項(xiàng)卡下選擇的。由于我們不會(huì)使用默認(rèn)的注冊頁面，因此我們還需要設(shè)計(jì)一個(gè)注冊頁面。但首先，讓我們完成我們從帳戶頁面開始的工作。

賬戶頁面

使用的布局：通用布局

使用的簡碼：[mepr-account-form]

設(shè)計(jì)修改：由于我們在構(gòu)建通用布局時(shí)已經(jīng)設(shè)計(jì)了帳戶頁面，因此這里要做的主要事情是將短代碼添加到文本模塊，然后更新設(shè)計(jì)設(shè)置以定位從短代碼顯示的表單中的文本和鏈接. 例如，將文本大小更改為 18px 會(huì)將所有帳戶信息文本更改為 18px。并且自定義鏈接文本也會(huì)影響帳戶導(dǎo)航菜單鏈接和貫穿帳戶信息的其他鏈接。

自定義 CSS：由于針對帳戶信息的某些元素的限制，我建議將以下自定義 CSS 添加到附加 CSS 下的主題定制器：

.mepr-submit, .button-primary, .mepr-active-nav-tab a {
    color: #ffffff!important;
    border-width: 10px!important;
    border-color: #7272ff;
    border-radius: 100px;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 700!important;
    text-transform: uppercase!important;
    padding-left: 2em;
    padding-right: 2em;
    background-color: #7272ff !important;
}

 
#mepr-account-nav {
    text-align: center;
}

.mepr-nav-item a, .mepr-payments a {
    background: #eeeeee;
    padding: 0.5em 1em;
    border-radius: 100px;  
}

 
.mp_wrapper textarea, .mp_wrapper select, .mp_wrapper input[type=text], .mp_wrapper input[type=url], .mp_wrapper input[type=email], .mp_wrapper input[type=tel], .mp_wrapper input[type=number], .mp_wrapper input[type=password] {
    border: 1px solid rgba(71,74,182,0.12)!important;
    color: rgba(114,114,255,0.91)!important;
    padding: 12px 10px !important;
    background: #f8f8f8
}

此 CSS 將為帳戶頁面導(dǎo)航、表單字段、表單按鈕和鏈接添加樣式。它還會(huì)為您的注冊表單和按鈕添加類似的樣式。

感謝頁面

使用的布局：通用布局

設(shè)計(jì)修改：真正要做的就是用新內(nèi)容更新布局。一個(gè)重要的補(bǔ)充是引導(dǎo)用戶進(jìn)入他們注冊的課程的 CTA。

感謝頁面是用戶在完成注冊過程后被重定向到的地方。它不是特定于插件的頁面，因此您擁有 Divi Builder 的強(qiáng)大功能。只需將通用布局從 Divi 庫導(dǎo)入頁面，更新頁面標(biāo)題并添加內(nèi)容。

您可以在 MemberPress 選項(xiàng)中指定默認(rèn)的感謝頁面。您可以通過在頁面底部的會(huì)員選項(xiàng)的注冊選項(xiàng)卡中選擇“啟用自定義感謝頁面消息”來為您創(chuàng)建的每個(gè)會(huì)員覆蓋此設(shè)置。

提醒：您可能想要繼續(xù)為您的其他會(huì)員創(chuàng)建其他感謝頁面，以便您可以為每個(gè)會(huì)員自定義 CTA。

登錄頁面

使用的布局：編碼布局

使用的簡碼：[mepr-login-form]

注意：無論您在 MemberPress 選項(xiàng)的頁面選項(xiàng)卡下選擇什么登錄頁面，都可以選擇在編輯頁面時(shí)手動(dòng)將登錄表單放置在頁面上。

設(shè)計(jì)修改：我使用了編碼聯(lián)系布局，因?yàn)槲蚁胧褂寐?lián)系表單部分的兩列布局來包括登錄表單和相鄰的 CTA 以注冊會(huì)員。

自定義 CSS：值得慶幸的是，我們之前為帳戶表單輸入的自定義 CSS 也為我們提供了一個(gè)美觀的登錄表單。

注冊頁面

使用的布局：編碼課程布局

使用的簡碼：取決于會(huì)員資格

設(shè)計(jì)修改：我將標(biāo)題部分行更改為單列行并刪除了圖像。然后，我刪除了左側(cè)內(nèi)容部分中除一個(gè)簡介外的所有內(nèi)容，并將我的注冊表單簡碼添加到簡介模塊內(nèi)容中。

Memberpress 會(huì)自動(dòng)為您創(chuàng)建的每個(gè)會(huì)員資格創(chuàng)建一個(gè)注冊頁面。每個(gè)頁面上使用的注冊表都是從您在 MemberPress 選項(xiàng)的字段選項(xiàng)卡下構(gòu)建的注冊表中提取的。

但是，您不必使用此注冊頁面。設(shè)置會(huì)員資格時(shí)，您可以在“注冊”選項(xiàng)卡下“會(huì)員選項(xiàng)”框中的“編輯會(huì)員資格”頁面底部找到一個(gè)短代碼列表，方法是單擊“會(huì)員簡碼”。其中一個(gè)簡碼允許您為該特定會(huì)員資格生成注冊表。

這是您需要添加到您為該會(huì)員創(chuàng)建的注冊頁面的簡碼。

這是注冊頁面的樣子。

注意：不幸的是，如果會(huì)員已付費(fèi)并需要結(jié)帳流程，用戶將被重定向到默認(rèn)的注冊頁面模板以完成購買。因此，最好向默認(rèn)注冊頁面添加一些自定義 css，以便通過結(jié)帳保持設(shè)計(jì)一致。

讓我向您展示我用來創(chuàng)建其余會(huì)員頁面的布局和修改。

設(shè)計(jì)會(huì)員站點(diǎn)頁面

主頁

使用的布局：編碼主頁

設(shè)計(jì)修改：我取出顯示圖形的圖像模塊。我制作了標(biāo)題部分和“Easy As 1..2..3..”部分一欄布局。我將按鈕更改為文本。并用我提供的三門課程（免費(fèi)、銀牌和金牌）更新課程部分。花了我大約 3 分鐘，所以不要太苛刻地判斷 :)。

會(huì)員頁面

使用的布局：編碼課程

設(shè)計(jì)修改：我更改了標(biāo)題。對于包含課程的行，我將列布局更改為一列和 680 像素的自定義寬度。然后我刪除了除三個(gè)框外的所有框（它們實(shí)際上是宣傳模塊）。在每個(gè)頁面下添加一個(gè)鏈接，該鏈接將轉(zhuǎn)到相應(yīng)的注冊頁面或定價(jià)頁面。

定價(jià)頁面

使用的布局：編碼定價(jià)

修改：這很容易。我所做的只是更新定價(jià)表的內(nèi)容并添加鏈接以轉(zhuǎn)到每個(gè)會(huì)員的注冊頁面。

會(huì)員課程概覽頁面

使用的布局：編碼課程

修改：這也很簡單。對于標(biāo)題部分，我更新了內(nèi)容，使列全寬，并將文本居中。然后我更新了頁面左側(cè)的導(dǎo)語內(nèi)容，并添加了一個(gè)鏈接以查看每個(gè)導(dǎo)語的課程頁面。

下圖顯示了免費(fèi)會(huì)員的會(huì)員課程概覽頁面。您需要為您提供的每個(gè)會(huì)員資格創(chuàng)建一個(gè)。另外，我應(yīng)該提醒您，這是本課程所有課程頁面（子頁面）的父頁面（請參閱第 1 部分了解其重要性）。

課程頁面

使用的布局：編碼課程

修改：基本上，我做了與會(huì)員課程概述頁面相同的修改，除了我更新了內(nèi)容和側(cè)邊欄內(nèi)容。

下圖顯示了我的免費(fèi)課程第 1 課頁面。此頁面以及該課程的其他課程頁面是父頁面免費(fèi)會(huì)員課程概述頁面的子頁面。

總結(jié)

隨著這個(gè)由 2 部分組成的系列接近尾聲，我希望您能看到 MemberPress 和 Divi 在構(gòu)建會(huì)員網(wǎng)站時(shí)的強(qiáng)大功能。MemberPress 提供了很多功能，我不得不說它非常易于使用。對我來說突出的幾件事是 MemberPress 的規(guī)則系統(tǒng)，用于保護(hù)內(nèi)容和創(chuàng)建點(diǎn)滴序列。電子郵件通知也很容易定制和編輯。我喜歡將會(huì)員資格分組在一起的功能，會(huì)員可以從他們的帳戶頁面更改/購買不同的會(huì)員資格。

在設(shè)計(jì)方面，我認(rèn)為 Divi 與 MemberPress 非常匹配。MemberPress 前端頁面不會(huì)自動(dòng)為您創(chuàng)建（令人耳目一新），并且可以使用短代碼在 Divi 模塊中生成內(nèi)容。我們有設(shè)計(jì)限制，因?yàn)槟承﹥?nèi)容不能從 Divi Builder 中定位。但添加幾行自定義 CSS 來完善整個(gè)會(huì)員網(wǎng)站并不算太糟糕。

會(huì)Github倉庫或者Cloudflare的本地上傳后，html文件或者css，json文件的編輯會(huì)很難，但是網(wǎng)上有許多免費(fèi)模版，下面就推薦一個(gè)比較好用的模版生成網(wǎng)站：

在這個(gè)網(wǎng)頁中選擇模板后可以直接點(diǎn)擊對應(yīng)地方編輯

然后選擇發(fā)布更新

最后就可以獲得一個(gè)臨時(shí)的URL

最后點(diǎn)擊打包下載頁面（上一張圖里面）

Tips：可能會(huì)提示你vip等級不夠，不用擔(dān)心，在個(gè)人界面點(diǎn)擊升級會(huì)員

進(jìn)入后看中間

就可以申請到vip了

是不是非常簡單？但是真正想要自己創(chuàng)意的網(wǎng)站，可以學(xué)學(xué)HTML,CSS以及腳本語言

正的大師,永遠(yuǎn)都懷著一顆學(xué)徒的心！

一、項(xiàng)目簡介

程序員教你如何DIY官網(wǎng)（支持小程序、H5、WebApp、UNIAPP ）。

無需編程，所見即所得。在線設(shè)計(jì)完成之后，可以直接導(dǎo)出你想要的語言源碼。

二、實(shí)現(xiàn)功能

• 基本組件（圖文組件、圖片輪播、頭像圖標(biāo)、字體圖標(biāo)、進(jìn)度條、視頻組件、底部按鈕、普通按鈕、下拉菜單、倒計(jì)時(shí)、地圖、通知欄、魔方圖片、搜索組件、時(shí)間軸等）

• 組件模板（拼團(tuán)列表、個(gè)人中心、文章列表、商品列表）

• 頁面模板（個(gè)人中心全局設(shè)置、會(huì)員權(quán)益、登錄頁）

• 自定義

• 全局設(shè)置

• 頁面管理

• 在線預(yù)覽

• 導(dǎo)出源碼

• 組件屬性

• 組件樣式
  

三、技術(shù)選型

• 小程序

• H5

• WebApp

• UniApp

• html

• css

• js

四、界面展示

五、源碼地址

私信回復(fù)：官網(wǎng)