Divi로 웹사이트에 대한 기술 자료를 만드는 방법

웹사이트에 지식 기반이 있다는 것은 고객과 직원 모두에게 매우 귀중한 자산이 될 수 있습니다. 그리고 제대로 수행된다면 지식 기반은 귀하의 비즈니스에 대한 품질 보증의 오랜 특징이 될 수 있습니다. FAQ, 문서, 소프트웨어 매뉴얼, 튜토리얼 등에 대한 훌륭한 솔루션이 될 수 있습니다.

이 튜토리얼에서는 Divi를 사용하여 웹사이트에 지식 기반을 추가하는 방법을 보여 드리겠습니다. 이를 위해 지식 기반 페이지를 쉽게 구성하고 스타일을 지정할 수 있는 몇 가지 유용한 구성 옵션이 있는 Echo 지식 기반 플러그인(무료 버전)을 사용할 것입니다. 또한 Divi Builder를 사용하여 지식 기반 메인 페이지와 기사 페이지의 스타일을 지정하는 방법도 보여 드리겠습니다.

엿보기

다음은 우리가 구축할 내용을 살짝 살펴보겠습니다.

기본 기술 자료 페이지

샘플 기사 페이지

이 튜토리얼에 필요한 것

• Divi 테마(설치 및 활성)
• Echo 지식 기반 플러그인(설치 및 활성)
• 디지털 제품 레이아웃 팩(Divi Builder 내에서 무료로 사용 가능)

Divi에서 지식 기반 게시물 유형 활성화

Divi를 사용하면 특정 타사 사용자 정의 게시물 유형에 대한 지원을 쉽게 제공할 수 있습니다. 지식 기반 플러그인은 기사에 대해 자체 게시물 유형을 사용하기 때문에 Divi에서 활성화해야 합니다. 이렇게 하면 Divi Builder를 사용하여 해당 기사를 편집할 수 있습니다.

이렇게 하려면 WordPress 대시보드로 이동하여 Divi > 테마 옵션으로 이동합니다. 작성기 탭을 클릭하고 게시물 유형 "KB: 기술 자료"를 활성화합니다.

기술 자료 문서 및 범주 만들기

디자인이 어떻게 생겼는지 잘 알기 위해서는 지식 기반 문서와 카테고리 설정이 필요합니다. 지금은 모의 콘텐츠를 사용해도 됩니다.

기술 자료 범주 만들기

WordPress의 일반 게시물 카테고리와 마찬가지로 지식 기반 카테고리를 생성할 수 있습니다.

이렇게 하려면 기술 자료 > 범주로 이동합니다. 그런 다음 지식 기반 문서에 사용할 각 범주에 대해 이름, 슬러그 및 상위 범주(해당되는 경우)를 추가합니다. 이 예에서는 각각 두 개의 하위 범주가 있는 6개의 상위 범주를 추가했습니다.

이것이 어디로 가고 있는지에 대한 아이디어를 제공하기 위해 다음은 상위 범주 및 하위 범주가 지식 기반 기본 페이지에 표시되는 방식입니다.

새 기사에 범주 할당

지금 귀하의 카테고리가 제자리에 있지만 카테고리에 할당된 기사가 없습니다. 기사를 생성하고 생성한 카테고리 중 하나(또는 그 이상)를 각 카테고리에 할당해야 합니다.

WordPress에서 새 게시물을 작성하는 것처럼 새 기사를 작성할 수 있습니다. 기술 자료 > 새 기사 추가로 이동합니다. 그런 다음 제목을 추가하고 기사에 범주를 지정합니다. 테마 옵션에서 이 게시물 유형을 활성화하기 때문에 Divi Builder를 활성화할 수 있습니다. 나중에 이 작업을 수행하기 위한 몇 가지 팁을 공유하겠습니다. 그러나 지금은 모의 콘텐츠 기본 WordPress 편집기를 추가할 수 있습니다. 그 후 기사를 게시합니다.

동일한 프로세스를 계속하여 필요한 모든 기사를 작성하여 각 카테고리에 최소한 하나의 기사가 할당되도록 합니다.

기본 기술 자료 페이지 확인

플러그인을 활성화하면 지식 기반 페이지가 자동으로 생성됩니다. 이 페이지에는 주요 지식 기반을 배포하는 데 필요한 단축 코드가 있습니다.

다음은 기본적으로 페이지가 어떻게 생겼는지입니다.

기술 자료 레이아웃 및 스타일 구성

지식 기반 플러그인에는 웹사이트 디자인과 일치하도록 지식 기반을 구성하는 데 유용한 옵션이 많이 있습니다. 메인 페이지, 기사 페이지 및 아카이브 페이지에 대한 사용자 정의 가능한 옵션이 있습니다.

