Divi를 위한 15개 이상의 놀라운 블로그 모듈 튜토리얼

Divi의 블로그 모듈은 블로그 피드로 모든 유형의 페이지를 생성하기 위한 강력한 모듈입니다. 단일 게시물, 여러 게시물, 특정 페이지에 대한 게시물을 표시하고 페이지를 아카이브에 할당하는 등 다양한 작업을 수행할 수 있습니다. 간단한 모듈이지만 여러 가지 사용 방법이 있습니다. 다행히도 블로그 모듈 사용에 대해 자세히 설명하는 블로그 모듈 자습서가 많이 있습니다. 이 기사에서는 블로그 페이지를 만드는 데 도움이 되는 Divi용 15개 이상의 놀라운 블로그 모듈 자습서를 살펴보겠습니다.

1. 블로그 페이지 구축 방법

이 튜토리얼은 블로그 페이지를 구축하는 방법을 보여주기 위해 Divi 내에서 사용할 수 있는 많은 블로그 페이지 템플릿 중 하나를 사용합니다. 블로그 모듈과 많은 지원 모듈을 사용합니다. 블로그 페이지를 다시 만들기 위한 모든 설정을 단계별로 안내합니다.

튜토리얼 보기

2. 8 포스트 요소 표시 조합

블로그 카드에 표시되는 작성자 이름, 게시 날짜 및 카테고리와 같은 게시물 요소를 검사합니다. 함께 사용할 수 있는 방법에 대한 다양한 조합과 함께 8가지 예를 제공하고 각각의 요소와 장점을 언제 사용해야 하는지에 대한 통찰력을 포함합니다.

튜토리얼 보기

3. Divi의 그리드 및 전체 너비 블로그 레이아웃 비교

이 자습서에서는 블로그 모듈 내에서 사용할 수 있는 그리드 및 전체 너비 블로그 레이아웃을 자세히 비교합니다. 두 옵션 간에 변경하는 방법에 대한 정보를 제공합니다. 비교는 Divi 레이아웃 내에서 사용되는 방법의 예를 보여줍니다. 또한 각 옵션의 장단점과 옵션 선택에 대한 팁을 제공합니다.

튜토리얼 보기

4. Divi 블로그 그리드 카드 스타일 지정 방법

이 자습서에서는 독자에게 블로그 그리드 카드의 스타일을 지정하는 단계를 안내합니다. 바둑판 블로그 그리드, 체크 무늬 레이아웃의 호버 효과, 행별로 카드 사용자 정의, 특정 카드 디자인을 포함하는 4가지 예를 보여줍니다. 예제에는 비디오 자습서가 포함되어 있으며 기본 블로그 모듈 설정 및 사용자 정의 CSS를 다룹니다. 또한 Chrome Inspect 도구를 사용하는 방법을 보여줍니다.

튜토리얼 보기

5. 블로그 모듈을 드래그/스와이프 캐러셀로 전환

이 튜토리얼은 고급 드래그/스와이프 블로그 카드 캐러셀을 만드는 방법을 보여줍니다. 데스크톱 및 모바일 장치 모두에 대해 화면 오른쪽에 큰 버튼을 배치합니다. 여러 모듈을 사용하며 사용자 정의 CSS 및 jQuery를 포함합니다. 카드는 다운로드 가능한 JSON 파일로도 제공되므로 직접 빌드하지 않고도 사용할 수 있습니다.

튜토리얼 보기

6. 다이내믹한 직업 구인 목록 섹션을 만드는 방법

이 튜토리얼은 채용 정보 생성에 관한 시리즈의 일부입니다. 먼저 공개 작업 위치 템플릿 게시물을 만든 다음 이 자습서로 돌아와야 합니다. 여기서는 해당 템플릿의 열린 위치를 동적으로 표시하는 방법에 중점을 둡니다. 여기에는 사용자 정의 CSS가 포함되어 있으며 JSON 파일로도 다운로드할 수 있습니다.

