로그인한 사용자에게만 Divi의 댓글 모듈을 표시하는 방법

모든 블로그의 댓글 섹션은 훌륭한 토론의 장소가 될 수 있습니다. 그러나 온라인에서 커뮤니티를 구축하고 싶을 때가 올 수 있습니다. Divi 조건 옵션 기능을 사용하면 블로그에 속하지 않은 사용자가 게시물에 댓글을 달지 못하게 할 수 있습니다. 이는 회원 전용 커뮤니티나 회원 사이트의 특혜로 활용될 수 있습니다.

이 튜토리얼에서는 로그인한 사용자에게만 Divi의 댓글 모듈을 표시하는 방법을 보여드리겠습니다. 이를 통해 커뮤니티와 직접 상호 작용할 수 있습니다! 이 Divi 튜토리얼의 기반으로 Film Lab 블로그 게시물 템플릿을 사용하겠습니다.

회원 전용 댓글 섹션을 만드는 방법

Divi의 조건 기능을 사용하면 모듈, 행, 열 및 섹션이 상호 작용할 수 있는 매개 변수 집합을 선택할 수 있습니다. 우리의 경우에는 사용자의 로그인 상태에 따라 표시 조건을 설정하려고 합니다. 다음은 회원 전용 댓글 섹션을 구현하기 위해 이 튜토리얼에서 수행할 단계에 대한 요약입니다.

1. 블로그 게시물 템플릿을 Divi 테마 빌더에 업로드하세요(또는 블로그 템플릿을 만드세요!)
2. 로그인 모듈이 포함된 회원 전용 댓글 섹션을 만드세요.
3. 로그인 모듈이 포함된 행에 대한 표시 조건 활성화
4. 댓글 모듈이 포함된 행에 대한 표시 조건을 활성화합니다.
5. 시크릿 창에서 템플릿 저장 및 테스트

이전: 모두에게 자유로운 댓글 섹션

회원 전용 댓글 섹션이 없는 Film Lab 블로그 게시물 템플릿의 모습은 다음과 같습니다. 누구나 블로그 게시물을 방문하여 읽고 댓글 섹션과 상호 작용할 수 있습니다.

이후: 회원 전용 댓글 섹션

이제 Divi의 조건 옵션을 사용하여 로그인 모듈을 표시할 수 있습니다. 사용자가 로그인하면 댓글 모듈과 상호 작용할 수 있습니다. 로그인한 사용자가 아니면 댓글을 보거나 제출할 수 없습니다.

블로그 게시물 템플릿 설치

회원 전용 댓글 섹션을 만들기 전에 사용할 템플릿을 다운로드해야 합니다. 여기에서 Film Lab 블로그 게시물 템플릿을 다운로드할 수 있습니다.

Divi 테마 빌더로 이동

템플릿을 업로드하려면 WordPress 웹사이트 백엔드에 있는 Divi Theme Builder로 이동하세요.

웹사이트 템플릿 업로드

그러면 오른쪽 상단에 두 개의 화살표가 있는 아이콘이 표시됩니다. 아이콘을 클릭하세요.

가져오기 탭으로 이동하여 이 게시물에서 다운로드할 수 있는 JSON 파일을 업로드한 후 'Divi 테마 빌더 템플릿 가져오기'를 클릭하세요.

Divi 테마 빌더 변경 사항 저장

파일을 업로드하면 모든 게시물에 새 본문 영역이 할당된 새 템플릿이 표시됩니다. 템플릿을 활성화하려는 즉시 Divi 테마 빌더 변경 사항을 저장하세요.

템플릿 수정

게시물 템플릿 열기

이제 템플릿이 설치되어 사이트의 모든 블로그 게시물에 할당되었으므로 회원 전용 댓글 섹션 구축을 시작할 수 있습니다. 템플릿을 여는 것부터 시작합니다.

로그인 모듈에 대한 새 행 추가

이 템플릿의 댓글 모듈과 동일한 섹션 내에 새 행을 추가하세요 . 더 쉽게 하려면 와이어프레임 보기로 전환하세요 . 그런 다음 녹색 더하기 아이콘을 클릭하여 주석 모듈이 포함된 행 위에 새 행을 추가합니다.

다음으로 행에 하나의 열을 추가하겠습니다.

