워드프레스 BeTheme 블로그 슬라이더 만들기

5

BeTheme은 테마포레스(Themeforest)에서 아바다 테마 다음으로 많이 판매되고 있는 인기 워드프레스 테마 중 하나입니다. 비테마는 자체 페이지 빌더인 BeBuilder가 사용되었지만 현재는 BeBuilder와 함께 엘리멘터 빌더도 지원됩니다. 사전 제작된 웹사이트(데모) 로드 시 두 빌더 중에서 선택할 수 있는 옵션을 제공합니다.

하지만 모든 데모가 엘리멘터가 지원되는 것은 아니므로 데모 선택 시 가급적 엘리멘터가 지원되는 데모를 선택하여 엘리멘터를 빌더로 선택하시기 바랍니다.

BeTheme 테마에서 엘리멘터를 빌더로 선택할 경우 몇 가지 슬라이더 위젯을 사용할 수 있습니다. 블로그 슬라이더(포스트 슬라이더)를 원하는 경우 BeTheme에서 만든 Blog Slider를 선택할 수 있습니다. 엘리멘터 프로를 함께 사용한다면 엘리멘터에서 제공하는 Loop Carousel을 사용하는 것도 가능합니다.

참고로 BeTheme은 우리나라 정서에 잘 맞는 테마로 평가하는 분들도 계십니다. 이 때문인지 우리나라에서도 많이 사용되고 있습니다. BE 테마는 많은 데모를 제공하므로 마음에 드는 데모를 선택하여 쉽게 사이트를 만들 수 있습니다.

워드프레스 BeTheme 블로그 슬라이더 만들기

BeTheme에서 제공하는 Blog slider 사용하기

블로그 글들을 슬라이드로 표시하고 싶은 경우에는 BeTheme 테마에서 자체적으로 만들어 제공하는 Blog slider 모듈을 사용할 수 있습니다.

블로그 슬라이더 위젯을 원하는 곳으로 드래그하여 블로그 글을 표시하는 슬라이더를 만들 수 있습니다.

Options(옵션) 섹션에서 카테고리를 지정할 수 있고 정렬 기준을 설정할 수 있습니다. 카테고리는 여러 개를 지정할 수 있습니다.

Advanced(고급) 섹션에서는 Read more (더 보기) 버튼을 표시할 것인지를 지정하고 스타일(Style)과 내비게이션(Navigation) 옵션을 선택할 수 있습니다.

기본적인 설정을 사용할 경우 다음과 비슷한 슬라이더를 만들 수 있습니다.

플랫(Flat) 스타일을 사용하면 슬라이더 스타일이 다음과 같이 됩니다. 슬라이드 위에 마우스를 올리면 아래와 같이 양 옆에 내비게이션 아이콘을 표시됩니다.

비테마의 Blog slider 위젯은 사용자가 제어할 수 있는 옵션이 제한적인 것 같습니다.

엘리멘터 프로의 Loop Carousel 사용하기

Elementor Pro를 사용한다면 Loop Carousel(루프 회전 슬라이드) 위젯을 사용하여 정교하게 슬라이더를 만들 수 있습니다.

이 캐러셀을 사용하려면 엘리멘터 프로가 설치되고 라이선스가 등록되어야 합니다.

Loop Carousel을 사용하려면 먼저 테마 빌더에서 Loop Item 템플릿을 만들어야 합니다.

  1. 테마 빌더에서 Loop Item 템플릿을 만듭니다. 표시할 요소(썸네일, 제목, 작성자,날짜, 카테고리 등 메타 정보, 요약문 등)를 선택할 수 있습니다. (상기 그림에서는 특성 이미지만 표시되도록 하고 썸네일을 클릭하면 해당 블로그 글로 이동합니다.)
  2. 페이지에서 Loop Carousel을 선택한 다음 표시할 전체 슬라이드 개수, 한 화면에 표시할 슬라이드 개수, 표시할 포스트 타입(예: 포스트, 포트폴리오 등) 등 상세한 설정이 가능합니다.

Theme Builder에서 Loop Item 템플릿을 편집하거나 새로 만들 수 있습니다.

Loop Carousel 위젯의 Query 섹션에서 포스트 타입과 카테고리 등을 지정할 수 있습니다.

Settings 섹션에서 자동 재생, 스크롤 속도, 허버 시 일시 정지, 무한 스크롤, 슬라이드 진행 방향, 오프셋 등의 설정을 할 수 있습니다.

Navigation 섹션에서 내비게이션 아이콘을 라이브러리에서 선택하거나 직접 만든 커스텀 아이콘(svg 포맷)을 업로드할 수 있습니다.

Pagination에서는 페이지네이션 종류를 지정할 수 있습니다.

엘리멘터 프로의 Loop Carousel은 다양한 옵션을 제공하므로 세부적으로 슬라이더를 커스텀할 수 있습니다.

💡엘리멘터 프로에 대한 자세한 정보

마치며

이상으로 BeTheme 테마에서 엘리멘터 빌더를 사용할 경우 이용할 수 있는 포스트 슬라이더에 대하여 살펴보았습니다. 기본적으로 BeTheme에서 제공하는 Blog slider를 사용하면 기본적인 슬라이더를 만들 수 있습니다.

엘리멘터 프로를 사용하는 경우에는 Loop Carousel 요소를 사용하여 정교한 포스트 슬라이더를 구성할 수 있습니다.

이미지 캐러셀을 원하는 경우에는 엘리멘터에서 제공하는 Image Carousel 위젯을 사용할 수 있습니다. 약간의 커스텀을 통해 기능을 확장할 수 있습니다.

엘리멘터 프로에서 제공하는 Posts 위젯을 슬라이드로 만드는 것도 가능합니다.

참고

5개 댓글

댓글 남기기

  1. 항상 다양한 정보 제공해주셔서 감사합니다. 혹시 External Link popup 구현이 가능하실까요?

    예를들어 외부링크면 클릭시 팝업 또는 특정 페이지로 이동하여 외부 사이트로 리디렉션된다는 알림을 받고 사용자가 이동할지 안할지 선택하는 기능이요.. 너무 큰 부분이긴한데 정보가 부족해서 혹시나 여쭤봅니다 ㅠㅠ

    답글