메인 페이지 구성

메인 페이지 설정

먼저 지식 기반 구성 페이지 상단의 메인 페이지 버튼을 클릭합니다. 설정 탭에서 기본 레이아웃 스타일과 색상을 그대로 둘 수 있습니다. 그러나 이 예에서는 "기사용으로 설계된 지식 기반 템플릿"을 사용하도록 템플릿 옵션을 변경하겠습니다. 미리 만들어진 다양한 스타일 옵션으로 아카이브 페이지를 사용자 정의할 수 있기 때문에 주로 이 작업을 수행합니다. 그러나 이것을 위해 Divi 테마 템플릿을 유지하려면 "게시물 및 페이지에 사용되는 현재 테마 템플릿" 옵션을 선택된 상태로 유지할 수 있습니다.

템플릿 팝업에서 기본 제목 표시 옵션을 선택 취소하고 모든 패딩과 여백을 0px로 설정합니다. 이렇게 하면 페이지 제목과 간격에 Divi Builder를 사용할 수 있습니다.

메인 페이지 구성 및 모든 텍스트 옵션

지금은 구성 및 모든 텍스트 옵션을 기본값으로 유지하지만 자유롭게 변경할 수 있습니다. 구성 탭에서 원하는 순서대로 카테고리를 끌어다 놓을 수도 있습니다. 그리고 모든 텍스트 옵션을 사용하면 페이지 전체에 사용되는 문구(예: 검색 제목 및 버튼 텍스트)를 변경할 수 있습니다.

메인 페이지 조정 옵션

그런 다음 조정 탭을 클릭합니다. 여기에서 주요 지식 기반에 대한 대부분의 스타일 지정이 수행됩니다. 이 모든 설정을 사용하지는 않겠지만 일부 색상을 변경하고 일부 아이콘을 추가하겠습니다. 이것이 지식 기반을 미리 만들어진 Divi 레이아웃과 일치시키는 방법입니다. 디지털 제품 레이아웃 팩을 사용할 계획이므로 해당 색상을 사용하여 지식 기반 페이지의 스타일을 지정하겠습니다.

검색창 색상

검색 상자 범주에서 색상을 선택하고 다음을 업데이트합니다.

제목: #333333
검색 배경: #ffffff
버튼 배경: #091c4f

콘텐츠 스타일

콘텐츠 범주에서 스타일을 선택하고 다음을 업데이트합니다.

페이지 너비: 전체 너비

기사 스타일 및 색상 목록

기사 목록 범주에서 스타일을 선택하고 다음을 업데이트합니다.

아이콘: 화살표 삼각형
기사 목록 높이: 최소 높이 100px(모든 상자를 동일한 높이로 만드는 데 유용)

그런 다음 색상을 선택하고 다음을 업데이트합니다.

기사 텍스트: #091c4f
기사 아이콘: #6767ef

카테고리 스타일 및 색상

그런 다음 범주 아래에서 스타일을 선택하고 다음을 업데이트합니다.

아이콘 위치: 상단

그런 다음 미리보기에서 범주 상자 중 하나를 클릭하여 선택합니다. 그런 다음 특정 범주에 해당하는 범주 아이콘을 선택합니다. 각 범주 상자에 대해 이 작업을 수행합니다.

500개 이상의 아이콘 중에서 선택할 수 있습니다!

그런 다음 색상을 선택하고 다음을 업데이트합니다.

최상위 카테고리 아이콘: #ffffff
하위 카테고리 텍스트 및 아이콘: #333333
구분선: #ffffff
카테고리 상자 제목 텍스트: #ffffff
카테고리 상자 제목 배경: #091c4f

기사 페이지 기능

이제 메인 페이지가 구성되었으므로 페이지 상단의 기사 페이지를 클릭합니다. 그런 다음 기능 탭을 클릭하십시오. 여기에서 기사 레이아웃의 맨 위에 표시될 뒤로 버튼 및 이동 경로와 같은 요소를 사용자 정의할 수 있습니다.

지금은 뒤로 버튼을 기사 페이지에 사용할 미리 만들어진 레이아웃과 일치시키겠습니다. 기능에서 뒤로 탐색을 선택하고 다음을 업데이트합니다.

텍스트 색상: #ffffff
배경색: #091c4f
테두리 색상: #091c4f
테두리 너비: 3px

아카이브 페이지 레이아웃 스타일

아카이브 페이지의 레이아웃을 변경하려면 페이지 상단의 "아카이브 페이지"를 클릭하십시오. 설정 탭에서 사용 가능한 다양한 스타일의 드롭다운 목록을 볼 수 있습니다. 기본값을 유지하지만 다른 스타일을 자유롭게 실험해 볼 수 있습니다.