로그인 모듈 추가

새 행에는 로그인 모듈을 추가하겠습니다. 우리는 사용자가 우리 웹사이트에 로그인하여 회원 전용 댓글 섹션에 액세스하기를 원합니다. 모듈 모달 상자를 스크롤하여 다음을 볼 수 있습니다.

로그인 모듈에 텍스트 추가

로그인 모듈에 제목을 추가해 보겠습니다. 또한 이 제목을 사용하여 사용자에게 댓글 섹션에 액세스하기 전에 로그인하도록 요청할 것입니다.

스타일 로그인 모듈

이제 Film Lab 블로그 템플릿의 브랜딩에 맞게 새로 추가된 로그인 모듈의 스타일을 지정하겠습니다.

로그인 모듈의 배경 설정

페인트통 아이콘을 클릭하세요. 그러면 모듈 배경에 #ff4125의 단색 채우기 색상이 추가됩니다. 다음으로 배경색 사용 토글을 클릭하세요 .

배경

• 배경색: #ff4125
• 배경색 사용: 예

필드 스타일 지정

필드의 경우 검정색 텍스트가 포함된 배경에 섹션과 동일한 색상을 사용합니다.

필드: 배경 및 텍스트 스타일 지정

• 필드 배경 색상: #eae9e4
• 필드 텍스트 색상: #000000
• 필드 초점 배경 색상: #eae9e4
• 필드 초점 텍스트 색상: #000000

또한 필드에 둥근 모서리가 없는 테두리를 지정합니다. 이는 댓글 모듈의 스타일을 모방합니다.

필드: 배경 및 텍스트 스타일 지정

• 필드 둥근 모서리: 0
• 필드 테두리 스타일: 모두
• 필드 테두리 너비: 1px
• 필드 테두리 색상: #000000
• 필드 테두리 스타일: 단색

제목 스타일 지정

제목은 템플릿 전체에 사용된 것과 동일한 글꼴을 사용하며 흰색입니다.

제목 텍스트

• 제목 제목 텍스트: H2
• 타이틀 폰트: Mulish
• 제목 텍스트 색상: #ffffff

다양한 화면 크기에서 제목이 보기 좋게 보이도록 반응형 크기를 추가했습니다.

제목 텍스트: 글꼴 크기

• 제목 텍스트 글꼴 크기(데스크톱): 64px
• 제목 텍스트 글꼴 크기(태블릿): 48px
• 제목 텍스트 글꼴 크기(모바일러): 48px

버튼 스타일 지정

시간을 절약하려면 댓글 모듈의 버튼 설정을 복사하여 로그인 모듈에 붙여넣으세요. 댓글 모듈의 설정 아이콘을 클릭하세요.

디자인 탭으로 이동합니다 . 버튼 탭까지 아래로 스크롤합니다. 버튼 탭을 마우스 오른쪽 버튼으로 클릭 하고 버튼 스타일 복사 를 클릭합니다.

그런 다음 주석 모듈을 종료하십시오. 톱니바퀴 아이콘을 클릭하여 로그인 모듈로 들어갑니다.

다시 디자인 탭을 클릭 하고 버튼 탭까지 아래로 스크롤합니다 . 그런 다음 마우스 오른쪽 버튼을 클릭하고 버튼 스타일 붙여넣기를 선택합니다 . 짜잔! 이 버튼은 댓글 모듈 내의 버튼과 가깝게 보입니다.

이제 로그인 모듈의 버튼은 댓글 모듈 버튼의 스타일과 거의 일치합니다. 응 우리!

로그인 모듈 행에 표시 조건 적용

로그인 모듈의 스타일을 지정하면 이제 첫 번째 표시 조건을 제자리에 배치할 수 있습니다. 표시 조건은 회원 전용 댓글 섹션을 만드는 데 중요합니다. Divi는 이를 가능하게 하는 디스플레이 조건 기능 내에서 다양한 옵션을 제공합니다. 로그인 모듈이 포함된 행에 대한 설정을 입력하려면 기어 아이콘을 클릭하세요 .

행 설정 내에서 고급 탭을 클릭한 다음 조건 탭을 클릭합니다 . 그런 다음 더하기 아이콘 을 클릭하세요 .

