주석 모듈을 사용하면 형태 페이지의 아무 곳에나 댓글을 달 수 있습니다. Divi Builder 없이 표준 페이지나 게시물을 사용하는 경우 게시물 콘텐츠 아래에 댓글이 계속 표시됩니다.

Divi Builder가 활성화되면 댓글 모듈을 페이지의 아무 곳에나 배치할 수 있으며 형태 주석은 모듈 위치에 나타납니다. 이렇게 하면 댓글을 더 많이 제어할 수 있습니다!

페이지에 주석 모듈을 추가하는 방법

페이지에 댓글 모듈을 추가하려면 먼저 Divi Builder에 액세스해야 합니다. 일단 디비 테마 웹사이트에 설치하면 버튼이 표시됩니다. Divi Builder 사용 새 페이지를 만들 때마다 게시자 위에

이 버튼을 클릭하면 모든 Divi Builder 모듈에 액세스 할 수있는 Divi Builder가 활성화됩니다. 그런 다음 버튼을 클릭하십시오 비주얼 빌더 사용 시각적 모드에서 생성기를 시작합니다. 버튼을 클릭 할 수도 있습니다. 비주얼 빌더 사용 WordPress 대시 보드에 로그인 한 경우 업스트림 웹 사이트를 탐색 할 때

Visual Builder에 들어가면 회색 더하기 버튼을 클릭하여 페이지에 새 모듈을 추가 할 수 있습니다. 새 모듈은 행 내부에만 추가 할 수 있습니다. 새 페이지를 시작하는 경우 먼저 페이지에 행을 추가해야합니다.

모듈 목록에서 주석 모듈을 찾아 클릭하여 페이지에 추가하십시오. 모듈 목록을 검색 할 수 있습니다. 즉, "comments"라는 단어를 입력 한 다음 Enter를 클릭하여 자동으로 주석 모듈을 찾아 추가 할 수 있습니다! 모듈이 추가되면 모듈 옵션 목록이 표시됩니다. 이러한 옵션은 세 가지 주요 그룹으로 구분됩니다. 내용 , 임신 et 고급 .

블로그 게시물에 댓글 섹션을 추가하는 사용 사례

이 예제에서는 Visual Builder를 사용하여 게시물에 주석 모듈을 삽입하고 서식을 지정하는 것이 얼마나 쉬운 지 보여 드리겠습니다.

댓글 섹션은 게시물 콘텐츠 아래 및 XNUMX 열 바닥 글 섹션 위에 추가됩니다. 그러나 주석 모듈은 어디에나 추가 될 수 있습니다.

Visual Builder를 사용하여 게시물 콘텐츠가 포함 된 모듈 아래에 전체 너비 행 (1 열)이있는 표준 섹션을 추가합니다. 그런 다음 주석 모듈을 행에 추가하십시오.

다음과 같이 주석 설정을 업데이트하십시오.

콘텐츠 옵션

필드의 배경색 : #ffffff

디자인 옵션

텍스트의 색 : 진한 색
코멘트 경찰 : 태평양 표준시
설명 글자 크기 : 20px
댓글 텍스트 색상 :
경찰 분야 : 태평양 표준시
필드 글꼴 크기 : 20px
메타 글꼴 : PT Sans, Italic, 대문자
메타 글꼴 크기 : 16px
필드 테두리 반경 : 0px
테두리 사용 : 예
국경의 색상 : #aaaaaa
테두리의 너비 : 1px
버튼에 사용자 정의 스타일 사용 : 예
텍스트 크기 버튼 : 20
버튼 텍스트 색상 : #ffffff
버튼 배경색 : # 02b875
국경의 너비
버튼 : 3px

게시물 메타 정보 및 아바타 이미지와 같은 일부 항목은 본인이나 다른 사람이 게시물에 댓글을 추가 할 때만 나타납니다.

그게 다야. 이 모듈의 장점은 댓글 섹션 뒤에 추가 콘텐츠를 추가할 수 있다는 것입니다(예: 클릭 유도 문안 또는 연락처 양식) 기본 WordPress로는 쉽지 않습니다.

