Divi로 학습 관리(LMS) 웹사이트 만들기

저는 온라인으로 코스를 수강하는 것을 좋아합니다. 훌륭한 콘텐츠와 함께 잘 디자인되고 잘 조직된 전자 코스를 시작하는 것이 중요합니다. 잘 수행하면 이러한 전자 과정을 통해 성취감을 느낄 수 있습니다. 그러나 훌륭한 e-코스에서 배우는 것과 하나를 만드는 것은 완전히 다른 경험입니다. 제 경험상 학습 관리 또는 E-Course 웹 사이트를 만드는 것은 압도적인 과정일 수 있습니다.

이 게시물에서 저는 Divi의 사전 제작된 학습 관리 레이아웃 팩을 사용하여 완전한 기능의 e-코스 웹사이트를 만드는 방법을 보여줌으로써 자신만의 e-코스를 구축하는 것에 대한 두려움에서 벗어나고자 합니다.

구축을 시작하기 전에 함께 수행할 작업에 대한 분석은 다음과 같습니다.

1. 기존 레이아웃의 일부를 사용하여 수업 페이지를 만듭니다.
2. 각 강의 페이지에 표시할 강의 메뉴를 생성하여 해당 강의의 모든 강의를 보여줍니다.
3. WP Complete 플러그인을 사용하여 사용자에게 각 과정의 진행 상황을 추적할 수 있는 기능을 제공합니다.
4. Restrict Content Pro 플러그인을 사용하여 무료 및 유료 멤버십 레벨을 모두 설정합니다.
5. 기존 레이아웃의 요소를 사용하여 웹사이트에 맞게 회원 페이지를 빠르게 디자인하는 방법을 배웁니다.
그리고 더…

그리고 궁금증을 해소하기 위해 사이드바의 코스 메뉴 위에 있는 완료 버튼과 진행률 표시줄을 사용하여 만들 수업 페이지를 살짝 살펴보겠습니다.

하지만 먼저 설정을 합시다.

Divi로 학습 관리(LMS) 웹사이트 만들기

YouTube 채널 구독

모든 것을 설정

#1 – Divi 설치

최신 버전의 Divi가 설치되어 있는지 확인하십시오. 그리고 항상 자식 테마도 활성화하는 것이 좋습니다.

#2 – 레이아웃 팩을 Divi 라이브러리에 업로드

우리는 Divi의 학습 관리(LMS) 레이아웃 팩을 사용할 것입니다. 레이아웃 팩을 다운로드하고 압축을 풀고 coding-school_All.json 파일을 Divi 라이브러리에 설치합니다. 그런 다음 각각의 해당 레이아웃을 사용하여 9개의 새 페이지를 만듭니다.

#3 – Restrict Content Pro 플러그인 설치 및 활성화

이것은 우리가 전자 코스 사이트의 회원 기능에 사용할 플러그인입니다. 이를 사용하여 과정에 대한 무료 및 프리미엄(유료) 구독을 설정합니다.

#4 – WP Complete Pro 플러그인 설치 및 활성화

이 플러그인은 회원(또는 학생)이 각 과정의 각 수업을 완료할 때 진행 상황을 계속 알 수 있도록 하는 데 사용됩니다. 진행 상황을 보여주는 멋진 원 및 막대 그래프 시각 자료와 완료된 각 단원 탐색 메뉴 옆에 편리한 확인 표시가 있습니다.

모든 설정이 완료되면 e-코스를 구축할 준비가 된 것입니다.

시작하자.

코스 페이지 이름 바꾸기

레이아웃 팩은 코스 페이지 레이아웃과 함께 제공됩니다.

해당 레이아웃에 나열된 각 코스는 코스 페이지 레이아웃을 사용하는 특정 코스 페이지로 연결되어야 합니다(모든 코스를 가르칠 계획이라면).

참고: 위의 코스 페이지 헤더에 있는 버튼을 비디오 모듈로 대체했습니다. 그렇게 하면 코스 미리보기를 표시하기 위해 다른 페이지로 리디렉션할 필요가 없습니다. 그냥 아이디어입니다.