더하기 아이콘을 클릭하면 이 행을 표시하거나 숨길 조건에 대한 다양한 옵션이 제공됩니다. 사용자 상태까지 아래로 스크롤한 다음 로그인 상태를 클릭합니다.

이 작업이 완료되면 또 다른 모달 상자를 받게 됩니다. 이 모달 상자 내에서 User is Logged In이라는 드롭다운을 클릭 하고 이를 User is Logged Out 으로 변경 하려고 합니다. 이것이 회원 전용 댓글 섹션에 기여하는 것입니다. 우리는 사람들이 사이트 회원이 되기를 원하므로 댓글 섹션에 액세스하려면 유효한 로그인 자격 증명이 있어야 합니다. 유효한 자격 증명이 없으면 당사 사이트의 댓글 섹션에 액세스할 수 없습니다.

표시 조건

• 다음 경우에만 표시: 사용자가 로그아웃된 경우
• 활성화 조건: 예

표시 조건을 선택한 후에는 모달 상자의 녹색 확인 버튼을 클릭하여 변경 사항을 저장하십시오. 캐싱 플러그인에 관한 알림을 확인하세요.

신규 회원 전용 댓글란 표시 조건 활성화

이 튜토리얼의 마지막 부분은 주석 모듈을 포함하는 행에 대한 표시 조건을 설정하는 것입니다. 이렇게 하려면 톱니바퀴 아이콘을 클릭하여 행 설정에 액세스하세요.

로그인 모듈이 포함된 행과 마찬가지로 행 설정 내부에서 고급 탭을 클릭한 다음 조건 탭을 클릭 하고 더하기 아이콘을 눌러 표시 조건을 추가합니다.

댓글 모듈이 포함된 행의 경우 사용자가 로그아웃한 경우에만 표시되는 대신 사용자가 로그인한 경우에만 표시되기를 원합니다.

A 완성된 회원 전용 댓글 섹션

이제 주석 모듈과 로그인 모듈이 있는 행 모두에 표시 조건을 추가했으므로 빠른 테스트를 수행할 수 있습니다. 시크릿 모드 또는 비공개 탐색 창에서 사이트의 블로그 게시물을 방문하세요.

우리는 개인 브라우저나 시크릿 창을 사용하여 표시 조건을 테스트합니다. 창은 웹 사이트 내에서 탐색하는 동안 일시적으로 로그아웃되기 때문입니다. 일반 탐색으로 돌아가 웹사이트에 *로그인*하면 댓글 섹션이 표시됩니다. 또는 WordPress 웹사이트에서 로그아웃하여 완성된 작업을 볼 수 있습니다! 댓글 모듈에 대한 이 튜토리얼을 진행하는 동안 이는 기본적으로 Divi 내의 모든 모듈, 행, 열 또는 섹션에 적용될 수 있습니다. 추가 플러그인이 필요하지 않습니다. 시간을 내어 다양한 디스플레이 설정을 혼합하고 일치시켜서 결과를 확인하십시오.

결론적으로

WordPress 웹사이트에 커뮤니티를 만들면 귀하의 웹사이트를 가장 많이 사용하는 사람들의 신뢰를 강화할 수 있습니다. 이를 수행하는 방법은 회원들이 서로 쉽게 상호 작용할 수 있는 회원 전용 댓글 섹션을 만드는 것입니다. Divi에는 이 작업을 쉽게 수행할 수 있는 도구와 기능이 내장되어 있습니다. Divi의 기본 디스플레이 조건을 사용하면 사용자가 서로 상호 작용할 수만 있습니다. 또한 디자인 탭과 Divi의 전체 편집 도구를 사용하여 댓글 모듈의 스타일을 쉽게 지정할 수 있습니다. 민첩한 비공개 커뮤니티를 구축하기 위해 Divi를 사용할 때 멤버십 플러그인을 설치할 필요가 없습니다. Divi 핵심의 특정 기능을 활성화하면 로그인한 사용자 댓글 섹션을 만들고 온라인 커뮤니티를 강화하며 WordPress 웹사이트를 가볍고 민첩하게 유지할 수 있습니다. 귀하의 웹사이트에 간단한 멤버십 기능을 추가하기 위한 플러그인을 찾기 전에 오늘 귀하의 웹사이트 측면에 대한 Divi의 표시 조건을 확인해 보십시오.