튜토리얼 보기

7. 관련 게시물 추가 방법

이 튜토리얼은 블로그 모듈을 사용하여 블로그 포스트 템플릿의 맨 아래에 관련 포스트 섹션을 추가하는 방법을 보여줍니다. 이 블로그 모듈의 게시물은 카테고리에 관계없이 블로그 게시물과 일치합니다. 또한 블로그 게시물 템플릿에 필요한 사항과 Divi 테마 빌더와 함께 블로그 게시물 템플릿을 사용하는 방법을 다룹니다. 비디오 자습서도 포함되어 있습니다.

튜토리얼 보기

8. Divi 블로그 모듈에 새로운 모습 제공

이것은 Divi 100 마라톤 3일째의 것입니다. 다운로드할 수 있는 Divi Article Cards 확장 프로그램입니다. 스타일링 방법에 대한 튜토리얼이 포함되어 있습니다. 비디오 자습서가 포함되어 있습니다. 몇 년 전의 일이지만 여전히 사용 가능한 최고의 블로그 카드 디자인 중 하나입니다.

튜토리얼 보기

9. Hover에서 블로그 게시물 발췌문을 전환하는 방법

이 튜토리얼은 방문자가 카드 위로 마우스를 가져갈 때 발췌 부분을 표시하는 간결한 그리드 레이아웃을 만드는 방법을 보여줍니다. 페이지에 더 많은 게시물을 표시할 수 있으며 방문자는 관심이 없는 게시물의 발췌문을 볼 필요가 없습니다. 여기에는 맞춤 CSS가 포함됩니다. JSON 파일을 다운로드할 수 있으므로 처음부터 빌드할 필요가 없습니다.

튜토리얼 보기

10. 발췌 길이를 제한하는 방법

이것은 블로그 모듈의 발췌 길이를 사용자 정의하는 방법을 보여줍니다. 또한 표시하지 않으려는 경우 발췌 부분을 숨기는 방법과 템플릿과 일치하도록 발췌 부분의 스타일을 지정하는 방법도 보여줍니다. 또한 게시물 발췌문을 포함하거나 제외하려는 이유에 대해서도 설명합니다.

튜토리얼 보기

11. 포스트 오프셋을 사용하여 다용도 블로그 페이지를 구축하는 방법

이 튜토리얼은 여러 블로그 모듈로 블로그 페이지를 만들고 포스트 오프셋을 사용하여 제어하는 ​​방법을 보여줍니다. 이 예제에서는 3개의 블로그 모듈과 2개의 포스트 슬라이더 모듈을 서로 다른 조합으로 사용하여 블로그 페이지를 구축하여 다양한 페이지를 만드는 방법을 보여줍니다. 동일한 게시물이 표시되지 않도록 하는 방법과 동일한 게시물 중 일부를 전략적으로 표시하는 방법을 보여줍니다.

튜토리얼 보기

12. 카테고리 또는 아카이브 페이지 내에서 블로그 모듈을 사용하는 방법

이 튜토리얼은 카테고리 페이지와 아카이브 페이지 내에서 블로그 모듈을 사용하는 방법을 다루므로 해당 카테고리 및 아카이브에 대한 게시물을 표시합니다. 블로그 모듈 설정과 템플릿 할당이 표시됩니다. 또한 카테고리 및 아카이브 페이지가 무엇인지 설명하고 이들 간의 차이점에 대해 설명합니다.

튜토리얼 보기

13. 카테고리별 블로그 게시물 표시 방법

이 튜토리얼은 블로그 모듈 내에서 카테고리 기능을 사용하여 특정 카테고리에 대한 게시물을 표시하는 방법을 보여줍니다. 특정 범주를 표시하려는 이유에 대해 설명하고 범주를 사용하는 방법에 대한 몇 가지 예를 포함합니다. 블로그 모듈의 설정과 조합하여 특정 카테고리 페이지에 템플릿을 할당하는 방법과 템플릿과 일치하도록 모듈의 스타일을 지정하는 방법을 보여줍니다.