보시다시피 이 예제에서는 코스 페이지 레이아웃이 UX 디자인 코스를 사용하고 있으므로 페이지를 편집하고 코스 페이지 이름을 "코스"에서 "UX 디자인"으로 변경합니다. 그리고 퍼머링크도 업데이트하세요.

수업 페이지 구축

이제 "UX 디자인"이라는 이름의 새 코스 페이지는 각 장에 대한 간단한 설명과 함께 장(수업으로 생각할 수도 있음)으로 나뉩니다. 이러한 각 장/수업은 자체 수업 페이지로 리디렉션해야 합니다. 이 레슨 페이지를 만들기 위해 코스 페이지 레이아웃을 사용하고 약간의 조정을 할 것입니다.

UX 디자인 코스 페이지에 나열된 첫 번째 챕터/레슨은 "챕터 1: 기본 소개"입니다. 이를 위한 강의 페이지를 만들어 보겠습니다.

계속해서 새 페이지를 추가하고 제목에 "1장 : 기본 소개"를 입력하십시오.

이 강의는 UX 디자인 코스 페이지의 하위 페이지이므로 오른쪽 사이드바의 페이지 속성 상자 안에 있는 상위 드롭다운을 클릭하고 UX 디자인을 상위로 선택합니다.

다음으로 Divi Builder를 사용하려면 클릭하고 라이브러리에서 추가를 클릭한 다음 코스 레이아웃을 선택합니다.

임시 보관함에 저장

헤더 레이아웃 조정

이제 Visual Builder를 사용하여 페이지 레이아웃을 일부 조정하려면 클릭하십시오. 먼저 상단 섹션의 헤더 레이아웃을 약간 변경해 보겠습니다. Visual Builder에서 오른쪽 열의 이미지 모듈과 첫 번째 열의 맨 아래에 있는 녹색 버튼을 삭제합니다.

다음을 클릭하여 첫 번째 열의 최상위 텍스트 모듈 설정을 편집하고 h1 헤더 텍스트를 "1장 : 기본 소개"로 변경합니다.

그런 다음 행의 열 구조를 2열이 아닌 1열로 변경합니다.

이제 헤더가 다음과 같아야 합니다.

광고 내용 변경

아래 전문 섹션에서 왼쪽 콘텐츠 섹션의 첫 번째 광고 문구 설정을 편집하고 다음을 업데이트합니다.

콘텐츠 탭

제목: 1부
콘텐츠: [이것은 코스의 콘텐츠가 됩니다. 지금은 모의 내용을 그대로 두겠습니다.]
아이콘 사용: 예
아이콘: 오른쪽 화살표 아이콘 선택

참고: 아이콘 색상은 테마 사용자 정의 도구에 설정된 테마 강조 색상에서 가져오므로 사이트와 일치하는 색상으로 색상을 업데이트해야 합니다.

설정 저장

이제 하나의 블러브 모듈이 생성되었으므로 이를 페이지에 있는 강의의 각 부분을 분할하기 위한 템플릿으로 사용할 수 있습니다. 계속해서 방금 만든 모듈을 두 번 복제하고(또는 원하는 만큼 부품을 많이) 각각 다른 제목으로 업데이트합니다(예: 부품 2, 부품 3 등).

그런 다음 더 이상 필요하지 않은 다른 광고 문구를 삭제합니다.

이제 레이아웃이 다음과 같아야 합니다.

사이드바 위젯 추가

Specialty 섹션의 오른쪽 사이드바에 있는 버튼 모듈 아래에 사이드바 모듈을 추가합니다. 그리고 지금은 사이드바 위젯 영역 콘텐츠를 가져오는 기본 콘텐츠 설정을 그대로 둡니다. 코스 메뉴가 포함된 사용자 지정 위젯 영역을 만드는 즉시 이를 변경할 것입니다.

콘텐츠 탭에서 모듈에 흰색 배경을 추가합니다.

