Divi에서 페이지 매김 스타일을 지정하는 방법에 대한 편리한 가이드

페이지 매김은 특히 디자인과 관련하여 종종 간과되는 웹 사이트 요소 중 하나입니다. 웹사이트에서 페이지 매김을 사용하는 것이 적절할 수 있는 여러 위치가 있습니다. 기본적으로 페이지 매김(또는 페이지 매김 메뉴)을 통해 사용자는 항목의 여러 페이지(예: 게시물 아카이브)를 탐색할 수 있습니다. 이것은 초기 페이지 내용을 줄이는 데 특히 유용합니다.

Divi에는 내장 설정을 사용하여 스타일을 지정할 수 있는 페이지 매김(예: 갤러리 모듈)이 포함된 여러 모듈이 있습니다. 블로그 및 포트폴리오와 같은 이러한 모듈 중 일부는 일부 사이트에서 지나치게 단순화될 수 있는 Divi 테마(또는 WordPress)의 기본 페이지 매김을 상속합니다. 그러나 플러그인의 도움으로 전체 테마의 페이지 매김을 더 복잡한 것으로 바꿀 수 있습니다. 그런 다음 필요에 따라 CSS로 스타일을 지정할 수 있습니다.

이 튜토리얼에서는 Divi 전체에서 페이지 매김 스타일을 지정하는 방법을 보여 드리겠습니다. 우리가 다룰 내용은 다음과 같습니다.

• Divi에서 페이지 매김 스타일을 지정할 때 고려해야 할 사항
• Divi 갤러리 모듈 스타일링 및 필터링 가능한 포트폴리오 모듈 페이지 매김
• 갤러리 모듈 및 필터링 가능한 포트폴리오 모듈을 위한 고급 페이지 매김 스타일
• 블로그 모듈 및 포트폴리오 모듈 페이지 매김 스타일링
• WP-PageNavi 플러그인을 사용하여 Divi에 복잡한 페이지 매김 추가
• 사용자 정의 CSS로 WP-PageNavi 페이지 매김 스타일링

시작하자.

엿보기

이 게시물은 주로 페이지 매김 스타일을 지정하는 방법에 관한 것입니다. 그러나 다음은 몇 가지 복잡한 페이지 매김 스타일을 만드는 방법을 보여 드리겠습니다.

시작하기

YouTube 채널 구독

이 튜토리얼에서는 다음이 필요합니다.

• Divi 테마가 설치되고 활성화되었습니다.
• 다른 모듈의 페이지 매김 디자인을 테스트하려면 모의 콘텐츠가 필요합니다. 예를 들어, 포트폴리오(또는 필터링 가능한 포트폴리오) 모듈 페이지 매김을 디자인하려면 테마에 약 12-16개의 프로젝트를 추가해야 페이지 매김이 적용되기에 충분한 콘텐츠를 갖게 됩니다. 갤러리 모듈의 경우 갤러리를 채우려면 약 12-16개의 이미지도 필요합니다.
• WP-PageNavi 플러그인을 사용하려면 플러그인을 설치하고 활성화해야 합니다. 이것은 사이트의 WordPress 대시보드 내에서 WordPress 디렉토리에서 다운로드할 수 있는 무료 플러그인입니다. 플러그인 > 새로 추가로 이동하고 WP-PageNavi를 검색하기만 하면 됩니다.
  

모의 콘텐츠가 준비되면 새 페이지를 만들 준비가 된 것입니다. WordPress 대시보드에서 페이지 > 새로 추가로 이동합니다. 페이지에 제목을 지정하고 Divi Builder를 배포합니다. "처음부터 빌드" 옵션을 선택합니다. 그런 다음 프런트 엔드에서 빌드를 클릭합니다.

이제 몇 가지 페이지 매김 디자인을 테스트할 준비가 되었습니다.

Divi에서 페이지 매김 스타일을 지정할 때 고려해야 할 사항

일반적으로 페이지 매김 디자인에 너무 열중하고 싶지는 않을 것입니다. 다른 탐색 메뉴와 마찬가지로 단순하고 직관적으로 유지하는 것이 중요하기 때문입니다. 그러나 다음은 Divi에서 페이지 매김을 디자인할 때 고려할 수 있는 몇 가지 사항입니다.

페이지 매김 글꼴

