Divi 개요 및 검토용 저널 블로그 키트

Divi용 저널 블로그 키트는 하위 테마와 같은 기능을 갖춘 Divi Soup의 타사 레이아웃입니다. 레이아웃 자체는 Divi 건물로 만들어졌으며 슬라이더, 카테고리 및 호버 효과가 있는 블로그 피드를 포함하여 우아한 블로그 페이지를 만듭니다. 또한 스타일이 지정된 사이드바와 하위 테마에 추가하는 기본 사용자 정의 블로그 게시물 디자인이 있습니다. 새 기능은 가져오거나 간단한 복사 및 붙여넣기를 통해 자식 테마에 추가됩니다.

블로그 키트에는 세 가지 다른 블로그 및 아카이브 페이지 레이아웃이 포함되어 있습니다. 포함된 CSS를 테마 옵션 또는 하위 테마 CSS 편집기에 붙여넣어 전체 너비, 그리드 또는 인라인 간에 레이아웃을 변경할 수 있습니다. 아카이브, 카테고리, 태그, 작성자 및 검색 결과 페이지는 블로그 페이지와 동일한 레이아웃을 따릅니다. 여기에는 Font Awesome 통합도 포함됩니다.

블로그 키트에는 모든 파일과 사용 방법에 대한 지침이 포함되어 있습니다. 이 기사에서는 Journal Blog Kit를 설치하고 사용하기 쉬운 방법과 기능을 살펴보겠습니다.

Divi용 저널 블로그 키트 설치

다운로드한 파일의 압축을 풉니다. 내부에는 블로그 페이지 레이아웃 및 사용자 정의 설정을 위한 JSON 파일, 읽어보기 파일, CSS, PHP, JS 및 위젯 파일(이는 하위 테마에서 찾을 수 있는 파일 유형)을 포함한 여러 파일이 있습니다. .

파일을 수동으로 설치하기 때문에 지침에 따라 파일을 설치하는 방법을 확인하는 것이 좋습니다. 다행히 지침이 잘 작성되어 있고 절차가 어렵지 않습니다. 자식 테마를 사용해야 합니다(비어 있더라도). 상위 테마에 추가하면 테마 업데이트 시 PHP 파일을 덮어씁니다.

이것이 레이아웃이고 파일을 수동으로 설치하는 이점은 현재 하위 테마와 함께 작동한다는 것입니다. 이러한 새로운 기능을 추가하기 위해 하위 테마를 교체할 필요는 없습니다.

Divi 문서용 저널 블로그 키트

문서에 대한 링크는 다운로드 파일에 제공됩니다. 파일을 클릭하면 검색 기능, 설치 지침, 사용자 지정 지침 및 지원 링크를 찾을 수 있는 블로그 키트 지원 페이지로 이동합니다. 사용자 정의 지침은 색상, 레이아웃의 열 수 및 발췌 길이를 변경하는 방법을 보여줍니다.

설치 지침을 클릭하고 단계를 따릅니다. 여기에는 특정 위치에 코드 복사 및 붙여넣기, FTP를 통한 파일 업로드, 플러그인을 통한 파일 가져오기가 포함됩니다. 각 단계가 자세히 설명되어 있습니다. 단계를 수행하는 데 몇 분 정도 걸립니다.

Divi 블로그 페이지용 저널 블로그 키트

블로그 키트에는 블로그 페이지 레이아웃이 JSON 파일로 포함되어 있습니다. 이 레이아웃은 Divi 라이브러리가 아닌 페이지 자체로 가져와야 합니다. 페이지 자체는 게시물 슬라이더, 6개의 행동 유도 모듈, 블로그와 사이드바가 있는 행을 사용합니다. 이것은 사용하는 CSS에 따라 다르게 표시됩니다. 각 레이아웃의 기능과 레이아웃을 살펴보겠습니다.

Divi 슬라이더 및 카테고리용 저널 블로그 키트

포스트 슬라이더는 수직 점 탐색을 왼쪽에 배치하고 발췌 부분을 오른쪽에 표시합니다. 발췌 부분은 텍스트를 중앙에 두고 불투명도가 낮아 슬라이더의 주요 이미지가 표시됩니다. 게시물 보기 버튼도 포함되어 있습니다. 슬라이드하면 이미지가 페이드 인되고 발췌 부분이 아래에서 위로 슬라이드됩니다.

행동 유도 모듈은 특정 카테고리에 대한 아카이브 페이지에 대한 링크로 작동합니다. 모듈 위로 마우스를 가져가면 흰색 텍스트가 있는 검은색 배경에서 검은색 텍스트가 있는 흰색 배경으로 버튼의 색상이 변경되고 검은색 테두리가 추가됩니다. 나는 대담한 노란색을 좋아합니다. 이것은 페이지에 카테고리 탐색을 추가하는 흥미로운 방법입니다.

색상은 사용자 정의 스타일을 가져올 때 가져옵니다. 사용할 필요가 없으며 색상을 쉽게 변경할 수 있습니다. 원래 사용자 정의 스타일에 액세스하려면 먼저 내보내야 합니다.

Divi 전폭 레이아웃용 저널 블로그 키트