사이드바 모듈이 페이지 디자인과 일치하도록 하려면 다음과 같이 디자인 탭에서 설정을 업데이트하십시오.

맞춤 여백: -80px 상단
맞춤 패딩: 상단 30픽셀, 오른쪽 40픽셀, 하단 30픽셀, 왼쪽 40픽셀
상자 그림자 수평 위치: 0px
상자 Shadwo 수직 위치: 0px
상자 그림자 흐림 강도: 60px
상자 그림자 확산 강도: 0px
그림자 색상: rgba(71,74,182,0.12)

애니메이션 스타일: 확대/축소
애니메이션 방향: 위로
애니메이션 강도: 20%
애니메이션 시작 불투명도: 100%

설정 저장

참고: 향후 업데이트를 위해 하나의 모듈만 조정하면 되도록 이 모듈을 전역 모듈로 만드는 것이 좋습니다. 이렇게 하려면 라이브러리에 추가를 선택하고 이름을 "강의 메뉴 사이드바 모듈"로 지정하고 전역 모듈로 만들기 위해 선택하고 저장을 클릭합니다.

마지막으로 강사와 "전체 프로필" 버튼 모듈이 있는 광고문안 모듈을 삭제합니다. 페이지는 다음과 같아야 합니다.

페이지 저장

이제 수업 페이지 중 하나가 구축되었으므로 다른 수업에 사용할 수 있도록 라이브러리에 저장해 보겠습니다. 비주얼 빌더에서 하단 메뉴의 "라이브러리에 추가" 버튼을 클릭하고 템플릿 이름으로 "강의 페이지 레이아웃"을 입력한 후 저장합니다.

계속해서 위의 단계를 반복하여 두 개의 강의 페이지를 더 추가하십시오. 이번에는 코스 페이지 레이아웃을 사용하지 않고 "수업 페이지 레이아웃"이라는 새로운 레이아웃을 사용하십시오.

완료되면 다음 제목으로 세 개의 강의 페이지가 생성되어야 합니다.

1. 1장: 기본 소개
2. 제2장 정보 아키텍처
3. 3장 : 반응형 디자인

코스 메뉴 만들기

이제 수업이 생성되었으므로 코스 메뉴를 만들 수 있습니다. WordPress 대시보드에서 모양 > 메뉴 로 이동합니다.

메뉴 페이지에서 다음 단계를 완료하십시오.

1. "새 메뉴 만들기"를 선택합니다.
2. 이름을 "UX 디자인"으로 지정합니다.
3. 방금 만든 메뉴에서 세 개의 강의 페이지/챕터를 선택합니다.
4. 메뉴에 추가 클릭
5. 메뉴 저장

사용자 지정 위젯 영역 만들기

수업 페이지에 메뉴를 추가하려면 먼저 사용자 정의 위젯 영역을 만들어야 합니다. WordPress 대시보드에서 모양 > 위젯 으로 이동합니다. 기존 위젯 영역 아래에서 새 위젯 영역을 만드는 데 사용된 상자를 찾습니다. “UX Design”이라는 이름을 입력하고 “Create”를 클릭합니다. 이제 페이지를 새로 고칩니다. 이제 새로운 사용자 정의 "UX 디자인" 위젯 영역이 표시되어야 합니다. 사용자 정의 메뉴 위젯을 "UX 디자인" 위젯 영역 내부로 드래그합니다. 사용자 정의 메뉴 위젯에서 "UX 디자인" 메뉴를 선택합니다. 그런 다음 저장을 클릭합니다.

새 위젯 영역으로 수업 페이지 사이드바 모듈 업데이트

이제 코스 메뉴로 위젯 영역을 만들었으므로 생성한 코스 페이지로 돌아가서 사이드바 모듈을 업데이트하여 위젯 영역 "UX 디자인"을 선택합니다. 이제 메뉴가 사이드바에 나타나야 합니다.

참고: 사이드바 모듈을 전역으로 만든 경우 이 모듈을 한 번만 조정하면 나머지 두 개는 자동으로 업데이트됩니다.

