Divi의 필터링 가능한 포트폴리오 모듈에서 페이지 매김 스타일을 지정하는 방법

Divi의 필터링 가능한 포트폴리오 모듈은 웹사이트에 작업과 프로젝트를 표시하는 훌륭하고 쉬운 방법입니다. 카테고리를 사용하여 포트폴리오 모듈에 대한 다양한 필터를 생성할 수 있으며, 매번 웹사이트 디자인을 수정하지 않고도 업데이트된 포트폴리오를 유지하는 쉬운 방법을 제공합니다. WordPress 대시보드에 새 프로젝트를 추가하기만 하면 적절하게 분류되는 한 웹사이트의 포트폴리오 모듈에 자동으로 채워집니다.

이 튜토리얼에서는 Divi의 필터링 가능한 포트폴리오 모듈에서 페이지 매김 스타일을 지정하는 3가지 방법을 보여줍니다. 이 디자인을 사용자 정의하여 포트폴리오 모듈을 웹 사이트의 전체 디자인에 맞게 만들고 표시하려는 작업에 주의를 끌 수 있습니다.

시작하자!

엿보기

다음은 우리가 디자인할 내용의 미리보기입니다.

페이지 매김 스타일 1

페이지 매김 스타일 2

페이지 매김 스타일 3

시작하는 데 필요한 것

Divi 설치 및 활성화

시작하기 전에 Divi 테마를 설치 및 활성화하고 웹 사이트에 최신 버전의 Divi가 있는지 확인하십시오.

포트폴리오 프로젝트 추가

포트폴리오를 페이지에 추가한 후 프로젝트로 채우려면 먼저 WordPress 대시보드에 프로젝트를 추가해야 합니다. WordPress 대시보드 사이드바에서 프로젝트를 선택한 다음 새 프로젝트를 추가합니다. 필터링할 수 있도록 프로젝트에 추천 이미지와 카테고리가 있는지 확인하세요.

이제 시작할 준비가 되었습니다!

Divi의 필터링 가능한 포트폴리오 모듈에서 페이지 매김 스타일을 지정하는 방법

미리 만들어진 레이아웃으로 새 페이지 만들기

Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하여 시작하겠습니다. 이 디자인에는 Painter 레이아웃 팩의 Painter 포트폴리오 페이지를 사용합니다.

웹 사이트에 새 페이지를 추가하고 제목을 지정한 다음 Divi Builder 사용 옵션을 선택합니다.

이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하므로 레이아웃 찾아보기를 선택합니다.

Painter 포트폴리오 페이지 레이아웃을 검색하여 선택합니다.

이 레이아웃 사용을 선택하여 페이지에 레이아웃을 추가합니다.

이제 디자인을 만들 준비가 되었습니다.

필터링 가능한 포트폴리오 모듈 추가

이 페이지의 기존 포트폴리오 콘텐츠를 필터링 가능한 포트폴리오 모듈로 교체합니다. 먼저 기존 포트폴리오 섹션을 삭제합니다.

그런 다음 페이지의 "최근 작업" 섹션 아래에 새 섹션을 삽입합니다.

그런 다음 섹션에 단일 열이 있는 행을 추가합니다.

필터링 가능한 포트폴리오 모듈을 새 행에 추가합니다.

필터링 가능한 포트폴리오는 WordPress 대시보드의 프로젝트 섹션에 추가된 프로젝트로 채워져야 합니다.

필터링 가능한 포트폴리오 설정

이제 필터링 가능한 포트폴리오의 디자인을 사용자 지정해 보겠습니다. 모듈 설정을 연 다음 게시물 수를 6으로 변경합니다.

• 게시물 수: 6

요소에서 카테고리 표시를 비활성화합니다.

• 카테고리 표시: 아니오

디자인 탭으로 이동하여 레이아웃 설정을 엽니다. 레이아웃을 그리드로 설정합니다.

• 레이아웃: 그리드

그런 다음 오버레이 설정을 엽니다. 확대/축소 아이콘 색상, 호버 오버레이 색상 및 호버 아이콘 선택기를 다음과 같이 설정합니다.

• 확대/축소 아이콘 색상: #fdd23a
• 호버 오버레이 색상: rgba(61,61,61,0.28)
• 호버 아이콘 선택기: 더하기 아이콘

이미지 설정을 연 다음 이미지 상자 그림자를 추가합니다.

그런 다음 그림자 색상을 설정합니다.

• 그림자 색상: #f2f2f2

다음으로 제목 글꼴 설정을 다음과 같이 변경합니다.

• 제목 글꼴: Merriweather
• 제목 글꼴 두께: 굵게
• 제목 텍스트 색상#000000

제목 텍스트 크기와 줄 높이를 설정합니다.

• 제목 텍스트 크기: 25px
• 제목 줄 높이: 2em

필터 기준 텍스트 섹션으로 이동하고 다음과 같이 글꼴 설정을 변경합니다.

• 필터 기준 글꼴: Montserrat
• 필터 기준 글꼴 두께: 굵게
• 필터 기준 텍스트 색상: #000000