Comment 모듈의 내용 옵션

콘텐츠 탭에는 텍스트, 이미지 및 아이콘과 같은 모듈의 모든 콘텐츠 요소가 있습니다. 제어하는 모든 것 무엇 모듈에이 탭에 항상 나타납니다.

작성자 아바타 표시

이 옵션을 비활성화하면 댓글 목록에서 댓글 작성자의 아바타가 제거됩니다.

답변 버튼 표시

답변 표시 버튼이 비활성화되면 사용자는 댓글 목록의 댓글에 응답 할 수 없습니다.

의견보기

비활성화하면 총 댓글 수가 댓글 목록 위에 더 이상 표시되지 않습니다.

필드의 배경색

댓글 모듈에는 다음이 표시됩니다. 형태 다양한 입력 필드로 구성된 댓글입니다. 기본적으로 이러한 입력 필드의 배경색은 회색입니다. 색상 선택기에서 사용자 정의 색상을 선택하여 이 색상을 변경할 수 있습니다.

관리 라벨

쉽게 식별 할 수 있도록 생성기의 모듈 레이블이 변경됩니다. Visual Builder에서 WireFrame보기를 사용할 때 이러한 레이블은 Divi Builder 인터페이스의 모듈 블록에 나타납니다.

의견 디자인 옵션

디자인 탭에서 글꼴, 색상, 크기 및 간격과 같은 모든 모듈 스타일 옵션을 찾을 수 있습니다. 이 탭에서는 모듈의 모양을 수정할 수 있습니다. 각 Divi 모듈에는 거의 모든 것을 조정할 수있는 긴 디자인 설정 목록이 있습니다.

텍스트 색상

여기에서 텍스트 값을 선택할 수 있습니다. 어두운 배경으로 작업하는 경우 텍스트가 강조 표시되어야합니다. 밝은 배경으로 작업하는 경우 텍스트가 어두워 야합니다.

주석 글꼴

드롭 다운 메뉴에서 원하는 글꼴을 선택하여 댓글의 글꼴을 변경할 수 있습니다. Divi에는 Google Fonts가 제공하는 멋진 글꼴이 많이 있습니다. 기본적으로 Divi는 페이지의 모든 텍스트에 Open Sans 글꼴을 사용합니다. 굵게, 기울임 꼴, 모두 대문자 및 밑줄 옵션을 사용하여 텍스트 스타일을 사용자 정의 할 수도 있습니다.

댓글 글꼴 크기

여기에서 댓글 글꼴의 크기를 조정할 수 있습니다. 간격 슬라이더를 끌어 텍스트 크기를 늘리거나 줄이거 나 슬라이더 오른쪽에있는 입력 필드에 원하는 텍스트 크기 값을 직접 입력 할 수 있습니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

댓글의 텍스트 색상

기본적으로 Divi의 모든 텍스트 색상은 흰색 또는 진한 회색으로 나타납니다. 필드의 텍스트 색상을 변경하려면이 옵션을 사용하여 색상 선택기에서 원하는 색상을 선택합니다.

주석 문자의 간격

문자 간격은 각 문자 사이의 간격에 영향을줍니다. 주석 텍스트의 각 문자 사이의 간격을 늘리려면 간격 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

주석 행 높이

줄 높이는 주석 텍스트의 각 줄 사이의 간격에 영향을줍니다. 각 줄 사이의 간격을 늘리려면 간격 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 공간 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

경찰 분야

드롭 다운 메뉴에서 원하는 글꼴을 선택하여 텍스트의 글꼴을 변경할 수 있습니다. Divi에는 Google Fonts가 제공하는 멋진 글꼴이 많이 있습니다. 기본적으로 Divi는 페이지의 모든 텍스트에 Open Sans 글꼴을 사용합니다. 굵게, 기울임 꼴, 모두 대문자 및 밑줄 옵션을 사용하여 텍스트 스타일을 사용자 정의 할 수도 있습니다.

필드 글꼴 크기

여기에서 필드 텍스트의 크기를 조정할 수 있습니다. 간격 슬라이더를 드래그하여 텍스트 크기를 늘리거나 줄이거 나 슬라이더 오른쪽에있는 입력 필드에 원하는 텍스트 크기 값을 직접 입력 할 수 있습니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