이 시점에서 우리는 과정과 수업을 만들기 위한 꽤 좋은 기반을 가지고 있으므로 과정 진행 추적을 통합하여 UX를 개선해 보겠습니다.

과정 진행 추적 추가

e-코스 웹사이트에 코스 진행 상황 추적을 추가하면 코스를 수강할 때 사용자 경험, 참여 및 동기를 높일 수 있습니다. 각 과정의 진행 상황을 표시하기 위해 WP Complete Pro 플러그인을 사용하겠습니다. 아직 플러그인을 설치하고 활성화하지 않았다면 플러그인을 설치하고 활성화하십시오.

플러그인이 활성화되면 WordPress 대시보드에서 설정 > WPComplete 로 이동합니다. 플러그인 설정으로 이동합니다.

다음 설정을 업데이트합니다.

학생 역할 유형: 가입자
수업 콘텐츠 유형: 페이지 유형(게시물 대신 페이지로 수업을 작성하기 때문에)
"활성화된 게시물 및 페이지에 자동으로 완료 버튼 추가" 옵션을 선택 취소합니다. (짧은 코드를 사용하여 해당 버튼을 수동으로 추가할 것입니다.)
전체 버튼 색상 표시: #7377fc
그래프 설정 기본 색상: #7377fc

그런 다음 변경 사항 저장을 클릭합니다.

강의 페이지에 대한 완료 버튼 활성화

이제 WP Complete 설정이 완료되었습니다. 강의 페이지에 "완료" 버튼을 추가해 보겠습니다.

"1장: 기초 소개"라는 제목으로 만든 첫 번째 강의 페이지로 이동하고 클릭하여 페이지를 편집합니다. 기본 페이지 편집기에서 페이지 하단의 WPComplete 상자를 찾습니다. 상자 내부에서 "완료 버튼 활성화" 옵션을 클릭합니다. 이것은 사용자를 위해 이 페이지를 추적하고 싶다는 것을 플러그인에 알릴 것입니다. 다음으로, "This is part of:"라고 표시된 바로 뒤에 있는 입력 상자에 추적하려는 과정의 이름인 "UX Design"을 입력합니다. 이것이 각 과정에서 수업을 그룹화하는 방법입니다. 예를 들어 3개의 강의가 있고 각 강의 페이지에서 "UX 디자인"을 강의로 선택한 경우 사용자가 완료 버튼을 클릭하여 페이지를 완료하면 플러그인은 사용자가 33%를 완료했다고 기록할 수 있습니다. (3개의 수업 중 1개) 해당 과정입니다. 여러 코스가 있는 경우 상자에 새 코스 이름을 입력하기만 하면 새 코스 그룹이 시작됩니다.

수업 페이지에 완료 버튼 추가

수업 페이지에 "완료" 버튼을 추가하려면 방금 편집한 동일한 수업 페이지에 비주얼 빌더를 배포합니다.

페이지 하단의 마지막 블러브 모듈 아래에 텍스트 모듈을 추가합니다. 텍스트 설정에서 콘텐츠 상자에 다음 단축 코드를 입력합니다.

[wpc_button text="완료하려면 저를 클릭하세요!" Completed_text="예! 완전한"]

참고: 단축 코드의 텍스트를 수정하여 버튼에 표시되는 텍스트 및 완성된 텍스트를 변경할 수 있습니다.

설정 저장

이 단축 코드는 사용자가 클릭하여 수업을 완료한 것으로 기록할 수 있는 버튼을 생성합니다.

버튼을 클릭하여 레슨을 완료하면 해당 레슨의 사이드바 메뉴 항목이 약간 희미해지고 오른쪽에 확인 표시가 나타납니다.

계속해서 방금 만든 텍스트 모듈을 "Complete Button"이라는 이름으로 라이브러리에 저장합니다. 이제 해당 라이브러리 항목을 사용하여 필요에 따라 모든 페이지에 동일한 모듈을 입력할 수 있습니다.

