블로그 게시물의 댓글 섹션에서는 독자가 서로 상호 작용할 수 있습니다. 또한 사용자가 댓글을 읽고 있는 사람들과 대화를 시작할 수 있습니다. 많은 혼란을 야기하는 특별한 게시물의 경우 댓글 섹션이 상당히 혼란스러울 수 있습니다! 긴 댓글 섹션을 더 쉽게 탐색할 수 있는 방법에 대해 생각해 볼 수 있습니다. Divi를 사용하여 스크롤 가능한 댓글을 만들어 보세요!
Divi 댓글 모듈에 스크롤 컨테이너를 추가하면 블로그 독자가 스크롤해야 하는 양을 줄일 수 있습니다. 결과적으로 그들은 귀하의 웹 사이트에서 더 나은 경험을 즐깁니다. 사이트를 구성하는 동안 사용자 경험 고려 사항을 고려하는 것이 중요하며 Divi 에 스크롤 가능한 댓글을 포함하면 독자가 사이트를 더 쉽게 감상할 수 있으며 이는 항상 좋은 일입니다.
댓글이 좋은 이유
과정을 시작하기 전에 일반적인 의견에 대해 논의하는 시간을 갖겠습니다. Divi는 댓글 모듈과 함께 제공됩니다. 이 모듈을 사용하면 웹사이트 방문자가 특정 페이지나 주제에 댓글을 남길 수 있습니다. 또한 플러그인을 사용하면 사이트의 다른 독자가 게시물에 작성한 댓글을 사람들이 볼 수 있습니다. 게시물이 흥미로울 때 독자는 자신의 생각, 아이디어 및 질문을 작성자인 귀하와 공유하기를 원할 수 있습니다. 다음은 우아한 테마 블로그의 예입니다.
블로그 게시물 "WordPress용 최고의 음성 검색 플러그인 3개"에 대한 댓글 섹션입니다. 여러 독자가 피드백, 감사 및 기타 의견을 남겼습니다. 게시물 작성자도 독자들에게 답변했습니다. 이러한 종류의 참여는 독자에게 가치 있는 것을 제공하고 있음을 보여주기 때문에 블로그와 웹 사이트에 좋습니다. 또한 웹 사이트를 사용하고 방문하는 사람들과 더 가까워지는 데 도움이 됩니다. 이제 댓글이 작동하는 것을 보았으므로 Divi의 댓글 모듈을 사용하여 블로그 게시물의 댓글 섹션을 처리하는 방법을 살펴보겠습니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작Divi에서 스크롤 가능한 댓글
이 자습서에서는 Divi의 소프트웨어 레이아웃 팩의 블로그 게시물 템플릿을 사용합니다. 템플릿에 대한 대략적인 개요는 다음과 같습니다.
이 게시물에 대한 댓글이 얼마나 적은지 보셨습니까?? 세로 스크롤 막대를 포함하면 블로그 페이지의 이 섹션을 더 쉽게 탐색할 수 있습니다. 이 자습서에서는 주석 모듈이 있는 행에 세로 스크롤 막대를 추가합니다. 그런 다음 CSS를 사용하여 페이지의 기본 스크롤 막대와 다르게 보이도록 해당 스크롤 막대의 스타일을 지정합니다. Ready? 시작하겠습니다!
Divi의 스크롤 가능한 댓글 자습서
댓글 모듈을 사용하여 Divi에서 스크롤되는 댓글을 만들기 전에 소프트웨어 블로그 게시물 템플릿을 설치해야 합니다. 해당 블로그 게시물의 지침에 따라 블로그 게시물 템플릿을 설치합니다.
댓글 행 설정을 입력합니다.
템플릿을 설치하고 원하는 대로 변경한 후 댓글 모듈이 있는 행으로 이동합니다. 댓글 모듈이 포함된 섹션으로 스크롤합니다. 행(녹색 윤곽선) 위에 마우스를 놓고 기어 아이콘을 선택합니다. 행의 설정 모듈이 열립니다.
행 최대 높이 설정
스타일 지정 또는 스크롤 트리거를 시작하기 전에 먼저 행의 최대 높이를 수정해야 합니다. 이렇게 하려면 디자인 탭을 선택합니다. 그런 다음 크기 조정 탭을 선택합니다. 그런 다음 최대 높이 옵션에 550픽셀 값을 지정합니다.
행 고급 설정 입력
행이 얼마나 높이 올라갈 수 있는지 파악한 후 모달 상자의 고급 탭으로 이동합니다. 스크롤 마법이 여기에서 발생합니다! 고급 탭 아래에 있는 수직 오버플로 옵션을 주시하십시오. 우리는 곧 그것에 대해 돌아갈 것입니다.
세로 오버플로로 세로 스크롤 막대 활성화
수직 오버플로에 도달할 때까지 계속 아래로 스크롤합니다. 드롭다운 메뉴에서 스크롤을 선택합니다.
겹침을 방지하기 위해 패딩 추가
새 스크롤 막대가 댓글 섹션 버튼을 가리지 않도록 행의 오른쪽과 왼쪽에 약간의 공간을 추가합니다. 이렇게 하려면 행 설정 대화 상자의 디자인 탭으로 이동합니다. 간격까지 맨 아래까지 스크롤합니다. 왼쪽 및 오른쪽 패딩 텍스트 필드 사이에 있는 링크 아이콘을 클릭합니다. 행의 양쪽에 55픽셀의 패딩을 추가합니다.
이제 스크롤바에 약간의 여유 공간을 제공했으므로 사용자 지정 CSS로 스크롤바를 꾸밉니다.
행에 CSS ID 추가
행의 고급 탭으로 돌아가 맨 위로 스크롤합니다. 이 예를 위해 CSS ID—를 추가하고 본문 템플릿 설정의 사용자 정의 CSS 영역에서 호출할 scroller—를 추가합니다.
스타일 스크롤 막대에 사용자 정의 CSS 추가
이제 블로그 게시물 템플릿에 대한 사용자 지정 CSS를 입력합니다. 이 템플릿은 Divi Theme Builder 내의 모든 블로그 게시물에 적용되기 때문에 웹 사이트의 각 블로그 게시물에서 CSS가 활성화됩니다. 빌더의 하단 중앙에 있는 보라색 버튼 안에 있는 세 개의 점을 클릭하여 본문 템플릿에 대한 사용자 지정 CSS 설정을 입력합니다. 그런 다음 톱니바퀴 아이콘을 클릭합니다.
Divi에서 스타일 스크롤 가능 주석에 사용자 지정 CSS 추가
스크롤 컨테이너의 스크롤 막대를 사용자 지정하여 브라우저 창의 다른 스크롤 막대에서 눈에 띄도록 하고 싶습니다. 이를 위해 CSS를 사용할 것입니다. 본문 템플릿 설정에 들어가면 고급 탭을 선택합니다. 사용자 정의 CSS 탭까지 아래로 스크롤합니다.
본문 페이지 템플릿의 사용자 정의 CSS 영역에 있으면 다음 CSS 코드를 복사하여 붙여넣습니다.
/* Custom Scrollbar CSS */
/* Firefox */
#scrollie {
scrollbar-width: auto;
scrollbar-color: #000000 #ffffff;
}
/* Chrome, Edge, and Safari */
#scrollie::-webkit-scrollbar {
width: 16px;
}
#scrollie::-webkit-scrollbar-track {
background: #ffffff;
}
#scrollie::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 0px;
border: 3px solid #ffffff;
}
다른 CSS ID를 사용한 경우 이 변경 사항을 반영하도록 웹 사이트의 코드 스니펫을 업데이트해야 합니다. CSS를 수정하거나 추가하여 브랜드 및 웹사이트와 일치하도록 테두리 스타일을 지정할 수 있습니다. 우리의 경우에는 Divi Software Layout Pack의 모양과 어울리도록 평면 디자인을 사용했습니다.
블로그 게시물 템플릿 저장
CSS 변경을 마치면 블로그 페이지 템플릿을 저장해야 합니다. Divi Theme Builder 내에서 하단 메뉴의 오른쪽 하단에 있는 녹색 저장 버튼을 클릭합니다.
기본 설정이 저장되면 블로그의 새로 개선된 댓글 영역으로 이동하십시오!
마무리
Divi 댓글 모듈에 스크롤 컨테이너를 추가하면 댓글 영역의 사용자 경험이 향상됩니다. 사용자 상호 작용은 블로그의 성공에 매우 중요합니다. 댓글 모듈을 스크롤할 수 있게 하여 시청자가 다양한 블로그 콘텐츠를 더 쉽게 즐길 수 있도록 합니다.
