整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
迎來到這個由 2部分組成的系列的第 2部分，我將在其中向您展示如何通過結合MemberPress和 Divi來構建一個完整的會員網站。我將帶您了解如何設置您的會員網站，其中包含銷售在線課程或產品所需的一切，包括自定義注冊頁面、電子郵件通知以及在一段時間內滴灌內容的三個級別的會員資格。我還將向您展示如何結合使用會員短代碼和Divi構建器來設計您的會員頁面。
我很高興繼續我們的使命，即使用Divi建立一個完整的會員網站。在上一篇文章( https://wpzhanzhang.eastfu.com/ru-he-shi-yong-divi-jian-li-hui-yuan-wang-zhan-di-1-bu-fen/ )中，我向您介紹了如何使用 MemberPress 構建會員網站的所有功能。因此，如果您參與了該過程，那么您應該非常適合今天的教程。
今天是關于設計的。更具體地說，我將向您展示如何使用 Divi Builder 設計您的會員網站（甚至是那些由 MemberPress 創建的會員頁面）。我將使用Learning Management System Divi Layout pack 來大大加快設計過程，并且在 MemberPress 使我們無法使用 Divi Builder 的極少數情況下，我也提供了一些 CSS。但總的來說，我的目標是減少自定義 CSS，增加 Divi Builder。
本文網址:https://wpzhanzhang.eastfu.com/ru-he-shi-yong-divi-jian-li-hui-yuan-wang-zhan-di-2-bu-fen/
要創建免費網站和博客？從易服客建站平臺( https://eastfu.cn/ )開始
500M免費空間，可升級為20GB電子商務網站
0元創建免費網站
目錄
預先看
檢查清單學習管理系統布局包創建的會員頁面MemberPress 前端（保留）頁面已創建
如何使用 Divi 建立會員網站 – 第 2 部分
主題定制器設置更改主題強調色更改排版設置
構建用于會員頁面的通用布局
關于設計會員前端頁面的一句話
設計 MemberPress 前端頁面賬戶頁面感謝頁面登錄頁面注冊頁面
設計會員站點頁面主頁會員頁面定價頁面會員課程概覽頁面課程頁面
總結
在開始本教程之前，您需要了解以下幾點。
我將使用學習管理系統布局包來設計本教程中的會員頁面。如果您還沒有，請務必獲取您的副本并將其導入您的 Divi 庫。
到目前為止，您應該已經創建了以下頁面。您不必在這些頁面上有內容。它們只需要在您的 WordPress 儀表板中創建。其中一些頁面特定于提供在線課程的會員網站。您可能需要為您自己的網站做些調整。
即使您可能正在使用其中一種美化 divi 布局，您也不想忽略您的主題定制器設置。當然，這是您需要設計頁眉、導航和頁腳的地方，因為您導入的 Divi 布局對這些元素沒有影響。此外，由于您將不可避免地擁有 Divi Builder 無法自定義的頁面或內容，因此設置主題定制器默認值是將這些元素定位到 Divi Builder 之外的方法。
要更新主題定制器，請轉到 Divi > 主題定制器。
主題強調色會影響整個網站的許多不同元素。更具體地說，對于本教程，您會注意到無論您將此顏色設置為什么，也將成為鏈接的默認顏色，即使是在 MemberPress 短代碼（如帳戶頁面）中找到的鏈接。要更新主題強調色，請從主題定制器菜單轉到常規設置 > 布局設置。我添加了整個布局中使用的紫色：#7272ff。
對于我在本教程中使用的 Coding School 布局包，在模塊級別確實沒有特定字體集，因此我可以從主題定制器中設置默認字體，它將應用于所有布局。無論如何，最好在此處設置您的排版設置作為您網站的后備。要更新版式設置，請從主題定制器菜單轉到常規設置 > 版式。
通用布局基本上是一種多用途布局，可用于您可能需要的那些額外頁面。為了構建我們的通用布局，我將使用帳戶頁面。您應該已經創建了一個帳戶頁面并將其指定為 MemberPress 選項中的默認帳戶頁面（如果沒有，請參閱本教程的第 1 部分）。
注意：MemberPress可以自動為您創建一個默認帳戶頁面。但是，由于此頁面無法部署 Divi Builder，因此最好創建您自己的帳戶頁面并將其指定為默認帳戶頁面。這樣您就可以使用 Divi Builder 進行設計，然后添加短代碼以使用模塊生成用戶帳戶信息表單。
現在去編輯帳戶頁面。部署可視化構建器并將聯系人頁面布局導入您的頁面。將頁面標題更新為“我的帳戶”。
將包含聯系表單和信息的行的列布局更新為一列布局。
接下來，刪除列內的所有模塊，使一列行內沒有任何內容。
使用右鍵單擊菜單，復制文本模塊，在“常見問題”下方保留一段文本。然后使用右鍵單擊菜單將其粘貼到您剛剛創建的單列行中。
現在使用“設計”選項卡下的以下選項更新剛剛添加的文本模塊的設置：
文本方向：左
寬度：100%（默認）
保存您的頁面。
如果您愿意，您可以刪除下面的其余部分，但最好保留它們，以防您需要某些頁面的任何這些元素。
注意：您的帳戶頁面尚未完全完成（我們仍需要添加短代碼），但很快就會實現。現在我們只需要為我們的通用布局模板保存這個布局。
接下來，您需要將此布局保存到您的 Divi 庫中。打開頁面設置菜單（視覺構建器底部的紫色圖標）。選擇保存到庫并將新模板命名為“Generic Layout”。然后單擊“保存到庫”。
就是這樣。現在您有一個通用的全寬布局，可用于您可能在整個站點中需要的其他會員頁面。您需要做的就是從您的庫中提取此通用布局，以便方便地開始。
現在我們有了通用布局，讓我們處理那些 MemberPress 前端頁面。
會員前端頁面是那些特定于會員功能的頁面。通常，這些頁面包括一個用于管理用戶帳戶信息的帳戶頁面、一個結帳頁面（用于付費會員）以及一個登錄或注冊頁面。根據插件的不同，可能會有更多頁面。
作為一般規則，Divi 可以對第三方插件生成的頁面執行的操作會有限制。如果頁面內容是由簡碼生成的（例如 WooCommerce 或 MemberPress），您可以在能夠部署 Divi Builder 的頁面上的模塊中使用簡碼。這樣，您可以通過將短代碼添加到文本模塊并在模塊的設計選項卡中修改設計設置來調整生成內容的設計。
正如我在本教程的第 1 部分中所述，MemberPress 有 3 個您必須保留的前端頁面：感謝頁面、帳戶頁面和登錄頁面。這些頁面是在 MemberPress 選項的頁面選項卡下選擇的。由于我們不會使用默認的注冊頁面，因此我們還需要設計一個注冊頁面。但首先，讓我們完成我們從帳戶頁面開始的工作。
使用的布局：通用布局
使用的簡碼：[mepr-account-form]
設計修改：由于我們在構建通用布局時已經設計了帳戶頁面，因此這里要做的主要事情是將短代碼添加到文本模塊，然后更新設計設置以定位從短代碼顯示的表單中的文本和鏈接. 例如，將文本大小更改為 18px 會將所有帳戶信息文本更改為 18px。并且自定義鏈接文本也會影響帳戶導航菜單鏈接和貫穿帳戶信息的其他鏈接。
自定義 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 將為帳戶頁面導航、表單字段、表單按鈕和鏈接添加樣式。它還會為您的注冊表單和按鈕添加類似的樣式。
使用的布局：通用布局
設計修改：真正要做的就是用新內容更新布局。一個重要的補充是引導用戶進入他們注冊的課程的 CTA。
感謝頁面是用戶在完成注冊過程后被重定向到的地方。它不是特定于插件的頁面，因此您擁有 Divi Builder 的強大功能。只需將通用布局從 Divi 庫導入頁面，更新頁面標題并添加內容。
您可以在 MemberPress 選項中指定默認的感謝頁面。您可以通過在頁面底部的會員選項的注冊選項卡中選擇“啟用自定義感謝頁面消息”來為您創建的每個會員覆蓋此設置。
提醒：您可能想要繼續為您的其他會員創建其他感謝頁面，以便您可以為每個會員自定義 CTA。
使用的布局：編碼布局
使用的簡碼：[mepr-login-form]
注意：無論您在 MemberPress 選項的頁面選項卡下選擇什么登錄頁面，都可以選擇在編輯頁面時手動將登錄表單放置在頁面上。
設計修改：我使用了編碼聯系布局，因為我想使用聯系表單部分的兩列布局來包括登錄表單和相鄰的 CTA 以注冊會員。
自定義 CSS：值得慶幸的是，我們之前為帳戶表單輸入的自定義 CSS 也為我們提供了一個美觀的登錄表單。
使用的布局：編碼課程布局
使用的簡碼：取決于會員資格
設計修改：我將標題部分行更改為單列行并刪除了圖像。然后，我刪除了左側內容部分中除一個簡介外的所有內容，并將我的注冊表單簡碼添加到簡介模塊內容中。
Memberpress 會自動為您創建的每個會員資格創建一個注冊頁面。每個頁面上使用的注冊表都是從您在 MemberPress 選項的字段選項卡下構建的注冊表中提取的。
但是，您不必使用此注冊頁面。設置會員資格時，您可以在“注冊”選項卡下“會員選項”框中的“編輯會員資格”頁面底部找到一個短代碼列表，方法是單擊“會員簡碼”。其中一個簡碼允許您為該特定會員資格生成注冊表。
這是您需要添加到您為該會員創建的注冊頁面的簡碼。
這是注冊頁面的樣子。
注意：不幸的是，如果會員已付費并需要結帳流程，用戶將被重定向到默認的注冊頁面模板以完成購買。因此，最好向默認注冊頁面添加一些自定義 css，以便通過結帳保持設計一致。
讓我向您展示我用來創建其余會員頁面的布局和修改。
使用的布局：編碼主頁
設計修改：我取出顯示圖形的圖像模塊。我制作了標題部分和“Easy As 1..2..3..”部分一欄布局。我將按鈕更改為文本。并用我提供的三門課程（免費、銀牌和金牌）更新課程部分。花了我大約 3 分鐘，所以不要太苛刻地判斷 :)。
使用的布局：編碼課程
設計修改：我更改了標題。對于包含課程的行，我將列布局更改為一列和 680 像素的自定義寬度。然后我刪除了除三個框外的所有框（它們實際上是宣傳模塊）。在每個頁面下添加一個鏈接，該鏈接將轉到相應的注冊頁面或定價頁面。
使用的布局：編碼定價
修改：這很容易。我所做的只是更新定價表的內容并添加鏈接以轉到每個會員的注冊頁面。
使用的布局：編碼課程
修改：這也很簡單。對于標題部分，我更新了內容，使列全寬，并將文本居中。然后我更新了頁面左側的導語內容，并添加了一個鏈接以查看每個導語的課程頁面。
下圖顯示了免費會員的會員課程概覽頁面。您需要為您提供的每個會員資格創建一個。另外，我應該提醒您，這是本課程所有課程頁面（子頁面）的父頁面（請參閱第 1 部分了解其重要性）。
使用的布局：編碼課程
修改：基本上，我做了與會員課程概述頁面相同的修改，除了我更新了內容和側邊欄內容。
下圖顯示了我的免費課程第 1 課頁面。此頁面以及該課程的其他課程頁面是父頁面免費會員課程概述頁面的子頁面。
隨著這個由 2 部分組成的系列接近尾聲，我希望您能看到 MemberPress 和 Divi 在構建會員網站時的強大功能。MemberPress 提供了很多功能，我不得不說它非常易于使用。對我來說突出的幾件事是 MemberPress 的規則系統，用于保護內容和創建點滴序列。電子郵件通知也很容易定制和編輯。我喜歡將會員資格分組在一起的功能，會員可以從他們的帳戶頁面更改/購買不同的會員資格。
在設計方面，我認為 Divi 與 MemberPress 非常匹配。MemberPress 前端頁面不會自動為您創建（令人耳目一新），并且可以使用短代碼在 Divi 模塊中生成內容。我們有設計限制，因為某些內容不能從 Divi Builder 中定位。但添加幾行自定義 CSS 來完善整個會員網站并不算太糟糕。
會Github倉庫或者Cloudflare的本地上傳后，html文件或者css，json文件的編輯會很難，但是網上有許多免費模版，下面就推薦一個比較好用的模版生成網站：
在這個網頁中選擇模板后可以直接點擊對應地方編輯
然后選擇發布更新
最后就可以獲得一個臨時的URL
最后點擊打包下載頁面（上一張圖里面）
Tips：可能會提示你vip等級不夠，不用擔心，在個人界面點擊升級會員
進入后看中間
就可以申請到vip了
是不是非常簡單？但是真正想要自己創意的網站，可以學學HTML,CSS以及腳本語言
一、項目簡介
程序員教你如何DIY官網（支持小程序、H5、WebApp、UNIAPP ）。
無需編程，所見即所得。在線設計完成之后，可以直接導出你想要的語言源碼。
基本組件（圖文組件、圖片輪播、頭像圖標、字體圖標、進度條、視頻組件、底部按鈕、普通按鈕、下拉菜單、倒計時、地圖、通知欄、魔方圖片、搜索組件、時間軸等）
組件模板（拼團列表、個人中心、文章列表、商品列表）
頁面模板（個人中心全局設置、會員權益、登錄頁）
自定義
全局設置
頁面管理
在線預覽
導出源碼
組件屬性
組件樣式
小程序
H5
WebApp
UniApp
html
css
js
私信回復：官網
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