참고: 계속해서 강의 페이지 레이아웃의 새 버전을 라이브러리에 저장하고 완료 버튼을 포함하여 향후 강의 페이지를 만들 때 보조 항목으로 계속 추가할 필요가 없도록 할 수 있습니다.

사이드바에 진행률 막대 그래프 추가

WPComplete 플러그인을 사용하면 사용자에게 특정 과정의 진행 상황을 보여주는 그래프를 표시할 수도 있습니다. 수업의 사이드바에 UX 디자인 과정의 진행 상황을 보여주는 막대 그래프를 추가할 것입니다.

강의 페이지 사이드바에 강의 메뉴를 표시하기 위해 UX 디자인 강의용 사용자 정의 위젯 영역을 어떻게 생성했는지 기억하십니까? 이제 코스 메뉴 바로 위에 진행률 막대 그래프를 추가하겠습니다. 그런 식으로 사용자는 멋진 시각적 디스플레이에서 진행 상황을 볼 수 있습니다.

막대 그래프를 추가하려면 WordPress 대시보드로 이동하여 모양 > 위젯으로 이동합니다. 그런 다음 이전에 만든 "UX 디자인" 사용자 정의 위젯을 토글하고 HTML 위젯을 현재 있는 사용자 정의 메뉴 위젯 상단의 위젯 영역으로 드래그합니다. HTML 콘텐츠 상자에 다음 단축 코드를 입력합니다.

[wpc_progress_bar 과정 = "UX 디자인"]

이 단축 코드는 특정 과정 "UX 디자인"에 대한 진행률 막대 그래프를 표시합니다. 이 코스 이름은 "다음의 일부입니다:" 옆에 있는 WPComplete 상자 옵션에 입력한 것과 일치합니다. 추후 다른 강좌가 있다면 해당 강좌의 단축코드를 추가할 때 “UX Design” 자리에 새로운 강좌명을 입력하면 됩니다.

참고: 이 플러그인에 사용할 수 있는 단축 코드의 전체 목록을 보려면 단축 코드 치트시트로 이동하십시오.

이제 "1장: 기본 소개"로 이동하여 어떻게 보이는지 확인하십시오.

페이지 하단의 완료 ​​버튼을 클릭합니다. 이제 사이드바에서 변경된 사항을 확인하십시오. 이제 막대 그래프에 과정의 33%를 완료했음이 표시됩니다. 이제 레슨 페이지의 메뉴 항목은 해당 레슨이 완료되었음을 나타내기 위해 오른쪽에 확인 표시가 있는 흐리게 표시됩니다.

꽤 멋지죠?

우리가 지금까지 가지고 있는 것을 검토해 봅시다:

1. 앞으로의 수업을 위한 템플릿으로 사용할 새로운 수업 페이지 템플릿이 있습니다.
2. 코스별로 맞춤형 메뉴를 만드는 시스템이 있습니다.
3. 각 코스의 맞춤형 위젯 영역을 설정하여 강의 페이지에 해당 특정 코스의 맞춤형 메뉴를 표시하는 시스템이 있습니다.
4. 클릭 시 막대 그래프와 해당 메뉴 링크의 진행 상황을 나타내는 전체 버튼을 강의 페이지에 추가할 수 있습니다.

우리 사이트를 작동하는 전자 코스로 바꾸는 마지막 단계는 유료 고객으로 콘텐츠를 제한하기 위해 멤버십 수준을 통합하는 것입니다.

회원 페이지 구축

아직 수행하지 않았다면 Restrict Content Pro 플러그인을 설치하고 활성화하십시오. 플러그인이 설치되면 멤버십 프로세스를 처리하기 위한 5개의 페이지가 자동으로 생성됩니다.

기본 페이지 편집기에서 각 페이지를 보면 각 페이지의 콘텐츠에 추가되는 유일한 것이 단축 코드임을 알 수 있습니다. 예를 들어 등록 페이지로 이동하면 콘텐츠 편집기에 등록 양식을 표시하는 단축 코드 "[register_form]"만 표시됩니다.

