Divi를 위한 15개 이상의 놀라운 블로그 포스트 템플릿 튜토리얼

Divi 블로그 게시물 템플릿을 디자인하고 사용자 정의하는 방법에는 여러 가지가 있습니다. 다행히도 우아한 테마 블로그에는 시작하는 데 도움이 되는 많은 Divi 블로그 게시물 템플릿 자습서가 있습니다. 이 기사에서는 Divi 테마 빌더와 함께 사용할 수 있는 15개 이상의 놀라운 블로그 게시물 템플릿 자습서를 살펴보겠습니다. 모든 문서에는 데스크톱 및 모바일 화면용 블로그 게시물 템플릿 구축에 대한 단계별 지침이 포함되어 있습니다. 많은 파일에는 JSON 파일 다운로드 및 비디오 지침이 포함됩니다. 일부는 CSS를 포함합니다.

1. 블로그 포스트 템플릿 디자인하기

이 튜토리얼은 Divi 테마 빌더에서 블로그 포스트 템플릿을 만들기 위해 알아야 할 모든 것을 보여줍니다. 여기에는 블로그 게시물 템플릿이 무엇이고 왜 필요한지에 대한 기본 사항이 포함되어 있습니다. 또한 동적 콘텐츠와 블로그 게시물에 사용하는 방법에 대해 설명합니다.

튜토리얼 보기

2. 블로그 포스트 템플릿에 고정 사이드바 CTA 추가하기

이 튜토리얼은 고정 CTA를 만들고 블로그 게시물 템플릿의 사이드바에 추가하는 방법에 중점을 둡니다. 독립적으로 작동하는 두 개의 다른 사이드바를 보여줍니다. 사이드바는 고정 위치에 도달할 때까지 게시물과 함께 스크롤한 다음 게시물이 게시물을 따르는 지점까지 게시물이 스크롤될 때까지 유지됩니다. 이 정보는 모든 페이지 템플릿에도 적용됩니다. 여기에는 CSS가 포함됩니다.

튜토리얼 보기

3. UX 친화적인 블로그 포스트 템플릿을 동적으로 생성하기

이것은 사용자 경험에 중점을 둔 블로그 게시물 템플릿을 만드는 방법을 보여줍니다. 동적 요소를 디자인에 통합하는 방법을 보여줍니다. 이 튜토리얼에서 만든 템플릿은 방해 요소가 없어 간단하고 사용하기 쉽습니다.

튜토리얼 보기

4. 블로그 포스트 템플릿 안에 Divi의 댓글 모듈 스타일링하기

이 자습서는 블로그 게시물 템플릿과 완벽하게 작동하는 댓글 섹션 스타일 지정에 중점을 둡니다. Comments 모듈을 사용하여 두 가지 디자인을 만듭니다. 소셜 미디어 팔로우 기능이 있는 사람 모듈도 포함되어 있습니다. 배경은 그래픽 편집기로 생성되며 생성 방법에 대한 설명이 포함되어 있습니다.

튜토리얼 보기

5. 블로그 게시물 템플릿을 위한 동적 작성자 상자 디자인

이 자습서에서는 동적 콘텐츠를 사용하여 블로그 게시물 템플릿의 작성자 상자를 만드는 방법을 배웁니다. 데스크탑에서 작성자 상자는 사이드바에 고정됩니다. 내용을 숨기고 작성자의 이미지를 흐리게 처리하여 깔끔한 디자인을 만듭니다. 작성자 상자 위로 마우스를 가져가면 콘텐츠가 표시됩니다. 모바일의 경우 작성자 상자가 콘텐츠 아래에 있습니다. 여기에는 CSS가 포함됩니다.

튜토리얼 보기

6. 양면 사이드바 블로그 게시물 템플릿 만들기

이 자습서에서는 양쪽에 사이드바가 있는 블로그 게시물 템플릿을 만드는 방법을 보여줍니다. 사이드바는 한쪽에는 블로그 게시물이 있고 다른 한쪽에는 이메일 수신 동의가 있어 깔끔하게 유지됩니다. 사이드바는 모바일에서 스택됩니다. CSS가 포함되어 있습니다.