필드 텍스트 색상

기본적으로 Divi의 모든 텍스트 색상은 흰색 또는 진한 회색으로 나타납니다. 필드의 텍스트 색상을 변경하려면이 옵션을 사용하여 색상 선택기에서 원하는 색상을 선택합니다.

필드 글자의 간격

문자 간격은 각 문자 사이의 간격에 영향을줍니다. 필드에서 텍스트의 각 문자 사이의 간격을 늘리려면 간격 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

필드 행 높이

줄 높이는 필드의 각 텍스트 줄 사이의 간격에 영향을줍니다. 각 행 사이의 간격을 늘리려면 간격 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

Meta Font

드롭 다운 메뉴에서 원하는 글꼴을 선택하여 메타 텍스트의 글꼴을 변경할 수 있습니다. Divi에는 Google Fonts가 제공하는 멋진 글꼴이 많이 있습니다. 기본적으로 Divi는 페이지의 모든 텍스트에 Open Sans 글꼴을 사용합니다. 굵게, 기울임 꼴, 모두 대문자 및 밑줄 옵션을 사용하여 텍스트 스타일을 사용자 정의 할 수도 있습니다.

메타 글꼴 크기

여기에서 메타 텍스트의 크기를 조정할 수 있습니다. 간격 슬라이더를 끌어 텍스트 크기를 늘리거나 줄이거 나 슬라이더 오른쪽에있는 입력 필드에 원하는 텍스트 크기 값을 직접 입력 할 수 있습니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

메타 텍스트의 색상

기본적으로 Divi의 모든 텍스트 색상은 흰색 또는 진한 회색으로 나타납니다. 메타 텍스트의 색상을 변경하려면이 옵션을 사용하여 색상 선택기에서 원하는 색상을 선택하십시오.

메타 문자의 간격

문자 간격은 각 문자 사이의 간격에 영향을줍니다. 메타 텍스트의 각 문자 사이의 간격을 늘리려면 간격 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

메타 라인의 높이

줄 높이는 메타 텍스트의 각 줄 사이의 간격에 영향을줍니다. 각 줄 사이의 간격을 늘리려면 간격 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 공간 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

필드 테두리 반지름

테두리의 반경은 각 입력 필드의 모서리가 둥글게되는 방식에 영향을줍니다. 값이 클수록 각 입력 필드의 네 모서리가 더 둥글게됩니다. 값을 0으로 줄여 직사각형 입력 필드를 만들거나 값을 크게 늘려 원형 모서리가있는 입력 필드를 만들 수 있습니다.

국경을 사용하십시오.

이 옵션을 활성화하면 모듈 주위에 테두리가 표시됩니다. 이 경계는 다음 조건부 매개 변수를 사용하여 사용자 정의 할 수 있습니다.

국경의 색

이 옵션은 테두리 색상에 영향을줍니다. 색상 선택기에서 사용자 정의 색상을 선택하여 테두리에 적용합니다.

테두리의 너비

기본적으로 테두리는 1 픽셀 너비입니다. 범위 슬라이더를 드래그하거나 슬라이더 오른쪽의 입력 필드에 사용자 정의 값을 입력하여이 값을 늘릴 수 있습니다. 사용자 지정 측정 단위를 지원합니다. 즉, 기본 단위를 "px"에서 em, vh, vw 등과 같은 다른 것으로 변경할 수 있습니다.

테두리 스타일

테두리는 단색, 점선, 점선, 이중, 홈, 융기, 삽입 및 시작을 포함하여 XNUMX 가지 스타일을 지원합니다. 드롭 다운 메뉴에서 원하는 스타일을 선택하여 테두리에 적용합니다.

맞춤 여백

여백은 모듈 외부, 모듈과 다음 요소 사이, 위, 아래 또는 왼쪽과 오른쪽에 추가되는 공간입니다. 모듈의 네면 중 하나에 사용자 지정 여백 값을 추가 할 수 있습니다. 사용자 정의 여백을 제거하려면 입력 필드에서 추가 된 값을 제거하십시오. 기본적으로 이러한 값은 픽셀 단위로 측정되지만 입력 필드에 사용자 지정 측정 단위를 입력 할 수 있습니다.