자동 생성된 각 페이지의 콘텐츠를 표시하는 데 필요한 것은 단축 코드뿐이므로 Divi Builder를 사용하여 이러한 페이지의 레이아웃을 쉽게 구축할 수 있습니다. 예를 들어 등록 페이지를 빠르고 쉽게 사용자 정의하려면 코스 페이지로 이동하여 비주얼 빌더를 배포하십시오. 레이아웃의 상단 섹션을 "e-코스 페이지 헤더"(또는 이와 유사한 것)라는 이름으로 라이브러리에 저장합니다.

그런 다음 과정을 표시하는 안내문 중 하나를 클릭하고 해당 모듈을 "e-과정 안내문 콘텐츠 상자"(또는 이와 유사한 것)라는 이름으로 라이브러리에 저장합니다.

이제 등록 페이지로 이동하여 단축 코드를 클립보드에 복사합니다(단축 코드를 강조 표시하고 ctrl + c 클릭). 그런 다음 Divi Builder를 배포한 다음 Visual Builder를 배포합니다. 라이브러리에서 "e-코스 페이지 헤더"라는 새 저장 섹션을 추가합니다.

제목이 포함된 텍스트 모듈을 "Courses" 대신 "Register"로 업데이트합니다.

그런 다음 섹션의 현재 모듈 아래에 있는 라이브러리의 모듈을 클릭하여 추가합니다. 방금 라이브러리에 저장한 "e-course 블러브 콘텐츠 상자" 모듈을 선택합니다.

그런 다음 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

제목 지우기
내용: ctrl + v를 눌러 클립보드에 저장한 단축 코드 [register_form]를 입력합니다.
이미지 URL 지우기

설정 저장

참고: 빠르고 쉬운 방법이었습니다. 나는 그것이 모듈의 스타일을 가져오는 가장 빠른 방법이었기 때문에 블러브 모듈을 사용했습니다. 아마도 대신 텍스트 모듈을 사용하고 싶을 것입니다.

이제 시크릿 브라우저에서 등록 페이지를 보십시오.

여전히 양식 디자인을 사용자 정의해야 하지만(이 자습서에서는 수행하지 않음) 일부 검사 및 사용자 정의 CSS로 쉽게 수행할 수 있습니다.

동일한 프로세스를 따라 플러그인에서 생성된 5개의 멤버십 페이지를 모두 업데이트할 수 있습니다. 멤버십을 처리하는 데 사용되는 페이지를 보려면 WordPress 대시보드로 이동하여 제한 > 설정 으로 이동하면 일반 탭에서 사용 중인 모든 페이지 목록이 표시됩니다.

무료 구독 수준 추가

e-코스에 무료 구독 수준을 추가하면 리드를 포착하고 이메일 마케팅 캠페인에 추가하고 프리미엄 멤버십으로 상향 판매할 수 있는 좋은 방법입니다. 무료 구독 수준을 추가하려면 WordPress 대시보드로 이동하여 제한 > 구독 수준 으로 이동합니다. 그런 다음 설정을 작성하여 무료 멤버십을 만드십시오. 다음은 무료 구독 수준에 대해 입력할 항목의 예입니다.

이름: 무료
설명: 이것은 Coding School에 대한 무료 구독입니다.
사용자 역할: 가입자

다른 옵션은 기본 설정으로 두십시오.

그런 다음 회원 등급 추가를 클릭합니다.

프리미엄 구독 수준 추가

프리미엄 멤버십은 일반적으로 무료 멤버십으로 액세스할 수 없는 더 높은 수준의 콘텐츠에 액세스하기 위해 비용을 청구할 수 있는 곳입니다. 무료 회원과 마찬가지로 사용자는 등록 양식에 등록해야 합니다. 유일한 차이점은 구독을 구매하기 위해 결제 양식으로 연결된다는 것입니다. 사용자가 이미 무료 회원인 경우 현재 등록 정보를 사용하여 프리미엄 구독으로 업그레이드한 다음 업그레이드 비용을 지불할 수 있습니다.