페이지 매김은 사이트에 사용하는 기본 글꼴에서 벗어날 수 있는 좋은 장소입니다. 사용자 인터페이스 및 탐색에 적합한 최상의 글꼴을 선택하고 싶습니다. 그리고 페이지 매김에는 대부분 숫자가 포함되기 때문에 글꼴이 동일한 높이와 너비로 모든 숫자를 표시하는지 확인해야 합니다(타이포그래피 전문가가 라이닝 및 테이블 형식이라고 부르는 것). 내가 보수적으로 좋아하는 몇 가지는 Oxygen, Nunito Sans 및 Source Sans Pro를 포함합니다. 페이지 매김에 많은 페이지가 있는 경우 Fjalla One 또는 Roboto Condensed와 같은 축약된 글꼴로 이동하여 공간을 확보해야 할 수도 있습니다.

페이지 매김 글꼴 스타일

페이지 매김을 구분하기 위해 몇 가지 글꼴 스타일을 시도해 볼 수도 있습니다. 예를 들어 대문자 글꼴 스타일을 사용하여 "다음" 및 "이전" 링크를 페이지 번호 높이와 동일하게 만들고 더 뚜렷하게 만들 수 있습니다. 그러나 링크가 이미 탐색 메뉴에 있다는 점을 고려할 때 밑줄 글꼴 스타일을 추가하는 것은 약간 중복될 수 있습니다.

페이지 매김 문자 간격

문자 간격은 페이지 매김에 가로 간격을 조금 더 추가하는 좋은 방법입니다. 이것은 멋진 디자인 요소를 추가하고 탐색을 눈에 띄게 만들 수 있습니다.

페이지 매김 텍스트 정렬

Divi에서는 페이지 매김을 페이지의 왼쪽, 중앙 또는 오른쪽에 쉽게 정렬할 수 있습니다. 따라서 웹 페이지를 디자인할 때마다 이 점을 잊지 마십시오.

클릭 가능한 공간

페이지 매김 링크를 클릭할 수 있는 충분한 공간을 확보하는 것이 중요합니다. 기본적으로 이것은 상당히 작습니다. 더 큰 텍스트를 사용하거나 줄 높이를 높여 클릭 가능한 공간을 늘릴 수 있습니다. 그러나 일부 CSS를 사용하여 해당 링크 주위에 패딩을 추가할 수도 있습니다.

페이지 매김 텍스트 크기

페이지 매김 텍스트 크기는 일반적으로 상당히 작습니다. 이것은 아마도 사용자가 페이지의 콘텐츠에서 주의를 산만하게 하지 않도록 하기 위한 것입니다. 그러나 더 큰 텍스트 크기를 사용하면 페이지 매김 링크의 클릭 가능한 공간이 증가할 수 있으며 사용자가 더 잘 알아볼 수 있습니다. 나는 더 큰 페이지 매김 텍스트에 대해 vw 길이 단위를 사용하여 브라우저와 콘텐츠에 맞게 확장되는 것을 좋아합니다.

페이지 매김 줄 높이

페이지 매김은 일반적으로 한 줄에 유지되므로 클릭 가능한 추가 공간을 추가하기 위해 링크에 줄 높이를 조금 더 추가하면 됩니다.

페이지 매김 텍스트 그림자

텍스트 그림자는 잘못 사용하면 주의가 산만해질 수 있습니다. 미묘하게 유지할 계획이 아니라면 그대로 두는 것이 가장 좋습니다. 원하는 경우 텍스트 주위에 창의적인 빛을 추가하는 데 사용할 수도 있습니다.

페이지 매김 활성 페이지

페이지 매김의 이러한 측면은 탐색할 때 현재 어떤 페이지에 있는지 사용자에게 알리는 데 중요합니다. 활성 페이지 링크와 비활성 페이지 링크의 스타일 사이에 명확한 대조가 있어야 합니다. 기본적으로 Divi는 테마 커스터마이저에 설정된 기본 강조 색상을 Divi의 활성 페이지 링크 색상으로 사용합니다. 그러나 CSS 행으로 이것을 재정의할 수 있습니다.

페이지 매김이 있는 모듈의 경우 Divi에는 페이지 매김의 다양한 요소를 스타일링하기 위한 내장 디자인 옵션이 있습니다. 또한 고급 탭에서 CSS의 일부 스니펫을 쉽게 추가하여 편리한 한 곳에서 디자인을 더욱 효과적으로 제어할 수 있습니다.

그러나 테마 수준에서 페이지 매김의 경우 사용자 지정 CSS와 함께 WP-PageNavi 플러그인을 사용하여 복잡한 솔루션을 얻을 수 있습니다(자세한 내용은 나중에 설명).

지금은 Divi 모듈에서 페이지 매김 스타일을 지정하는 방법부터 시작하겠습니다.

Divi 갤러리 모듈 스타일링 및 필터링 가능한 포트폴리오 모듈 페이지 매김