전체 너비 CSS를 사용하는 블로그 레이아웃은 다음과 같습니다. 추천 이미지는 마우스 오버 시 확대됩니다. 발췌문의 첫 번째 단어에 단락 시작표시문자를 추가합니다. 카테고리 및 단락 시작표시문자는 노란색으로 스타일이 지정됩니다. 더 읽기 버튼은 레이아웃과 일치하도록 스타일이 지정됩니다.

Divi 그리드 레이아웃을 위한 저널 블로그 키트

그리드 레이아웃은 카테고리 아래 한 줄에 두 개의 게시물을 표시합니다. 여기에는 추천 이미지에 대한 확대/축소, 노란색 카테고리 및 드롭 캡, 버튼 스타일과 같은 전체 너비 레이아웃과 동일한 스타일이 포함됩니다.

Divi 인라인 레이아웃용 저널 블로그 키트

인라인 CSS는 왼쪽에 이미지, 오른쪽에 텍스트가 있는 블로그 게시물을 표시합니다. 여기에는 다른 레이아웃의 스타일과 기능이 포함됩니다. 이 예에서는 스타일이 지정된 이전 항목 버튼을 표시하기 위해 목록 하단의 스크린샷을 찍었습니다. 이 동일한 버튼이 모든 레이아웃에 나타납니다.

Divi 사이드바용 저널 블로그 키트

위젯 설정을 가져오면 여러 스타일의 위젯이 있는 사이드바가 생성됩니다. 사이드바에는 제목, 사진, 설명이 있는 내 소개 섹션과 검색, 카테고리, 아카이브, 태그 및 최근 게시물 섹션이 있습니다. 각 섹션은 레이아웃과 일치하도록 스타일이 지정됩니다. 제목의 양쪽에 있는 노란색 선이 마음에 듭니다. 카테고리 및 아카이브는 드롭다운 상자입니다. 태그는 스타일이 지정된 링크입니다.

Divi 개별 포스트 레이아웃을 위한 저널 블로그 키트

FTP를 통해 게시물 파일을 테마 파일에 업로드하면 Divi 빌더가 아닌 WordPress로 만든 개별 블로그 게시물에도 스타일이 지정되고 많은 새로운 기능이 추가됩니다. 기능에는 게시물 위의 카테고리, 제목, 날짜, 댓글 수 및 태그가 포함됩니다. 게시물에는 스타일이 지정된 드롭 캡이 있습니다.

게시물 다음에는 스타일이 지정된 작성자 상자, 게시물 탐색, 관련 게시물 및 스타일이 지정된 댓글 상자가 있습니다. 댓글은 계단식으로 표시되며 응답이 다른 댓글에 대한 응답임을 보여주기 위해 스타일이 지정된 아이콘이 포함됩니다. 개별 섹션에는 제목과 함께 스타일이 지정된 노란색 선이 포함됩니다.

Divi 가격을 위한 저널 블로그 키트

Divi용 저널 블로그 키트는 £49.00입니다. 여기에는 사용에 필요한 모든 파일과 지침이 포함되어 있습니다.

• 저널 블로그 키트는 개발자 웹사이트에서 구입할 수 있습니다.

Divi용 저널 블로그 키트

Divi용 저널 블로그 키트는 블로그 페이지와 게시물에 많은 스타일 기능을 추가합니다. 나는 Divi 빌더로 구축하지 않고도 블로그 게시물의 스타일을 지정하는 것을 좋아합니다. 블로그에만 초점을 맞춘 키트를 보니 저도 기쁩니다. 블로그는 항상 충분한 관심을 받지 못합니다.

파일을 수동으로 설치해야 하지만 특정 유형의 파일이 어디로 가는지 보여주고 WordPress 작동 방식에 대한 정보를 제공하기 때문에 이것은 좋은 연습이라고 생각합니다. 파일을 추가하는 것은 실제로 생각보다 쉽습니다. 코드를 추가하는 데 문제가 없었습니다.

레이아웃 중 하나의 하위 테마 파일에 CSS를 추가한 다음 해당 코드를 삭제하고 다른 레이아웃의 테마 옵션에 CSS를 추가했습니다. 둘 다 예상대로 작동했습니다. CSS, JS, PHP 및 가져온 모든 파일은 첫 번째 시도에서 완벽하게 작동했습니다. 원래 디자인이나 다른 디자인으로 돌아가려면 하위 테마를 변경하고 CSS를 제거하기만 하면 됩니다.

레이아웃에 자식 테마 스타일 기능이 있다는 것은 흥미로운 일입니다. 모든 하위 테마 또는 레이아웃과 함께 사용할 수 있기 때문에 저는 이것을 좋아합니다. Divi에 몇 가지 새로운 블로깅 ​​기능을 추가하는 데 관심이 있다면 Journal Blog Kit를 살펴보는 것이 좋습니다.

우리는 당신의 의견을 듣고 싶습니다. Divi용 저널 블로그 키트를 사용해 보셨습니까? 아래 의견에서 그것에 대해 어떻게 생각하는지 알려주십시오.

M.Stasy/Shutterstock.com을 통한 추천 이미지