Premiumn 구독 수준을 추가하려면 WordPress 대시보드로 이동하여 제한 > 구독 수준으로 이동합니다. 그런 다음 설정을 작성하여 프리미엄 구독을 만드십시오. 다음은 프리미엄 구독 수준에 대해 입력할 항목의 예입니다.

이름: 프리미엄
설명: 이것은 코딩 학교에 대한 프리미엄 구독입니다.
기간: 1년
가격: 29
사용자 역할: 가입자

구독 수준에 따라 수업 제한

이제 무료 및 프리미엄 구독 수준이 생성되었습니다. 사용자 구독 수준에 따라 페이지/게시물 또는 특정 콘텐츠를 제한하도록 선택할 수 있습니다. 플러그인은 이 프로세스를 정말 간단하게 만듭니다. 먼저 우리가 만든 첫 번째 강의에 대한 액세스를 무료 구독으로 제한합시다. 그렇게 하려면 "1장: 기초 소개"라는 제목의 레슨 페이지를 편집하십시오. 페이지 편집기 상단에 있는 "이 콘텐츠 제한" 상자를 확인하세요. 상자에는 콘텐츠에 액세스할 수 있는 사람을 선택할 수 있는 드롭다운 입력 상자가 있습니다. 구독 수준의 구성원 을 선택하려고 합니다. 선택하면 더 많은 옵션이 표시됩니다. "모든 구독 수준의 구성원"이라는 첫 번째 옵션을 선택합니다. 프리미엄 구독을 할 회원도 이 콘텐츠에 액세스할 수 있기를 원하기 때문입니다.

참고: 이 설정은 구독하지 않은 사용자로부터 전체 페이지를 숨깁니다. 페이지에서 특정 콘텐츠를 숨기고 무료 또는 프리미엄 구독자만 사용할 수 있도록 하려면 단축 코드를 사용하여 숨기려는 콘텐츠를 래핑할 수 있습니다. 우리는 divi 빌더를 사용하고 있기 때문에 단축 코드를 사용하여 콘텐츠를 래핑하는 것은 어려울 수 있지만 고려할 수 있는 한 가지는 광고 문구의 실제 콘텐츠 상자에 있는 콘텐츠만 단축 코드로 래핑하고 제목은 그대로 두는 것입니다.

"2장: 정보 아키텍처"라는 제목의 다음 강의에서는 페이지를 프리미엄 가입자만 볼 수 있도록 제한할 것입니다. 그렇게 하려면 페이지 편집으로 이동하여 페이지 편집기 상단의 "이 콘텐츠 제한" 상자에서 구독 수준의 구성원을 선택합니다. 그런 다음 "특정 구독 수준의 구성원" 옵션을 선택합니다. 그런 다음 "프리미엄"을 선택하십시오. 이제 프리미엄 구독이 있는 사용자만 해당 페이지에 액세스할 수 있습니다.

페이지를 업데이트하여 변경 사항을 저장하십시오.

제한된 콘텐츠에 대한 리디렉션 페이지 변경

사용자가 제한된 콘텐츠에 액세스하려고 하면 사용자를 특정 페이지로 리디렉션할 수 있습니다. 사용자가 등록하여 코스에 액세스할 수 있기를 원하므로 사용자를 등록 페이지로 리디렉션하는 것이 좋습니다. 그렇게 하려면 WordPress 대시보드로 이동하여 제한 > 설정으로 이동한 다음 기타 탭을 클릭합니다. 페이지 리디렉션 옵션을 찾아 드롭다운 입력 상자에서 페이지 등록을 선택합니다.

저장 옵션

이제 구독하지 않은 사용자가 제한된 페이지에 액세스하려고 할 때마다 자동으로 등록 페이지로 리디렉션됩니다.

정말 빠르게 테스트할 수 있습니다. 페이지를 저장하고 시크릿 브라우저에서 페이지를 열어 아직 등록되지 않은 사용자에게 표시되는 내용을 확인하세요.