맞춤 패딩

패딩은 모듈 내부, 모듈의 가장자리와 내부 요소 사이에 추가되는 공간입니다. 모듈의 네면 중 하나에 사용자 지정 패딩 값을 추가 할 수 있습니다. 사용자 정의 여백을 제거하려면 입력 필드에서 추가 된 값을 제거하십시오. 기본적으로 이러한 값은 픽셀 단위로 측정되지만 입력 필드에 사용자 지정 측정 단위를 입력 할 수 있습니다.

버튼에 사용자 정의 스타일 사용

이 옵션을 활성화하면 모듈 버튼의 모양을 변경하는 데 사용할 수있는 다양한 버튼 사용자 정의 설정이 표시됩니다.

버튼 텍스트 크기

이 설정은 버튼의 텍스트 크기를 늘리거나 줄이는 데 사용할 수 있습니다. 버튼은 텍스트 크기가 증가하거나 감소함에 따라 크기가 조정됩니다.

버튼 텍스트 색상

기본적으로 버튼은 테마 사용자 정의 프로그램에 정의 된대로 테마의 강조 색상을 사용합니다. 이 옵션을 사용하면이 모듈의 버튼에 사용자 정의 텍스트 색상을 할당 할 수 있습니다. 색상 선택기를 사용하여 사용자 정의 색상을 선택하여 버튼 색상을 변경합니다.

버튼 배경색

기본적으로 버튼에는 투명한 배경색이 있습니다. 색상 선택기에서 원하는 배경색을 선택하여 변경할 수 있습니다.

단추 테두리의 너비

모든 Divi 버튼에는 기본적으로 2px 테두리가 있습니다. 이 테두리는이 설정을 사용하여 늘리거나 줄일 수 있습니다. 0 값을 입력하여 테두리를 제거 할 수 있습니다.

단추 테두리 색

기본적으로 단추 테두리는 테마 사용자 정의 프로그램에 정의 된대로 테마의 강조 색상을 사용합니다. 이 옵션을 사용하면이 모듈의 버튼에 사용자 정의 테두리 색상을 할당 할 수 있습니다. 색상 선택기를 사용하여 사용자 정의 색상을 선택하여 버튼 테두리의 색상을 변경합니다.

반경 테두리 버튼

테두리의 반경은 버튼의 모서리가 둥글게되는 방식에 영향을줍니다. 기본적으로 Divi의 버튼에는 모서리를 3 픽셀 씩 둥글게하는 작은 반경이 있습니다. 0으로 줄여 정사각형 버튼을 만들거나 크게 늘려 가장자리가 원형 인 버튼을 만들 수 있습니다.

버튼 문자의 간격

문자 간격은 각 문자 사이의 간격에 영향을줍니다. 버튼 텍스트의 각 문자 사이의 간격을 늘리려면 범위 슬라이더를 사용하여 간격을 조정하거나 슬라이더 오른쪽의 입력 필드에 원하는 간격 크기를 입력합니다. 입력 필드는 다양한 측정 단위를 지원합니다. 즉, 크기에 따라 "px"또는 "em"을 입력하여 단위 유형을 변경할 수 있습니다.

경찰 버튼

드롭 다운 메뉴에서 원하는 글꼴을 선택하여 텍스트의 글꼴을 변경할 수 있습니다. Divi에는 Google Fonts가 제공하는 멋진 글꼴이 많이 있습니다. 기본적으로 Divi는 페이지의 모든 텍스트에 Open Sans 글꼴을 사용합니다. 굵게, 기울임 꼴, 모두 대문자 및 밑줄 옵션을 사용하여 텍스트 스타일을 사용자 정의 할 수도 있습니다.

버튼 아이콘 추가

이 설정을 비활성화하면 버튼에서 아이콘이 제거됩니다. 기본적으로 모든 Divi 버튼은 호버링 할 때 화살표 아이콘을 표시합니다.