다음은 기본 스타일 1에서 카테고리 아카이브 페이지가 어떻게 보이는지 보여주는 예입니다.

Divi로 기술 자료 페이지 디자인하기

지식 기반 페이지 구성을 완료했으므로 Divi Builder를 사용하여 지식 기반 기본 페이지 디자인을 완료할 준비가 되었습니다.

먼저 플러그인에 의해 자동으로 생성된 페이지 Titles "Knowledge Base" 편집으로 이동합니다.

그런 다음 Divi Builder를 배포합니다. "미리 만든 레이아웃 선택" 옵션을 선택한 다음 라이브러리에서 로드 팝업에서 디지털 제품 레이아웃 팩을 선택합니다. 그런 다음 문서 페이지 레이아웃을 페이지에 배포합니다.

레이아웃이 페이지에 로드된 후 "프론트 엔드에서 빌드"를 선택합니다.

상단 섹션에는 새로 스타일이 지정된 지식 기반을 표시하는 단축 코드가 있는 텍스트 모듈이 있습니다.

이제 우리가해야 할 일은 미리 만들어진 레이아웃 내에서 원하는 위치로 옮기고 Divi Builder 옵션을 사용하여 필요에 따라 디자인을 조정하는 것입니다.

이 예에서는 KB 단축 코드가 있는 텍스트 모듈을 제목이 "Documentation"인 텍스트 모듈 바로 아래로 이동했습니다.

그런 다음 "Documentation" 텍스트 모듈이 있는 한 행과 단축 코드가 포함된 텍스트 모듈이 포함된 맨 위 섹션만 남을 때까지 모든 것을 삭제했습니다. 나는 또한 CTA와 함께 하단 섹션을 유지했습니다.

디자인을 끝내려면 단축 코드가 포함된 텍스트 모듈의 설정을 열고 다음을 업데이트합니다.

배경색: #ffffff
텍스트 글꼴: Poppins
둥근 모서리: 10px

다음은 최종 디자인입니다.

그리고 모바일에서도 잘 맞습니다.

Divi Builder를 사용하여 기사 페이지 디자인하기

Divi 테마 옵션에서 KB 지식 기반 게시물 유형을 활성화했기 때문에 Divi Builder를 사용하여 기사를 디자인할 수 있습니다. 기술 자료 문서 템플릿은 Divi Builder를 페이지 제목, 이동 경로 및 뒤로 버튼 아래의 콘텐츠로 제한합니다. 또한 divi 빌더 콘텐츠를 1080px의 최대 너비로 제한합니다.

이 예에서는 미리 만들어진 레이아웃으로 지식 기반 기사의 디자인을 시작하겠습니다. 이렇게 하려면 기사 중 하나를 편집하고 Divi Builder를 배포하세요. "미리 만들어진 레이아웃 선택"을 선택하고 라이브러리에서 로드 팝업에서 디지털 제품 레이아웃 팩을 선택하고 디지털 제품 연락처 페이지를 배포합니다.

이제 기사가 어떻게 생겼는지 보십시오. Divi Builder 콘텐츠는 Divi Builder에서 사용자 정의할 수 없는 기사 제목, 이동 경로 및 뒤로 버튼 바로 아래에 있습니다.

그러나 여전히 Divi Builder를 허용하는 콘텐츠에 대한 몇 가지 강력한 사용자 지정 옵션이 있습니다. 연락처 페이지 레이아웃의 상단 섹션 배경을 사용하여 기사의 다른 섹션(또는 단계)에 대한 섹션 배경으로 검색할 수 있습니다. 그리고 이미지 모듈을 사용하여 스크린샷을 쉽게 추가할 수 있습니다. 기본적으로 전체 기사에 대한 Divi Builder의 무한한 잠재력이 있습니다.

다음은 Divi로 디자인된 기사 페이지의 간단한 예입니다.

물론 전체 너비 레이아웃을 얻기 위해 기사 컨테이너의 너비를 조정하는 사용자 정의 CSS를 추가할 수 있습니다. 그리고 제목을 숨기는 코드를 추가한 다음 Divi의 동적 콘텐츠를 사용하여 Divi Builder 내에서 원하는 곳에 기사 제목을 배치할 수 있습니다.

마지막 생각들

Echo Knowledge Base 플러그인은 사용 가능한 모든 프리미엄 애드온이 없어도 놀라울 정도로 강력합니다. 또한 Divi Builder를 사용하여 지식 기반 페이지와 기사 페이지를 디자인할 수도 있습니다. 이 튜토리얼이 Divi 웹사이트에 지식 기반을 추가하려는 사람들에게 도움이 되었기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!