새 페이지에서 Divi Builder가 활성화된 상태에서 한 열 행이 있는 새 일반 섹션을 만듭니다. 그런 다음 필터링 가능한 포트폴리오 모듈을 행에 추가합니다. 앞에서 언급했듯이 페이지 매김을 볼 수 있도록 12-16개의 프로젝트를 생성했는지 확인하십시오.

필터링 가능한 포트폴리오 설정에서 다음을 업데이트합니다.

게시물 수: 4(페이지 매김에서 더 많은 페이지 링크를 볼 수 있도록)

제목 표시: 아니요
카테고리 표시: 아니오

기본적으로 Divi는 페이지 매김을 표시하므로 해당 옵션을 YES로 설정하십시오.

포트폴리오의 오른쪽 하단에 페이지 매김이 표시되어야 합니다.

페이지 매김 스타일을 지정하려면 디자인 탭으로 이동하여 페이지 매김 텍스트 토글을 열어 사용 가능한 모든 옵션을 확인합니다. 다음을 업데이트합니다.

레이아웃: 그리드
페이지 매김 글꼴: Source Sans Pro
페이지 매김 글꼴 스타일: TT
페이지 매김 텍스트 정렬: 가운데
페이지 매김 텍스트 색상: #cccccc
페이지 매김 텍스트 크기: 4vw(데스크톱), 38px(태블릿 및 휴대폰)
페이지 매김 문자 간격: 1vw
페이지 매김 줄 높이: 2em

그런 다음 고급 탭을 클릭하고 페이지 매김 활성 페이지 아래에 다음 CSS 스니펫을 추가합니다.

color: #0096eb !important;

더 큰 줄 높이로 텍스트를 더 크게 만들면 사용자가 클릭할 수 있는 공간이 더 커집니다. 정렬을 가운데로 변경하고 약간의 문자 간격을 추가하면 페이지 매김이 더 눈에 띄게 됩니다. 그리고 대조되는 활성 페이지 색상과 함께 사용자 정의 페이지 매김 텍스트 색상은 사용자가 현재 페이지를 알 수 있도록 도와줍니다.

기타 빠른 CSS 스니펫

다음은 페이지 매김 디자인을 변경하는 몇 가지 빠르고 쉬운 CSS 스니펫입니다.

페이지 매김 바로 위에 있는 기본 경계선을 제거하려면 포트폴리오 페이지 매김 아래에 다음 CSS를 입력할 수 있습니다.

border: none;

페이지 매김에 완전한 테두리를 부여하려면 포트폴리오 페이지 매김 아래에 다음 CSS를 입력할 수 있습니다.

border: 2px solid #dddddd;

페이지 매김에 배경색을 지정하려면 포트폴리오 페이지 매김 아래에 다음 CSS를 입력할 수 있습니다.

background: #333333;

갤러리 모듈에서도 작동합니다.

이 동일한 디자인 설정은 갤러리 모듈에서도 작동합니다. 실제로 Filterable Portfolio Module에서 페이지 매김 텍스트 스타일을 복사하여 갤러리 모듈에 붙여넣을 수 있습니다! CSS 스니펫을 통해서도 전송했는지 확인하십시오.

갤러리 모듈 및 필터링 가능한 포트폴리오 모듈을 위한 고급 페이지 매김 스타일

Filterable Portfolio 및 Gallery 모듈의 페이지 매김에 대한 고급 디자인을 얻으려면 고급 사용자 정의 CSS를 사용할 수 있습니다. 이 특정 예제에서 내가 좋아하는 것은 사용자 정의 CSS가 모듈의 기본 제공 설정과 함께 작동한다는 것입니다.

시연하기 위해 Filterable Portfolio를 다시 사용해 보겠습니다. 이번에는 다음과 같이 설계 옵션을 업데이트합니다.

레이아웃: 그리드
페이지 매김 텍스트 크기: 16px
페이지 매김 라인 높이: 2.5em

고급 탭에서 다음 CSS 클래스를 추가합니다.

CSS 클래스: 페이지 공간

이렇게 하면 CSS를 이 모듈에만 적용할 수 있습니다.

이제 설정을 저장하고 페이지 설정 팝업 모달을 엽니다. 고급 탭에서 사용자 정의 CSS 상자 안에 다음 CSS 코드를 추가합니다.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

코드가 제자리에 있으면 페이지 매김에 각 페이지 링크에 대해 더 많은 클릭 가능한 공간이 있음을 알 수 있습니다. 또한 링크에는 클릭 가능한 버튼처럼 보이도록 배경색이 추가되었습니다. 마우스를 가져가면 각 링크에도 미묘한 테두리가 추가됩니다. 활성 페이지 링크는 밝은 텍스트 색상과 대조되는 어두운 배경으로 두드러집니다.