버튼 아이콘

아이콘이 활성화 된 경우이 설정을 사용하여 버튼에 사용할 아이콘을 선택할 수 있습니다. Divi에는 선택할 수있는 여러 아이콘이 있습니다.

버튼 아이콘 색상

이 설정을 조정하면 버튼에 표시되는 아이콘의 색상이 변경됩니다. 기본적으로 아이콘 색상은 버튼 텍스트 색상과 동일하지만이 설정을 사용하면 색상을 독립적으로 조정할 수 있습니다.

버튼 아이콘 위치

버튼의 아이콘을 버튼의 왼쪽 또는 오른쪽에 표시하도록 선택할 수 있습니다.

버튼의 호버 아이콘 만 표시

기본적으로 버튼 아이콘은 마우스를 올려 놓을 때만 표시됩니다. 아이콘이 항상 나타나도록하려면이 설정을 끄십시오.

버튼 플라이 오버 텍스트 색상

방문자의 마우스를 버튼 위로 가져 가면이 색상이 사용됩니다. 색상은 이전 설정에서 정의한 기본 색상에서 변경됩니다.

마우스의 배경색

방문자의 마우스를 버튼 위로 가져 가면이 색상이 사용됩니다. 색상은 이전 설정에서 정의한 기본 색상에서 변경됩니다.

호버 테두리 색상

방문자의 마우스를 버튼 위로 가져 가면이 색상이 사용됩니다. 색상은 이전 설정에서 정의한 기본 색상에서 변경됩니다.

호버링 반경 버튼

방문자의 마우스로 버튼을 가리키면이 값이 사용됩니다. 값은 이전 설정에서 정의 된 기본 값에서 변경됩니다.

간격 버튼 롤오버 문자

방문자의 마우스로 버튼을 가리키면이 값이 사용됩니다. 값은 이전 설정에서 정의 된 기본 값에서 변경됩니다.

주석 고급 옵션

고급 탭에는 사용자 정의 CSS 및 HTML 속성과 같이 숙련 된 웹 디자이너가 유용하다고 생각할 수있는 옵션이 있습니다. 여기에서 모듈의 여러 요소에 사용자 정의 CSS를 적용 할 수 있습니다. 또한 사용자 정의 CSS 클래스 및 ID를 모듈에 적용 할 수 있으며 이는 하위 테마의 style.css 파일에서 모듈을 사용자 정의하는 데 사용할 수 있습니다.

CSS ID

이 모듈에 사용할 선택적 CSS ID를 입력하십시오. ID를 사용하여 사용자 정의 CSS 스타일을 만들거나 페이지의 특정 섹션에 연결할 수 있습니다.

CSS 클래스

이 모듈에 사용할 선택적 CSS 클래스를 입력합니다. CSS 클래스를 사용하여 사용자 정의 CSS 스타일을 만들 수 있습니다. 공백으로 구분하여 여러 클래스를 추가할 수 있습니다. 이 클래스는 귀하의 디비 테마 Divi 테마 옵션 또는 Divi Builder 페이지 설정을 사용하여 페이지 또는 웹 사이트에 추가하는 하위 또는 사용자 정의 CSS.

맞춤 CSS

사용자 정의 CSS는 모듈 및 모듈의 내부 요소에 적용 할 수도 있습니다. 사용자 정의 CSS 섹션에는 각 요소에 직접 CSS를 추가 할 수있는 텍스트 필드가 있습니다. 이러한 설정의 CSS 항목에는 이미 스타일 태그가 포함되어 있습니다. 따라서 세미콜론으로 구분 된 CSS 규칙을 입력하기 만하면됩니다.

시계

이 옵션을 사용하면 모듈이 표시되는 장치를 제어 할 수 있습니다. 태블릿, 스마트 폰 또는 데스크톱에서 개별적으로 모듈을 비활성화하도록 선택할 수 있습니다. 다른 장치에서 다른 모드를 사용하거나 페이지에서 일부 요소를 제거하여 모바일 디자인을 단순화하려는 경우 유용합니다.

이것으로이 튜토리얼입니다.