튜토리얼 보기

14. "자세히 보기" 버튼을 사용자 정의하는 방법

이 튜토리얼은 블로그 카드에서 발췌한 게시물 아래에 표시되는 더 읽기 링크에 대해 자세히 설명합니다. 정렬 옵션, 버튼을 전체 너비로 만드는 방법, 호버 효과가 있는 사용자 지정 버튼 만들기 및 표시되는 텍스트를 변경하는 방법을 다룹니다. 여기에는 사용자 정의 CSS, jQuery 및 다운로드 가능한 JSON 레이아웃이 포함됩니다.

튜토리얼 보기

15. 열 수를 변경하는 방법

이 튜토리얼은 CSS 그리드를 사용하여 블로그 열의 수를 제어하는 ​​방법을 보여줍니다. 일반적으로 그리드 레이아웃은 최대 3개의 열을 표시합니다. CSS 그리드를 사용하면 5개의 열이 있는 반응형 블로그 그리드를 구축할 수 있습니다. 또한 CSS 그리드를 사용하려는 이유와 CSS 열의 작동 방식에 대해서도 설명합니다. 사용자 정의 CSS, 비디오 자습서, 다운로드 가능한 JSON 파일 및 추가 팁이 포함되어 있습니다.

튜토리얼 보기

16. 플로팅 카드를 디자인하는 방법

이것은 블로그 카드를 페이지에 띄워 사용자가 스크롤할 때 항상 볼 수 있도록 하는 방법을 보여줍니다. 인기 게시물을 표시하고 사용자가 게시물 위로 마우스를 가져갔을 때 화면 측면에서 밀어넣을 수 있습니다. 효과는 Divi의 내장 설정만으로 이루어집니다. 다운로드 가능한 JSON 파일과 비디오 자습서가 포함되어 있습니다.

튜토리얼 보기

17. 페이지 매김 추가 방법

이 자습서는 블로그 모듈 내의 페이지 매김에 중점을 둡니다. 페이지 매김이 사용되는 방법과 여러 블로그 모듈이 있는 페이지에 대해 페이지 매김을 활성화 또는 비활성화하는 방법을 보여줍니다. 스타일링하는 방법도 보여줍니다. 예제 템플릿은 4개의 블로그 모듈을 사용하여 사용할 때와 사용하지 않을 때를 보여줍니다. 또한 사후 탐색과 비교하여 차이점을 보여줍니다. 비디오 자습서도 포함되어 있습니다.

튜토리얼 보기

18. "현재 페이지에 대한 게시물" 옵션 이해

이 튜토리얼은 블로그 모듈의 "현재 페이지에 대한 게시물" 옵션에 대해 자세히 설명합니다. 옵션의 기능과 범주와 다른 점에 대해 설명합니다. Divi 테마 빌더에서 블로그 템플릿과 템플릿 할당을 사용한 예를 보여줍니다. 예에는 아카이브 페이지 등을 만들기 위한 범주 및 태그 할당이 포함됩니다.

튜토리얼 보기

Divi를 위한 15개 이상의 놀라운 블로그 모듈 튜토리얼에 대한 결론

Divi를 위한 15개 이상의 놀라운 블로그 모듈 튜토리얼을 살펴보았습니다. 이러한 자습서에는 다양한 기술과 용도가 있으며 그 중 상당수는 사용자 지정 코드 및 다운로드를 포함합니다. 이 튜토리얼을 통해 블로그 모듈을 사용하고 블로그 페이지를 만들고 Divi 테마 빌더에서 할당하는 방법을 배울 수 있습니다. 그 과정에서 CSS도 배우게 됩니다.

우리는 당신의 의견을 듣고 싶습니다. Divi용 블로그 모듈 튜토리얼을 사용해 본 적이 있습니까? 의견에서 가장 좋아하는 것을 알려주십시오.