[워드프레스] Elegant Themes의 Divi 테마에서 포스트 슬라이더 사용하기

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

Divi 테마에서 포스트 슬라이더 사용하기

Elegant Themes의 Divi 테마에 내장된 Divi 빌더에서 포스트 슬라이더 모듈을 사용하면 별도의 플러그인 없이 다양한 효과의 포스트 슬라이더를 구현할 수 있습니다.

전체 너비 절(Full Width Section)에 포스트 슬라이더를 넣는 경우 "전체폭 게시물 슬라이더(Fullwidth Post Slider)" 모듈을 선택할 수 있습니다.

Full width Post Slider - [워드프레스] Elegant Themes의 Divi 테마에서 포스트 슬라이더 사용하기

"전체폭 게시물 슬라이더"를 클릭하면 세부 옵션을 선택할 수 있는 화면이 표시됩니다.

Post Slider Options - [워드프레스] Elegant Themes의 Divi 테마에서 포스트 슬라이더 사용하기

포스트 개수, 카테고리 설정, 정렬 기준, 요약문 길이 등 다양한 옵션을 선택할 수 있습니다. 또, Featured Image(특성 이미지)를 배경으로 배치할 것인지 아니면 위/아래/왼쪽/오른쪽에 배치할 것인지도 선택이 가능합니다. 왼쪽에 배치하면 왼쪽에 썸네일이 표시되고 오른쪽에 제목과 요약문이 표시되는 형태로 표시됩니다.

Featured Image position - [워드프레스] Elegant Themes의 Divi 테마에서 포스트 슬라이더 사용하기
특성 이미지 위치 설정

Parallax(패럴렉스) 효과를 사용할지 여부도 설정이 가능합니다. Parallax를 "시차효과"라고도 번역되어 있네요. 패럴렉스 기법은 CSS와 트루 패럴렉스 중에서 선택할 수 있습니다.

Parallax Options - [워드프레스] Elegant Themes의 Divi 테마에서 포스트 슬라이더 사용하기

옵션을 설정한 후에 적용해보면 전체폭(Full width)으로 포스트 슬라이더가 표시됩니다.

Divi Post Slider in action - [워드프레스] Elegant Themes의 Divi 테마에서 포스트 슬라이더 사용하기

표준 절(Standard Section)이나 특수 절(Specialty Section)에서는 "게시물 슬라이더" 모듈을 선택하면 됩니다.

Post Slider - [워드프레스] Elegant Themes의 Divi 테마에서 포스트 슬라이더 사용하기

세부 옵션은 전체폭 게시물 슬라이더와 비슷합니다.

자세한 설정은 다음 동영상을 참고해보시기 바랍니다. 영어로 설명하지만 이해하는 데 도움이 될 것입니다.

이 블로그에서는 인기 워드프레스 테마 중 하나인 Enfold 테마를 사용하고 있지만 포스트 슬라이더 기능이 없어서 Master Slider를 통해 포스트 슬라이더를 추가했습니다. Divi 테마의 Divi 빌더 내에서 제공하는 포스트 슬라이더는 다양한 설정이 가능하고 더 깔끔한 레이아웃을 보여주는 것 같습니다.

참고:



댓글 남기기