Divi 아카이브 페이지에 벽돌 레이아웃을 제공하는 방법
게시 됨: 2021-09-15아카이브 페이지에 사용자 정의 벽돌 레이아웃을 제공하기 위해 Divi 테마 빌더를 사용하여 사용자 정의 동적 아카이브 페이지 템플릿을 디자인할 수 있습니다. Divi 테마 빌더 이전의 Divi에서는 개발자가 아카이브 페이지 템플릿 테마 파일의 PHP 코드를 수동으로 사용자 정의한 다음 순전히 외부 CSS로 페이지 템플릿의 스타일을 지정해야 했습니다. 이것은 벽돌 레이아웃을 만드는 것을 훨씬 더 어렵게 만들었습니다. 그러나 이제 Divi Theme Builder를 사용하면 이 과정이 쉽고 즐거워집니다!
이 자습서에서는 아카이브 페이지 제목, 부제목 및 블로그 게시물을 동적으로 표시하는 아카이브 페이지 템플릿을 만드는 방법을 보여줍니다. 또한 블로그 포스트 모듈을 사용하여 포스트 아카이브를 석조 그리드 레이아웃으로 쉽게 표시할 수 있습니다.
시작하자!
엿보기
다음은 이 튜토리얼에서 함께 디자인할 아카이브 페이지 템플릿에 대한 간략한 설명입니다. 이 이미지에서는 "WordPress" 범주의 모든 게시물을 표시하는 데 사용됩니다.
아카이브 페이지 템플릿을 무료로 다운로드하십시오
이 튜토리얼의 템플릿을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
템플릿 레이아웃을 웹사이트로 가져오려면 Divi 테마 빌더로 이동하여 이식성 옵션을 사용하여 .json 파일을 테마 빌더로 가져와야 합니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 다음을 수행해야 합니다.
- 아직 설치하지 않았다면 설치된 Divi 테마(또는 Divi 테마를 사용하지 않는 경우 Divi Builder 플러그인)를 설치하고 활성화하십시오.
- 아카이브 페이지 템플릿을 생성할 것이기 때문에 결과를 보려면 작성자, 카테고리 및/또는 태그가 할당된 일부 블로그 게시물이 웹사이트에 이미 생성되어 있어야 합니다.
그 후, 당신은 갈 준비가되었습니다.
아카이브 페이지 템플릿에 사용할 수 있는 모듈 및 동적 콘텐츠 이해
Divi 사이트에 대한 아카이브 페이지 템플릿을 구축할 때 올바른 정보를 동적으로 표시하는 템플릿을 효과적으로 구축할 수 있도록 어떤 도구를 사용할 수 있는지 이해하는 것이 중요합니다. 아카이브 페이지 템플릿의 경우 사용자가 아카이브 페이지를 방문할 때마다 현재 페이지의 게시물을 표시하는 데 가장 관심이 있습니다. 예를 들어 사용자가 "비즈니스" 카테고리 링크를 클릭하면 카테고리가 "비즈니스"인 모든 게시물을 표시하는 아카이브 페이지가 표시되어야 합니다. 일부 Divi 모듈에는 템플릿에 동적 콘텐츠를 간단하게 표시할 수 있는 기본 제공 옵션이 있습니다.
블로그 모듈
블로그 모듈은 아카이브 페이지 템플릿을 표시하는 데 사용해야 하는 기본 모듈입니다. 이는 현재 페이지에 대한 게시물을 표시하는 기본 제공 옵션이 있기 때문입니다.
이것은 기본적으로 사용자가 페이지를 방문할 때마다 일반적으로 생성되는 게시물을 표시하도록 Divi에 지시합니다. 따라서 "현재 페이지에 대한 게시물"을 표시하도록 옵션을 설정하면 사용자는 아카이브 페이지를 볼 수 있고 해당 현재 페이지에 대한 게시물이 올바르게 표시되도록 할 수 있습니다.
게시물/보관 제목(동적 콘텐츠)
게시/보관 페이지 제목을 표시하는 더 쉬운 방법은 일반 Divi 모듈을 사용한 다음 모든 Divi 모듈 내에서 사용 가능한 동적 콘텐츠 기능을 사용하여 게시/보관 페이지 제목을 가져오는 것입니다.
예를 들어 텍스트 모듈을 사용한 다음 게시물/보관 페이지 제목을 본문 콘텐츠에 동적 콘텐츠로 추가할 수 있습니다. 그런 다음 원하는 대로 제목에 스타일을 지정할 수 있습니다.
아카이브 페이지 템플릿을 만드는 데 필요한 도구를 이해했으므로 이제 함께 템플릿을 만들어 보겠습니다.
벽돌 레이아웃으로 Divi 아카이브 페이지 템플릿을 만드는 방법
석조 레이아웃으로 아카이브 페이지 템플릿을 만들려면 테마 빌더를 사용하여 모든 아카이브 페이지에 대한 새 템플릿을 디자인하기만 하면 됩니다.
모든 아카이브 페이지에 대한 사용자 정의 템플릿 생성 및 할당
시작하려면 WordPress 대시보드로 이동하여 Divi > 테마 빌더로 이동합니다. 그런 다음 빈 회색 상자 영역을 클릭하여 새 템플릿을 추가합니다.
그런 다음 템플릿을 모든 아카이브 페이지에 할당합니다.
템플릿에 새 사용자 정의 신체 영역 추가
템플릿에 대한 사용자 정의 본문을 작성하려면 사용자 정의 본문 추가 영역을 클릭한 다음 "사용자 정의 본문 작성"을 선택하십시오.
그런 다음 "처음부터 만들기" 옵션을 선택합니다.
동적 아카이브 제목 추가
템플릿 레이아웃 편집기에서 기본 섹션 설정을 배경색으로 업데이트합니다.
- 배경색: #eeeeee
그런 다음 일반 섹션 안에 새 1열 행을 만듭니다.
그런 다음 행에 텍스트 모듈을 추가합니다.
기본 본문 콘텐츠를 삭제하고 "동적 콘텐츠 사용" 아이콘을 클릭하고 "게시/아카이브 제목" 옵션을 선택합니다.
게시물/아카이브 제목 요소가 제자리에 있으면 톱니바퀴 아이콘을 클릭하여 설정을 엽니다.
그런 다음 Before 및 After 입력 영역을 업데이트하여 콘텐츠를 H1 태그로 래핑하고 다음과 같이 동적 제목 뒤에 정적 콘텐츠를 추가합니다.
전에:
<h1>
후에:
</h1>
SEO를 위해 제목을 H1 태그로 래핑해야 합니다.
스타일 동적 아카이브 제목
동적 콘텐츠가 준비되면 다음을 사용하여 스타일을 지정할 수 있습니다.
- 제목 글꼴: Mulish
- 제목 글꼴: 무게: 무거움
- 제목 텍스트 정렬: 가운데
- 제목 텍스트 색상: #3a405a
- 제목 텍스트 크기: 70px(데스크톱), 40px(태블릿 및 휴대폰)
동적 아카이브 부제목 텍스트 추가
동적 아카이브 페이지 제목을 사용자 정의 HTML로 래핑할 수 있기 때문에 자막 텍스트 내에서 동적 아카이브 페이지 제목을 가져오는 자막을 추가할 수 있습니다.
이렇게 하려면 제목이 있는 이전 텍스트 모듈 아래에 새 텍스트 모듈을 만듭니다.
기본 본문 텍스트를 삭제하고 게시물/아카이브 제목 동적 콘텐츠를 본문에 추가합니다(이전에 했던 것처럼).
게시물/보관 제목 설정을 열고 콘텐츠 전후에 다음을 추가합니다.
전에:
<h3>Here are the articles on
후에:
</h3>
이제 제목이 이전 텍스트 줄에 표시됩니다.
스타일 동적 아카이브 제목
동적 콘텐츠가 준비되면 다음 H3 설정을 업데이트하여 스타일을 지정할 수 있습니다.
- 제목 3 글꼴: Mulish
- 제목 3 텍스트 정렬: 가운데
블로그 모듈을 사용하여 현재 페이지의 게시물을 동적으로 표시
동적 아카이브 페이지 제목이 있는 상태에서 현재 아카이브 페이지의 게시물을 표시하는 블로그 모듈을 추가해야 합니다.
새 섹션 추가
블로그 모듈을 추가하기 전에 페이지에 새 섹션을 추가해 보겠습니다.
새 1열 행 추가
그런 다음 새 섹션에 새 1열 행을 추가합니다.
그런 다음 행 설정을 열고 다음을 업데이트합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 2;
- 폭: 95%
현재 페이지의 게시물을 동적으로 표시하는 블로그 모듈 추가
이제 행에 블로그 모듈을 추가해야 합니다.
Archvie 페이지가 올바른 게시물 아카이브를 가져오려면 현재 페이지에 대한 게시물이 활성화되어 있는지 확인해야 합니다. 다음과 같이 콘텐츠 옵션을 업데이트합니다.
- 현재 페이지에 대한 게시물: 예
디자인 블로그 모듈
콘텐츠 설정이 완료되면 디자인을 약간 변경해 보겠습니다. 디자인 탭에서 다음과 같이 레이아웃을 업데이트합니다.
- 레이아웃: 그리드
이제 콘텐츠 탭으로 돌아가서 다음 배경색을 그리드 항목에 추가합니다.
- 배경색: #3a405a
제목 텍스트 스타일 업데이트
- 제목 글꼴: Mulish
- 제목 글꼴 두께: 굵게
- 제목 텍스트 색상: #ee
- 제목 텍스트 크기: 34px
- 제목 줄 높이: 1.3em
본문 스타일 업데이트
- 본문 글꼴: 몬세라트
- 본문 색상: #ffffff
- 바디 라인 높이: 2em
메타 텍스트 스타일 업데이트
- 메타 글꼴: 몬세라트
- 메타 텍스트 색상: #ffb100
페이지 매김 스타일 업데이트
- 페이지 매김 글꼴 두께: 굵게
- 페이지 매김 텍스트 색상: #3a405a
이 시점에서 현재 아카이브 페이지의 게시물을 동적으로 표시할 페이지 제목과 블로그 게시물(석조 레이아웃)이 포함된 아카이브 페이지 템플릿이 실행 중입니다.
최종 결과
결과를 테스트하려면 사이트에서 다양한 유형의 아카이브 페이지를 방문하세요.
다음은 "WordPress" 카테고리에 대한 모든 게시물을 보여주는 카테고리 아카이브 페이지 템플릿의 예입니다.
다음은 특정 작성자의 모든 게시물을 표시하는 작성자 아카이브 페이지 템플릿입니다.
다음은 "뉴스"라는 태그가 있는 모든 게시물을 표시하는 태그 아카이브 페이지입니다.
다음은 2019년 10월의 모든 게시물을 표시하는 날짜 아카이브 페이지 템플릿입니다.
마지막 생각들
Divi의 테마 빌더로 새 아카이브 템플릿을 만드는 방법을 알고 나면 게시물에 석조 레이아웃을 쉽게 추가할 수 있습니다. 트릭은 아카이브 페이지 제목을 동적 콘텐츠로 표시하기 위해 Divi의 내장 옵션을 사용한 다음 블로그 모듈을 사용하여 벽돌 격자 레이아웃에서 현재 페이지의 게시물을 동적으로 표시하는 것입니다. 바라건대 이는 쉽게 간과될 수 있는 아카이브 페이지를 대상으로 하여 웹사이트의 전반적인 디자인을 향상시키는 데 도움이 될 것입니다.
댓글로 여러분의 의견을 기다리겠습니다.
건배!