참고: 원하는 경우 이 사용 사례에 대한 추가 등록 페이지를 만들어 "죄송합니다. 현재 이 콘텐츠에 액세스할 수 없습니다. 아래에서 등록하세요."와 같은 보다 구체적인 클릭 유도문안을 포함할 수 있습니다. 그 아래의 등록 양식과 함께.

결제 게이트웨이 추가

이 시점에서 지불 게이트웨이가 Restrict Content Pro와 통합되었는지 확인하고 싶을 것입니다. 제한 > 설정 으로 이동한 다음 지불 탭을 클릭하면 됩니다. 여기에서 활성화하려는 게이트웨이를 선택하고 게이트웨이를 통합하는 데 필요한 정보를 입력할 수 있습니다. Stripe 및 Paypal을 포함하여 선택할 수 있는 9가지 옵션이 있습니다.

이러한 설정과 관련된 세부 사항은 다루지 않겠지만 제 조언은 결제 게이트웨이가 제대로 작동하는지 확인하고 테스트하는 것입니다. 돈을 잃고 싶지 않습니다.

이메일 알림 사용자 정의

Restrict Content Pro를 사용하면 새 회원이 등록할 때마다 새 회원과 관리자 모두에 대한 알림 이메일을 사용자 정의할 수 있습니다. 사용자가 첫 번째 수업에 대한 링크로 과정을 시작하도록 권장하는 좋은 클릭 유도문안을 이메일 본문에 포함하여 이 옵션을 활용하십시오. 제한 > 설정 으로 이동하여 이메일 탭을 클릭하여 이메일 설정 을 찾을 수 있습니다.

선택적 이메일 마케팅 통합

회원이 등록할 때 추가하려는 Mailchimp 또는 Aweber 계정이 있을 수 있습니다. Restrict Content Pro 플러그인에서 사용할 수 있는 많은 추가 기능 중 하나를 사용하여 이를 수행할 수 있습니다. 제한 > 추가 기능으로 이동하여 원하는 이메일 플랫폼을 찾으면 됩니다.

지금 무엇을?

이제 전자 코스 웹사이트를 설정했으므로 각 페이지에 대한 모든 콘텐츠 설정, 버튼에 URL 추가, 기타 여러 조정을 완료해야 합니다. 하지만 기반은 마련됐다. 이를 통해 쉽게 구축할 수 있는 플랫폼을 설정할 수 있기를 바랍니다.

마지막 생각들

WordPress의 세계에 있는 모든 훌륭한 도구를 사용하면 온라인 과정을 매우 쉽게 시작하고 실행할 수 있다고 주장할 수 있습니다. 그러나 디자인의 과제가 있습니다. 디자인이 자신의 강점이 아니라면 해당 사이트를 보기 좋게 만드는 것이 쉽지 않습니다. 다행히도 "Learning Management Layout Pack"과 같은 미리 만들어진 Divi 레이아웃은 디자인 문제에 대한 훌륭한 솔루션을 제공합니다. 레이아웃은 상자에서 꺼내자마자 기능적이고 아름답습니다.

그러나 아름다운 레이아웃을 기능적인 온라인 과정으로 변환하는 데 적합한 플러그인을 찾는 문제가 있습니다. 다양한 수준의 비용과 복잡성을 지닌 훌륭한 멤버십 플러그인과 학습 관리 시스템이 많이 있습니다. 이 게시물의 목표는 저렴한 비용으로 간단한 회원 자격을 갖춘 멋진 e-코스 사이트를 구축하고 운영하는 것이었습니다. 무료 플러그인을 사용하여 이것을 만들고자 하는 분들에게 실망을 드려 죄송합니다. 나는 무료 플러그인에 관한 모든 것이지만 최종 결과는 내 생각에 모든 페니 가치가 있기 때문에 이 튜토리얼에서는 Pro 버전을 사용하는 것이 가장 좋다고 생각했습니다.

나는 당신의 의견을 듣기를 기대합니다

건배!