이제 대부분의 모듈 디자인이 완료되었으므로 페이지 매김 스타일을 사용자 정의할 수 있습니다.

페이지 매김 스타일 1

첫 번째 페이지 매김 스타일의 경우 활성 페이지에 대해 다른 글꼴 색상을 설정합니다. 또한, 호버 시 증가하도록 페이지 매김 텍스트 크기를 설정합니다. 시작하자.

필터링 가능한 포트폴리오 설정 내에서 페이지 매김 텍스트 설정을 엽니다. 다음과 같이 글꼴을 사용자 지정합니다.

• 페이지 매김 글꼴: 몬세라트
• 페이지 매김 글꼴 두께: 굵게
• 페이지 매김 텍스트 정렬: 오른쪽
• 페이지 매김 텍스트 색상: #000000

텍스트 크기를 설정합니다. 그 다음에. 호버 설정을 사용하여 호버할 때 텍스트 크기를 늘립니다.

• 페이지 매김 텍스트 크기: 17px
• 호버 시 페이지 매김 텍스트 크기: 21px

마지막으로 고급 탭으로 이동하여 페이지 매김 활성 페이지 CSS 섹션에 다음 사용자 지정 CSS를 추가합니다. 이렇게 하면 활성 페이지에서 노란색이 활성화됩니다.

color: #FDD23A !important;

최종 디자인

다음은 첫 번째 디자인의 최종 모습입니다.

페이지 매김 스타일 2

우리가 디자인할 두 번째 페이지 매김 스타일에는 페이지 매김 뒤의 배경색, 일부 호버 색상 효과 및 활성 페이지의 다른 색상이 포함됩니다.

필터링 가능한 포트폴리오 설정 내에서 페이지 매김 텍스트 설정을 엽니다. 다음과 같이 글꼴을 사용자 지정합니다.

• 페이지 매김 글꼴: Merriweather
• 페이지 매김 글꼴 두께: 굵게
• 페이지 매김 텍스트 정렬: 가운데
• 페이지 매김 텍스트 색상: #9e9e9e
• 호버 시 페이지 매김 텍스트 색상: #000000

다음으로 텍스트 크기와 줄 높이를 설정합니다.

• 페이지 매김 텍스트 크기: 26px
• 페이지 매김 줄 높이: 2em

고급 탭으로 이동하여 포트폴리오 페이지 매김 CSS 섹션에 다음 사용자 정의 CSS를 추가합니다. 그러면 배경색이 추가되고 테두리가 제거됩니다.

background:#f2f2f2;
border:none;

마지막으로 페이지 매김 활성 페이지 CSS 섹션에 다음 CSS를 추가하여 활성 페이지에 대해 다른 텍스트 색상을 설정합니다.

color: #000000 !important;

최종 디자인

다음은 두 번째 페이지 매김 스타일의 최종 디자인입니다.

페이지 매김 스타일 3

최종 페이지 매김 디자인을 위해 활성 페이지 뒤에 노란색 원을 추가합니다. 또한 활성 페이지와 호버에 대해 다른 글꼴 색상을 설정합니다.

필터링 가능한 포트폴리오 설정 내에서 페이지 매김 텍스트 설정을 엽니다. 그런 다음 글꼴을 다음과 같이 사용자 지정합니다.

• 페이지 매김 글꼴: Merriweather
• 페이지 매김 글꼴 두께: 굵게
• 페이지 매김 텍스트 정렬: 가운데
• 페이지 매김 텍스트 색상: #000000
• 마우스 오버 시 페이지 매김 텍스트 색상: #FDD23A
• 페이지 매김 텍스트 크기: 26px

고급 탭으로 이동하고 다음 사용자 정의 CSS를 포트폴리오 페이지 매김 CSS 섹션에 추가하여 테두리를 제거합니다.

border:none;

마지막으로 Pagination Active Page CSS 섹션에 다음 CSS를 추가합니다. 이 CSS는 활성 페이지에 대해 다른 텍스트 색상과 원형 배경을 설정합니다.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

최종 디자인

다음은 마지막 레이아웃의 최종 디자인입니다.

최종 결과

이제 서로 다른 페이지 매김 스타일을 사용하여 세 가지 최종 디자인을 모두 살펴보겠습니다.

페이지 매김 스타일 1

페이지 매김 스타일 2

페이지 매김 스타일 3

마지막 생각들

필터링 가능한 포트폴리오 모듈은 웹사이트 디자인에 맞게 쉽게 사용자 지정할 수 있으며 WordPress 대시보드에서 새 프로젝트를 빠르게 추가하여 포트폴리오를 최신 상태로 유지할 수 있습니다. 이 모듈은 디자이너, 아티스트, 사진가 및 기타 크리에이티브가 아름다운 이미지와 쉬운 탐색으로 자신의 작업을 과시하는 데 적합합니다. 보다 독특한 포트폴리오 디자인 아이디어는 동적 포트폴리오 프로젝트 템플릿 생성에 대한 이 튜토리얼을 확인하십시오. 웹사이트에서 필터링 가능한 포트폴리오 모듈을 사용해 보셨습니까? 댓글로 알려주세요!