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

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

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

今天是關(guān)于設(shè)計的。更具體地說，我將向您展示如何使用 Divi Builder 設(shè)計您的會員網(wǎng)站（甚至是那些由 MemberPress 創(chuàng)建的會員頁面）。我將使用Learning Management System Divi Layout pack 來大大加快設(shè)計過程，并且在 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/

要創(chuàng)建免費網(wǎng)站和博客？從易服客建站平臺( https://eastfu.cn/ )開始

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

0元創(chuàng)建免費網(wǎng)站

預(yù)先看

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

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

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

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

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

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

設(shè)計會員站點頁面主頁會員頁面定價頁面會員課程概覽頁面課程頁面

總結(jié)

預(yù)先看

檢查清單

在開始本教程之前，您需要了解以下幾點。

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

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

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

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

會員頁面
定價頁面
會員課程概覽頁面
課程頁面
注冊頁面

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

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

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

主題定制器設(shè)置

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

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

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

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

更改排版設(shè)置

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

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

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

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

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

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

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

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

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

文本方向：左
寬度：100%（默認）

保存您的頁面。

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

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

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

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

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

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

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

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

設(shè)計 MemberPress 前端頁面

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

賬戶頁面

使用的布局：通用布局

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

設(shè)計修改：由于我們在構(gòu)建通用布局時已經(jīng)設(shè)計了帳戶頁面，因此這里要做的主要事情是將短代碼添加到文本模塊，然后更新設(shè)計設(shè)置以定位從短代碼顯示的表單中的文本和鏈接. 例如，將文本大小更改為 18px 會將所有帳戶信息文本更改為 18px。并且自定義鏈接文本也會影響帳戶導(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)航、表單字段、表單按鈕和鏈接添加樣式。它還會為您的注冊表單和按鈕添加類似的樣式。

感謝頁面

使用的布局：通用布局

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

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

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

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

登錄頁面

使用的布局：編碼布局

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

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

設(shè)計修改：我使用了編碼聯(lián)系布局，因為我想使用聯(lián)系表單部分的兩列布局來包括登錄表單和相鄰的 CTA 以注冊會員。

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

注冊頁面

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

使用的簡碼：取決于會員資格

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

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

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

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

這是注冊頁面的樣子。

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

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

設(shè)計會員站點頁面

主頁

使用的布局：編碼主頁

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

會員頁面

使用的布局：編碼課程

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

定價頁面

使用的布局：編碼定價

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

會員課程概覽頁面

使用的布局：編碼課程

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

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

課程頁面

使用的布局：編碼課程

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

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

總結(jié)

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

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

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

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

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

最后就可以獲得一個臨時的URL

最后點擊打包下載頁面（上一張圖里面）

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

進入后看中間

就可以申請到vip了

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

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

一、項目簡介

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

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

二、實現(xiàn)功能

基本組件（圖文組件、圖片輪播、頭像圖標(biāo)、字體圖標(biāo)、進度條、視頻組件、底部按鈕、普通按鈕、下拉菜單、倒計時、地圖、通知欄、魔方圖片、搜索組件、時間軸等）
組件模板（拼團列表、個人中心、文章列表、商品列表）
頁面模板（個人中心全局設(shè)置、會員權(quán)益、登錄頁）
自定義
全局設(shè)置
頁面管理
在線預(yù)覽
導(dǎo)出源碼
組件屬性
組件樣式

三、技術(shù)選型

小程序
H5
WebApp
UniApp
html
css
js

四、界面展示

五、源碼地址

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

在線咨詢

上一篇：CSS3 Flexbox解決方案
下一篇：wangEditor-輕量級富文本+PHP 本地圖片

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

預(yù)先看

檢查清單

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

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

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

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

主題定制器設(shè)置

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

更改排版設(shè)置

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

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

設(shè)計 MemberPress 前端頁面

賬戶頁面

感謝頁面

登錄頁面

注冊頁面

設(shè)計會員站點頁面

主頁

會員頁面

定價頁面

會員課程概覽頁面

課程頁面

總結(jié)

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

二、實現(xiàn)功能

三、技術(shù)選型

四、界面展示

五、源碼地址

您的項目需求