이 코드는 필터링 가능한 포트폴리오 모듈과 갤러리 모듈 모두에 대한 페이지 매김 스타일을 지정합니다. 적용하려면 모듈에 CSS 클래스 "pagi-space"를 추가해야 합니다.

다음은 필터링 가능한 포트폴리오 모듈에 대한 결과입니다.

블로그 모듈 및 포트폴리오 모듈 페이지 매김 스타일링

블로그 모듈 및 포트폴리오 모듈은 "이전 항목"에 대한 링크 및 "다음 항목"에 대한 링크를 사용하여 게시물 아카이브를 탐색할 수 있는 기본 WordPress 페이지 매김을 상속합니다.

Divi 테마의 블로그 아카이브 페이지에서 기본 페이지 매김은 다음과 같습니다.

이 동일한 페이지 매김은 블로그 모듈과 포트폴리오 모듈에서 사용됩니다.

블로그 모듈(또는 포트폴리오 모듈)을 사용하는 경우 기본 제공 설정을 사용하여 페이지 매김 텍스트의 스타일을 지정할 수 있습니다.

이것은 대부분의 경우에 간단하고 우아한 솔루션입니다. 그러나 기본 Divi/WordPress 페이지 매김을 대체하기 위해 더 복잡한 페이지 매김을 찾고 있다면 너무 쉬워서 놀랄 수 있는 솔루션이 있습니다.

WP-PageNavi 플러그인을 사용하여 Divi에 복잡한 페이지 매김 추가

블로그 모듈 및 포트폴리오 모듈을 포함하여 전체 Divi 테마에 대한 고급 페이지 매김을 원하는 경우 WP-PageNavi라는 인기 플러그인을 사용하여 기본 WordPress 페이지 매김을 다른 페이지로 바꿀 수 있습니다. 이 플러그인은 Divi와 잘 작동합니다. 디자인은 기본이지만 CSS를 사용하여 쉽게 사용자 정의할 수 있습니다.

Divi에 플러그인 추가하기

아직 설치하지 않았다면 게시물 상단의 "시작하기" 섹션에 설명된 대로 플러그인을 설치하세요. 플러그인이 설치되고 활성화되면 테마 전체에 새로운 형식의 페이지 매김이 자동으로 표시됩니다.

블로그 모듈과 포트폴리오 모듈에도 영향을 미칩니다.

플러그인 설정

설정 > WP-PageNavi로 이동하여 WordPress 대시보드에서 플러그인 설정을 찾을 수 있습니다.

설정은 주로 표시되는 기능 및 텍스트 내용을 사용자 지정하기 위한 것입니다. 그러나 페이지 매김 스타일을 지정하려면 일부 사용자 정의 CSS를 사용해야 합니다.

사용자 정의 CSS로 WP-PageNavi 페이지 매김 스타일링

전체 테마의 페이지 매김 스타일을 지정하고 싶을 것이므로 CSS를 Theme Customizer 또는 Child Theme style.css 파일에 추가하는 것이 가장 합리적입니다. 계속해서 다음 CSS를 Theme Customizer Additional CSS 상자에 넣습니다.

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

다음은 최종 결과입니다.

블로그 모듈 및 포트폴리오 모듈에서 WP-PageNavi 스타일링

앞서 언급했듯이 블로그 모듈 및 포트폴리오 모듈은 기본 WordPress 페이지 탐색을 상속합니다. 이것은 WP-PageNavi의 새로운 복잡한 페이지 매김으로 대체되었으므로 모듈은 이 새로운 페이지 매김도 표시합니다.

기본 제공 페이지 매김 텍스트 디자인 옵션을 사용하여 페이지 매김에 스타일을 추가할 수 있습니다.

외부 사용자 정의 CSS가 있는 경우 일부 옵션이 예상대로 작동하지 않을 수 있습니다.

마지막 생각들

페이지 매김은 Divi에서 웹 사이트를 구축할 때 계속해서 나중에 생각할 필요가 없습니다. 페이지 매김을 사용하는 모듈에 도움이 되는 몇 가지 유용한 내장 옵션이 있습니다. 그리고 일부 사용자 정의 CSS를 사용하여 원하는 스타일을 만들 수 있습니다. WP-PageNavi 플러그인은 Divi 테마 전체에 복잡한 페이지 매김을 추가하기 위한 우아한 솔루션입니다. Divi와 원활하게 작동할 뿐만 아니라 쉽게 사용자 지정할 수 있는 추가 옵션을 제공합니다. WP-PageNavi 페이지 매김 스타일을 지정하려면 약간의 CSS가 필요하지만 이 기사에서 사용된 템플릿이 올바른 방향으로 안내해 주기를 바랍니다.

이 게시물의 예제 디자인은 의도적으로 단순했습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!