워드프레스 Elementor 페이지 빌더: 고객사 리스트 슬라이드 만들기 (이미지 캐러셀)

2020. 3. 5. 00:01 | 댓글 4

고객사 소개 페이지에서 고객사 로고들을 왼쪽 또는 오른쪽으로 움직이는 슬라이드로 만들어 표시하는 경우가 많이 있습니다. 쉽게 이해하기 위해 다음 영상을 보시면 기업 로고들이 배열되어 가로로 회전하고 있습니다.

테스트용으로 임의의 이미지를 업로드하여 만들어 보았습니다. 제대로 만들려면 먼저 크기가 일정한 고객사 로고 파일을 준비하면 되겠죠.

위의 영상과 같이 고객사를 소개하는 회전 슬라이더를 워드프레스에서 만들려는 경우, 테마 기능이나 플러그인을 사용할 수 있습니다. 예를 들어, 베스트셀링 테마인 아바다 테마에서는 이미지 캐러셀(image carousel) 기능을 사용하여 비슷하게 구현할 수 있습니다.

 

워드프레스 아바다(Avada)에서 Image Carousel 사용하기 - 워드프레스 중급

가장 인기 있는 워드프레스 테마 중 하나인 아바다(Avada)는 오랫동안 판매 1위 자리를 지키고 있는 베스트셀링 워드프레스 테마입니다. 아바다가 꾸준한 인기를 끌고 있는 이유 중 하나는 초보자도 쉽게 사용할 수 있도록 다양한 옵션과 기능을 제공한다는 점일 것입니다.

www.thewordcracker.com

Elementor 페이지 빌더의 이미지 캐러셀(회전 슬라이더) 요소를 사용하여 움직이는 고객사 리스트 만들기

위의 영상은 무료 페이지 빌더인 ElementorImage Carousel 요소를 사용하여 테스트로 만든 것을 보여줍니다. Elementor는 무료이지만 유료 페이지 빌더 못지않은 기능으로 많은 사랑을 받고 있습니다.

 

워드프레스 Elementor 페이지 빌더의 블록과 페이지 템플릿 사용하기

무료로 제공되는 페이지 빌더인 Elementor는 유료 페이지 빌더 못지 않은 다양한 기능으로 많은 사용자를 확보하고 있는 플러그인입니다. 페이지 빌더를 사용하면 사이트 속도가 느려질 수 있지만, Elementor는 비교적 빠른 속도를 보이는 것 같습니다.

www.thewordcracker.com

왼쪽 또는 오른쪽으로 움직이는 고객사 리스트를 만드는 방법을 간단히 살펴보겠습니다.

엘리멘터 페이지 빌더에서 왼쪽의 Image Carousel 요소를 끌어다가 오른쪽에 원하는 위치에 놓습니다.

그러면 오른쪽에 이미지 캐러셀 엘리먼트가 추가됩니다(노란색 부분).

오른쪽의 Image Carousel 설정에서 먼저 이미지들을 추가합니다. No Images Selected(선택한 이미지 없음) 아래의 이미지 추가 아이콘을 클릭하면 미디어 라이브러리가 열리면서 이미지를 추가하거나 업로드할 수 있습니다.

이미지를 선택하고 "새 갤러리 생성"을 클릭합니다.

그러면 갤러리 편집 화면이 표시됩니다. 끌어놓기로 이미지 파일을 정렬할 수 있습니다. 적절히 갤러리를 편집한 후에 "갤러리 삽입"을 클릭합니다.

그러면 이미지들이 갤러리에 삽입됩니다.

계속하여 왼쪽에서 이미지 크기를 선택합니다. 다양한 이미지 크기 중에서 선택하거나 Custom (사용자 정의)을 선택하여 직접 이미지 크기를 설정할 수 있습니다.

Custom을 선택할 경우 이미지의 가로 및 세로 폭을 지정합니다. 가로 세로 크기를 지정한 후에 APPLY (적용)를 클릭합니다.

계속하여 표시할 슬라이드 개수를 선택합니다.

예를 들어, 개수를 "5"로 선택하면 오른쪽에서 실제 슬라이드 작동 모양을 확인할 수 있습니다.

계속하여 나머지 설정을 합니다. 가령 Navigation (탐색)에서 내비게이션을 화살표와 점으로 표시할 것인지, 아니면 표시하지 않을 것인지 등을 설정할 수 있습니다.

그리고 Additional Options (추가 옵션)에서 자동재생, 허버 시 일지 정지 기능, 자동재생 속도, 무한 회전, 회전 방향(왼쪽 또는 오른쪽) 등 추가 옵션을 지정할 수 있습니다.

모든 설정이 끝나면 페이지를 발행하여 실제 작동을 살펴볼 수 있습니다.

추가: 이미지 링크 설정

엘리멘터 페이지 빌더의 이미지 캐러셀에서는 개별 이미지에 대하여 링크를 설정할 수 없고, 전체 이미지에 대하여 링크를 설정할 수 있습니다. 

사용자 URL을 선택하면 개별 이미지를 클릭하면 여기에 설정된 링크로 연결됩니다. 미디어 파일을 선택하면 라이트박스 형식으로 이미지를 확대하여 표시합니다.

아바다 테마의 이미지 캐러셀에서는 개별 이미지에 대하여 링크를 설정할 수 있습니다.

참고:

 

워드프레스 아바다(Avada) 테마 데모 설치 및 제거

워드프레스 아바다(Avada)는 현재 45만 개 이상 판매된 베스트셀링 테마입니다. 아바다 테마가 Themeforest에서는 가장 많은 판매량을 자랑하고 있으며, 최근 50만 고객을 돌파한 Elegant Themes의 Divi 테마가 아..

avada.tistory.com

 

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

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    고객사 리스트 슬라이드 만들기는 알아 놓으면 언젠가 사용할일이 있을것 같습니다.

  2. thumbnail
    라운
    2020.10.27 11:01

    혹시 이미지캐러셀에서 각각 이미지당 서로다른 링크를 연결할수는 없을까요?