튜토리얼 보기

7. 블로그 게시물 템플릿을 위한 동적 게시물 정보 표시줄 만들기

이 자습서에서는 사용자가 스크롤할 때 화면에 남아 있는 동적 콘텐츠를 사용하여 정보 표시줄을 만드는 방법을 보여줍니다. 콘텐츠에는 사용자가 읽고 있는 내용을 보여주는 현재 게시물의 제목과 카테고리, 댓글 수와 댓글을 남길 수 있는 링크, 뉴스레터 구독 버튼이 포함됩니다. 여기에는 CSS가 포함됩니다.

튜토리얼 보기

8. 블로그 게시물 템플릿에 전체 높이 고정 사이드바 포함

이 자습서에서는 사용자가 스크롤할 때 데스크톱 버전에서 고정되는 전체 높이 사이드바를 만드는 방법을 보여줍니다. 사이드바는 데스크탑 화면의 전체 높이를 차지합니다. 모바일 버전은 콘텐츠 뒤에 사이드바를 배치합니다. 사용자 정의 CSS가 포함되어 있습니다.

튜토리얼 보기

9. 분할 화면 블로그 게시물 템플릿 만들기

이 튜토리얼은 한 면에는 추천 이미지가 있고 다른 면에는 게시물 콘텐츠가 있는 블로그 게시물 템플릿을 만드는 방법을 보여줍니다. 콘텐츠가 스크롤되는 동안 제목과 메타데이터가 포함된 추천 이미지는 그대로 유지됩니다. 모바일의 경우 레이아웃이 정상적으로 작동합니다. 여기에는 CSS가 포함됩니다.

튜토리얼 보기

10. 블로그 포스트 템플릿을 위한 고정 사이드바 만들기

이것은 사이드바를 끈적하게 만드는 방법을 보여줍니다. 화면의 고정 위치에 도달하면 사이드바는 콘텐츠의 끝 부분에 도달할 때까지 제자리에 유지됩니다. 그러면 사이드바가 평소와 같이 게시물과 함께 스크롤됩니다. 모바일에서는 정상적으로 작동합니다. 블로그 게시물 템플릿은 처음부터 작성되었으며 겹치는 요소와 사용자 정의 CSS를 포함합니다.

튜토리얼 보기

11. 블로그 게시물 템플릿에 대한 댓글 토글 만들기

이 자습서에서는 댓글 섹션을 축소하는 토글을 만드는 방법을 보여줍니다. 댓글 표시줄의 버튼을 누르면 댓글이 표시됩니다. 이는 특히 댓글이 많은 게시물의 사용자 경험을 개선하는 데 유용합니다. 사용자 정의 CSS가 포함되어 있습니다.

튜토리얼 보기

12. 블로그 포스트 템플릿에 전각 추천 이미지 포함하기

이 튜토리얼은 데스크톱과 모바일 모두에서 추천 이미지를 전체 너비로 만드는 방법을 보여줍니다. 동적 섹션, 게시물 제목 모듈, 별도의 이미지 및 텍스트 모듈을 포함하여 이를 수행하는 여러 방법을 보여줍니다. 일부는 그라디언트 오버레이를 포함합니다.

튜토리얼 보기

13. 카테고리별로 다른 블로그 포스트 템플릿 사용하기

이것은 Divi Theme Builder의 설정을 사용하여 웹사이트의 다양한 카테고리에 대해 다른 블로그 게시물 템플릿을 설정하는 방법을 보여줍니다. 또한 다른 블로그 게시물 템플릿을 사용할 때의 이점과 기본 템플릿에서 카테고리를 제외하는 방법에 대해서도 설명합니다.

튜토리얼 보기

14. 특정 게시물에 다른 블로그 게시물 템플릿 지정하기

이 튜토리얼은 Divi 테마 빌더의 설정을 사용하여 특정 블로그 게시물에 블로그 게시물 템플릿을 할당하는 방법을 보여줍니다. 또한 이를 수행할 때의 이점에 대해 설명하고 가장 적절한 경우에 대한 몇 가지 예를 제공합니다.

튜토리얼 보기

15. 블로그 포스트 템플릿에 관련 포스트 추가하기

이 자습서에서는 관련 게시물을 표시하는 섹션을 블로그 게시물 템플릿에 추가하는 방법을 보여줍니다. 또한 블로그 포스트 템플릿에 필요한 요소, 다른 요소의 예, 관련 포스트의 장점, 추가할 수 있는 최적의 위치에 대해서도 다룹니다. 관련 게시물 섹션이 블로그 게시물 본문과 겹칩니다.

튜토리얼 보기

16. 테마 빌더에서 포스트 콘텐츠 모듈 사용하기

이 튜토리얼은 포스트 콘텐츠 모듈을 사용하는 방법에 대해 자세히 설명합니다. 모듈이 작동하는 방식과 Divi 테마 빌더에서 블로그 게시물 템플릿을 디자인할 때 모듈을 가장 잘 사용하는 방법을 다룹니다. 또한 단축 코드로 생성된 WooCommerce 페이지와 함께 사용하는 방법을 보여주고 사용하지 말아야 할 경우를 알려줍니다.

튜토리얼 보기

17. Divi 블로그 포스트 템플릿에 전체 화면 영웅 추가하기

이 자습서에서는 블로그 게시물 템플릿에 전체 화면 영웅 섹션을 추가하는 몇 가지 방법을 보여줍니다. 방법에는 전체 화면 게시물 제목 모듈, 배경 위에 제목 및 영웅 섹션 아래에 메타데이터 추가가 포함됩니다. 또한 영웅 이미지 위에 그라디언트를 추가하는 방법을 보여줍니다.

튜토리얼 보기

18. 블로그 포스트 템플릿에 메타데이터 포함하기

이것은 동적 콘텐츠를 사용하여 블로그 게시물 템플릿에 메타데이터를 추가하는 방법을 보여줍니다. 미타데이터가 무엇인지, 미타데이터에 대해 동적 콘텐츠가 작동하는 방식, 동적 콘텐츠를 사용하여 메타데이터를 표시해야 하는 이유에 대해 설명합니다. 다양한 메타데이터 표시 옵션도 다룹니다.

튜토리얼 보기

19. Divi 블로그 포스트 템플릿에 포스트 탐색 포함하기

이 튜토리얼에서는 Post Navigation 모듈을 다룹니다. 게시물 탐색을 사용해야 하는 이유를 설명하고 블로그 템플릿에 추가할 수 있는 가장 좋은 위치를 보여줍니다. 모듈의 스타일을 지정하여 텍스트 링크, 버튼 및 양면 버튼을 만드는 세 가지 방법을 보여줍니다.

튜토리얼 보기

Divi용 무료 블로그 게시물 템플릿을 찾는 방법

우아한 테마는 무료 Divi 레이아웃 팩과 일치하는 많은 무료 블로그 게시물 템플릿을 만들었습니다. 이 무료 Divi 블로그 게시물 템플릿은 ET 블로그에 게시됩니다. "무료 블로그 게시물 템플릿", "무료 Divi 블로그 게시물 템플릿" 또는 이와 유사한 키워드를 검색하기만 하면 됩니다. 선택할 수 있는 무료 블로그 게시물 템플릿이 많이 있습니다.

마무리 생각

Divi용 15개 이상의 놀라운 Divi 블로그 게시물 템플릿 자습서를 살펴보았습니다. 이 15개 이상의 튜토리얼은 Divi 블로그 게시물 템플릿을 디자인하고 사용자 정의하는 다양한 방법을 배울 수 있는 좋은 방법입니다. 또한 Divi 테마 빌더를 사용하여 나만의 테마를 만들 수 있는 아이디어도 제공합니다. 그들 중 몇몇은 CSS를 사용하는 방법을 보여줍니다.

우리는 당신의 의견을 듣고 싶습니다. 이 15개 이상의 놀라운 Divi 블로그 게시물 템플릿 튜토리얼을 사용해 보셨습니까? 의견에서 가장 좋아하는 것을 알려주십시오.